/* ==========================================================================
   IT'S HIM — RESERVATIONS  ("The Reservation List")
   A clean, elegant reservation page. The FORM is the centrepiece: softly-lit
   fields on a floating panel, sat on the shared candlelit ambient room
   (flowing smoke + amber edge lighting). A FEW moody, feathered photos float
   and blend around/behind the form as pure atmosphere — restrained so the
   form always stays clearly readable on top.

   Layered on top of styles.css (palette, type system, nav, footer, .btn-gold)
   and the reusable ambient background (ambient.css / ambient.js).

   Type system is identical to the other pages:
   THE·[script]·CAP :  .t-the / .t-cap = Italiana caps · .t-script = Parisienne

   NOTE: the form is a VISUAL PLACEHOLDER — it does not submit anywhere yet.
   It will be wired to Square Appointments later.
   ========================================================================== */

.reservations-page { background: var(--bg); }

/* Page container — sits above the fixed ambient layer (z-index:-1). */
.rz {
  position: relative;
  z-index: 5;
}

/* One centred stage that holds the atmosphere photos + the form panel. */
.rz-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: clip;                 /* photos bleed to the edges; no page overflow */
  padding: clamp(116px, 16vh, 184px) clamp(22px, 6vw, 96px) clamp(72px, 12vh, 132px);
}

/* ==========================================================================
   ATMOSPHERE — a FEW moody photos, feathered softly into the dark so they have
   no hard edges and never compete with the form. Pushed toward the stage edges
   and sat BEHIND the panel (low z-index). Restrained on purpose.
   ========================================================================== */
.rz-atmo {
  position: absolute;
  z-index: 1;
  margin: 0;
  line-height: 0;
  pointer-events: none;
}
.rz-atmo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.66) saturate(1.02) contrast(1.05);
  /* Feather every side to nothing — a soft ellipse core + long linear edge fades,
     so each photo dissolves into the ambient with no rectangle anywhere.
     Same technique used on the menu / story photos site-wide. */
  -webkit-mask-image:
    radial-gradient(64% 60% at 50% 48%, #000 26%, rgba(0,0,0,0.32) 60%, transparent 86%),
    linear-gradient(to right,  transparent 0%, #000 26%, #000 74%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(64% 60% at 50% 48%, #000 26%, rgba(0,0,0,0.32) 60%, transparent 86%),
    linear-gradient(to right,  transparent 0%, #000 26%, #000 74%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-composite: intersect;
}

/* The front-of-space photo drifts high-left, behind the title. */
.rz-atmo--space {
  top: clamp(-30px, -2vw, 10px); left: -6vw;
  width: clamp(300px, 34vw, 540px); height: clamp(300px, 34vw, 520px);
}
/* The drink eases in on the right, mid-height — the tallest, most vertical photo. */
.rz-atmo--drink {
  top: 50%; right: -7vw; transform: translateY(-52%);
  width: clamp(300px, 30vw, 500px); height: clamp(420px, 50vw, 760px);
}
/* The food settles low-left, below/behind the form's lower half. */
.rz-atmo--food {
  bottom: -6vw; left: -5vw;
  width: clamp(300px, 32vw, 520px); height: clamp(360px, 40vw, 640px);
}

/* ==========================================================================
   THE PANEL — the centrepiece. Title + slogan sit above the form; the whole
   thing floats on the room with a soft radial scrim behind it so the fields
   stay clearly readable even where a photo drifts behind them.
   ========================================================================== */
.rz-panel {
  position: relative;
  z-index: 3;
  width: min(94vw, 640px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Legibility scrim — a warm dark pool that lifts the panel off the photos
   without reading as a hard card. */
.rz-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: clamp(-40px, -5vh, -30px) clamp(-52px, -8vw, -34px);
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%,
    rgba(14,9,8,0.86) 0%, rgba(14,9,8,0.66) 46%, rgba(14,9,8,0.28) 72%, var(--bg-0) 90%);
}

/* ---- Heading block --------------------------------------------------------- */
.rz-head {
  text-align: center;
  margin-bottom: clamp(28px, 4.4vh, 48px);
}
.rz-eyebrow {
  margin: 0 0 clamp(12px, 1.8vh, 20px);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: 0.42em;               /* optical balance for the tracking */
}
/* Title — "THE Reservation LIST": THE/LIST = Italiana caps · Reservation = Parisienne.
   Same lockup faces / behaviour as .st-title / .mn-title / .panel__name. */
.rz-title {
  margin: 0;
  font-family: var(--font-caps);
  font-weight: 400;
  font-size: clamp(40px, 6.6vw, 84px);
  line-height: 0.96;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 6px 40px rgba(0,0,0,0.92), 0 2px 10px rgba(0,0,0,0.75);
}
.rz-title .t-the,
.rz-title .t-cap {
  font-family: var(--font-caps);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.rz-title .t-script {
  font-family: var(--font-script);
  font-size: 1.42em;                  /* the cursive middle word reads larger */
  text-transform: none;
  letter-spacing: 0.005em;
  color: var(--ink);
  padding: 0 0.04em;
}
.rz-slogan {
  margin: clamp(12px, 1.8vh, 20px) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(21px, 3vw, 34px);
  line-height: 1.05;
  color: var(--gold-bright);
  text-shadow: 0 2px 30px rgba(0,0,0,0.85);
}
.rz-intro {
  margin: clamp(12px, 1.8vh, 18px) auto 0;
  max-width: 46ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 15.5px);
  line-height: 1.76;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-shadow: 0 1px 26px rgba(0,0,0,0.9);
}

/* ==========================================================================
   THE FORM — softly-lit fields with cream text + gold accents. Comfortable
   spacing; a clean two-column grid that collapses to one column when narrow.
   ========================================================================== */
.rz-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rz-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 22px) clamp(16px, 2.4vw, 26px);
}
.rz-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;                       /* let fields shrink inside the grid */
}
/* Date + Time share one grid cell as a nested pair. */
.rz-field--split {
  flex-direction: row;
  gap: clamp(12px, 1.6vw, 18px);
}
.rz-field--split > .rz-field { flex: 1; }
/* Special requests spans the full width. */
.rz-field--full { grid-column: 1 / -1; }

.rz-field label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 0.1em;
}

/* Shared control skin — subtle bordered, softly-lit dark fields with cream text.
   A thin gold-tinted underline-weight border, warm inner glow, gold focus. */
.rz-form input,
.rz-form select,
.rz-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;                     /* 16px min so iOS Safari never zooms on focus */
  letter-spacing: 0.02em;
  color: var(--ink);
  background: rgba(255, 246, 234, 0.035);
  border: 1px solid rgba(199, 154, 84, 0.28);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: inset 0 1px 12px rgba(0, 0, 0, 0.34);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}
.rz-form textarea {
  resize: vertical;
  min-height: 108px;
  line-height: 1.6;
}
.rz-form input::placeholder,
.rz-form textarea::placeholder {
  color: rgba(154, 141, 127, 0.72);
  font-weight: 300;
}
.rz-form input:hover,
.rz-form select:hover,
.rz-form textarea:hover {
  border-color: rgba(199, 154, 84, 0.5);
  background: rgba(255, 246, 234, 0.05);
}
.rz-form input:focus,
.rz-form select:focus,
.rz-form textarea:focus {
  outline: none;
  border-color: var(--gold-bright);
  background: rgba(255, 246, 234, 0.06);
  box-shadow:
    inset 0 1px 12px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(230, 192, 121, 0.35),
    0 0 22px rgba(199, 154, 84, 0.18);
}

/* Custom select — hide the native arrow, draw a warm gold chevron. */
.rz-select-wrap { position: relative; }
.rz-select-wrap::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.rz-form select { padding-right: 40px; cursor: pointer; }
.rz-form select option {
  color: var(--ink);
  background: #1a110d;               /* dark dropdown to match the room */
}

/* Date / time pickers — keep the native control usable but tint the icon warm. */
.rz-form input[type="date"],
.rz-form input[type="time"] { cursor: text; }
.rz-form input[type="date"]::-webkit-calendar-picker-indicator,
.rz-form input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(78%) sepia(24%) saturate(560%) hue-rotate(2deg) brightness(92%);
  cursor: pointer;
  opacity: 0.85;
}

/* ---- Submit — the shared gold-fill pill, sized generously as the primary CTA -- */
.rz-submit {
  margin-top: clamp(26px, 3.6vh, 40px);
  padding: 16px 44px;
  font-size: 13px;
  letter-spacing: 0.22em;
}
.rz-note {
  margin: clamp(16px, 2vh, 22px) 0 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  opacity: 0.72;
  text-align: center;
}

/* ==========================================================================
   Scroll-driven entrance — the panel surfaces gently out of the ambient, same
   technique as the other pages (pure CSS, animation-timeline: view()).
   ========================================================================== */
@keyframes rz-rise {
  0%   { opacity: 0; transform: translateY(40px); filter: blur(5px); animation-timing-function: cubic-bezier(0.16,0.84,0.24,1); }
  30%  { opacity: 1; transform: translateY(0);    filter: blur(0); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes rz-atmo-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rz-panel { animation: rz-rise both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    .rz-atmo  { animation: rz-atmo-in both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}

/* ==========================================================================
   Responsive — the panel is already a centred column, so it holds down to
   mobile. Below 720px the grid goes one-per-row and the atmosphere photos are
   dialled back so they never sit under the form text.
   ========================================================================== */
@media (max-width: 720px) {
  .rz-grid { grid-template-columns: 1fr; }
  .rz-field--split { flex-direction: row; }   /* date + time stay side by side */

  .rz-title { white-space: normal; font-size: clamp(38px, 12vw, 66px); line-height: 1.02; }

  /* Keep only a whisper of atmosphere on small screens — smaller + dimmer,
     pushed further into the margins so the form stays clean. */
  .rz-atmo { opacity: 0.42; }
  .rz-atmo--space { width: 62vw; height: 40vh; left: -24vw; top: -2vh; }
  .rz-atmo--drink { width: 60vw; height: 50vh; right: -26vw; }
  .rz-atmo--food  { width: 62vw; height: 42vh; left: -26vw; bottom: -2vh; }
}

@media (max-width: 420px) {
  .rz-field--split { flex-direction: column; }  /* very narrow: stack date over time */
}

/* Reservation submit status (set by reservations-api.js) */
.rz-status {
  margin: 14px 0 0;
  min-height: 1.2em;
  text-align: center;
  font-family: var(--font-body, sans-serif);
  font-size: 0.95rem;
  line-height: 1.4;
}
.rz-status--ok { color: var(--gold-bright, #E6C079); }
.rz-status--error { color: #E4A6A0; }
.rz-status--pending { color: var(--ink, #EFE7DC); opacity: 0.75; }