/* ==========================================================================
   Greensnake — the mobile layer
   --------------------------------------------------------------------------
   Everything in this file applies at 860px and below. It is loaded last, so
   it is the final word on phone layout without any page stylesheet having to
   know it exists.

   WHY A SEPARATE FILE, RATHER THAN A MEDIA QUERY IN EVERY PAGE
   A phone is not a narrow desktop. The reference this is modelled on
   restructures on mobile rather than reflowing: rows become carousels,
   left-aligned headers become centred, dense grids become lists, and the
   primary action moves into the header where a thumb can reach it. Those are
   layout decisions, not width tweaks, and keeping them together is what stops
   them drifting apart one page at a time.

   WHAT WAS TAKEN FROM THE REFERENCE (structure, not style)
     · a compact sticky header carrying the primary CTA beside the menu
     · centred section headers: eyebrow, headline, lede, one button
     · card rows as snap carousels that peek at the edge, with dots
     · dense grids as thumbnail list rows
     · a full-screen menu of image rows, each with a thumbnail and an arrow
     · generous, consistent vertical air between sections

   WHAT WAS NOT
     Nothing about the palette, type, radii or motion changes. Those come
     from tokens.css and stay Greensnake.
   ========================================================================== */

@media (max-width: 860px) {

  /* ======================================================================
     Rhythm
     ----------------------------------------------------------------------
     A phone screen shows one thing at a time, so the space between sections
     is what tells you a new idea has started. The desktop floor of 64px was
     doing that job poorly; 76px reads as deliberate without wasting a screen.
     ====================================================================== */
  :root {
    --section-y:    clamp(4.75rem, 3.2rem + 7vw, 6.5rem);
    --section-y-sm: clamp(3rem, 2.2rem + 4vw, 4rem);
    --gap-head:     1.75rem;
    --gap-block:    2.5rem;
    --panel-pad:    1.5rem;
    --gutter:       20px;
  }

  /* ======================================================================
     Header
     ====================================================================== */
  .nav__actions { gap: 10px; }

  /* Revealed here, and only here. */
  .nav__join {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding-inline: 18px;
    border-radius: var(--radius-pill);
    background: var(--cream);
    color: var(--green-900);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: background var(--t-base) var(--ease-soft),
                transform 140ms var(--ease-soft);
  }
  .nav__join:active { transform: scale(0.96); }
  .nav__join:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

  .nav__logo img { width: 148px; height: auto; }

  /* ======================================================================
     Section headers — centred
     ----------------------------------------------------------------------
     On a narrow column a centred eyebrow / headline / lede / button stack
     reads as one unit. Left-aligned, the same content reads as four
     unrelated fragments stuck to the left edge.
     ====================================================================== */
  .page-head,
  .faq-group .section-head,
  .section-head {
    text-align: center;
  }

  .section-head {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-5);
  }

  .page-head { padding-block: calc(var(--nav-h) + var(--space-8)) var(--space-8); }

  .page-head__kicker {
    margin-inline: auto;
    letter-spacing: 0.14em;
  }

  .page-head__title {
    max-width: none;
    margin-inline: auto;
    font-size: clamp(2.25rem, 1.4rem + 5.2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  .page-head__lede {
    max-width: 40ch;
    margin-inline: auto;
    font-size: 1.0625rem;
    line-height: 1.55;
  }

  /* ---------- fact row: an even grid, not a ragged wrap ---------- */
  .facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5) var(--space-4);
    margin-top: var(--gap-block);
    padding-top: var(--space-6);
    text-align: left;
  }
  /* An odd last item spans both columns rather than leaving a hole, and a
     long label ("Partner institutions & retreat centers") gets the room it
     needs instead of wrapping four times in a half-width cell. */
  .facts > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .facts > li {
    flex: none;
    padding-inline: 0;
    border-left: 0;
  }
  .facts b { font-size: 1.375rem; }

  /* ======================================================================
     Carousel
     ----------------------------------------------------------------------
     A three-column grid stacked into three full-width cards makes a phone
     page enormously long and buries whatever follows. As a snap carousel the
     same content costs one screen, and the peeking edge of the next card is
     what tells you to swipe — which is why the cards are 84%, not 100%.

     Pure CSS scroll-snap does the scrolling; the dots are progressive
     enhancement from core.js and are simply absent without it.
     ====================================================================== */
  [data-carousel] {
    display: flex;
    /* Both stated explicitly. A page stylesheet that sets its own
       flex-direction: column (Home's pillar rows do) would otherwise stack
       the cards while the container still reported `display: flex`, which
       looks like the carousel silently not working. */
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-4);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  [data-carousel]::-webkit-scrollbar { display: none; }

  [data-carousel] > * {
    flex: 0 0 84%;
    scroll-snap-align: start;
    min-width: 0;
  }
  /* A single card has nothing to swipe to, so it takes the full width. */
  [data-carousel] > :only-child { flex-basis: 100%; }

  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: var(--space-5);
    list-style: none;
  }
  .carousel-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--on-dark-3, rgba(13, 13, 57, 0.28));
    cursor: pointer;
    transition: background var(--t-base) var(--ease-soft),
                width var(--t-base) var(--ease-soft);
  }
  .carousel-dots button[aria-current="true"] {
    width: 20px;
    border-radius: var(--radius-pill);
    background: var(--accent);
  }
  /* The dot itself is 7px; the tappable area around it is not. */
  .carousel-dots li { display: grid; place-items: center; width: 30px; height: 30px; }

  /* ======================================================================
     Full-screen menu — image rows
     ====================================================================== */
  .menu__inner { padding-top: var(--space-5); }

  .menu__nav { margin-top: var(--space-6); }
  .menu__nav li + li { margin-top: 0; }

  .menu__nav a {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: var(--space-4);
    padding: 11px 0;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    border-bottom: 1px solid var(--on-dark-line);
  }
  .menu__nav li:first-child a { border-top: 1px solid var(--on-dark-line); }

  .menu__thumb {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
  }

  .menu__dot {
    width: 30px;
    height: 30px;
    background: none;
    color: var(--lime);
  }
  .menu__nav a:hover .menu__dot { transform: none; }

  .menu__foot { margin-top: var(--space-7); }

  /* ======================================================================
     Thumbnail list rows
     ----------------------------------------------------------------------
     `.list-rows` turns any set of image + title + one-line-description
     items into the compact row list the reference uses for its test menu.
     Far quicker to scan on a phone than a stack of full cards.
     ====================================================================== */
  .list-rows {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--gap-head);
  }
  .list-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: 10px;
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--hairline);
  }
  .list-row img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
  }
  .list-row b {
    display: block;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .list-row span {
    display: block;
    margin-top: 2px;
    font-size: var(--step-small);
    line-height: 1.4;
    color: var(--ink-3);
  }

  /* ======================================================================
     Buttons — full width, centred, thumb-height
     ====================================================================== */
  .btn-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-3);
  }
  .btn-row .btn { justify-content: space-between; width: 100%; }

  .page-head .btn-row,
  .section-head + .btn-row { margin-inline: auto; max-width: 22rem; }

  .btn { height: 50px; }
  .btn--sm { height: 44px; }

  /* ======================================================================
     Panels & cards
     ====================================================================== */
  .panel {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
    justify-items: center;
  }
  .panel__title { margin-inline: auto; }
  .panel__text { margin-inline: auto; }
  .panel__actions { width: 100%; max-width: 22rem; }

  .card-grid { gap: var(--space-4); }

  /* ======================================================================
     Page-specific mobile restructuring
     ====================================================================== */

  /* ---------- Science ---------- */
  .library__controls { gap: var(--space-3); }
  .library__chips {
    flex-wrap: nowrap;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
  }
  .library__chips .chip { scroll-snap-align: start; }
  .library__status { text-align: center; margin-bottom: var(--space-3); }

  .field-mark { width: 132px; padding-block: var(--space-4); }
  .fields__ticker { --ticker-duration: 34s; }

  /* ---------- Programs ---------- */
  .stage__panel { padding-top: var(--space-8); }
  .stage__top { padding-bottom: var(--space-6); }
  .stage__lede { max-width: none; text-align: center; }
  .stage__h2 { font-size: clamp(1.875rem, 1.2rem + 4.4vw, 2.5rem); }
  .stage__sub { margin-inline: auto; max-width: 38ch; }
  .signup { margin-inline: auto; max-width: none; border-radius: var(--radius-lg); }
  .signup__submit { width: 100%; justify-content: space-between; }
  .partner { width: 158px; height: 88px; }
  .partners__ticker { --ticker-duration: 34s; --partner-gap: 44px; }

  /* ---------- Community ---------- */
  .chero { min-height: 0; padding-block: calc(var(--nav-h) + var(--space-8)) var(--section-y); }
  .chero__inner { text-align: center; }
  .chero__badge { margin-inline: auto; }
  .chero__title, .chero__lede { margin-inline: auto; max-width: none; }
  .chero__cta { margin-inline: auto; max-width: 22rem; }
  .movement__copy { padding: var(--space-7) var(--space-5); }
  .movement__plate { aspect-ratio: 3 / 4; }

  /* ---------- FAQ ---------- */
  .faq-group .section-head { align-items: center; }
  .row__summary { padding: var(--space-4); gap: var(--space-3); }
  .row__title { font-size: 1rem; }
  .faq-row__body { padding-left: var(--space-4); }

  /* ---------- Footer ---------- */
  .footer { padding-top: var(--space-8); }
  .footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8) var(--space-6);
  }
  .footer__col h3 {
    margin-bottom: var(--space-4);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 15px;
    color: var(--white);
  }
  .footer__col a, .footer__col li { font-size: 15px; }
  .footer__col--contact { grid-column: 1 / -1; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ==========================================================================
   Narrow phones
   ========================================================================== */
@media (max-width: 359px) {
  [data-carousel] > * { flex-basis: 88%; }
  .menu__nav a { grid-template-columns: 48px 1fr auto; font-size: 1.125rem; }
  .menu__thumb { width: 48px; height: 48px; }
  .facts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Home
   --------------------------------------------------------------------------
   Home was built desktop-first and left alone while the inner pages were
   restructured, so its card rows were still stacking into a very long
   column — 15,549px on a phone. These are the three that benefit; the hero,
   the method list and the reels already work vertically.
   ========================================================================== */
@media (max-width: 860px) {
  /* The pillar rows and pricing stages become carousels like every other
     card row on the site. `!important` is needed only because the Home
     stylesheet sets these to `grid` inside its own media query, and this
     file cannot rely on load order alone to beat an equal-specificity rule
     that appears later in another sheet. */
  .pillars__row[data-carousel],
  .pricing__plans[data-carousel] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
  }
  /* Home sizes these cards with its own width rules, so the flex basis has
     to say so louder than a shared rule can. */
  .pillars__row[data-carousel] > *,
  .pricing__plans[data-carousel] > * {
    flex: 0 0 84% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
  }

  .pillars__row + .pillars__row { margin-top: var(--space-4); }

  /* The section headers on Home follow the same centring as everywhere else,
     so the page reads as one site rather than two. */
  .pillars__top,
  .kits__head,
  .steps__head,
  .reels__head { text-align: center; }
  .pillars__title, .kits__head, .reels__head { margin-inline: auto; }
  .pillars__h2, .kits__h2, .pillars__sub, .kits__sub { margin-inline: auto; }
  .pillars__top .eyebrow,
  .kits__head .eyebrow { justify-content: center; }
}