/* ==========================================================================
   layout.css — page skeleton only: the shell, section rhythm, header, hero,
   footer, and the grids that arrange components. Component skins live in
   components.css.

   Spacing is owned here and expressed as flex/grid `gap`, never as per-element
   margins, so nothing collapses or doubles when components are reordered.
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding-block: var(--space-section); }

.section--tint { background: var(--tint); }

.section--dark {
  background: var(--char-deep);
  color: #fff;
}

.section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  max-width: 42rem;
}

.section__head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
}

.section__title em { color: var(--red); }
.section--dark .section__title em { color: var(--red-on-dark); }

.section__lede {
  color: var(--muted);
  font-size: var(--fs-md);
  max-width: var(--measure);
}

.section--dark .section__lede { color: rgb(255 255 255 / 0.78); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(250 248 243 / 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--rule-soft);
  background: rgb(250 248 243 / 0.96);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: var(--shell-max);
  margin-inline: auto;
  padding: var(--space-3) var(--shell-pad);
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  text-decoration: none;
  flex: none;
}

/* The lockup carries the name, so the <img> alt is the accessible name of the
   link — there is no text node beside it. Height-driven with `width: auto`, so
   the intrinsic width and height in the markup still reserve the right box and
   nothing shifts as it decodes. */
.brand__logo {
  /* The supplied lockup (assets/Logo2.png) is a 4.3:1 wordmark with no palm, so
     it needs far less height than the reconstructed one did: at 2.5rem its
     script already reads larger than the old lockup's did at 3.5rem, and the
     header drops back onto its 4.5rem min-height. */
  height: 2.5rem;
  width: auto;
  flex: none;
}

/* Below this the header has to fit the logo and the menu button side by side.
   At 2.5rem the lockup is about 170px wide, which clears the menu button on any
   ordinary phone; only screens under 22rem step down. */
@media (max-width: 22rem) {
  .brand__logo { height: 2rem; }
}

/* Kept a step above the header's, as it was before. */
.site-footer__brand .brand__logo { height: 3rem; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms var(--ease), background 160ms var(--ease);
}

.site-nav__list a:hover {
  color: var(--ink);
  background: var(--tint);
}

/* --------------------------------------------------------------------------
   Hotels submenu. A disclosure button, not a menubar: the panel holds plain
   links, so `button` + aria-expanded is the honest pattern and Tab, Enter,
   Escape and the screen-reader announcement all come for free.
   -------------------------------------------------------------------------- */

.site-nav__item { position: relative; }

.site-nav__disclosure {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms var(--ease), background 160ms var(--ease);
}

.site-nav__disclosure:hover,
.site-nav__disclosure[aria-expanded="true"] {
  color: var(--ink);
  background: var(--tint);
}

.site-nav__caret {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms var(--ease);
}

.site-nav__disclosure[aria-expanded="true"] .site-nav__caret {
  transform: translateY(1px) rotate(-135deg);
}

.site-nav__menu a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* .site-nav__list a above also matches these links and centres them on the
     cross axis, which in a column flex box means centred text. */
  align-items: flex-start;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: color 160ms var(--ease), background 160ms var(--ease);
}

.site-nav__menu a span {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--muted);
}

.site-nav__menu a:hover { background: var(--tint); color: var(--red); }
.site-nav__menu a:hover span { color: var(--ink-2); }

.site-nav__menu-all {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule-soft);
}

.site-nav__menu-all a { color: var(--red-text); font-weight: 600; }

/* Destination nests its hotels under their island. The island is a label, not
   a link — there is no island page to go to — so it is a plain <span> at the
   top of the list item that holds that island's hotels, and the nesting is a
   real nested list, which is what a screen reader announces as "Boracay, list,
   3 items". */
.site-nav__group + .site-nav__group {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule-soft);
}

.site-nav__group-label {
  display: block;
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--red-text);
}

/* Boracay's label is a button, because Boracay folds: three hotels is worth
   tucking behind a tap, one is not. It wears the same red label style as the
   static island names so the three still read as a set, plus a count and a
   caret so it is obvious this one opens. Full width and 44px tall, because on
   a phone it is a tap target. */
.site-nav__group-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--red-text);
  cursor: pointer;
  transition: background 160ms var(--ease);
}

.site-nav__group-toggle:hover,
.site-nav__group-toggle[aria-expanded="true"] { background: var(--tint); }

.site-nav__group-count {
  margin-left: auto;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
}

.site-nav__group-toggle[aria-expanded="true"] .site-nav__caret {
  transform: translateY(1px) rotate(-135deg);
}

/* Desktop only: the link list sits centred on the header, brand at one edge
   and the Book direct button at the other. Taken out of flow rather than
   flex-centred, so it centres on the page and not on whatever space the brand
   happens to leave. Below the breakpoint the nav is a dropdown and this must
   not apply, hence min-width rather than a base rule plus a reset. */
@media (min-width: 60.0625rem) {
  .site-header__inner { position: relative; }

  .site-nav__list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* The panel is only a floating dropdown at this width; below the breakpoint
     it stays in the flow as an indented list inside the mobile menu. */
  .site-nav__menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 60;
    min-width: 17rem;
    padding: var(--space-2);
    background: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
  }

  /* An invisible bridge over the gap between the button and the panel. Without
     it the pointer crosses 8px that belong to neither on its way down, the
     item fires mouseleave, and the panel closes as you reach for it. The
     panel's own ::before counts as the panel for hit-testing, so the pointer
     never "leaves". It only exists while the panel is shown. */
  .site-nav__menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--space-2) + 2px);
  }
}

/* --------------------------------------------------------------------------
   Mobile nav toggle. Hidden above the breakpoint; the nav is a plain flex row
   there, so no JS is required at desktop width.
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top:  6px; }

@media (max-width: 60rem) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-4) var(--shell-pad) var(--space-6);
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-card);
    /* With Destination and Boracay both unfolded the menu is about 713px
       tall. It hangs from a sticky header, so it can't scroll off with the
       page, and on a 667px or 568px phone its bottom items were simply
       unreachable. So it stops at the foot of the screen and scrolls inside
       itself. The 4.5rem is the header's min-height, and dvh follows the
       mobile address bar as it shows and hides; the vh line is the fallback
       for browsers without dvh. overscroll-behavior keeps a scroll that hits
       the menu's end from running on into the page behind. */
    max-height: calc(100vh - 4.5rem);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* `hidden` removes it from the a11y tree and the tab order together —
     no opacity-0 overlay left focusable behind the page. */
  .site-nav[hidden] { display: none; }

  .site-nav__list { flex-direction: column; align-items: stretch; }

  .site-nav__list a {
    min-height: var(--tap-min);
    padding-inline: var(--space-4);
    font-size: var(--fs-base);
  }

  .site-nav .btn { width: 100%; }

  .site-nav__disclosure {
    width: 100%;
    justify-content: space-between;
    padding-inline: var(--space-4);
    font-size: var(--fs-base);
  }

  .site-nav__menu {
    margin-left: var(--space-4);
    padding-left: var(--space-3);
    border-left: 2px solid var(--rule-soft);
  }

  .site-nav__menu a { padding-inline: var(--space-3); }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-content: end;
  min-height: min(84vh, 44rem);
  padding: var(--space-8) 0 0;
  isolation: isolate;
  color: #fff;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__media .ph { width: 100%; height: 100%; border-radius: 0; }

.hero__media picture { display: block; width: 100%; height: 100%; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgb(14 12 13 / 0.82) 0%, rgb(14 12 13 / 0.45) 55%, rgb(14 12 13 / 0.25) 100%),
    linear-gradient(to top,   rgb(14 12 13 / 0.75) 0%, rgb(14 12 13 / 0) 45%);
}

.hero__body {
  max-width: var(--shell-max);
  width: 100%;
  margin-inline: auto;
  padding: 0 var(--shell-pad) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 14ch;
}

.hero__title em { font-weight: 600; }

.hero__lede {
  max-width: 34rem;
  font-size: var(--fs-md);
  color: rgb(255 255 255 / 0.9);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */

/* The hotels used to be a two-column grid with the flagship spanning the row.
   They are a carousel track now, so their width and snapping live with
   .hotel-card in components.css and there is no grid left to place. */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.figure-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-5);
  padding-top: var(--space-7);
  border-top: 1px solid rgb(255 255 255 / 0.16);
}

/* A single centred panel since the inquiry form was removed. Constrained
   rather than full-bleed so the perks list keeps a readable measure under the
   centred section header. */
.booking {
  display: grid;
  justify-items: center;
  max-width: 44rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--char-ink);
  color: rgb(255 255 255 / 0.8);
  padding-top: var(--space-8);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}

.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.site-footer__brand p { max-width: 24rem; font-size: var(--fs-sm); }

.site-footer__tel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--red-on-dark);
  font-weight: 600;
  text-decoration: none;
}
.site-footer__tel a:hover { text-decoration: underline; }

.site-footer__nav h2 {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--red-on-dark);
}

.site-footer__nav ul { display: flex; flex-direction: column; }

.site-footer__nav a {
  display: flex;
  flex-direction: column;
  min-height: var(--tap-min);
  justify-content: center;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: rgb(255 255 255 / 0.85);
}

.site-footer__nav a:hover { color: #fff; text-decoration: underline; }

.site-footer__nav a span {
  font-size: var(--fs-xs);
  color: rgb(255 255 255 / 0.55);
}

.site-footer__base {
  padding-block: var(--space-4) var(--space-6);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: var(--fs-xs);
  color: rgb(255 255 255 / 0.6);
}