/* =========================================================
   Request an Invite page — "request-invite.html"
   Built from Figma nodes: Desktop 174:2874, Tablet 174:2974,
   Mobile 174:3074. A single-step "request an invite" form —
   distinct from and simpler than reserve.html's full reservation
   flow (no held-by radios, no agreement checkbox, no price summary).

   Reuses css/style.css for shared tokens (:root vars, fonts, nav,
   footer, .btn, .wrap, .logo__crop) — this file only covers content
   specific to this page. Field-card / row-layout patterns (ri-row,
   ri-field) are intentionally the same recipe as reserve.css's
   r2-row/r2-field (including the align-items:stretch fix that page
   needed in single-column mode) since the two pages share that exact
   component visually, just with a different field set.

   Section rhythm verified from Figma's own root-frame gap values:
   Desktop/Tablet use 48px between top-level sections, Mobile uses
   24px — a real, deliberate difference (not the same flat number at
   every breakpoint the way reserve.css's page turned out to be), so
   .ri-section's padding-top has an explicit Mobile override below.
   Footer padding-top is that same section gap PLUS the footer's own
   72px internal offset baked into one value, same technique reserve.css
   used (144 = 72+72 there; here it's 120 = 48+72 Desktop/Tablet,
   96 = 24+72 Mobile).
   ========================================================= */

.reserve-nav .top-nav__inner { padding-top: 24px; padding-bottom: 24px; }
.ri-main { padding-bottom: 0; }

.ri-hero-section { padding-top: 48px; }
.ri-section { padding-top: 48px; }

/* ---------- Hero ---------- */
.ri-hero {
  position: relative;
  height: 533.9px;
  border-radius: 4px;
  overflow: hidden;
}
.ri-hero__media { position: absolute; inset: 0; }
.ri-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; display: block; }
.ri-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.45));
}
.ri-hero__content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: center;
  padding: 0 24px;
}
.ri-hero__logo { margin: 0 auto; }
.ri-hero__title {
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2.4px;
  color: var(--white);
  margin: 0;
}
.ri-hero__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ri-hero__nav span {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.ri-hero__sep { width: 3px; height: 6px; display: block; }

/* ---------- Row layout: label/heading column + field column ---------- */
.ri-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.ri-row__head, .ri-row__content {
  flex: 1 0 0;
  min-width: 0;
}
.ri-row__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* The 240px gutter (Desktop only — verified via get_design_context
   174:2931, "Left Text Container") belongs on the text block INSIDE the
   head column, not on the flex column itself. Putting it on .ri-row__head
   directly (a flex:1 0 0 item) fed padding into the browser's flex-grow
   distribution and stole 240px from the sibling .ri-row__content column
   — confirmed via a bounding-box check (816px/576px split instead of the
   correct even 696px/696px) and by removing the padding, which restored
   the even split immediately. max-width on the text achieves the same
   visual gutter without touching either column's own flex sizing. */
.ri-details__head .ri-row__title,
.ri-details__head .ri-row__sub { max-width: 456px; }
/* Desktop-only cap (verified 174:2931). Tablet's own frame (174:3031)
   uses a much smaller 41px gutter on a full-width stacked column, and
   Mobile's (174:3133) is plain w-full with no gutter at all — so this
   cap is relaxed back to full width below 1464px rather than carrying
   the Desktop-specific 456px value into a layout it was never meant for. */
.ri-row__title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -2.4px;
  color: var(--white);
  margin: 0;
}
/* Questions section only (verified get_design_context 174:2956, and
   visually via get_screenshot of that node): "Feel free to reach out..."
   is NOT the small 15px .ri-row__sub treatment used under the Details
   heading — Figma puts BOTH "Questions?" and this line inside one
   container that carries font-bold/text-40px/tracking on the whole
   thing, so this line renders at the exact same large size as the
   title, just in the muted color. Reuses .ri-row__title (and its
   Tablet/Mobile size overrides below) for size/weight and only
   overrides color here — previously this used .ri-row__sub, which
   rendered it far too small. */
.ri-questions__sub { color: var(--muted); }
.ri-row__sub {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.12;
  color: var(--muted);
  margin: 0;
}
.ri-row__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------- Field cards ---------- */
.ri-field {
  background: var(--card-bg);
  border-radius: 4px;
  height: 72px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.ri-field label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, 0.25);
}
.ri-field input {
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--white);
}
.ri-field input::placeholder { color: var(--muted); font-weight: 500; }

.ri-consent {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.14px;
  color: var(--muted);
  margin: 0;
  padding-right: 48px;
}

.ri-submit {
  margin-top: 24px;
  align-self: flex-start;
}

/* ---------- Divider + Questions ---------- */
.ri-divider { border: none; border-top: 1px solid var(--border-soft); margin: 0; }
.ri-questions {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  padding-top: 48px;
}
.ri-questions__text { flex: 1 0 0; min-width: 0; }
.ri-questions__btn { padding-left: 32px; padding-right: 32px; flex-shrink: 0; }

/* ---------- Footer ---------- */
.reserve-footer.site-footer { padding-top: 120px; padding-bottom: 40px; }

/* =========================================================
   TABLET / MOBILE (<=1463px) — single column throughout, same
   800px-reference-frame cap and align-items fix reserve.css needed.
   ========================================================= */
@media (max-width: 1463px) {
  .wrap { max-width: 800px; }
  .ri-hero { height: 471px; }
  .ri-row { flex-direction: column; align-items: stretch; gap: 24px; }
  .ri-details__head .ri-row__title,
  .ri-details__head .ri-row__sub { max-width: 100%; }
  .ri-consent { padding-right: 48px; }

  /* Scaled-down hero logo crop: the base .logo__crop / img rule (from
     style.css) is a fixed 146x32 crop window at fixed pixel offsets
     into a 460x340 source artboard — verified against Figma (Tablet
     node shows 110x24, Mobile 109x24, both ~0.75x the Desktop 146x32
     mark). Scaling via CSS transform would shift which region of the
     source artboard is visible (transform scales around a box already
     positioned by its own top/left offsets), so instead every number
     here — container size AND image position/size — is proportionally
     recalculated at the same 0.75 factor, reproducing an exact scaled
     copy of the same crop rather than a shifted one. */
  .ri-hero__logo { width: 109.5px; height: 24px; }
  .ri-hero__logo img { top: -109.5px; left: -117.75px; width: 345px; height: 255px; }

  .ri-hero__title { font-size: 56px; letter-spacing: -1px; }
}

@media (max-width: 1013px) {
  .ri-hero-section { padding-top: 24px; }
  .ri-section { padding-top: 24px; }
  .ri-hero { height: 552px; }
  .ri-hero__title { font-size: 40px; letter-spacing: -1px; }

  .ri-row__title { font-size: 24px; letter-spacing: -1px; }
  .ri-row__sub { font-size: 14px; }
  .ri-field label, .ri-field input { font-size: 14px; }
  .ri-consent { padding-right: 34px; }
  .ri-submit { width: 100%; }

  .ri-questions { flex-direction: column; align-items: flex-start; gap: 32px; padding-top: 40px; }
  /* No separate override needed here for the "Feel free..." line — it
     now shares the .ri-row__title class, so the base .ri-row__title
     override two rules up already covers it. */
  .ri-questions__btn { width: 100%; }

  .reserve-footer.site-footer { padding-top: 96px; }
  .reserve-footer .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---------- Turnstile + submit status ---------- */
.ri-turnstile { margin: 0; }
.ri-turnstile:empty { display: none; }
.ri-status {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white);
}
.ri-status--error { color: #e07a7a; }