/* ==========================================================================
   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; }
  .paper__cover { width: 64px; height: 48px; }
  .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 four pillars, as ONE slider
     --------------------------------------------------------------------
     Desktop lays these out as two rows of two, and the first phone pass
     kept that — two separate carousels, two sets of dots, four cards you
     met in pairs. On a phone they are one set of four, so they get one
     scroller: the rows go `display: contents`, which hands their cards to
     the wrapper, and the wrapper does the scrolling. Same markup, same
     desktop, one swipe. */
  .pillars__rows[data-carousel] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: var(--space-4);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
  }
  .pillars__rows .pillars__row { display: contents; }

  /* Each stage keeps its own height here. Equal-height columns are a desktop
     idea; in a one-at-a-time slider they only add dead space under the
     shorter card. */
  .pricing__plans[data-carousel] {
    align-items: flex-start;
    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__rows[data-carousel] > .pillars__row > .pcard,
  .pricing__plans[data-carousel] > * {
    flex: 0 0 84% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    scroll-snap-align: start;
  }
  .pillars__rows[data-carousel] > .pillars__row > .pcard { height: 400px; }

  /* 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; }

  /* ---------- Our method ---------- */
  /* The list is the loudest thing in the section; it does not also need the
     widest spacing. */
  .method__item-inner span { font-size: 30px; }

  /* ---------- 4 simple steps ---------- */
  .steps__card { min-height: 0; gap: 2px; padding: 20px; }
  .steps__pill { margin-top: 16px; }
  .steps__copy { padding-top: 16px; }

  /* ---------- the three booking bars ---------- */
  .steps__links { gap: 12px; }
  .steps__links .linkbar--lead { margin-bottom: 16px; }
  .linkbar {
    justify-content: space-between;
    padding-inline: 8px 18px;
    height: 52px;
    font-size: 15px;
    text-align: left;
  }
  .linkbar--lead { flex-direction: row; padding-inline: 8px 18px; height: 58px; }
  .linkbar span:not(.linkbar__disc) { flex: 1; }
  .linkbar--lead span:not(.linkbar__disc) { padding-left: 4px; }

  /* ---------- savings calculator ---------- */
  .range, .calc__years { max-width: none; }
  .calc__slider { gap: 12px; }

  /* ---------- community plate ---------- */
  .gc__chip--top { top: 14px; left: 14px; }
  .gc__plate-copy { align-items: flex-start; }

  /* ---------- the two stages ---------- */
  .pricing__inner { grid-template-columns: 1fr; }
  .pricing__head { position: static; }
  /* The stages carry more content per card than a pillar does, so they get a
     wider slide and a smaller peek. */
  .pricing__plans[data-carousel] > * { flex-basis: 88% !important; }
  .plan { padding: 26px 22px 24px; }
  .plan__step { font-size: 78px; top: 8px; right: 16px; }
  .plan__price strong { font-size: 44px; }
  .plan__name { font-size: 20px; }
}