/* ================================================================
   Landing page — two-column hero
   ================================================================ */

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin: 2rem 0 4rem;
}

@media screen and (max-width: 960px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* CSS-grid cells default to their content's intrinsic min-width;
       a code block with one long line refuses to shrink and overflows
       the viewport on phones. `min-width: 0` overrides that.        */
    .hero > *,
    .demo > * {
        min-width: 0;
    }

    /* Code blocks scroll horizontally inside their box, never push
       the page wider on mobile.                                    */
    .hero-code .highlight,
    .hero-code pre,
    .demo-code .highlight,
    .demo-code pre {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Left column: title + tagline + install + buttons
   ---------------------------------------------------------------- */

.hero-text h1 {
    font-size: 3.25rem;
    line-height: 1.05;
    margin: 0 0 0.75rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    background: linear-gradient(
        135deg,
        var(--md-primary-fg-color),
        var(--md-accent-fg-color)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-tagline {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--md-default-fg-color);
    margin: 0 0 0.5rem;
    line-height: 1.4;
}

.hero-subline {
    font-size: 0.95rem;
    color: var(--md-default-fg-color--light);
    margin: 0 0 1.75rem;
}

.hero-install {
    max-width: 320px;
    margin: 0 0 1.5rem;
}

.hero-install .highlight,
.hero-install pre {
    margin: 0;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

/* Remove the default paragraph-spacing md-button links pick up
   when rendered inline in markdown. */
.hero-buttons p {
    margin: 0;
    display: contents;
}

/* Right column: elevated code preview
   ---------------------------------------------------------------- */

.hero-code .highlight {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.05);
    margin: 0;
}

/* On mobile (≤960px): stack and center the hero, scale down typography,
   and shrink the code preview a bit so it doesn't overflow.
   Desktop layout is untouched.                                         */

@media screen and (max-width: 960px) {
    .hero {
        text-align: center;
    }

    .hero-text h1 {
        font-size: 2.5rem;
        text-align: center;
    }

    .hero-tagline {
        font-size: 1.05rem;
    }

    .hero-subline {
        margin-bottom: 1.25rem;
    }

    /* Center the install pill */
    .hero-install {
        margin-left: auto;
        margin-right: auto;
    }

    /* Center the button row */
    .hero-buttons {
        justify-content: center;
    }

    /* Smaller code preview on phones */
    .hero-code {
        font-size: 0.85em;
    }
}

/* Phone-sized screens (≤480px): stack the buttons full-width for tappability
   and shrink the title a bit more.                                          */
@media screen and (max-width: 480px) {
    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .hero-buttons .md-button {
        width: 100%;
        text-align: center;
    }

    .hero-code {
        font-size: 0.78em;
    }
}

/* ================================================================
   "See it in action" demo rows — code + plot side-by-side
   Use .demo--reverse to swap which side the code is on for variety.
   ================================================================ */

.demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    margin: 1.5rem 0 2rem;
}

@media screen and (max-width: 960px) {
    .demo {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

.demo-code .highlight {
    margin: 0;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.05);
}

.demo-plot {
    text-align: center;
}

.demo-plot img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.demo-plot p {
    margin: 0;
}

/* Alternating layout: code on the right, plot on the left */
.demo--reverse .demo-code { order: 2; }
.demo--reverse .demo-plot { order: 1; }

/* On mobile, always stack code-then-plot regardless of variant */
@media screen and (max-width: 960px) {
    .demo--reverse .demo-code { order: 1; }
    .demo--reverse .demo-plot { order: 2; }

    .demo-code {
        font-size: 0.85em;
    }
}

@media screen and (max-width: 480px) {
    .demo-code {
        font-size: 0.78em;
    }
}