/* ==========================================================================
   PCP — the reservation modal
   --------------------------------------------------------------------------
   The shell only. Everything inside it — every field, label, select, error
   and the submit button — is styled by assets/css/reserve.css, which this
   file is loaded after and never overrides. The form in here is the same
   markup as the one on the reserve page (build/reserve-form.part), so if the
   two ever looked different that would be a bug, not a decision.

   This file must load AFTER site.css and reserve.css.

   Three things it has to win against:

     1. `.grain > *:not(.pcp-cinematic-bg) { position: relative; z-index: 1 }`
        in site.css. The overlay is a direct child of <body class="grain">, so
        that rule would clobber position: fixed and drop the modal into the
        page flow at z-index 1. Beaten below at equal specificity by being
        declared later, and stated explicitly rather than with !important so
        it stays readable.
     2. The sticky site header at z-index 50, and the skip link at 100.
     3. .rsv-panel's own frame — inside the overlay the modal IS the frame, so
        the panel flattens and gives up its border, background and padding.
   ========================================================================== */

/* ---- the overlay ------------------------------------------------------- */

.rsv-modal,
.grain > .rsv-modal {
  position: fixed;
  inset: 0;
  z-index: 120;                      /* over the z-50 header and the z-100 skip link */
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2.5vw, 2rem);
}

/* [hidden] is not enough on a grid container: display: grid would win. */
.rsv-modal[hidden] { display: none; }

.rsv-modal-veil {
  position: absolute;
  inset: 0;
  /* Light enough to read the page through. It was 0.82 over a 10px blur,
     which is two ways of doing the same job and between them left the site
     behind as an unrecognisable smear. The blur is gone outright — it is not
     a substitute for transparency, it just makes the same darkness muddier —
     and the wash is less than half what it was.

     The form loses nothing by it: .rsv-modal-dialog paints its own fully
     opaque ground (#0b0b0c -> #030303), so what is behind the veil has never
     had any bearing on whether the form is readable. */
  background: rgba(2, 2, 3, 0.38);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---- the panel ---------------------------------------------------------- */

.rsv-modal-dialog,
.page-reserve .rsv-page-panel {
  /* The shared surface. The page panel overrides position, sizing and the
     entrance below; everything visual — radius, border, ground, shadow —
     is set once, here, for both. */
  position: relative;
  width: min(56rem, 100%);
  /* dvh so the panel is not cut off by a phone's collapsing address bar; the
     vh line above it is the fallback for anything that does not know dvh. */
  max-height: calc(100vh - 2 * clamp(0.75rem, 2.5vw, 2rem));
  max-height: calc(100dvh - 2 * clamp(0.75rem, 2.5vw, 2rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;                  /* clips the scrolling body to the radius */
  border-radius: 22px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(212, 175, 55, 0.07) 0%, transparent 60%),
    linear-gradient(180deg, #0b0b0c 0%, #060607 58%, #030303 100%);
  /* Layered and gold-tinted rather than one flat drop. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 2px 40px -12px rgba(212, 175, 55, 0.22),
    0 48px 110px -40px rgba(0, 0, 0, 0.95);
}

/* The scope div sits between the dialog and its header/body, so it is the
   dialog's only flex child and the column has to continue THROUGH it. Without
   this it is an ordinary block that grows to its content, the body never
   becomes a scroller, and the dialog's overflow: hidden simply cuts the form
   off at the bottom of the screen with no way to reach the rest of it.

   min-height: 0 on both this and the body: a flex item will not shrink below
   its content's intrinsic height without it, which is the same bug wearing a
   different hat. */
.rsv-modal-scope {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* The form inherits its text baseline from whatever page it is sitting on,
     and the pages do not agree: .page-home sets 17px / white 0.86 for its own
     body copy while every other page, the reserve page included, is on 16px /
     white 0.82. That made the same form render a pixel larger on the home
     page than everywhere else. Pinned here to the reserve page's values so
     the modal is the same form wherever it opens. Only the inherited default
     is set — nothing that carries its own size or colour is touched. */
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================================
   THE SAME PANEL, STANDING STILL
   --------------------------------------------------------------------------
   The reserve page renders build/reserve-panel.part directly as its own
   content — no overlay, no veil, nothing to dismiss. It therefore needs the
   dialog's SURFACE (the measure, the radius, the hairline, the ground) but
   none of its OVERLAY behaviour (fixed position, viewport height cap,
   internal scrolling, the entrance transition).

   The surface values are not restated here. .rsv-modal-dialog above owns
   them and this rule joins that selector list, so the two can never be
   given different numbers by mistake — which is exactly how the page and
   the modal came to look like different designs in the first place.
   ========================================================================== */
/* The page is one centred panel and nothing else, so it fills the space
   under the sticky header and sits in the middle of it. */
.page-reserve .rsv-page {
  display: grid;
  place-items: center;
  /* The header is sticky and ~85px; dvh so a phone's collapsing address bar
     does not leave the panel hanging off the bottom. */
  min-height: calc(100vh - 6rem);
  min-height: calc(100dvh - 6rem);
  padding: clamp(1rem, 3vw, 2.25rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 5vw, 3.5rem);
}

.page-reserve .rsv-page-panel {
  position: relative;
  width: min(56rem, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  /* THE PANEL SCROLLS, NOT THE PAGE — the same as the modal. Capped to what
     is actually on screen, with the header pinned and the form moving
     underneath it, so the composition stays put however long the form gets. */
  max-height: calc(100vh - 9rem);
  max-height: calc(100dvh - 9rem);
  overflow: hidden;
}

/* The scope div sits between the panel and its header/body, so the column
   has to continue through it or the body never becomes a scroller — the
   same trap the modal dialog hit. */
.page-reserve .rsv-page-panel .rsv-modal-scope {
  flex: 1 1 auto;
  min-height: 0;
}

/* Nothing to animate in: it is simply there when the page loads. */
.page-reserve .rsv-page-panel,
.page-reserve .rsv-page-panel .rsv-modal-scope {
  opacity: 1;
  transform: none;
  transition: none;
}

/* A phone gets the full width and a little more height to work with. */
@media (max-width: 639px) {
  .page-reserve .rsv-page {
    min-height: calc(100dvh - 5rem);
    padding: 0.75rem 0.75rem 1.5rem;
  }
  .page-reserve .rsv-page-panel { max-height: calc(100dvh - 7rem); }
}

/* ---- the header --------------------------------------------------------- */

.rsv-modal-head {
  flex: 0 0 auto;                    /* stays while the body scrolls under it */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(0.85rem, 2vw, 1.35rem);
  padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.1rem, 3vw, 2.25rem);
  border-bottom: 1px solid rgba(212, 175, 55, 0.16);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.05), transparent);
}

.rsv-modal-mark {
  /* Larger than the lockup it replaced, and square: this file is 1254x1254
     where the old one was 4.59:1. aspect-ratio with object-fit: contain means
     the box is square and the artwork fills it at its own proportions, so
     nothing is stretched whatever the file turns out to be.

     Centred in its own grid cell on both axes. The header sets
     align-items: start for the heading column, and the old margin-top nudged
     a wide, short lockup down to meet the text — a tall square needs neither,
     it needs to sit in the middle of the space it occupies. */
  width: clamp(6rem, 12vw, 8.5rem);
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  align-self: center;
  justify-self: center;
  margin: 0;
  opacity: 0.95;
}

/* THE HEADER IS SCOPED UNDER .rsv-modal AND .rsv-page-panel ON PURPOSE.

   Both, because the same header now renders in both places and these rules
   must reach it in each. Scoping to .rsv-modal alone left the reserve
   page's copy entirely unstyled — eyebrow, gold title and note all came out
   as plain body text.

   This overlay lands inside a different page every time, and each page styles
   its own typography by body class: .page-home h2 is clamp(2.4rem, 4.4vw,
   3.5rem) at (0,1,1), which beat a bare .rsv-modal-title at (0,1,0) and
   rendered this title at 56px over three lines — a 314px header on a 900px
   screen, with the form squeezed into what was left. The title carries one
   more class than it needs so it also outranks a (0,2,1) page rule; the
   others are lifted for the same reason, before the same thing happens to
   them on a page that styles its paragraphs.

   Not !important: these have to stay overridable from a stylesheet loaded
   after this one. */
.rsv-modal .rsv-modal-eyebrow,
.rsv-page-panel .rsv-modal-eyebrow {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.88);
}

.rsv-modal .rsv-modal-head .rsv-modal-title,
.rsv-page-panel .rsv-modal-head .rsv-modal-title {
  margin: 0.45rem 0 0;
  font-size: clamp(1.3rem, 3.1vw, 1.95rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;           /* tight, as every large heading here is */
  background: linear-gradient(104deg, #F7E7A8 0%, #D4AF37 42%, #F4D98B 72%, #C9A227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rsv-modal .rsv-modal-note,
.rsv-page-panel .rsv-modal-note {
  margin: 0.55rem 0 0;
  max-width: 44ch;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}

/* On a laptop and up the title ran the full width of its column — 615px of
   text in a 615px box, filling it edge to edge with nothing to breathe. It
   fitted on one line, but only just, and read as oversized. Smaller here and
   here only: the phone keeps the clamp's lower end, which is already right.

   Carries the same three classes as the rule it narrows, so it wins by order
   rather than by specificity. */
@media (min-width: 1024px) {
  .rsv-modal .rsv-modal-head .rsv-modal-title,
.rsv-page-panel .rsv-modal-head .rsv-modal-title { font-size: 1.5rem; }
}

/* ---- the close button --------------------------------------------------- */

.rsv-modal-close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;                   /* a 44px target, which is the floor */
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.42);
  background: rgba(10, 10, 11, 0.7);
  color: var(--pcp-gold-light, #F4D98B);
  cursor: pointer;
  transition: transform 320ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)),
              border-color 320ms ease, box-shadow 320ms ease, color 320ms ease;
}
.rsv-modal-close svg { width: 1.15rem; height: 1.15rem; }
.rsv-modal-close:hover {
  color: #fff;
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.2), 0 0 26px -6px rgba(212, 175, 55, 0.6);
  transform: scale(1.05);
}
.rsv-modal-close:focus-visible {
  outline: 2px solid var(--pcp-gold, #D4AF37);
  outline-offset: 3px;
}
.rsv-modal-close:active { transform: scale(0.96); }

/* ---- the scrolling body -------------------------------------------------- */

.rsv-modal-body {
  flex: 1 1 auto;
  min-height: 0;                     /* without this the flex child refuses to shrink */
  overflow-y: auto;
  overscroll-behavior: contain;      /* the page behind must not scroll with it */
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.1rem, 3vw, 2rem) clamp(1.1rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 2.5rem);
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.35) transparent;
}
.rsv-modal-body::-webkit-scrollbar { width: 10px; }
.rsv-modal-body::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: rgba(212, 175, 55, 0.35);
}
.rsv-modal-body:focus { outline: none; }   /* it is only focused to park the caret */

/* The panel is not a panel in here — the modal is already the frame, and two
   nested borders read as a box inside a box. Its contents are untouched. */
.rsv-modal-body .rsv-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* The modal header already says all of this, directly above. The <h2> is kept
   in the accessibility tree rather than removed, because the form points at
   it with aria-labelledby and a form should keep its name. */
.rsv-modal-body .rsv-panel-title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.rsv-modal-body .rsv-panel-note,
.rsv-modal-body .rsv-panel-eyebrow { display: none; }

/* ---- opening ------------------------------------------------------------- */

.rsv-modal-veil {
  opacity: 0;
  transition: opacity 260ms ease;
}
.rsv-modal-dialog {
  opacity: 0;
  /* transform and opacity only — nothing here lays out twice. */
  transform: translateY(14px) scale(0.985);
  transition: opacity 280ms ease,
              transform 420ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.rsv-modal.is-open .rsv-modal-veil { opacity: 1; }
.rsv-modal.is-open .rsv-modal-dialog { opacity: 1; transform: none; }

/* ---- phones -------------------------------------------------------------- */

@media (max-width: 639px) {
  .rsv-modal-head {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
  }
  /* The lockup is decoration and the first thing to go when width is short;
     the title carries the name on its own. */
  .rsv-modal-mark { display: none; }
  .rsv-modal .rsv-modal-note,
.rsv-page-panel .rsv-modal-note { font-size: 0.8rem; }
  .rsv-modal-dialog { border-radius: 18px; }
}

/* ---- motion off ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rsv-modal-veil,
  .rsv-modal-dialog { transition: none; }
  .rsv-modal-dialog { transform: none; }
  .rsv-modal-close { transition: none; }
  .rsv-modal-close:hover,
  .rsv-modal-close:active { transform: none; }
}

/* ---- the page behind ------------------------------------------------------
   Scrolling is frozen on <html> while the modal is open. The padding keeps the
   page from jumping sideways by the width of the scrollbar it just lost;
   assets/js/reserve-modal.js measures that width and sets the property. */
html.rsv-modal-open {
  overflow: hidden;
  padding-right: var(--rsv-scrollbar, 0px);
}