/* =====================================================================
 * GRADIFY landing — tablet / mobile responsive overrides (TK-2.1)
 *
 * Loaded AFTER the locked bundle's CSS so every rule here acts as a
 * scoped override. The locked desktop composition is untouched —
 * every rule lives inside a (max-width) media query, except the
 * brand-link flex-shrink safety which is harmless at any width.
 *
 * What this file does:
 *   1. Brand <a> in the nav cannot collapse to 0 px on narrow viewports
 *      (locked design lacks flex-shrink:0, so when the flex row is
 *      squeezed the Gradify wordmark would disappear).
 *   2. At <=1080 px the hero stacks into a single column:
 *        - hero copy / CTAs first
 *        - orbit ecosystem visual underneath as a contained full-width
 *          block (Student Core + Family+ / School / Community planets +
 *          connectors + signal pills, all sized down proportionally)
 *      This matches the stacking pattern every other section uses.
 *   3. The orbit visual gets a contained height appropriate for each
 *      breakpoint (420 / 360 / 300 px) so it never overflows.
 *
 * Out of scope: visuals in any other section, footer chrome, login,
 * intake. None of that is touched here.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * Brand link safety — always show the wordmark, every width.
 * Targets the first <a> directly inside .gd-nav-inner (the brand link
 * created in the locked Nav component).
 * --------------------------------------------------------------------- */
.gd-nav .gd-nav-inner > a:first-child {
    flex-shrink: 0 !important;
    min-width: auto !important;
}
.gd-nav .gd-nav-inner > a:first-child > img {
    flex-shrink: 0 !important;
    max-width: none;
}

/* ---------------------------------------------------------------------
 * Tablet + small-desktop (<= 1080 px): stack hero into single column.
 * The locked design positions .gd-orbit-stage and .gd-systems as
 * absolute overlays on the hero box; below 1080 those overlays would
 * sit on top of the copy and create the "jumbled" look.
 *
 * We override their positioning to flow as block elements inside a
 * grid row beneath the copy. The decorative background layers
 * (.gd-hero-atmos, .gd-hero-vignette, .gd-hero-fog) keep their
 * absolute positioning — they're meant to fill the hero box and read
 * as atmosphere, not foreground.
 * --------------------------------------------------------------------- */
@media (max-width: 1080px) {

    .gd-hero {
        display: grid !important;
        /* minmax(0, 1fr) — not plain "1fr" — so the grid cell never
           auto-expands to the intrinsic min-content of the headline
           (which would push the cell past the viewport and clip text). */
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "copy"
            "orbit" !important;
        gap: 32px;
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
        padding-top: 88px !important;     /* room for the fixed nav */
        padding-bottom: 56px !important;
    }

    /* The headline carries inline maxWidth: 600 from the locked JSX, which
       overflows on narrow viewports. Cap its width to the available cell. */
    .gd-hero .gd-display,
    .gd-hero h1.gd-display {
        max-width: 100% !important;
    }

    /* Hero copy / CTAs / value row → first row */
    .gd-hero > .gd-wrap.gd-hero-copy {
        grid-area: copy;
        width: 100% !important;
        align-self: start;
    }

    /* The decorative orbit core SVG (Student Core + glow + rings + STUDENT
       CORE label) AND the active systems layer (planets + connectors +
       signal pills) both share the second grid row and stack on top of
       each other — same way they do on desktop. */
    .gd-hero > .gd-orbit-stage,
    .gd-hero > .gd-systems {
        grid-area: orbit;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 720px !important;
        height: 420px !important;
        margin: 0 auto !important;
        align-self: center !important;
        justify-self: center !important;
        transform: none !important;        /* defeat any parallax */
        opacity: 1 !important;             /* readable, not a faded backdrop */
        pointer-events: auto;
    }

    /* Atmos / vignette / fog stay absolute relative to the hero box.
       They're decorative gradients and shouldn't take a grid row. */
    .gd-hero > .gd-hero-atmos,
    .gd-hero > .gd-hero-vignette,
    .gd-hero > .gd-hero-fog {
        z-index: 0;
        pointer-events: none;
    }

    /* The "SCROLL · WATCH THE ECOSYSTEM COME ONLINE" cue is an absolutely
       positioned .gd-wrap inside the hero. Let it sit at the bottom of
       the now-taller hero box. */
    .gd-hero > .reveal.gd-wrap {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin-top: 8px;
    }

    /* Hero copy no longer needs the desktop's left-edge inset. */
    .gd-hero-copy-xl {
        padding-left: 0 !important;
        max-width: 100% !important;
    }
}

/* ---------------------------------------------------------------------
 * Tablet (<= 768 px): tighter orbit, hero headline already clamps in
 * the locked stylesheet so we leave the type system alone.
 * --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .gd-hero > .gd-orbit-stage,
    .gd-hero > .gd-systems {
        max-width: 100% !important;
        height: 360px !important;
    }
}

/* ---------------------------------------------------------------------
 * Narrow phone (<= 480 px): tighten the hero headline so it doesn't
 * tower 7+ lines tall on small screens. The locked design's clamp
 * lands at ~35 px at 375 px which still wraps to 7 lines for the
 * "GRADIFY keeps every student's ecosystem aligned" headline.
 * The 28 → 36 px ceiling keeps it to ~4 lines and matches the
 * subhead weight on screen.
 * --------------------------------------------------------------------- */
@media (max-width: 480px) {
    .gd-hero .gd-display,
    .gd-hero h1.gd-display {
        font-size: clamp(28px, 8.4vw, 36px) !important;
        line-height: 1.06 !important;
        letter-spacing: -0.01em !important;
    }

    /* CTA pairs everywhere: locked design wraps Button atoms in
       inline-styled <div style="display:flex">. Stack any div that
       holds two or more buttons. Covers hero, close, entry, contact. */
    .gd-hero-copy-xl > .reveal > div:has(> .gd-btn),
    .gd-hero-copy-xl > div:has(> .gd-btn),
    #close .reveal > div:has(> .gd-btn),
    #close div:has(> .gd-btn + .gd-btn),
    #entry .reveal > div:has(> .gd-btn),
    #entry div:has(> .gd-btn + .gd-btn) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .gd-hero .gd-btn,
    .gd-hero .gd-btn-primary,
    .gd-hero .gd-btn-ghost,
    #close .gd-btn,
    #entry .gd-btn {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: center;
    }

    /* Ecosystem orbit panel decorative labels ("ORBIT · live ecosystem
       map" / "all layers synchronized") extend off the right edge at
       phone widths. They are decorative annotations on the orbit
       diagram; hide on phones rather than truncate. */
    #ecosystem .gd-panel-glow > div[style*="bottom"][style*="space-between"] {
        display: none !important;
    }
    /* Backup selector — same target with looser match */
    #ecosystem .gd-panel-glow > div[style*="position: absolute"][style*="bottom"] {
        display: none !important;
    }

    /* The value row is 3 columns of "Career / College / Goals" labels on
       desktop. At <=480 stack them vertically — locked tablet style is
       already 3-up at 768 so we only override below. */
    .gd-hero .gd-valrow {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* ---------------------------------------------------------------------
 * Mobile (<= 480 px): more compact orbit + nav score chip removed.
 *
 * The locked design's primary nav CTA ("Get Your AI Pathway Score")
 * is ~208 px wide. With the brand wordmark + Log In dropdown it
 * cannot fit on narrow phones (≤ 480 px) and clips off the right
 * edge. The hero already carries the same primary CTA, so hiding
 * the nav chip on phones is the safest move:
 *   - brand wordmark stays
 *   - "Log In" dropdown stays
 *   - hero "Get Your AI Pathway Score" still scrolls to #pathway
 *
 * Targets the LAST navmenu inside .gd-nav-cta (the score chip wraps
 * a NavMenu component with `primary` style). The first navmenu in
 * the same row is the Log In dropdown — left untouched.
 * --------------------------------------------------------------------- */
@media (max-width: 480px) {
    .gd-hero > .gd-orbit-stage,
    .gd-hero > .gd-systems {
        height: 300px !important;
    }

    .gd-nav .gd-nav-cta > .gd-navmenu:last-child {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------
 * Section grids — every public section uses an inline grid for its
 * desktop two-column layout, with cells defaulting to `1fr`. CSS Grid
 * auto-grows cells to their intrinsic min-content, so on narrow phones
 * a wide section headline like "Counseling that scales with every
 * student" pushes the cell past the viewport. Force every section's
 * direct .gd-wrap > div grid to a safe single-column layout below 768.
 * --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .gd-section .gd-wrap > div[style*="display: grid"],
    .gd-section .gd-wrap > div[style*="display:grid"] {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
        gap: 24px !important;
    }
    /* Locked design class-named section grids (gd-sch-outer, gd-fam-outer,
       gd-com-outer, gd-ab-grid, gd-proof-outer, gd-path-grid, gd-faq-grid,
       gd-contact-paths, gd-entry, etc.) all default to multi-column at
       desktop. Force them to a single safe column below 768. */
    .gd-section .gd-sch-outer,
    .gd-section .gd-fam-outer,
    .gd-section .gd-com-outer,
    .gd-section .gd-ab-grid,
    .gd-section .gd-ab-dna,
    .gd-section .gd-proof-outer,
    .gd-section .gd-path-grid,
    .gd-section .gd-faq-grid,
    .gd-section .gd-contact-paths,
    .gd-section .gd-entry,
    .gd-section .scm-flow {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
    }
    /* Inner panels inside those collapsed grids must not exceed the
       single-column cell width — clamp their intrinsic max-width and
       overflow-wrap their content. */
    .gd-section .gd-sch-p,
    .gd-section .gd-fam-stage,
    .gd-section .gd-com-lrow,
    .gd-section .gd-fam-lrow,
    .gd-section .gd-path-row,
    .gd-section .gd-panel,
    .gd-section .gd-card-light {
        max-width: 100% !important;
        min-width: 0 !important;
        width: auto !important;
    }
    /* Headlines with inline fontSize > 40 can over-flow narrow cells.
       Cap the rendered size below 768. */
    .gd-section .gd-display,
    .gd-section h1.gd-display,
    .gd-section h2.gd-display {
        font-size: clamp(28px, 6.4vw, 42px) !important;
        max-width: 100% !important;
        line-height: 1.08 !important;
    }
    /* Lede paragraphs have inline maxWidth that exceeds narrow viewports;
       constrain them to the cell. */
    .gd-section .gd-lede,
    .gd-section p.gd-lede {
        max-width: 100% !important;
    }
}

/* Even tighter for very small phones (<=480) */
@media (max-width: 480px) {
    .gd-section .gd-display,
    .gd-section h1.gd-display,
    .gd-section h2.gd-display {
        font-size: clamp(24px, 7.4vw, 34px) !important;
    }
}

/* ---------------------------------------------------------------------
 * TK-2.3 — surgical fixes for visible cutoffs found by walking the
 * page at 375 / 360 / 320.
 *
 * Common patterns:
 *   1. .gd-foot .gd-wrap is hard-set to "padding: 84px 0 52px" in the
 *      locked CSS, overriding the standard .gd-wrap gutter. Footer
 *      content slams against the left edge on mobile. Restore a
 *      gutter at ≤768.
 *   2. Section panels host TWO labels at the top (a static eyebrow
 *      and an absolute-positioned status), which collide on narrow
 *      panels (#community .gd-com-head2 on top of .gd-com-net,
 *      #family .gd-fam-signal extras, etc.). At phone widths the
 *      absolute overlay is hidden — the static label remains.
 *   3. Floating signal annotations (.gd-anno-float / .gd-anno-cycle)
 *      are right-anchored at 6-9% percentage offsets. Their text is
 *      naturally wider than the offset gap at narrow widths, so they
 *      overhang into the next-section seam or off the right edge.
 *      Hide on phones — they're decorative ambient signals, not
 *      product copy.
 * --------------------------------------------------------------------- */

/* Footer gutter restoration */
@media (max-width: 768px) {
    .gd-foot .gd-wrap {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}
@media (max-width: 380px) {
    .gd-foot .gd-wrap {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Hide colliding absolute label overlays on narrow viewports.
   Static counterparts remain — the user still sees the section's
   primary eyebrow + status string. */
@media (max-width: 480px) {
    .gd-section .gd-com-head2,
    .gd-section .gd-fam-head2,
    .gd-section .gd-sch-head2,
    .gd-section .gd-path-head2,
    .gd-section .gd-eco-head2,
    .gd-section .gd-proof-head2,
    .gd-section .gd-panel-glow > .gd-kicker[class*="head2"],
    .gd-section [class*="head2"][class*="absolute"] {
        display: none !important;
    }

    /* Floating ambient signals on family / school / community / economy
       panels — they sit at right: 6-12% offsets and overflow at phone
       widths. Decorative; product copy lives in the panel rows. */
    .gd-anno.gd-anno-float,
    .gd-anno.gd-anno-cycle,
    .gd-driftfield .gd-anno {
        display: none !important;
    }

    /* The locked Family+ panel renders a free-floating "Family synced /
       this week" tag (.gd-fam-signal absolutely positioned via inline
       style). Constrain it inside the panel so the right edge can't
       escape. */
    #family .gd-fam-signal,
    #school .gd-sch-signal,
    #community .gd-com-signal {
        right: 8px !important;
        max-width: calc(100% - 16px) !important;
        font-size: 9px !important;
        white-space: normal !important;
    }

    /* Section panel heads are flex rows with justify-content: space-between
       and flex-wrap: nowrap. They host two status pills (e.g. "SUPPORT LOOP
       · ACTIVE" + "FAMILY SYNCED · THIS WEEK") whose combined width is
       larger than the panel's inner width at phone sizes. The right pill
       overflows past the panel's overflow:hidden boundary and reads as
       "FAMILY SYNCED · THIS W" — clipped. Allow these flex rows to wrap
       so the right pill drops to a new line and remains fully readable. */
    .gd-fam-head,
    .gd-sch-head,
    .gd-com-head,
    .gd-eco-head,
    .gd-path-head,
    .gd-proof-head {
        flex-wrap: wrap !important;
        gap: 6px 12px !important;
    }
    /* Inside those heads, the right-anchored cap drops below the live tag
       — left-align it so it reads as a stacked pair, not a misaligned row. */
    .gd-fam-head .gd-fam-cap,
    .gd-sch-head .gd-sch-cap,
    .gd-com-head .gd-com-cap,
    .gd-eco-head .gd-eco-cap,
    .gd-path-head .gd-path-cap,
    .gd-proof-head .gd-proof-cap {
        align-self: flex-start;
        white-space: normal !important;
    }
}

/* Anything inside a section panel that uses inline `right: -X` (negative
   offsets to bleed past the panel edge) should not bleed past viewport. */
@media (max-width: 768px) {
    .gd-section [style*="right: -"],
    .gd-section [style*="right:-"] {
        right: 8px !important;
    }
}

/* ---------------------------------------------------------------------
 * Belt-and-suspenders: never allow horizontal page scroll under ANY
 * width (TK-2.5). This was previously scoped to <=1080px, which left a
 * desktop scrollbar: the decorative hero/ecosystem orbit SVG primitives
 * bleed ~20-30px past the viewport at >=1080px. They're ambient
 * atmosphere with no interactive content, so clipping the horizontal
 * overrun is safe at every width. `clip` (not `hidden`) avoids creating
 * a scroll container and doesn't disturb position:sticky descendants.
 * --------------------------------------------------------------------- */
html, body { overflow-x: clip; }

/* ---------------------------------------------------------------------
 * TK-7 — pathway section access points.
 * .gd-glow is the treatment for section CTAs: the existing "Explore …"
 * ghosts plus the per-section intake CTAs injected by cta-wire.js.
 * Glowing ghost rather than full primary: each section keeps exactly one
 * emphasis tier below the page's primary score CTA, consistent with the
 * locked green CTA language (#7AC043). !important matches this file's
 * established override pattern against the locked bundle's CSS.
 * --------------------------------------------------------------------- */
.gd-btn.gd-glow {
    border-color: rgba(122, 192, 67, 0.55) !important;
    background: rgba(122, 192, 67, 0.07) !important;
    color: #F4EFE3 !important;
    box-shadow:
        0 0 0 1px rgba(122, 192, 67, 0.20),
        0 10px 34px -10px rgba(122, 192, 67, 0.45) !important;
}
@media (hover: hover) {
    .gd-btn.gd-glow:hover {
        border-color: #7AC043 !important;
        background: rgba(122, 192, 67, 0.13) !important;
        box-shadow:
            0 0 0 1px rgba(122, 192, 67, 0.35),
            0 14px 44px -12px rgba(122, 192, 67, 0.55) !important;
        transform: translateY(-2px);
    }
}

/* Standalone row for sections whose locked design has no CTA to sit
 * beside (Community). */
.gd-sect-cta-row {
    display: flex;
    margin-top: 26px;
}
@media (max-width: 480px) {
    .gd-sect-cta-row { margin-top: 18px; }
    .gd-btn.gd-sect-cta {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: center;
    }
}
/* Community's injected CTA spans the section content full-width when its
 * host (.gd-com-outer) is a grid; ignored harmlessly otherwise. */
#community .gd-sect-cta-row { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------
 * Social icons — real brand logos (swapped in by cta-wire.js) in the
 * GRADIFY-green glow language. cta-wire tags each .gd-soc with data-soc
 * and replaces the locked text glyph with a brand SVG.
 * --------------------------------------------------------------------- */
.gd-foot .gd-soc {
    color: #7AC043 !important;
    border-color: rgba(122, 192, 67, 0.45) !important;
    background: rgba(122, 192, 67, 0.06) !important;
    box-shadow: 0 0 0 1px rgba(122, 192, 67, 0.12),
                0 6px 20px -8px rgba(122, 192, 67, 0.50) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .3s ease, background .2s ease !important;
}
.gd-foot .gd-soc svg {
    width: 16px; height: 16px; display: block; fill: currentColor;
}
@media (hover: hover) {
    .gd-foot .gd-soc:hover {
        border-color: #7AC043 !important;
        background: rgba(122, 192, 67, 0.16) !important;
        box-shadow: 0 0 0 1px rgba(122, 192, 67, 0.40),
                    0 10px 30px -8px rgba(122, 192, 67, 0.60) !important;
        transform: translateY(-2px);
    }
}

/* ---------------------------------------------------------------------
 * Contact "Find the right path" cards — align CTAs on a common baseline
 * and conform their width. Cards are equal-height with a bottom-pinned
 * .ct-foot, but each card's below-button caption differs (a .meta line,
 * a sublink, or nothing), so the buttons floated at different heights.
 * column-reverse pins the CTA to the card bottom in every card (captions
 * stack above it), and width:100% conforms the button widths.
 * --------------------------------------------------------------------- */
#contact .gd-contact-card .ct-foot {
    flex-direction: column-reverse;
    justify-content: flex-start;
}
#contact .gd-contact-card .gd-contact-cta {
    width: 100%;
    justify-content: space-between;
}

/* ---------------------------------------------------------------------
 * Travis 2026-06-13 — the #entry "One platform. Three ways in." section
 * is redundant: the nav "Who's it for?" dropdown now routes visitors
 * straight to their section, and its Sign-in / score buttons duplicate
 * the nav. Hide the whole section. (cta-wire repoints the nav dropdown
 * items off #entry, so no anchors are left dangling.)
 * --------------------------------------------------------------------- */
#entry { display: none !important; }