/* =============================================================================
   ONYX & OYSTER — RESPONSIVE
   -----------------------------------------------------------------------------
   The base styles are written mobile-first where a single column is the sensible
   default. Multi-column layouts are declared in sections.css at their desktop
   arrangement and unwound here, which keeps each section's intended composition
   readable in one place rather than scattered across five breakpoints.

   Breakpoints
     1024px   desktop → tablet
      768px   tablet  → large phone
      560px   large phone → small phone
     1440px   wide desktop refinements
   ========================================================================== */


/* =============================================================================
   ≤ 1024px — TABLET
   ========================================================================== */
@media (max-width: 1024px) {

  /* Navigation collapses to the menu panel. */
  .oo-nav__links { display: none; }
  .oo-nav__toggle { display: block; }
  /* Both nav actions move into the menu panel rather than crowding the bar. */
  .oo-nav__actions .oo-btn,
  .oo-nav__partner { display: none; }

  /* Two-column editorial splits stack. */
  .oo-intro__grid,
  .oo-partner__grid,
  .oo-story__grid,
  .oo-hudson__grid,
  .oo-footer__signup {
    grid-template-columns: 1fr;
  }
  /* #local-partners' desktop-only column-ratio override in sections.css is
     ID-scoped (needed to beat .oo-partner__grid--reverse's own class-level
     specificity), which otherwise out-specifies the plain-class rule just
     above and would keep it two-column here. Matched specificity, so this
     wins on source order instead. */
  #local-partners .oo-partner__grid { grid-template-columns: 1fr; }

  /* Desktop places intro/media/value via named grid-template-areas. Clearing
     grid-template-areas on the container alone isn't sufficient — each
     child still carries grid-area: intro/media/value, and with no matching
     area left to resolve against, Chrome treats each name as an implicit
     named line and builds a bogus multi-column/multi-row grid out of them
     (all three items overlapping at the top of the section) instead of
     falling back to normal placement. Resetting grid-area on the children
     too is what actually restores plain DOM source order (intro → media →
     value, i.e. story → visual → value → action) in a single column. */
  .oo-partner__grid,
  .oo-partner__grid--reverse {
    grid-template-areas: none;
  }
  .oo-partner__intro,
  .oo-partner__media,
  .oo-partner__value {
    grid-area: auto;
  }

  .oo-intro__media .oo-media { min-height: 22rem; }

  /* Stacked layout: full width, close to the source photographs' native 4:5
     so object-fit crops only a sliver rather than the wider 6:7 desktop
     frame — chandelier/lounge and chef/hands both stay comfortably in
     frame down to the smallest phone width. */
  .oo-partner__media .oo-media { aspect-ratio: 4 / 5; }

  /* Grids drop a column. */
  .oo-categories__grid,
  .oo-experiences__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .oo-principles__grid { grid-template-columns: 1fr; gap: var(--oo-space-lg); }

  .oo-footer__main { grid-template-columns: 1fr 1fr; }
  .oo-footer__brand { grid-column: 1 / -1; }

  .oo-story__frame--support:first-of-type { margin-inline-start: 0; }
  .oo-story__frame--support:last-of-type { margin-block-start: 0; }

  .oo-watermark { inset-inline-end: -20%; width: 80%; }
}


/* =============================================================================
   ≤ 900px — HERO FINDER
   The four-across finder becomes a stack. Field dividers move from vertical to
   horizontal so the panel still reads as one object.
   ========================================================================== */
@media (max-width: 900px) {
  .oo-finder { grid-template-columns: 1fr; }

  .oo-finder__field {
    border-inline-end: 0;
    border-block-end: var(--oo-hairline) solid var(--oo-rule-on-dark-soft);
    padding-block: var(--oo-space-sm);
  }

  .oo-finder__submit {
    min-height: 56px;
    width: 100%;
    justify-content: space-between;
    padding-inline: var(--oo-space-lg);
  }
}


/* =============================================================================
   ≤ 768px — LARGE PHONE
   ========================================================================== */
@media (max-width: 768px) {

  :root {
    --oo-nav-height: 4.25rem;
    --oo-nav-height-scrolled: 3.75rem;
  }

  /* The hero gives back a little height so the top of the finder still shows
     on a short handset — enough of it to read as an invitation to scroll. */
  .oo-hero { min-height: 92dvh; }
  .oo-hero__inner {
    padding-block-start: calc(var(--oo-nav-height) + var(--oo-space-lg));
    padding-block-end: var(--oo-space-lg);
  }
  .oo-hero__copy { max-width: none; margin-block-end: var(--oo-space-lg); }
  .oo-hero__title { max-width: 14ch; }
  .oo-hero__actions { margin-block-start: var(--oo-space-lg); }
  .oo-hero__actions .oo-btn { width: 100%; }

  /* The cue would collide with the finder panel at this width. */
  .oo-scroll-cue { display: none; }

  /* A more even scrim than the desktop one.

     There the headline is held back until the photograph has dimmed, so the
     scrim only has to seat the image. Here the copy is over the photograph from
     the first paint, and the standfirst lands exactly where the desktop gradient
     is weakest — over the brightest part of the frame. Measured against the
     brightest pixel behind it, that combination put the standfirst at 1.7:1.
     These stops carry it to 5.7:1 at rest and 6.9:1 once dimmed. */
  .oo-hero__scrim {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.68) 28%,
      rgba(0, 0, 0, 0.76) 62%,
      rgba(0, 0, 0, 0.92) 100%);
  }

  .oo-experiences__head { flex-direction: column; align-items: flex-start; }

  /* The filter row scrolls sideways rather than wrapping to three lines.
     Its own container scrolls — the page never does. */
  .oo-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: var(--oo-space-lg);
    margin-inline: calc(var(--oo-gutter) * -1);
    padding-inline: var(--oo-gutter);
  }
  .oo-filters::-webkit-scrollbar { display: none; }
  .oo-filter { white-space: nowrap; flex: none; }
  .oo-filters__count { display: none; }

  .oo-curation { min-height: 0; }
  .oo-curation__panel { max-width: none; }

  /* A single column has no quiet side to sit in, so both full-bleed bands
     switch from a horizontally weighted scrim to an even vertical one. */
  .oo-curation__scrim {
    background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.86) 100%);
  }
  .oo-hudson__scrim {
    background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.70) 50%, rgba(0,0,0,0.88) 100%);
  }

  .oo-story__collage { gap: var(--oo-space-sm); }

  .oo-proof__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .oo-hudson__actions .oo-btn { width: 100%; }
  .oo-partner__actions .oo-btn { width: 100%; }

  .oo-footer__main { grid-template-columns: 1fr; gap: var(--oo-space-xl); }
  .oo-footer__legal { flex-direction: column; align-items: flex-start; }

  /* Form fields go single-column; two-up fields at this width are cramped. */
  .oo-form__grid { grid-template-columns: 1fr; gap: var(--oo-space-md); }

  .oo-modal { padding: 0; place-items: stretch; }
  .oo-modal__panel {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    border: 0;
    /* Keeps the close control and the final field clear of the notch and the
       home indicator. */
    padding-block-end: env(safe-area-inset-bottom);
  }
  .oo-modal__close {
    inset-block-start: max(var(--oo-space-sm), env(safe-area-inset-top));
  }
  .oo-modal__media { aspect-ratio: 3 / 2; }
  .oo-modal__actions .oo-btn { width: 100%; }

  .oo-watermark { display: none; }
}


/* =============================================================================
   ≤ 640px — PHONE
   The grids hold two columns right down to the phone breakpoint. A tablet in
   portrait is still comfortably a two-up layout; collapsing at 768 would leave
   a 768px-wide card, which reads as a mistake rather than as emphasis.
   ========================================================================== */
@media (max-width: 640px) {
  .oo-categories__grid { grid-template-columns: 1fr; gap: var(--oo-space-sm); }
  .oo-experiences__grid { grid-template-columns: 1fr; gap: var(--oo-space-2xl); }
}


/* =============================================================================
   ≤ 560px — SMALL PHONE
   ========================================================================== */
@media (max-width: 560px) {
  .oo-nav__brand .oo-wordmark { font-size: 0.8125rem; letter-spacing: 0.2em; }
  .oo-nav__brand .oo-emblem { height: 1.125rem; }

  .oo-category-card__body { padding: var(--oo-space-md); }

  .oo-hero__actions { gap: var(--oo-space-sm); }
  .oo-closing__actions { flex-direction: column; gap: var(--oo-space-md); width: 100%; }
  .oo-closing__actions .oo-btn { width: 100%; }

  .oo-modal__body { padding-inline: var(--oo-space-md); }
  .oo-modal__meta { flex-direction: column; gap: var(--oo-space-2xs); }
}


/* =============================================================================
   LANDSCAPE PHONES
   Short viewports in landscape: the full-height hero would leave nothing but
   the headline visible, so it is allowed to be shorter than the screen.
   ========================================================================== */
@media (max-height: 560px) and (orientation: landscape) {
  .oo-hero { min-height: 0; padding-block-end: var(--oo-space-xl); }
  .oo-hero__inner { padding-block-start: calc(var(--oo-nav-height) + var(--oo-space-lg)); }
  .oo-scroll-cue { display: none; }
  .oo-modal__panel { height: auto; max-height: 100dvh; }
}


/* =============================================================================
   ≥ 1440px — WIDE DESKTOP
   ========================================================================== */
@media (min-width: 1440px) {
  .oo-hero__copy { max-width: 50rem; }
  .oo-intro__media .oo-media { min-height: 34rem; }
}


/* =============================================================================
   COARSE POINTERS
   Anything that reveals on hover is opened permanently, and hit areas are
   given a little more room.
   ========================================================================== */
@media (pointer: coarse) {
  .oo-filter { padding-inline: var(--oo-space-3xs); }
  .oo-textlink { min-height: 48px; }

  /* Anything that is comfortable to click with a cursor but tight to hit with a
     thumb is brought up to the 44px minimum. */
  .oo-nav__link,
  .oo-footer__link,
  .oo-menu__meta a { min-height: 44px; display: inline-flex; align-items: center; }

  .oo-finder__control { min-height: 44px; }

  /* The checkbox itself stays 20px by design; the label around it is the target,
     so it is the label that has to clear the minimum. */
  .oo-consent { min-height: 44px; align-items: center; }
}