/*
  RMC interior page layouts. Requires tokens.css and components.css.
  Used by the generated pages (destinations, resorts, drivers, driver application)
  and the legal pages. The homepage loads it too and keeps only its own small layout block inline.
*/

html { scroll-behavior: smooth; }
section, [id] { scroll-margin-top: 6rem; }
img { max-width: 100%; }

/* Page hero: shorter version of .hero, photo optional (navy gradient fallback) */
.hero--page { min-height: 66vh; align-items: center; background: linear-gradient(160deg, var(--color-navy-800) 0%, var(--color-navy-900) 70%); }
.hero--short { min-height: 48vh; }
.hero--page .hero__content { padding-top: 9rem; padding-bottom: 4.5rem; }
.hero--page .hero__content > * { max-width: 38rem; }
.hero--page .hero__content > h1 { max-width: 46rem; }
.hero--page::after {
  background:
    linear-gradient(90deg, rgba(38, 38, 38, 0.94) 0%, rgba(38, 38, 38, 0.9) 48%, rgba(38, 38, 38, 0.3) 85%),
    linear-gradient(to top, rgba(38, 38, 38, 0.6) 0%, rgba(38, 38, 38, 0) 40%);
}
@media (max-width: 860px) {
  .hero--page::after { background: linear-gradient(to top, rgba(38, 38, 38, 0.95) 30%, rgba(38, 38, 38, 0.75) 100%); }
}
.hero--page h1 { font-size: clamp(2.5rem, 5.4vw, 4.2rem); margin-bottom: 0; }
.hero__tagline { margin-top: var(--space-5); font-family: var(--font-display); font-style: normal; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.3; color: var(--color-ember-500); }
.hero--page .lead { margin-top: var(--space-5); margin-bottom: 0; }
.hero--page .actions { margin-top: var(--space-8); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Trip at a glance */
.glance { background: var(--color-navy-800); padding: var(--space-8) 0; }
.glance__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.glance__item { border-left: 1px solid var(--border); padding-left: var(--space-5); }
.glance__item:first-child { border-left: 0; padding-left: 0; }
.glance__item .label { margin-bottom: var(--space-2); }
.glance__value { color: var(--ink); font-size: 0.98rem; line-height: 1.45; }

/* About + stay card */
.about-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
.about-grid h2 { margin-bottom: var(--space-6); }
.about-grid p { color: var(--ink-muted); }
.about-grid p + p { margin-top: var(--space-4); }
.stay-card h3 { margin-bottom: var(--space-4); }
.stay-card ul { list-style: none; padding: 0; margin: 0; }
.stay-card li { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.stay-card li:first-child { border-top: 0; padding-top: 0; }
.stay-card li strong { display: block; font-weight: 600; color: var(--ink); }
.stay-card li span { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--ink-muted); }

/* Photo band */
.band { padding-bottom: var(--section-y); }
.band__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.band__grid.is-solo { grid-template-columns: 1fr; }
.band__grid.is-solo figure { aspect-ratio: 21 / 9; }
.band figure { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-navy-800); box-shadow: var(--shadow-card); }
.band figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Three-up card grids (notes, steps, driver props) */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-10); }
.fine { margin-top: var(--space-8); font-size: var(--text-sm); color: var(--ink-muted); max-width: 40rem; }

/* FAQ with heading beside */
.faq-split { display: grid; grid-template-columns: 2fr 3fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }

/* Pill links */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.pill { display: inline-block; padding: 0.55rem 1.2rem; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-raised); color: var(--ink); font-size: var(--text-sm); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.pill:hover { background: var(--color-navy-800); border-color: var(--color-navy-800); color: var(--color-stone-100); }

/* Destinations hub */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.hub-grid .dest-card { height: 420px; }
.dest-card__teaser { margin-top: var(--space-2); font-size: var(--text-sm); color: rgba(239, 239, 239, 0.8); line-height: 1.55; }
.dest-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ember-500); }
.center { text-align: center; }
.center .section-head { margin-inline: auto; }
.center p { margin-inline: auto; }

/* Ride / interest form panel (shared with the homepage) */
.find-ride { position: relative; overflow: hidden; }
.find-ride > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.25; }
.find-ride .container { position: relative; z-index: 1; }
.ride-panel { max-width: 40rem; margin: 0 auto; text-align: center; }
.ride-panel > p { color: var(--ink-muted); margin-top: var(--space-4); }
.ride-panel form { margin-top: var(--space-10); text-align: left; background: rgba(38, 38, 38, 0.72); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); backdrop-filter: blur(10px); }
.fine-print { margin-top: var(--space-5); font-size: var(--text-sm); color: var(--ink-muted); }

/* Driver application */
.app-card { max-width: 46rem; margin: 0 auto; padding: var(--space-10); }
.app-form { display: grid; gap: var(--space-6); }
.app-form fieldset { border: 0; padding: 0; margin: 0; }
.app-form legend { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); padding: 0; }
.app-note { font-size: var(--text-sm); color: var(--ink-muted); }
.app-form .btn { justify-self: start; }

/* Company and driver applications (driver onboarding, stage 4) */
.app-section { display: grid; gap: var(--space-5); padding-top: var(--space-8); border-top: 1px solid var(--border); }
.app-form > .app-section:first-of-type { padding-top: 0; border-top: 0; }
.app-form .app-section > legend { float: left; width: 100%; margin: 0 0 var(--space-5); padding: 0; text-transform: none; letter-spacing: 0; }
.app-section > legend h2 { font-size: var(--text-xl); line-height: var(--leading-snug); }
.app-section > legend + * { clear: both; }
.app-hint { display: block; margin-top: 4px; font-size: var(--text-sm); color: var(--ink-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.app-checks { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.app-checks--stack { flex-direction: column; }
.app-check { display: flex; align-items: flex-start; gap: var(--space-3); font-size: 0.95rem; line-height: 1.5; color: var(--ink); cursor: pointer; }
.app-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--color-ember-600); }
.form-grid--3 { grid-template-columns: repeat(3, 1fr); align-items: end; }
.link-btn { background: none; border: 0; padding: 4px 0; font: inherit; font-size: var(--text-sm); color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.field textarea { resize: vertical; min-height: 5rem; }
.app-done { padding: var(--space-8) 0; }

/* Legal pages */
.legal { padding: 9rem 0 var(--section-y); }
.legal .container { max-width: 50rem; }
.legal h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.legal .updated { margin-top: var(--space-4); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); }
.legal .content { margin-top: var(--space-12); }
.legal .content > p, .legal .content li { color: var(--ink-muted); }
.legal .content > p + p { margin-top: var(--space-4); }
.legal .content h2 { font-size: 1.5rem; margin: var(--space-12) 0 var(--space-4); }
.legal .content ul { padding-left: 1.25rem; margin: var(--space-4) 0; }
.legal .content li + li { margin-top: var(--space-2); }
.legal .content a { color: var(--accent); }
.callout { margin-top: var(--space-10); padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: var(--surface-alt); border: 1px solid var(--border); font-size: 0.95rem; color: var(--ink-muted); }
.callout--warn { margin: var(--space-5) 0 var(--space-10); background: rgba(191, 215, 48, 0.12); border-color: rgba(90, 102, 16, 0.3); border-left: 3px solid var(--color-ember-600); color: var(--ink); }
.back-link { color: var(--color-stone-100); text-decoration: none; font-size: 0.85rem; padding: 8px 12px; border-radius: 9px; white-space: nowrap; }
.back-link:hover { background: rgba(255, 255, 255, 0.09); }

/* Footer layout (shared with the homepage) */
.foot { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: space-between; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.foot-note { width: 100%; padding-top: var(--space-6); border-top: 1px solid rgba(239, 239, 239, 0.08); font-size: var(--text-xs); }
/* Broker statement under the footer line (P5): same size, no second rule. */
.foot-note--broker { padding-top: var(--space-2); border-top: 0; opacity: 0.8; }
.foot-broker { font-size: var(--text-xs); opacity: 0.8; padding-top: var(--space-3); }

@media (max-width: 960px) {
  .glance__grid { grid-template-columns: 1fr 1fr; }
  .glance__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .about-grid, .grid-3, .faq-split { grid-template-columns: 1fr; }
  .faq-split .section-head { margin-bottom: 0; }
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .band__grid, .hub-grid { grid-template-columns: 1fr; }
  .band__grid.is-solo figure { aspect-ratio: 3 / 2; }
  .app-card { padding: var(--space-6); }
  .form-grid--3 { grid-template-columns: 1fr 1fr; }
  .ride-panel form { padding: var(--space-5); }
}

/* ---------- Admin pages (/admin) and onboarding wizard (/onboard) ---------- */
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.admin-bar h1 { font-size: var(--text-2xl); }
.admin-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.admin-tabs a { padding: 0.5rem 0.9rem; border-radius: var(--radius-xs); font-size: var(--text-sm); font-weight: 600; color: var(--ink); text-decoration: none; border: 1px solid var(--border); }
.admin-tabs a[aria-current="page"] { background: var(--color-navy-800); color: var(--color-stone-100); border-color: var(--color-navy-800); }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-4); margin-bottom: var(--space-10); }
.admin-tile { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-5); }
.admin-tile .stat__value { color: var(--ink); }
.admin-tile p { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-muted); }
.admin-panel { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-6); margin-bottom: var(--space-8); }
.admin-panel h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.admin-table th { text-align: left; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; padding: 0 var(--space-3) var(--space-2) 0; }
.admin-table td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-top: 1px solid var(--border); vertical-align: top; }
.admin-table a { color: var(--color-ember-text); font-weight: 600; }
.admin-scroll { overflow-x: auto; }
.admin-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; background: var(--surface); border: 1px solid var(--border); white-space: nowrap; }
.admin-pill--alert { background: #fde9d9; border-color: #f2b183; }
.admin-dl { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.admin-dl dt { color: var(--ink-muted); }
.admin-dl dd { margin: 0; overflow-wrap: anywhere; }
.admin-link { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.admin-link input { flex: 1 1 18rem; font: inherit; font-size: var(--text-sm); padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); }
.admin-empty { color: var(--ink-muted); font-size: var(--text-sm); }
.wiz-steps { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-8); counter-reset: wiz; }
.wiz-steps li { counter-increment: wiz; font-size: var(--text-sm); font-weight: 600; color: var(--ink-muted); padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); }
.wiz-steps li::before { content: counter(wiz) " · "; }
.wiz-steps li[aria-current="step"] { color: var(--color-navy-900); background: var(--color-ember-600); border-color: var(--color-ember-600); }
.wiz-steps li.is-done { color: var(--ink); }
.wiz-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-5); display: grid; gap: var(--space-4); }
.wiz-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.wiz-card__head h3 { font-size: var(--text-lg); }
.wiz-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-4); }
.wiz-file { font-size: var(--text-sm); }
.wiz-file__name { display: block; margin-top: 4px; color: var(--color-ember-text); font-weight: 600; overflow-wrap: anywhere; }
.wiz-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.wiz-agreement { height: min(70vh, 44rem); overflow-y: auto; padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); font-size: var(--text-sm); }
.wiz-agreement p { line-height: 1.65; }
.wiz-agreement p + p { margin-top: var(--space-3); }
.wiz-checks { margin-top: var(--space-4); }
.wiz-checks__label { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2); }
.wiz-contact-driver { margin-top: var(--space-4); }
.wiz-agreement h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.wiz-agreement h4 { font-size: var(--text-base); margin: var(--space-5) 0 var(--space-2); }
.wiz-agreement:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wiz-review { display: grid; gap: var(--space-5); }
.wiz-saved { font-size: var(--text-sm); color: var(--color-ember-text); font-weight: 600; }
.btn-link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-ember-text); cursor: pointer; text-decoration: underline; }
@media (max-width: 640px) {
  .admin-dl { grid-template-columns: 1fr; }
  .admin-dl dd { margin-bottom: var(--space-2); }
}

/* Onboarding wizard: fields in a row share label, input and hint tracks (subgrid), so inputs line up
   even when only one side has a hint or a label wraps. */
[data-onboard] .form-grid { align-items: start; row-gap: var(--space-5); }
[data-onboard] .form-grid > .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; }
[data-onboard] .form-grid > .field > label { align-self: end; }
[data-onboard] .field { align-content: start; }
[data-onboard] .field input:not([type=checkbox]):not([type=file]), [data-onboard] .field select { height: 3.1rem; }
[data-onboard] .field input[type=file] { font-size: var(--text-sm); padding: 0.6rem; }
/* Field outlines dark enough to find at a glance: #8a9097 is 3.2:1 on the white card (WCAG asks 3:1 for
   input borders); the shared --border is about 1.2:1. Focus keeps the deep-lime ring. */
[data-onboard] .field input:not([type=checkbox]), [data-onboard] .field select, [data-onboard] .field textarea { border-color: #8a9097; }
[data-onboard] .field input:not([type=checkbox]):focus, [data-onboard] .field select:focus, [data-onboard] .field textarea:focus { border-color: var(--focus); }
/* Errors: red on the light card (the shared .modal__error peach is for the dark modal), linked to the field. */
[data-onboard] .modal__error { color: #b42318; font-weight: 600; font-size: var(--text-sm); padding: var(--space-3) var(--space-4); border: 1px solid rgba(180, 35, 24, 0.35); border-radius: var(--radius-xs); background: rgba(180, 35, 24, 0.06); }
[data-onboard] .modal__error a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.wiz-error__go { margin-left: var(--space-2); font-weight: 500; white-space: nowrap; }
.wiz-error__go::after { content: " \2192"; }
[data-onboard] [aria-invalid="true"] { border-color: #b42318 !important; box-shadow: 0 0 0 1px #b42318; }
/* Dates: full width on iOS (Safari gives date inputs their own minimum width), left aligned, with a
   calendar icon; tapping anywhere on the field opens the picker (onboard.js calls showPicker()). */
[data-onboard] .field input[type=date] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%;
  box-sizing: border-box; position: relative; text-align: left; cursor: pointer; padding-right: 2.75rem;
  background: var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23363F48' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 0.9rem center;
}
[data-onboard] .field input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
[data-onboard] .field input[type=date]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; }
.wiz-count { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--space-2); }
.wiz-flash { display: flex; gap: var(--space-2); align-items: baseline; margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xs); background: rgba(191, 215, 48, 0.18); color: var(--ink); font-weight: 600; font-size: var(--text-sm); }
.wiz-flash::before { content: "\2713"; color: var(--color-ember-text); }
.wiz-intro { padding: var(--space-5); border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-xs); font-size: 0.95rem; }
.wiz-intro__label { margin-top: var(--space-3); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.wiz-intro ul { margin: var(--space-2) 0 0; padding-left: 1.2rem; display: grid; gap: 4px; }
.wiz-next { margin: var(--space-4) 0 var(--space-5); padding-left: 1.2rem; display: grid; gap: var(--space-2); text-align: left; }

/* Step 5, Agreement as its own step (2026-11-05): full text on the page, a section index, a reading bar pinned
   to the bottom of the screen, and the accept panel after the text. */
.wiz-toc { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-xs); background: var(--surface); font-size: var(--text-sm); }
.wiz-toc summary { font-weight: 600; cursor: pointer; }
.wiz-toc ol { margin: var(--space-3) 0 0; padding-left: 1.25rem; columns: 2 16rem; column-gap: var(--space-6); }
.wiz-toc li { margin-bottom: var(--space-1); break-inside: avoid; }
.wiz-toc a { color: var(--ink); text-underline-offset: 2px; }
.wiz-agreement--page { height: auto; max-height: none; overflow: visible; font-size: var(--text-base); padding: var(--space-6) var(--space-6) var(--space-4); }
.wiz-agreement--page h4 { scroll-margin-top: 6rem; }
.wiz-agreement--page h4:focus { outline: none; }
.wiz-agreement__end { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--ink-muted); }
.wiz-readbar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; align-items: center; margin: var(--space-4) calc(-1 * var(--space-2)) 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-xs); background: var(--color-navy-900, #262626); color: #EFEFEF; font-size: var(--text-sm); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12); }
.wiz-readbar a { color: var(--color-ember-500, #BFD730); font-weight: 600; text-underline-offset: 2px; }
.wiz-readbar.is-done { background: rgba(191, 215, 48, 0.18); color: var(--ink); box-shadow: none; position: static; }
.wiz-readbar.is-done a { color: var(--ink); }
.wiz-accept { margin-top: var(--space-6); }
.wiz-accept input[type=checkbox]:disabled + span { opacity: 0.55; }
.wiz-accurate { margin-top: var(--space-5); }

/* FQ3 vehicle policy box and FQ1 guest contact question (2026-11-05). */
.wiz-vehicle-policy { margin-top: var(--space-4); }
.wiz-guest-contact { margin: 0 0 var(--space-5); padding: 0; border: 0; }
.wiz-guest-contact .app-check span { font-size: var(--text-sm); }

/* The important notice above agreement sections 12 and 13 (Phil, 2026-11-06). */
.wiz-agreement__notice { margin: var(--space-6) 0 var(--space-2); padding: var(--space-4); border: 1px solid var(--ink); border-radius: var(--radius-xs); }