/* --------------------------------------------------------------------------
   Small screens: shrink the floating call rail. At 390px the full-size rail
   sat on top of the gallery filter row, so a tap meant for "Pool" landed on
   WhatsApp instead. Smaller buttons plus a tighter inset clear the content.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .floatbar { right: var(--sp-3); bottom: var(--sp-3); gap: var(--sp-2); }
  .fbtn { width: 46px; }
  .fbtn svg { width: 21px; height: 21px; }
}

/* ==========================================================================
   responsive.css — min-width queries only
   Layered last so it wins over the mobile-first base in style.css.
   Breakpoints: 480 / 600 / 768 / 992 / 1200 / 1600 / 2400
   ========================================================================== */

/* --------------------------------------------------------------------------
   < 400px — very small phones. Tighten button padding so long labels fit.
   -------------------------------------------------------------------------- */
@media (max-width: 399px) {
  .btn { padding-inline: var(--sp-4); letter-spacing: .1em; }
  .btn--sm { padding-inline: var(--sp-3); }
  /* 304px of reCAPTCHA does not fit a 320px viewport once the dialog's own
     padding is taken, so the host is scaled down inside the panel */
  .cap-modal { padding: var(--sp-4); }
  .cap-modal__panel { padding: var(--sp-6) var(--sp-4) var(--sp-5); }
  .cap-host { transform: scale(.88); transform-origin: left top; min-height: 0; height: 70px; }
}

/* --------------------------------------------------------------------------
   >= 480px — small phones landscape
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .grid--2, .grid--4, .grid--6 { grid-template-columns: repeat(2, 1fr); }
  .gal-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .newsletter__row { grid-template-columns: 1fr auto; }
  .footer__bottom-inner { text-align: left; }
}

/* --------------------------------------------------------------------------
   >= 600px
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .bookbar__grid { grid-template-columns: repeat(2, 1fr); }
  .bookbar__grid > .bookbar__submit { grid-column: 1 / -1; }
  .hero__inner { text-align: left; }
  .hero__text { margin-inline: 0; }
  /* the dots stay centred at every width — they used to sit in the left gutter
     to line up under the hero copy, which the banner no longer carries */
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   >= 768px — tablet
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
  .gal-grid { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }

  .split { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
  .split--reverse .split__media { order: 2; }

  /* Match the photo to the height of the copy beside it.
     .split is align-items:center and .media carries a fixed aspect-ratio, so
     the image sat as a short band floating in the middle of a much taller
     column, with dead space above and below it. Stretching the cell and
     dropping the ratio lets the row height drive the photo instead.

     Scoped with :has() so it only touches cells holding a real .media figure —
     the location map is a .map/iframe in the same slot and keeps its own
     ratio, which stretching would distort. */
  .split__media:has(> .media) { align-self: stretch; }
  .split__media:has(> .media) > .media {
    height: 100%;
    aspect-ratio: auto;
    /* floor for short copy, ceiling so a long column cannot push the photo
       past one screen */
    min-height: 340px;
    max-height: var(--media-max-h);
  }

  .header .btn--book { display: inline-flex; }

  .hero__thumbs { bottom: calc(var(--sp-7) + var(--sp-9)); }
  .hero__cue { display: block; }

  .bookbar { margin-top: calc(var(--sp-10) * -1); }
  .bookbar__card { padding: var(--sp-6); }
  .bookbar__grid { grid-template-columns: repeat(3, 1fr); }
  .bookbar__grid > .bookbar__submit { grid-column: auto; align-self: end; }

  .lightbox__prev { left: var(--sp-6); }
  .lightbox__next { right: var(--sp-6); }

  .form--2col { grid-template-columns: repeat(2, 1fr); }
  .form--2col .field--full { grid-column: 1 / -1; }

  .sitemap { columns: 2; }

  /* Rails are a phone affordance. From here there is room for the real grid,
     so hand the columns back to whichever .grid--n modifier is also applied. */
  .rail {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
  .rail__hint { display: none; }

  /* The lead head becomes an editorial split once there is room: the headline
     holds the left column and the standfirst sits beside it on the same
     baseline, instead of running as one narrow ribbon down the page.
     The standfirst spans both rows so a tall one grows the flexible top row,
     never the headline's row — the eyebrow stays tight above the headline. */
  .sec-head--lead {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: var(--sp-9);
    align-items: end;
  }
  .sec-head--lead .eyebrow { grid-area: 1 / 1; }
  .sec-head--lead h2       { grid-area: 2 / 1; margin-bottom: 0; }
  .sec-head--lead p        { grid-area: 1 / 2 / 3 / 3; margin-bottom: .4em; }

  .footer__bottom-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--sp-5);
  }
}

/* --------------------------------------------------------------------------
   >= 992px — wider grids, but the drawer STAYS.
   The primary nav is nine items (~816px) plus brand and the Book Room CTA;
   it does not fit beside them until ~1360px. Swapping to the horizontal nav
   any earlier pushes the CTA off-screen, where overflow-x:clip hides it.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }
  .gal-grid { grid-template-columns: repeat(4, 1fr); }

  .bookbar__grid { grid-template-columns: repeat(4, 1fr) auto; }

  .split--wide { grid-template-columns: 1.15fr .85fr; }

  .sitemap { columns: 3; }

  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--sp-7); }

  .floatbar { right: var(--sp-6); bottom: var(--sp-6); }
  .popup { left: var(--sp-6); bottom: var(--sp-6); width: 370px; }
}

/* --------------------------------------------------------------------------
   >= 1360px — horizontal nav takes over from the drawer.
   Nine items (Home dropped, Meetings added) plus brand and the Book Room CTA.
   Measured worst case is 1342px, on index.html: its header is transparent
   rather than .is-solid at the top of the page, so the brand mark renders at
   96px instead of 72px and the row is at its widest there. Swapping any
   earlier pushes the CTA past the viewport edge, where overflow-x:clip hides
   it silently rather than producing a scrollbar you would notice.
   Brand wordmark and phone number stay hidden here; they are reintroduced
   only once there is measured room for them.
   -------------------------------------------------------------------------- */
@media (min-width: 1360px) {
  .nav { display: block; }
  .burger { display: none; }
  .drawer, .scrim { display: none; }
  .nav__list { gap: clamp(1.35rem, .5rem + 1.35vw, 2.5rem); }
}

/* --------------------------------------------------------------------------
   >= 1200px — desktop
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .grid--6 { grid-template-columns: repeat(6, 1fr); }

  .hero__inner { padding-bottom: var(--sp-11); }
  .hero__text { max-width: 34rem; }

  /* the mark stands alone in the bar and carries the full wordmark, including a
     fine "hotels & resorts" line — it needs real size to stay readable */
  .brand img { height: 96px; }
  .header.is-stuck .brand img, .header.is-solid .brand img { height: 72px; }

  .sec-head { margin-bottom: var(--sp-9); }

  .card__body { padding: var(--sp-6); }

  /* Feature grid: 3-up reads better than 6-up at this width */
  .grid--features { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   >= 1600px — large desktop; the phone number finally fits
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root { --container: 1400px; }
  .gal-grid { gap: var(--sp-5); }
  .header__phone { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   >= 2400px — 4K. Cap the measure so text does not drift apart.
   -------------------------------------------------------------------------- */
@media (min-width: 2400px) {
  :root {
    --container: 1560px;
    --container-wide: 1800px;
    /* hero stays at the 50px ceiling even on 4K */
  }
  .hero { min-height: min(calc(100svh - var(--header-h)), 1100px); }
}

/* --------------------------------------------------------------------------
   Short landscape phones — stop the hero eating the whole screen
   -------------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 520px; }
  .hero__inner { padding-block: calc(var(--header-h) + var(--sp-5)) var(--sp-8); }
  .hero__cue { display: none; }
}

/* --------------------------------------------------------------------------
   Coarse pointers — no hover transforms, bigger targets
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .card:hover, .feature:hover { transform: none; box-shadow: none; }
  .media--zoom:hover > img { transform: none; }
  .nav__link:hover::after { width: 0; }
  .gal-item button { cursor: pointer; }
}

/* --------------------------------------------------------------------------
   Forced colours (Windows high contrast)
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn, .card, .feature, .field input, .field textarea, .field select { border: 1px solid; }
  .nav__link::after, .link-more::after { forced-color-adjust: none; }
  .hero__slide::after, .page-hero__bg::after { display: none; }
  .hero__thumb { opacity: 1; border: 1px solid; }
  .hero__thumb.is-active { border: 3px solid; }
}