/* Breakpoints. THIS FILE MUST LOAD LAST — the same rule the admin portal's
   style.scss states for its own _responsive partial. Everything here overrides
   what came before.
 *
 * There is very little here on purpose. The original stylesheet had only six
 * media queries because nearly all of the responsive behaviour lives in
 * clamp() and repeat(auto-fit, minmax(…)) inside the component rules, which
 * need no breakpoints at all. Resist adding queries for things auto-fit
 * already handles.
 */

/* ── Nav breakpoint ──────────────────────────────────────────────────────── */
/* The original mounted and unmounted the desktop nav and hamburger from JS at
   window.innerWidth < 1060. Both are always in the DOM now and this decides
   which is shown. CSS viewport width matches innerWidth in current engines, so
   the switch happens at the same place it always did. */

@media (max-width: 1059px) {
    .site-nav,
    .site-header__cta {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }
}

/* The mobile menu can only ever be open below the breakpoint; nav.js also
   closes it on widening, but this guarantees it visually either way. */
@media (min-width: 1060px) {
    .mobile-menu {
        display: none;
    }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__brand {
        grid-column: span 2;
    }
}

@media (max-width: 560px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .site-footer__brand {
        grid-column: span 1;
    }
}

/* ── About: leadership cards and org chart ───────────────────────────────── */

@media (max-width: 720px) {
    [data-dircard] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    [data-orggrid] {
        grid-template-columns: 1fr;
    }

    /* The connector rails only make sense in the multi-column layout. */
    [data-orghrail],
    [data-orgrail] {
        display: none;
    }
}

/* ── Careers: job rows ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
    [data-jobrow] {
        grid-template-columns: 1fr;
    }

    [data-jobrow] > :last-child {
        justify-self: start;
    }
}

/* ── Hero eyebrow pill (added 2026-09-24) ────────────────────────────────── */
/* At narrow widths the pill ran wider than the screen. The company name is
   dropped and the ticker shrinks, leaving the live-status dot and the
   "NOW BUILDING: …" line, which is the part that carries information. */

@media (max-width: 720px) {
    .hero__pill-text,
    .hero__pill-sep {
        display: none;
    }

    .hero__pill {
        padding: 5px 13px 5px 7px;
    }

    .hero__ticker {
        font-size: 11px;
        /* The reserved 15ch keeps the pill from resizing as the word cycles;
           below this width there is no room to reserve it. */
        min-width: 0;
    }
}

/* ── Contact form (added 2026-09-24) ─────────────────────────────────────── */
/* The two-column field grid is too tight on a phone. */

@media (max-width: 560px) {
    .form-grid--2 {
        grid-template-columns: 1fr;
    }

    .contact__field--wide {
        grid-column: span 1;
    }
}