/* mobile-qa.css - corrections from the pre-owner-review mobile pass.
   Loaded last, after styles.css. The creative direction is unchanged; every
   rule here is a responsive correction with a stated reason.

   Note on the breakpoint: this site's phone breakpoint is 859.98px, set once
   in styles.css where it switches --dock-h from 0px to 3.4rem. An earlier
   version of this file guarded at 740px, which left 741-859px running the
   mobile layout without the mobile fixes. Anything that can be expressed
   through var(--dock-h) needs no media query at all - the variable is already
   0 on desktop - so most of what follows is unconditional. */

/* ---- 1. The bottom dock covering content -----------------------------------
   Most dock-adjacent offsets in styles.css already add var(--dock-h). Three
   did not, and the dock is 3.4rem (~52px) of opaque bar sitting on top of
   them. */

/* The reel's closing line carries the only link to the live menu on this page
   ("the current lineup lives on the menu"). At 390x844 the dock covered 102px
   of its 44px-tall two-line box - the link was untappable. */
.scene--reel .pin { padding-bottom: calc(1.4rem + var(--dock-h)); }

/* The hero's scroll cue was roughly half-swallowed by the dock, which reads as
   a rendering bug on the very first screen. */
.hero__cue { bottom: calc(1.4rem + var(--dock-h)); }

/* ---- 2. Right-hand gutter on the arrival captions --------------------------
   .arrive__cap sets a left gutter and a 30rem max-width but no right value, so
   at 390 the caption ran to within 0.4px of the screen edge while the left
   side held a 20px margin. Matching the left clamp restores the symmetry the
   design already intends at wider sizes. */
.arrive__cap { right: clamp(1.25rem, 5vw, 4rem); }

/* ---- 3. Reserved height for the live open/closed line ----------------------
   #openStatus is written by the clock at runtime and wraps to two lines on a
   phone, but min-height reserved only 1.6em - so the section below it jumped
   28px the moment the script ran. */
@media (max-width: 859.98px) {
  .visit__status { min-height: 3.2em; }
}

/* ---- 4. Contrast on the patio eyebrow --------------------------------------
   .patio__head sits at the top of the patio photograph, where .patio__grade
   fades to transparent by 30%. Against the bright sail in the day frame the
   gold eyebrow measured a median 1.14:1 - effectively invisible. The captions
   lower down work because the scrim is dense there. A scrim local to the
   heading fixes the heading without darkening the photograph. */
@media (prefers-reduced-motion: no-preference) {
.patio__head::before {
  content: '';
  position: absolute;
  inset: -0.9rem -1.25rem -1.1rem;
  z-index: -1;
  background: linear-gradient(180deg, rgba(12, 11, 9, 0.82), rgba(12, 11, 9, 0.55) 62%, rgba(12, 11, 9, 0));
  pointer-events: none;
}
}

/* ---- 5. Tap targets -------------------------------------------------------- */
@media (max-width: 859.98px) {
  /* 92x21 is thin for a control that opens a dialog. */
  #notesBtn { min-height: 44px; padding-block: 0.7rem; }
}

/* ---- 6. Anchor landings on the pinned scenes -------------------------------
   html{scroll-padding-top:4.5rem} keeps ordinary anchors clear of the header,
   but a pinned scene's .pin is sticky at top:0 - so landing the section 72px
   down leaves the entire stage hanging 82px below the fold until you scroll
   again. On the reel that put the closing line (and its link to the live menu)
   underneath the dock at the exact moment the reader arrived.

   A negative scroll-margin cancels the scroll-padding for these four sections
   only. Nothing is lost to the header: each pin carries 4-5rem of its own top
   padding, which is more clearance than the 4.5rem the padding was buying.
   Scoped to phones: the scroll-padding is global and desktop was not part of
   this pass, so it keeps the behaviour it was built with. */
@media (max-width: 859.98px) {
  .scene--hero,
  .scene--arrive,
  .scene--reel,
  .scene--patio { scroll-margin-top: -4.5rem; }
}

/* ---- 7. The header brand link ----------------------------------------------
   .topbar__brand is the logo plus wordmark and the way back to the top of the
   page, but it hit-tested at 30px. The logo image is 46px, so the row has the
   height already - the anchor just was not claiming it. */
@media (max-width: 859.98px) {
  .topbar__brand { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Mobile gate, 2026-09-23 */
/* The scroll cue is decorative; on 660px-tall windows it sat over the two hero buttons. */
.hero__cue { pointer-events: none; }
/* Text scaling: the hours table, the social row and the unbreakable e-mail address were pushing the
   layout viewport past the screen (390 -> 533 CSS px at 200%). */
@media (max-width: 859.98px) { .visit__hours tbody th { white-space: normal; } }
.visit__social { flex-wrap: wrap; row-gap: 0.2rem; }
.visit__party a[href^="mailto:"], .faq a[href^="mailto:"] { overflow-wrap: anywhere; }
/* At 200% the hero copy is taller than the window; let the pin grow so the buttons can be reached. */
.scene--hero .pin { height: auto; min-height: 100svh; }
/* Patio eyebrow sat 7px under the solid top bar on 660px-tall windows. */
.patio__head { top: max(clamp(3.6rem, 8vh, 5rem), 4.4rem); }
/* Tap targets: the only action in each day panel, and the two social links. */
.day__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0.55rem 0 0; margin-top: 0.45rem; }
.visit__social a { display: inline-flex; align-items: center; min-height: 44px; padding-bottom: 0; }
/* The stamp is bounded by its photo on both sides instead of growing to the right edge when it wraps. */
.day__stamp { right: 0.9rem; width: max-content; max-width: calc(100% - 1.8rem); }
/* Short, wide windows (unfolded Z Fold): a 30rem card is taller than the stage; narrow it. */
@media (min-width: 600px) and (max-height: 700px) { .reel__card { width: min(22rem, 100%); } }
/* At 200% the three-column hours table is wider than a phone even with wrapping cells; it scrolls
   inside its own box instead of stretching the page. Invisible at normal text size. */
.visit__hours { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Dock at 200% text: four equal tracks could not shrink below "Directions", so the
   fourth link (Call) was pushed past the right edge and silently clipped at 360/390.
   Tracks may now shrink and the label follows the viewport once text is scaled. */
.dock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dock a { min-width: 0; }
.dock a span { font-size: min(1em, 4.4vw); white-space: nowrap; }