/* ============================================================
   css/responsive.css — cross-viewport refinements.

   The site is mobile-first: the base rules in the other files
   describe the phone, and everything wider is an enhancement.
   This file carries only the cross-cutting corrections that do
   not belong to any one component — chiefly tap-target sizing,
   which touches a dozen components at once.

   Measured, not assumed: scripts/measure-responsive.ps1 drives
   headless Chrome and reports elements that overflow the viewport
   or fall below the 44 px minimum target. Re-run it after editing.
   ============================================================ */

/* ---------------------------------------------------------------
   Touch targets.

   WCAG 2.5.8 (Target Size Minimum, AA) and the Apple HIG both ask
   for 44x44 CSS px. Inline links inside prose are exempt, but a
   link styled as a button or a card is a control, and the audit
   found a dozen of them measuring 15–39 px tall — well under the
   floor and genuinely awkward to hit with a thumb.

   Padding is added rather than block-size so the visual design
   (type size, letter-spacing, rhythm) is untouched; only the hit
   area grows.
   --------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 48em) {
  .nav__links a,
  .drawer__list a,
  .jumpnav__list a {
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  .link-more {
    /* Prose links are exempt, but .link-more reads as a control
       (uppercase, underlined) and is used as one. */
    padding-block: 0.6em;
    margin-block-start: -0.4em;
  }

  .jumpnav__motion,
  .notice-bar__motion {
    min-block-size: 2.75rem;
    padding-inline: 0.6rem;
  }

  .drawer__close,
  .lightbox__close,
  .lightbox__prev,
  .lightbox__next {
    min-block-size: 2.75rem;
  }

  /* The logo mark. It is sized by height (2.25rem), which measures 36 px —
     under the 44 px floor. The image keeps its height and the LINK grows, so
     the mark is not scaled up out of proportion with the header. */
  .nav__brand {
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
  }

  /* Footer navigation lists ("Rooms & Suites", "Dining", …). These are
     navigation rather than running prose, so each row gets the full touch
     floor; measured at 34 px before this. */
  .footer ul a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }

  /* Reservation phone numbers and the email address in the footer's address
     block are among the most-tapped controls on the site and measured 17–20 px
     tall. The address lines stack tightly, so only the links grow. */
  .footer__addr a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }
}

/* The logo is the one control that stays a control at every width — it is the
   link home, and on a pointer device the whole header row is reachable, so the
   44 px floor is not required. It is still grown to a comfortable 2.75rem so
   the target is not smaller than the nav links beside it. */
.nav__brand {
  min-block-size: 2.75rem;
  display: inline-flex;
  align-items: center;
}

/* The "Pause motion" control in the sticky jump nav. On a touch device it is
   covered by the block above; this is the pointer-device case, where a smaller
   target is acceptable but the label should not sit flush against the nav's
   edge. */
.jumpnav__motion { padding-block: 0.5em; }

/* ---------------------------------------------------------------
   Small phones (320–360).
   --------------------------------------------------------------- */
@media (max-width: 23em) {
  :root { --header-h: 4rem; }
  .hero__title { font-size: clamp(2.1rem, 8.4vw, 2.6rem); }
  .footer__grid { grid-template-columns: 1fr; }

  /* Two booking buttons side by side leave each one too narrow to
     read at this width, so they stack full-width. */
  .book-bar { flex-direction: column; }
  .book-bar .btn { inline-size: 100%; }
}

/* ---------------------------------------------------------------
   Narrow phones: the sticky booking bar holds two buttons plus the
   safe-area inset. Below 30em their labels wrap to two lines and
   the bar eats a third of a short screen, so the type steps down
   and the padding tightens instead.
   --------------------------------------------------------------- */
@media (max-width: 30em) {
  .book-bar { padding-block: var(--space-2); }
  .book-bar .btn {
    padding-inline: 0.9em;
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
  }
}

/* ---------------------------------------------------------------
   Large desktop.
   --------------------------------------------------------------- */
@media (min-width: 80em) {
  :root { --header-h: 5rem; }
  .hero__content { max-width: 52rem; }
}

/* Very wide screens: the measure is already capped by
   --container-max, so the content column never stretches edge to
   edge. It is widened slightly so a 2560 px display is not mostly
   empty margin either. */
@media (min-width: 120em) {
  :root { --container-max: 88rem; }
}

/* ---------------------------------------------------------------
   Landscape phones.

   Measured at 844x390 (iPhone landscape): the hero rendered 544 px tall
   against a 390 px viewport and pushed its own booking CTAs 50 px below
   the fold, so the primary action of the page was unreachable without
   scrolling. Three causes, all fixed here:

     - the display type stayed at 67.8 px, which alone is 141 px of line
       box for a two-line headline;
     - the hero kept min-height: 100svh and then grew past it, because
       the content itself was taller than one screen;
     - the lede and the eyebrow kept their full vertical rhythm.

   The hero is allowed to be shorter than the viewport here, and the type
   steps down, so the headline, lede and both CTAs all sit in the first
   screen. The previous rule in this file raised the hero to 130svh, which
   pushed the content in exactly the wrong direction.
   --------------------------------------------------------------- */
@media (max-height: 30em) and (orientation: landscape) {
  .hero { min-height: 100svh; }
  .hero__content {
    padding-block: var(--space-5) calc(var(--space-5) + var(--book-bar-h));
    gap: var(--space-2);
  }
  .hero__title { font-size: clamp(1.75rem, 5.2vw, 2.5rem); line-height: 1.08; }
  .hero__eyebrow { font-size: var(--text-2xs); }
  .hero__lede { font-size: var(--text-sm); max-width: 40rem; }
  .hero__actions { margin-block-start: var(--space-1); }
  .hero__scroll { display: none; }
  .notice-bar { padding-block: calc(var(--header-h) + var(--space-1)) 2.25rem; }
  .notice-bar__motion { min-block-size: 2.25rem; }
}

/* Short viewports generally — a landscape phone, or a laptop with
   browser chrome eating half the screen. A 100svh hero plus a
   fixed header and the sticky booking bar means the visible content
   is squeezed to a sliver. The hero is allowed to shrink below the
   viewport so the content beneath it is reachable. */
@media (max-height: 40em) and (min-width: 48em) {
  .hero { min-height: 30rem; }
  .band { min-block-size: clamp(16rem, 34vw, 24rem); }
}

/* ---------------------------------------------------------------
   Print: content-first.
   --------------------------------------------------------------- */
@media print {
  .nav, .drawer, .book-bar, .hero__scroll, .lightbox { display: none !important; }
  .hero { min-height: auto; color: #000; }
  .hero::after { display: none; }
  .section { padding-block: var(--space-5); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}

/* Hover-capable pointers only.

   A touch device fires :hover on tap and then keeps it until the
   next tap elsewhere, which leaves cards stuck in a lifted state
   after being touched. Gating the lift on a fine pointer removes
   that. The previous `@media (hover: none)` rule merely reset the
   transform and so never applied to hybrid devices that report
   hover:hover with a touch digitiser. */
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
  .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
}