/* =============================================================================
   fit.css — one section per screen, on desktop.

   Every section marked `data-fit` fills the viewport and centres its content,
   so a visitor sees exactly one section at a time. Combined with the side rail,
   this gives the section-by-section reading of the Apple reference.

   SPECIFICITY: selectors are written `[data-fit][data-fit]`, which is not a
   typo — repeating the attribute lifts it to 0,2,0, above the single-class
   section rules in concept-1.css whatever the load order. polish.css and
   tablet.css repeat the same selectors for their own ranges, and the last one
   loaded wins, so no !important is needed. This file must still load AFTER
   concept-1.css.

   THREE DELIBERATE CHOICES

   1. `min-height`, never `height`. If a section's content is taller than the
      viewport — a short laptop, a large system font, a long translation — the
      section grows and the visitor scrolls. Content is never clipped to make
      the layout obey. Fitting is a target, not a guarantee, and the per-concept
      stylesheets do the compression that makes it hold at ordinary sizes.

   2. Gated on `min-height: 640px` as well as width. Below that there is no
      honest way to fit a heading, a product, its ingredients and a CTA on one
      screen, so the page reverts to normal flow rather than producing a
      cramped, clipped mess.

   3. Snap is `proximity`, not `mandatory`. Mandatory snap fights the visitor on
      any section taller than the viewport and can make the end of a long
      section unreachable. Proximity gives the settling-onto-a-section feel
      without ever trapping the scroll.

   TO TURN THIS OFF: remove this stylesheet's <link>, or delete the `data-fit`
   attributes. Nothing else depends on it.

   SHOPIFY: `data-fit` belongs on the section wrapper, so it can be exposed as a
   per-section "fill screen on desktop" checkbox in the section schema.
============================================================================= */

@media (min-width: 1000px) {
  html {
    /* Anchor jumps and snap positions both need to clear the sticky header,
       otherwise a section's first line lands underneath it. */
    scroll-padding-top: var(--fit-header, 72px);
    scroll-snap-type: y proximity;
  }

  /* `display: grid` with `align-content: center` is the one centring that is
     safe to apply blind here. On a section that is already a grid — the
     two-column heroes in concepts 1 and 3 — `display: grid` is a no-op and
     `align-content` simply centres its rows, so the columns survive. On a
     plain block section it promotes the wrapper to a single centred grid item.
     Forcing `display: flex` instead would flatten those heroes into a single
     column and lose their `grid-template-columns` proportions. */
  [data-fit][data-fit] {
    min-height: calc(100svh - var(--fit-header, 72px));
    display: grid;
    align-content: center;
    scroll-snap-align: start;
  }

  /* The first section sits below the announcement bar and header, so it gets
     their height back to avoid overflowing the screen by exactly that much. */
  [data-fit][data-fit-first] {
    min-height: calc(100svh - var(--fit-chrome, 0px));
  }

  /* A section can opt out — bands like the marquee strips are not sections and
     should not claim a screen of their own. (Elements without `data-fit` are
     untouched anyway; this is for turning an inherited one off.)
     CAUTION: data-fit="off" does NOT work from 700px wide. polish.css and tablet.css load later and
     repeat `[data-fit][data-fit]` { min-height: ... } with the same specificity, so they win and the
     section still fills a screen. To keep a section out of fit mode, leave the data-fit attribute off
     altogether (the range intro, #products, does this). */
  [data-fit='off'][data-fit] {
    min-height: 0;
    display: block;
    scroll-snap-align: none;
  }
}

/* Sections too tall to fit a short screen honestly (data-fit="tall" — the
   story grid) leave fit mode below 760px of height: they size to their
   content and stop snapping, rather than overflowing a screen they claim.
   The plan's "about 760px" is set at 800px so 1366x768 and 1280x800 laptops,
   where the story runs 10-45px long, scroll it naturally.
   Triple attribute so this beats the [data-fit][data-fit] height rules that
   polish.css and tablet.css apply later. */
@media (min-width: 700px) and (max-height: 800px) {
  [data-fit='tall'][data-fit][data-fit] {
    min-height: 0;
    scroll-snap-align: none;
  }
}

/* `svh` is well supported now, but on any browser that lacks it the fallback
   below keeps the behaviour rather than losing it. Declared second so it only
   applies where the unit above was not understood. */
@supports not (height: 100svh) {
  @media (min-width: 1000px) {
    [data-fit][data-fit] {
      min-height: calc(100vh - var(--fit-header, 72px));
    }
    [data-fit][data-fit-first] {
      min-height: calc(100vh - var(--fit-chrome, 0px));
    }
  }
}