/* ═════════════════════════════════════════════════════════════════
   Home page responsive layout

   Below the main breakpoint the hero stage becomes the ONLY
   stage tile.  Everything else (tiles 2–5) flows as ordinary
   sections inside a full-width .home-content container:
     • stage backgrounds and section frames go away
     • content panels become normal-flow sections
     • card rows stack vertically
     • the footer stops tucking under the last tile

   Above the breakpoint .home-content is display:contents, so
   the classic stage-tile layout is completely untouched.

   THE BREAKPOINT — keep in sync with the interior pages'
   breakpoint convention (currently 1000px).
   ═════════════════════════════════════════════════════════════════ */

/* Above the breakpoint: wrapper is transparent to layout. */
.home-content {
    display: contents;
}

:root {
    /* Below the breakpoint: top-only padding inside the slideshow
       stage.  Keep this in sync with the .slideshow-slide row-gap
       (0.5rem) in home/overview.css, the gap between the bottom of
       the video and the top of the caption. */
    --overview-stage-top-padding-mobile: 0.5rem;

    /* Below the breakpoint: stage height to width.  Taller than
       the videos' native 1/1.78 because the caption, row-gap, and
       top padding steal height from the video box; the extra
       height lets the portrait video fill the full stage width. */
    --overview-stage-aspect-mobile: 1 / 1.95;
}

@media (max-width: 1000px) {

    /* ── Page background: purple-white-mobile instead of blue-light ── */
    body {
        background-color: var(--purple-white-mobile);
    }

    /* ── Hero visuals go away; the navbar stays ──────────────── */
    .hero-stage {
        width: auto;
        height: auto;
        aspect-ratio: auto;
        margin-left: 0;
        overflow: visible;
    }

    .hero-stage .hero-stage-background,
    .hero-stage .hero-video,
    .hero-stage .hero-frame {
        display: none;
    }

    /* The navbar becomes a fixed bar at the top; the content
       container is pushed down by the bar's height. */
    .site-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        transform: none;   /* clears the base translateX(-50%) centering */
        z-index: 100;
        height: clamp(3.5rem, 8vw, 4rem);  /* roomier at the wide end */
        padding: 0 1rem;
    }

    /* ── Navbar fine-tuning ────────────────────────────────
       Brand and links slightly larger than the default vw
       clamps give us; link gap keeps the old 5vw feel at the
       top of the range but never collapses below 20px on
       small phones. */
    .site-nav .brand {
        font-size: clamp(22px, 3vw, 32px);
    }

    .site-nav .nav-links {
        gap: clamp(20px, 5vw, 50px);
    }

    .site-nav .nav-links a {
        font-size: clamp(16px, 2vw, 20px);
    }

    /* ── Wrapper becomes a real full-width content container ── */
    .home-content {
        display: block;
        width: 100%;
        box-sizing: border-box;
        /* Top padding clears the fixed navbar above the content */
        padding: calc(clamp(3.5rem, 8vw, 4rem) + 1rem) 1rem 0;
        background: var(--purple-white-mobile);
    }

    /* ── Tiles 2–5 stop being stage tiles ───────────────────── */
    .home-content .stage-tile {
        width: auto;
        height: auto;
        aspect-ratio: auto;
        margin: 0 0 2rem;          /* clears the 100vw breakout and overlap */
        overflow: visible;
    }

    /* Clear the tile-tucking z-order.  The sibling rules in
       tiles.css chain selectors (each link adds specificity), so
       every chain length needs to be matched here — otherwise the
       later tiles stay at negative z-index and paint behind the
       container's background. */
    .home-content .stage-tile,
    .home-content .stage-tile ~ .stage-tile,
    .home-content .stage-tile ~ .stage-tile ~ .stage-tile,
    .home-content .stage-tile ~ .stage-tile ~ .stage-tile ~ .stage-tile {
        z-index: auto;
    }

    /* Stage backgrounds and decorative frames go away */
    .home-content .stage-tile > img {
        display: none;
    }

    /* Content panels become normal-flow sections */
    .home-content .stage-tile .content-panel {
        position: static;
        inset: auto;
        height: auto;
        padding: 1rem;
        background: transparent;
    }

    /* ── Card rows stack vertically ─────────────────────────── */
    .category-cards {
        flex-direction: column;
    }

    /* Overview: h1 becomes a full-width text-box card, styled
       like the text card below it (same padding/margins).
       vw-driven size so the heading text fills the screen width. */
    .stage-tile .content-panel .overview-heading {
        box-sizing: border-box;
        background: var(--nav-bg);   /* #F0F0F0 */
        border: 1px solid var(--purple-hairline);
        border-radius: 4px;
        padding: var(--overview-col-padding);
        font-size: clamp(18px, 5vw, 40px);
        line-height: 1.25;
    }

    /* Overview text card: same #F0F0F0 treatment as the h1.
       Paragraph size swaps the card-relative cqw scale for a
       viewport scale so it stays readable on small screens
       while landing on the same 22px at the wide end. */
    .stage-tile .content-panel .overview-text {
        background: var(--nav-bg);
    }

    .stage-tile .content-panel .overview-text p {
        font-size: clamp(14px, 3vw, 22px);
        line-height: 1.2;                        /* tighter lines */
        margin-bottom: calc(var(--overview-para-gap) * 3.0);  /* roomier paragraphs */
    }
    /* Slideshow captions: same #F0F0F0 background and
       text size as the overview text card. */
    .stage-tile .content-panel .slideshow-slide__caption {
        background: var(--nav-bg);
        font-size: clamp(14px, 3vw, 22px);
        line-height: 1.2;
    }

    /* Slideshow layout on narrow screens: tighter card padding.
       (The slide column layout, media sizing, and caption-in-flow
       are all base styles now.)
       Specificity must match the base rule, which uses the
       .stage-tile .content-panel chain; otherwise the 5rem side
       gutters survive below the breakpoint and crush the video. */
    .stage-tile .content-panel .overview-slideshow {
        padding: 0.5rem;
        background: #F0F0F0;
    }

    /* The slideshow videos are portrait (9:16). Below the breakpoint
       the stage ratio is slightly taller than the video ratio so the
       video fills the full stage width despite the caption and gap
       eating into the video box's height.  Arrows keep flanking the
       stage outside it. */
    .overview-slideshow__stage {
        aspect-ratio: var(--overview-stage-aspect-mobile);
        background: #E6E3E6;
        padding: var(--overview-stage-top-padding-mobile) 0 0;
    }

    /* Slides are absolutely positioned, so they ignore the
       stage's padding unless inset matches it. */
    .overview-slideshow__stage .slideshow-slide {
        inset: var(--overview-stage-top-padding-mobile) 0 0;
    }

    /* Below the breakpoint the arrows stay outside the media,
       flanking the stage.  Rectangular, outline style. */
    .overview-slideshow .slideshow-arrow {
        position: static;
        transform: none;
        align-self: center;
        flex-shrink: 0;
        width: clamp(26px, 6vw, 36px);
        height: clamp(26px, 6vw, 36px);
        border-radius: 6px;
        background: transparent;
    }

    /* Category and community cards: same card background and
       text size as the overview text card. */
    .home-content .category-card {
        background: var(--nav-bg);
        padding: 3vw;   /* a bit more breathing room all around */
    }

    .home-content .category-card .category-card__text {
        font-size: clamp(14px, 3vw, 22px);
        line-height: 1.2;
    }

    /* Card headings stay a step above the body text */
    .home-content .category-card .category-card__heading {
        font-size: clamp(17px, 3.5vw, 26px);
    }

    /* Part category cards: roomier heading and paragraph gaps */
    .home-content .category-cards .category-card__heading {
        margin-bottom: 1.4vw;
    }

    .home-content .category-cards .category-card__text {
        margin-bottom: 1.8vw;
    }

    /* Community cards: just a roomier heading gap */
    .home-content .community-cards .category-card__heading {
        margin-bottom: 1.4vw;
    }

    /* Section h2s get the same text-box treatment as the h1 */
    .home-content .stage-tile .content-panel h2 {
        box-sizing: border-box;
        width: 100%;
        margin: 0 0 1.25rem;
        padding: var(--overview-col-padding);
        background: var(--nav-bg);
        border: 1px solid var(--purple-hairline);
        border-radius: 4px;
        text-align: center;
        font-family: var(--font-nav);
        font-size: clamp(16px, 4vw, 32px);
        font-weight: 800;
        line-height: 1.25;
    }
    /* Overview: text card stacks above the video card */
    .stage-tile .content-panel .overview-body {
        grid-template-columns: minmax(0, 1fr);
    }

    /* ── Footer sits directly after the content container ───── */
    .site-footer {
        margin-top: 0;
    }
}

/* ── Mobile (≤480px): links collapse into a burger menu ──
   Toggle hidden everywhere above this breakpoint.        */
.site-nav__toggle {
    display: none;
}

@media (max-width: 480px) {

    .site-nav__toggle {
        display: block;
        margin-left: auto;
        padding: 0.65rem 0.6rem;   /* extra top/bottom room for the icon */
        background: none;
        border: 1px solid var(--purple-light);
        border-radius: 4px;
        cursor: pointer;
        line-height: 1;
    }

    .site-nav__toggle-icon,
    .site-nav__toggle-icon::before,
    .site-nav__toggle-icon::after {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--nav-accent);
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .site-nav__toggle-icon {
        position: relative;
    }

    .site-nav__toggle-icon::before,
    .site-nav__toggle-icon::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .site-nav__toggle-icon::before { top: -6px; }
    .site-nav__toggle-icon::after  { top:  6px; }

    /* Open state — hamburger becomes X */
    .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon {
        background: transparent;
    }

    .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::before {
        transform: translateY(6px) rotate(45deg);
    }

    .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon::after {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Dropdown: full-width panel hanging below the fixed bar */
    .site-nav .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        margin: 0;
        padding: 0.75rem 1rem;
        background: var(--nav-bg);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    .site-nav .nav-links.is-open {
        display: flex;
    }
}