/* ============================================================================
   Layout — containers, sections, the floating header, heroes, footer.
   Depends on tokens.css and base.css.
   ========================================================================= */

/* ── Containers ────────────────────────────────────────────────────────── */

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

.container--narrow { max-width: var(--container-narrow); }

.page { position: relative; }

/* Main gets no top padding: every page opens with a hero that supplies its own. */
.page-main { display: block; }


/* ── Sections and bands ────────────────────────────────────────────────────
   `.section` is the vertical rhythm unit. `.band` variants change the
   surface behind it. Padding lives on .section only, so a band never has to
   fight the section for the same property.
   ----------------------------------------------------------------------- */

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

.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.band--paper { background: var(--paper); }
.band--mist  { background: var(--mist); }
.band--sky   { background: var(--sky-50); }

/* The one dark full-bleed band per page. Inset and rounded, like the hero,
   so it reads as another floating block rather than a stripe. */
.band--dark {
  position: relative;
  margin-inline: var(--inset);
  border-radius: var(--radius-2xl);
  background:
      radial-gradient(120% 140% at 12% 0%, var(--navy-700) 0%, transparent 60%),
      var(--navy-900);
  color: var(--on-dark-muted);
  overflow: hidden;
}

.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--on-dark); }
.band--dark .lead { color: var(--on-dark-muted); }
.band--dark a { color: var(--on-dark); }


/* ── Section headers ───────────────────────────────────────────────────── */

.section-head {
  display: grid;
  gap: var(--space-4);
  /* Fluid: was a fixed 48px, which was heavy under a heading on a phone and
     mean under one on a large display. */
  margin-bottom: var(--stack-lg);
  max-width: 64ch;
}

/* Heading left, supporting paragraph right — the renc / CitiPark treatment. */
.section-head--split {
  max-width: none;
  grid-template-columns: 1fr;
  align-items: end;
}

@media (min-width: 62rem) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-12);
  }
  .section-head--split .section-head__text { padding-bottom: var(--space-2); }
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--action);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
}

.eyebrow--on-dark { color: var(--warm); }
.eyebrow--center::before { display: none; }


/* ── Grids ─────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: var(--space-6); }

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }


/* ── Bento grid ────────────────────────────────────────────────────────────
   One tall block plus two stacked — the CitiPark "prime destinations" shape.
   Collapses to a single column on small screens.
   ----------------------------------------------------------------------- */

.bento {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.bento__item { min-height: 15rem; }

@media (min-width: 48rem) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(13rem, 1fr));
  }
  .bento__item--tall {
    grid-row: span 2;
    min-height: 28rem;
  }
}

@media (min-width: 75rem) {
  .bento { grid-template-columns: 1.25fr 1fr; }
}


/* ── Floating header ───────────────────────────────────────────────────────
   Transparent over the hero, condensing into a solid white pill bar on
   scroll. The `is-stuck` class is applied by nav.js.
   ----------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  /* Deliberately NOT --z-header (shared with the unrelated admin topbar —
     see tokens.css). `position: sticky` always creates a new stacking
     context, and .site-nav (the mobile drawer) lives INSIDE this one as a
     descendant — so its own z-index only ever competes against its
     siblings *within* .site-header; it can never outrank .nav-scrim (a
     sibling of .site-header, in the root stacking context) no matter how
     high .site-nav's z-index is set. The whole .site-header context has to
     outrank the scrim instead, so that its drawer does too once opened.
     This is the actual cause of the "menu opens but is blurred and nothing
     is clickable" bug: .nav-scrim was painting — and capturing every tap —
     on top of the entire header, drawer included. */
  z-index: calc(var(--z-drawer) + 1);
  padding-block: var(--space-4);
  transition: padding-block var(--duration-base) var(--ease-out);
  /* Outranking the scrim (above) makes the *whole* header box eligible to
     catch pointer events, including the empty space around the pill where
     there is nothing to see or tap — which would otherwise stop a tap on
     the backdrop from reaching .nav-scrim in that strip. Switched off here
     and reinstated on the header's actual interactive content below, so
     empty space is click-through and the real content still works. */
  pointer-events: none;
}

.site-header > .container,
.brand,
.site-nav,
.site-header__actions {
  pointer-events: auto;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out);
}

/* Defensive, not the fix itself (see .site-header's z-index above for the
   actual mobile-menu bug): the pill's blurred/solid background lives on a
   pseudo-element rather than directly on .site-header__inner. A
   `backdrop-filter` on the real element would establish a new containing
   block for any fixed-position descendant, and .site-nav (the mobile
   drawer) is exactly that — it would then position itself against this
   small pill instead of the viewport. A pseudo-element carries the same
   look with no real descendants of its own, so it can never do that,
   whatever gets added to this rule later. */
.site-header__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: transparent;
  transition:
      background-color var(--duration-base) var(--ease-out),
      box-shadow       var(--duration-base) var(--ease-out);
}

.site-header.is-stuck { padding-block: var(--space-2); }

.site-header.is-stuck .site-header__inner { border-color: var(--line); }

.site-header.is-stuck .site-header__inner::before {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
}

/* Pages whose hero is light need dark header text from the start. */
.site-header--solid .site-header__inner { border-color: var(--line); }

.site-header--solid .site-header__inner::before {
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}

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

.brand__mark {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--navy-900);
  background: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-xs);
}

.brand__text {
  display: grid;
  line-height: 1.1;
}

.brand__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--on-dark);
  white-space: nowrap;
  transition: color var(--duration-base) var(--ease-out);
}

.brand__tag {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-dark-faint);
  transition: color var(--duration-base) var(--ease-out);
  white-space: nowrap;
}

.site-header.is-stuck .brand__name,
.site-header--solid .brand__name { color: var(--ink); }

.site-header.is-stuck .brand__tag,
.site-header--solid .brand__tag { color: var(--ink-muted); }

.site-header.is-stuck .brand__mark,
.site-header--solid .brand__mark { background: var(--navy-900); color: var(--on-dark); }


/* Primary navigation */

.site-nav { margin-left: auto; }

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

.site-nav__link {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--on-dark-muted);
  text-decoration: none;
  white-space: nowrap;
  transition:
      color var(--duration-fast) var(--ease-out),
      background-color var(--duration-fast) var(--ease-out);
}

.site-nav__link:hover {
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.12);
}

.site-nav__link[aria-current="page"] {
  color: var(--on-dark);
  font-weight: var(--weight-semibold);
}

.site-header.is-stuck .site-nav__link,
.site-header--solid .site-nav__link { color: var(--ink-muted); }

.site-header.is-stuck .site-nav__link:hover,
.site-header--solid .site-nav__link:hover {
  color: var(--ink);
  background: var(--sky-50);
}

.site-header.is-stuck .site-nav__link[aria-current="page"],
.site-header--solid .site-nav__link[aria-current="page"] {
  color: var(--action);
  background: var(--action-subtle);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  /* A flex item's z-index applies even without a `position` (Flexbox spec).
     .site-nav sits at the same level as this (both children of
     .site-header__inner) and, once open on mobile, its fixed box reaches
     into this corner of the screen too — without this, its z-index:60
     would paint over the toggle button, hiding the one control that closes
     the drawer. */
  position: relative;
  z-index: calc(var(--z-drawer) + 1);
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--on-dark);
  text-decoration: none;
  white-space: nowrap;
}

.site-header.is-stuck .header-phone,
.site-header--solid .header-phone { color: var(--ink); }

.header-phone svg { width: 1rem; height: 1rem; opacity: 0.7; }


/* Mobile drawer toggle */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  flex-shrink: 0;
}

.site-header.is-stuck .nav-toggle,
.site-header--solid .nav-toggle {
  color: var(--ink);
  background: var(--sky-100);
}

.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open  { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 68rem) {
  .nav-toggle { display: flex; }
  .header-phone { display: none; }
  .site-header__actions .btn--book { display: none; }

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(22rem, 88vw);
    z-index: var(--z-drawer);
    margin: 0;
    padding: var(--space-20) var(--space-6) var(--space-8);
    background: var(--paper);
    box-shadow: var(--shadow-pop);
    transform: translateX(101%);
    transition: transform var(--duration-base) var(--ease-out);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-nav[data-open="true"] { transform: translateX(0); }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  .site-nav__link {
    color: var(--ink-body);
    padding: var(--space-4);
    font-size: var(--text-lg);
    border-radius: var(--radius-md);
  }

  .site-nav__link:hover { background: var(--sky-50); color: var(--ink); }

  .site-nav__link[aria-current="page"] {
    color: var(--action);
    background: var(--action-subtle);
  }

  .site-nav__footer {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
    display: grid;
    gap: var(--space-3);
  }
}

@media (min-width: 68.0625rem) {
  .site-nav__footer { display: none; }
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(9, 24, 60, 0.44);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base);
}

.nav-scrim[data-open="true"] { opacity: 1; visibility: visible; }


/* ── Hero ──────────────────────────────────────────────────────────────────
   A large rounded photo block, inset from the viewport edge, with the header
   floating over it. The white content panel notches into its lower-left, and
   the booking bar straddles its bottom edge.
   ----------------------------------------------------------------------- */

.hero {
  position: relative;
  margin: calc(-1 * var(--header-h, 5.5rem)) var(--inset) 0;
  border-radius: var(--radius-2xl);
  background-color: var(--navy-900);
  background-image: var(--img-placeholder);
  background-size: cover;
  background-position: 50% 50%;
  isolation: isolate;
  overflow: hidden;
}

/* Each page points its hero at a slot from tokens.css. When the slot is
   `none` the placeholder gradient underneath shows through, so an unsupplied
   image never renders as a broken or empty box. */
.hero[data-img="home"]    { background-image: var(--img-hero-home),    var(--img-placeholder); background-position: var(--img-hero-home-pos); }
.hero[data-img="options"] { background-image: var(--img-hero-options), var(--img-placeholder); background-position: var(--img-hero-options-pos); }
.hero[data-img="how"]     { background-image: var(--img-hero-how),     var(--img-placeholder); background-position: var(--img-hero-how-pos); }
.hero[data-img="pricing"] { background-image: var(--img-hero-pricing), var(--img-placeholder); background-position: var(--img-hero-pricing-pos); }
.hero[data-img="about"]   { background-image: var(--img-hero-about),   var(--img-placeholder); background-position: var(--img-hero-about-pos); }
.hero[data-img="reviews"] { background-image: var(--img-hero-reviews), var(--img-placeholder); background-position: var(--img-hero-reviews-pos); }
.hero[data-img="faqs"]    { background-image: var(--img-hero-faqs),    var(--img-placeholder); background-position: var(--img-hero-faqs-pos); }
.hero[data-img="contact"] { background-image: var(--img-hero-contact), var(--img-placeholder); background-position: var(--img-hero-contact-pos); }

/* The scrim is what guarantees the headline stays readable regardless of
   which photograph is dropped in. It is not optional. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-hero);
}

.hero__inner {
  position: relative;
  display: grid;
  align-content: end;
  min-height: min(40rem, 78svh);
  /* Bottom padding = how far the bar rides up + the gap we want to see below
     the hero buttons. Using the overlap alone made the two cancel out and the
     booking bar's tabs touched the buttons. */
  padding:
    calc(var(--header-h, 5.5rem) + var(--space-12))
    var(--gutter)
    calc(var(--bar-overlap) + var(--bar-clearance));
  max-width: var(--container);
  margin-inline: auto;
}

.hero--compact .hero__inner {
  min-height: min(26rem, 52svh);
  padding-bottom: calc(var(--bar-overlap) + var(--bar-clearance));
}

.hero__content {
  max-width: 40rem;
  color: var(--on-dark);
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.hero__title {
  color: var(--on-dark);
  font-size: var(--text-5xl);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

.hero--compact .hero__title { font-size: var(--text-4xl); }

.hero__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--on-dark-muted);
  max-width: 34rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;   /* equal heights when one button wraps to two lines */
  gap: var(--space-3);
  /* The extra margin-top has been removed. .hero__content is a grid with a
     20px gap, so adding 8px on top produced a 28px space here and 20px
     everywhere else in the hero — a value that was on no scale and made the
     buttons sit slightly adrift from the paragraph above them. */
  margin-top: var(--space-1);
}

/* Below 26rem two large buttons cannot sit side by side without one of them
   wrapping its label mid-word, so they go full width instead. */
@media (max-width: 26rem) {
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__actions .btn { width: 100%; }
}


/* ── The interlock ─────────────────────────────────────────────────────────
   The signature device. A white panel is anchored to the hero's lower-left,
   and a concave fillet curves the photo into it — so the panel and the
   photograph read as two pieces that fit together rather than one sitting on
   top of the other.

   The concave corner is drawn with a radial-gradient rather than the usual
   box-shadow trick: the gradient antialiases cleanly, needs no offset maths,
   and does not break when the surrounding radius changes.

   Only shown from 62rem up. On narrow screens the panel becomes a plain
   full-width block, because a notch a few pixels wide reads as a rendering
   fault rather than a deliberate shape.
   ----------------------------------------------------------------------- */

.interlock {
  --notch: 2.75rem;
  position: relative;
  display: none;
}

@media (min-width: 62rem) {
  .interlock {
    display: block;
    background: var(--paper);
    border-top-right-radius: var(--radius-2xl);
    padding: var(--space-8) var(--space-10) var(--space-8) 0;
  }

  /* Concave fillet: sits to the right of the panel, along its bottom edge,
     curving the white away into the photograph. */
  .interlock::after {
    content: "";
    position: absolute;
    left: 100%;
    bottom: 0;
    width: var(--notch);
    height: var(--notch);
    background: radial-gradient(
        circle at 100% 100%,
        transparent 0,
        transparent var(--notch),
        var(--paper) calc(var(--notch) + 1px));
    pointer-events: none;
  }

  /* Second fillet above the panel, mirroring the first, so the silhouette
     reads as a continuous S rather than a single clipped corner. */
  .interlock::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    width: var(--notch);
    height: var(--notch);
    background: radial-gradient(
        circle at 0 100%,
        transparent 0,
        transparent var(--notch),
        var(--paper) calc(var(--notch) + 1px));
    pointer-events: none;
  }
}


/* ── Page hero for interior pages ──────────────────────────────────────── */

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  color: var(--on-dark-muted);
  font-size: var(--text-base);
}

.hero__meta-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero__meta-item svg { width: 1rem; height: 1rem; color: var(--warm); }

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--on-dark-faint);
}

.breadcrumbs a { color: var(--on-dark-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--on-dark); text-decoration: underline; }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); opacity: 0.5; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; }


/* ── Footer ────────────────────────────────────────────────────────────────
   Dark, four columns, logo and address on the left — the renc treatment.
   ----------------------------------------------------------------------- */

.site-footer {
  margin: var(--inset);
  margin-top: var(--space-16);
  border-radius: var(--radius-2xl);
  background:
      radial-gradient(90% 120% at 85% 0%, var(--navy-700) 0%, transparent 55%),
      var(--navy-900);
  color: var(--on-dark-muted);
  overflow: hidden;
}

.site-footer__top {
  display: grid;
  gap: var(--stack-md);
  padding-block: var(--band-y) var(--stack-md);
}

@media (min-width: 60rem) {
  .site-footer__top {
    /* Brand + one short links column — see footer.php for why the other
       three columns this used to have (Parking, Company, Your booking)
       are gone. justify-content keeps the pair from stretching edge to
       edge now that there is far less here to fill the row with. */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 14rem);
    justify-content: space-between;
    gap: var(--space-10);
  }
}

.site-footer__brand { display: grid; gap: var(--space-5); align-content: start; }

.site-footer__brand .brand__name { color: var(--on-dark); }
.site-footer__brand .brand__tag  { color: var(--on-dark-faint); }
.site-footer__brand .brand__mark { background: rgba(255,255,255,0.1); color: var(--on-dark); }

.site-footer address {
  font-style: normal;
  line-height: var(--leading-relaxed);
  color: var(--on-dark-muted);
}

.footer-col__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-dark-faint);
  margin-bottom: var(--space-4);
}

.footer-col__list { display: grid; gap: var(--space-3); }

.footer-col__list a {
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: var(--text-base);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-col__list a:hover { color: var(--on-dark); text-decoration: underline; }

.site-footer__bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--on-dark-faint);
}

.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-footer__legal a { color: var(--on-dark-faint); text-decoration: none; }
.site-footer__legal a:hover { color: var(--on-dark); text-decoration: underline; }

.footer-contact { display: grid; gap: var(--space-3); }

.footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--on-dark);
  text-decoration: none;
  font-weight: var(--weight-medium);
}

.footer-contact a:hover { text-decoration: underline; }
.footer-contact svg { width: 1.05rem; height: 1.05rem; color: var(--warm); flex-shrink: 0; }

.social-row { display: flex; gap: var(--space-2); }

.social-row a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark-muted);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.social-row a:hover { background: rgba(255, 255, 255, 0.18); color: var(--on-dark); }
.social-row svg { width: 1.05rem; height: 1.05rem; }