/* ── Mobile ─────────────────────────────────────────────────────────────────
   Not parity with the comp — a correction of it. Each block below closes a
   defect measured at 390×844 and recorded in MOBILE_BRIEF.md (M1–M6).
   Loaded last, so it wins without !important gymnastics.                    */

/* ── M6 · Breakpoints ───────────────────────────────────────────────────────
   The comp swaps to the phone treatment below 1024px, which hands an iPad the
   burger and a full-width booking bar. Split it: condensed nav on tablet, the
   burger only on phones.                                                    */

@media (max-width: 1180px) {
  .wh-header__inner { padding: 0 var(--space-8); }
  .wh-nav { gap: var(--space-6); }
  .wh-nav__socials { display: none; }   /* socials live in the footer on tablet */
}

@media (max-width: 900px) {
  .wh-nav__link { font-size: .6875rem; letter-spacing: .08em; }
  .wh-nav { gap: var(--space-5); }
  .wh-brand { width: 180px; }
  .wh-brand__badge { height: 104px; width: 104px; top: -18px; }
}

@media (max-width: 767px) {
  /* Burger replaces the nav. */
  .wh-nav { display: none; }
  .wh-burger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-5);
    border: 1px solid rgba(224, 192, 123, .5);
    border-radius: var(--radius-pill);
    background: rgba(6, 24, 12, .72);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
    color: var(--gold-500);
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    cursor: pointer;
  }
  .wh-header.is-scrolled .wh-burger,
  .wh-header.is-solid   .wh-burger {
    background: var(--green-700);
    border-color: var(--green-700);
    color: var(--gold-400);
  }
  .wh-header__inner { padding: 0 var(--gutter); }
  .wh-brand { width: 132px; }
  .wh-brand__badge { height: var(--badge-size-sm); width: var(--badge-size-sm); top: -8px; }
  .wh-brand__wordmark { height: 22px; }
}

/* ── M2 · Tap targets ───────────────────────────────────────────────────────
   The design system defines --tap-min: 44px and nothing consumed it. Wire it.
   Applied to standalone controls only — an inline link inside a paragraph is
   type, not a target, and padding it out would break the measure.           */

@media (max-width: 767px) {
  .wh-btn,
  .wh-link,
  .wh-socials--circle a,
  .wh-gallery__item,
  .wh-lightbox__btn,
  .wh-modal__close,
  .wh-flyout__close {
    min-height: var(--tap-min);
  }
  .wh-btn {
    padding-block: 0;
    display: inline-flex;
    align-items: center;
  }
  .wh-btn--sm { padding-inline: 1.5rem; }
  .wh-btn--md { padding-inline: 1.75rem; }
  .wh-btn--lg { padding-inline: 2rem; }

  /* A text link that stands alone is a target; give it real height without
     changing how it reads. */
  .wh-link {
    display: inline-flex;
    align-items: center;
    padding-block: 10px;
  }

  .wh-socials--circle a { width: var(--tap-min); height: var(--tap-min); }

  /* Footer list links: space them so a thumb cannot miss. */
  .wh-footer__col ul { gap: var(--space-5); }
  .wh-footer__col ul a,
  .wh-footer__know ul a {
    display: inline-block;
    padding-block: 6px;
  }
}

/* ── M1 · No zoom-on-focus ──────────────────────────────────────────────────
   iOS zooms the viewport when a focused text-entry control is under 16px.
   Entry controls only — radios, checkboxes and submits are unaffected and
   flagging them buries the signal (landmine #26).                           */

@media (max-width: 900px) {
  .wh-field input,
  .wh-field select,
  .wh-field textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px;
    min-height: var(--tap-min);
  }
  .wh-form__row { grid-template-columns: 1fr; }
}

/* ── M4 · Length ────────────────────────────────────────────────────────────
   The comp runs to 12 090px on the home page — about thirty-two screens, with
   the booking CTA near the bottom. Tighten the vertical rhythm and compact the
   grids that repeat most.                                                    */

@media (max-width: 767px) {
  .wh-section        { padding: clamp(56px, 14vw, 72px) var(--gutter); }
  .wh-section--tight { padding: clamp(48px, 12vw, 64px) var(--gutter); }
  .wh-section--slim  { padding: clamp(40px, 10vw, 56px) var(--gutter); }

  .wh-grid,
  .wh-hairgrid,
  .wh-gallery { margin-top: var(--space-10); }
  .wh-headrow { margin-bottom: var(--space-10); }
  .wh-split   { gap: var(--space-10); }

  /* Highlights: two compact columns rather than six full-height cards. */
  .wh-hairgrid { grid-template-columns: 1fr 1fr; }
  .wh-hairgrid__cell { padding: var(--space-5); gap: var(--space-3); }
  .wh-hairgrid__cell .wh-cat-title { font-size: 1rem; letter-spacing: .06em; }
  .wh-hairgrid__cell p { font-size: .8125rem; line-height: 1.6; }

  /* Gallery: one column reads better than a cramped masonry, and the tail is
     behind "View all photographs" so the page does not run away. */
  .wh-gallery { columns: 1; }
  .wh-gallery__item:nth-child(n + 5) { display: none; }
  .wh-gallery.is-expanded .wh-gallery__item:nth-child(n + 5) { display: block; }
  .wh-gallery-more { display: inline-flex; margin-top: var(--space-6); }

  /* The hanging badge occupies the top ~80px of the viewport. The hero is
     bottom-aligned, so when its content is tall relative to a short phone
     viewport the kicker rides up underneath the badge and reads as broken
     text. Give the hero enough height that the content clears it. */
  .wh-hero { height: clamp(600px, 88vh, 700px); padding-bottom: clamp(56px, 8vh, 80px); }

  .wh-hero__cta { gap: var(--space-3); }
  .wh-hero__cta .wh-btn { flex: 1 1 auto; }

  .wh-underlay { width: 320px; opacity: .025; }
}

@media (min-width: 768px) {
  .wh-gallery-more { display: none; }
}

/* ── M5 · The fixed bottom bar ──────────────────────────────────────────────
   118px of an 844px viewport is 14% permanently gone, and it sat over the
   footer's last rows. Slim it, lift the FAB clear of it, and pad the document
   so nothing is unreachable.                                                */

@media (max-width: 767px) {
  .wh-bookbar {
    position: fixed;
    inset: auto 0 0;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: 72px;
    padding: 0 var(--gutter);
    background: rgba(253, 251, 246, .94);
    backdrop-filter: blur(var(--blur-glass));
    -webkit-backdrop-filter: blur(var(--blur-glass));
    border-top: 1px solid var(--border-hairline);
    box-shadow: var(--shadow-bar-up);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .wh-bookbar__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .wh-bookbar__eyebrow {
    font-size: .625rem;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--text-accent);
  }
  .wh-bookbar__title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wh-bookbar .wh-btn { flex: none; }

  /* Clear the bar: the FAB rides above it, the footer ends above it. */
  .wh-fab { bottom: calc(72px + var(--space-4) + env(safe-area-inset-bottom)); right: var(--space-4); }
  .wh-footer { padding-bottom: calc(72px + var(--space-8) + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(72px + var(--space-4)); }
}

/* ── Flyout ─────────────────────────────────────────────────────────────────
   Skill §4 standing rule: a real dialog with focus trap, Escape, focus return
   and a scroll lock — behaviour lives in wh-app.js, presentation here.       */

.wh-flyout {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(6, 24, 12, .97);
  backdrop-filter: blur(var(--blur-veil));
  -webkit-backdrop-filter: blur(var(--blur-veil));
  display: flex;
  flex-direction: column;
  padding: var(--gutter);
  padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
}
.wh-flyout[hidden] { display: none; }
.wh-flyout__top { display: flex; align-items: center; justify-content: space-between; }
.wh-flyout__top img { height: 30px; width: auto; }
.wh-flyout__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 1px solid var(--white-a20);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}
.wh-flyout__nav { margin-top: var(--space-12); display: flex; flex-direction: column; overflow-y: auto; }
.wh-flyout__nav a {
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--weight-light);
  color: var(--white);
  /* Staggered entrance — set by the toggle, collapsed under reduced motion. */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.wh-flyout.is-open .wh-flyout__nav a { opacity: 1; transform: none; }
.wh-flyout__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-8); }
.wh-flyout__meta { margin-top: var(--space-2); font-size: var(--text-xs); letter-spacing: .08em; color: rgba(255, 255, 255, .45); }

@media (prefers-reduced-motion: reduce) {
  .wh-flyout__nav a { opacity: 1; transform: none; transition: none; }
}

/* ── Small-phone safety ─────────────────────────────────────────────────── */

@media (max-width: 400px) {
  .wh-hairgrid { grid-template-columns: 1fr; }
  .wh-hero__body h1 { font-size: 2.125rem; }
  .wh-modal__panel { padding: var(--space-5); }
  .wh-lightbox__btn--prev { left: var(--space-3); }
  .wh-lightbox__btn--next { right: var(--space-3); }
}

/* Nothing may scroll sideways, ever. */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe, table { max-width: 100%; }

/* Residence rows go single-column and drop the alternating order. */
@media (max-width: 767px) {
  .wh-unit-row { margin-top: var(--space-10); padding-top: var(--space-10); gap: var(--space-8); }
  .wh-unit-row.is-reversed .wh-figure { order: 0; }
  .wh-unit-row__foot { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .wh-unit-row__actions { width: 100%; }
  .wh-unit-row__actions .wh-btn { flex: 1 1 auto; }
  .wh-section .wh-wrap > * + .wh-grid,
  .wh-section .wh-wrap > * + .wh-split { margin-top: var(--space-10); }
  .wh-quote p { font-size: 1.125rem; }
  .wh-modal__foot { flex-direction: column; align-items: stretch; }
  .wh-modal__foot .wh-btn { width: 100%; }
  .wh-footer__know { gap: var(--space-4); }
}

/* ── M4 (continued) · The residence cards become a swipe rail ───────────────
   Three tall cards stacked cost ~1 600px of scroll and pushed everything below
   them out of reach. On a phone they read better as a snap rail: all three
   still present, none of them buried. Peek on the right edge advertises that
   there is more. */

@media (max-width: 767px) {
  .wh-grid--3.wh-rail {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the screen edges so the peek reads as intentional. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--space-2);
    gap: var(--space-4);
  }
  .wh-grid--3.wh-rail::-webkit-scrollbar { display: none; }
  .wh-grid--3.wh-rail > * { scroll-snap-align: start; }

  /* A rail is only discoverable if you can see it move — say so once. */
  .wh-rail-hint {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-subtle);
  }

  /* Three gallery tiles before the fold, the rest behind the button. */
  .wh-gallery__item:nth-child(n + 4) { display: none; }
  .wh-gallery.is-expanded .wh-gallery__item:nth-child(n + 4) { display: block; }

  /* Reviews: the score card leads, the quotes follow, tightly. */
  .wh-quote p { font-size: 1.0625rem; line-height: 1.5; }
  .wh-quote { gap: var(--space-4); }
  .wh-score { order: -1; }

  /* Footer links need a real target, not a 35px line box. */
  .wh-footer__col ul a,
  .wh-footer__know ul a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    min-width: var(--tap-min);
    padding-block: 0;
  }
  .wh-footer__col ul { gap: var(--space-1); }
}

@media (min-width: 768px) {
  .wh-rail-hint { display: none; }
}

/* ── Hero, phone ────────────────────────────────────────────────────────────
   The kicker is set at 0.28em tracking — the wordmark's descender spacing —
   which is far wider than a 390px line. Centred, it ran off both edges and was
   clipped by the hero's own overflow, so it read as broken text rather than as
   a label. Give it a shorter line and looser leading; keep the tracking, since
   it is the brand's signature gesture. */

@media (max-width: 767px) {
  .wh-hero__kicker {
    font-size: .5625rem;
    letter-spacing: .18em;
    line-height: 1.8;
    max-width: 22rem;
    margin-inline: auto;
  }
  .wh-hero__body h1 { font-size: clamp(2rem, 8.4vw, 2.5rem); }
  .wh-hero__body p { font-size: .9375rem; line-height: 1.65; margin-top: var(--space-5); }

  /* The bar's eyebrow wrapped to two lines and squeezed the title. */
  .wh-bookbar__eyebrow { font-size: .5625rem; letter-spacing: .1em; white-space: nowrap; }
  .wh-bookbar__title { font-size: .9375rem; }
  .wh-bookbar .wh-btn--sm { padding-inline: 1.125rem; font-size: .625rem; }
}