/**
 * Hero trip form (.qr) — ported from the Home Page - Trip Form Prototype.
 *
 * Every colour is a token or a color-mix over one (rule 2). The prototype's
 * one raw rgba — the hero gradient shim — is not ported: parts/hero.php already
 * lays its own scrim over the background image, so the glass panel only has to
 * hold its own contrast, not re-darken the photograph.
 *
 * The panel is translucent over the hero image. Legibility therefore depends on
 * the scrim behind it; if the hero image is ever swapped for something pale,
 * check the label contrast before shipping it.
 */

/* Hero adjustments the panel needs, from the prototype. `overflow: visible` is
   the load-bearing one: the place dropdown and the calendar are absolutely
   positioned out of their cell, and the hero clips them without it. This file
   only ships on the front page, so the rules stay scoped by delivery rather
   than by an extra selector. */
.hero.hero--has-image {
	min-height: min( 78vh, 720px );
	padding-block: var(--s-8);
	overflow: visible;
	z-index: 5;
}

.qr {
	grid-column: 1 / -1;
	align-self: end;
	margin-top: var(--s-7);
	position: relative;
	background: color-mix( in srgb, var(--c-navy-900) 52%, transparent );
	backdrop-filter: blur( 18px );
	-webkit-backdrop-filter: blur( 18px );
	border: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 16%, transparent );
}

.qr .ico {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 1.3;
	fill: none;
	stroke-linecap: square;
	flex: none;
}

/* ── Trip-type segmented control ─────────────────────────────────────────── */

.qr__seg {
	display: flex;
	gap: var(--s-1);
	padding: var(--s-3) var(--s-4);
	border-bottom: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 12%, transparent );
}

.qr__seg button {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--ff-sans);
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	color: color-mix( in srgb, var(--c-ivory) 60%, transparent );
	padding: 9px 16px;
	background: none;
	border: 0;
	cursor: pointer;
}

.qr__seg button[aria-pressed="true"] {
	background: color-mix( in srgb, var(--c-ivory) 14%, transparent );
	color: var(--c-ivory);
}

/* ── Rows and cells ──────────────────────────────────────────────────────── */

.qr__row {
	display: grid;
	grid-template-columns: 1.2fr 1.2fr 0.9fr minmax( 172px, 0.7fr ) auto;
}

.qr__row--return {
	grid-template-columns: 1.1fr 1.1fr 0.8fr 0.8fr minmax( 172px, 0.65fr ) auto;
}

.qr__row--leg {
	display: grid;
	grid-template-columns: 30px 1.15fr 1.15fr 0.85fr minmax( 160px, 0.8fr );
	border-top: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 10%, transparent );
}

.qr__row--leg.has-rm {
	grid-template-columns: 30px 1.15fr 1.15fr 0.85fr minmax( 160px, 0.8fr ) 44px;
}

.qr__body > .qr__row--leg:first-child {
	border-top: 0;
}

.qr__cell {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 13px 20px 15px;
	border-right: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 12%, transparent );
	min-width: 0;
}

.qr__cell:last-child { border-right: 0; }

/* Was an inline style in the prototype; the shrink guard is load-bearing —
   without min-width:0 a long airport name blows the grid column out. */
.qr__cell-body {
	min-width: 0;
	flex: 1;
}

.qr__cell--pax { align-items: center; }
.qr__cell--pax .qr__lbl { display: flex; align-items: center; justify-content: center; gap: 8px; }
.qr__cell--pax .qr__step { justify-content: center; }
.qr__cell--pax .qr__lbl .ico { margin: 0; width: 15px; height: 15px; }

.qr__cell--cta { padding: 10px; }
.qr__cell--cta .qr__cta { height: 100%; width: 100%; }

.qr__cell .ico { margin-top: 2px; color: var(--c-silver); }

.qr__lbl {
	display: block;
	font-family: var(--ff-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: color-mix( in srgb, var(--c-silver) 80%, transparent );
	margin: 0 0 var(--s-2);
}

.qr__in {
	background: none;
	border: 0;
	outline: none;
	font-family: var(--ff-sans);
	font-size: 1rem;
	font-weight: 500;
	color: var(--c-ivory);
	width: 100%;
	padding: 0;
	color-scheme: dark;
}

.qr__in::placeholder {
	color: color-mix( in srgb, var(--c-ivory) 48%, transparent );
	font-weight: 400;
}

.qr__in:focus-visible { box-shadow: 0 1px 0 0 var(--c-silver); }

/* No-JS baseline only — the stepper replaces this once JS boots. */
.qr__in--pax { text-align: center; }

.qr__cell.qr-err { box-shadow: inset 0 -2px 0 0 var(--c-error); }

/* ── Actions ─────────────────────────────────────────────────────────────── */

.qr__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--ff-sans);
	font-size: 0.9375rem;
	font-weight: 500;
	background: var(--c-ivory);
	color: var(--c-navy-900);
	padding: 16px 30px;
	border: 0;
	cursor: pointer;
}

.qr__cta:hover { background: var(--c-paper); }

.qr__step { display: flex; align-items: center; gap: 10px; white-space: nowrap; }

.qr__step button {
	width: 24px;
	height: 24px;
	border: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 35%, transparent );
	background: none;
	color: var(--c-ivory);
	font-size: 0.9375rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.qr__step output {
	font-family: var(--ff-sans);
	font-size: 1rem;
	font-weight: 500;
	color: var(--c-ivory);
	min-width: 22px;
	text-align: center;
}

.qr__legnum {
	font-family: var(--ff-sans);
	font-size: 0.78rem;
	color: var(--c-silver-dim);
	padding: 17px 0 0 12px;
}

.qr__rm {
	background: none;
	border: 0;
	color: color-mix( in srgb, var(--c-ivory) 45%, transparent );
	cursor: pointer;
	font-size: 1.05rem;
	padding: 13px 0 0;
}

.qr__rm:hover { color: var(--c-ivory); }

.qr__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-5);
	padding: var(--s-3) var(--s-4);
	border-top: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 12%, transparent );
}

.qr__add {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	font-family: var(--ff-sans);
	font-size: 0.84rem;
	color: var(--c-silver);
	cursor: pointer;
	padding: 8px 0;
}

.qr__add:hover { color: var(--c-ivory); }

.qr__reassure {
	position: absolute;
	right: 2px;
	bottom: -32px;
	margin: 0;
	font-family: var(--ff-sans);
	font-size: 0.8125rem;
	color: color-mix( in srgb, var(--c-ivory) 78%, transparent );
}

.qr__msg {
	position: absolute;
	left: 2px;
	bottom: -32px;
	margin: 0;
	font-family: var(--ff-sans);
	font-size: 0.8125rem;
	color: color-mix( in srgb, var(--c-error) 30%, var(--c-ivory) );
	text-shadow: 0 1px 8px color-mix( in srgb, var(--c-navy-900) 60%, transparent );
}

/* ── Dropdown (places) ───────────────────────────────────────────────────── */

.qr__dd {
	position: absolute;
	left: -1px;
	right: -1px;
	top: calc( 100% + 2px );
	z-index: 40;
	background: linear-gradient(
		180deg,
		color-mix( in srgb, var(--c-ivory) 9%, color-mix( in srgb, var(--c-navy-900) 95%, transparent ) ),
		color-mix( in srgb, var(--c-navy-900) 95%, transparent ) 55%
	);
	backdrop-filter: blur( 64px ) saturate( 1.8 ) brightness( 1.25 );
	-webkit-backdrop-filter: blur( 64px ) saturate( 1.8 ) brightness( 1.25 );
	border: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 24%, transparent );
	box-shadow:
		inset 0 1px 0 color-mix( in srgb, var(--c-ivory) 18%, transparent ),
		var(--sh-modal);
}

.qr__dd-scroll { max-height: 296px; overflow: auto; }

.qr__dd button {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--ff-sans);
	font-size: 0.9rem;
	color: var(--c-ivory);
	padding: 11px 16px;
}

.qr__dd button:hover { background: color-mix( in srgb, var(--c-ivory) 10%, transparent ); }

.qr__dd button.qr__dd-a {
	padding-left: 32px;
	font-weight: 400;
	color: color-mix( in srgb, var(--c-ivory) 85%, transparent );
}

.qr__dd button code {
	font-family: var(--ff-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	color: var(--c-silver);
}

.qr__dd button small {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--c-silver-dim);
}

.qr__dd--up { top: auto; bottom: calc( 100% + 2px ); }

.qr__dd-empty {
	font-family: var(--ff-sans);
	font-size: 0.84rem;
	color: var(--c-silver-dim);
	padding: 12px 16px;
	margin: 0;
}

/* ── Calendar ────────────────────────────────────────────────────────────── */

.qr__cal { padding: 12px; min-width: 270px; max-height: none; }

.qr__cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 4px 12px;
}

.qr__cal-nav { display: flex; gap: 6px; }

.qr__cal-head strong {
	font-family: var(--ff-serif);
	font-weight: 400;
	font-size: 1rem;
	color: var(--c-ivory);
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.qr__cal-head button {
	background: none;
	border: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 28%, transparent );
	color: var(--c-silver);
	cursor: pointer;
	font-size: 0.95rem;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 1;
}

.qr__cal-head button:hover {
	color: var(--c-ivory);
	border-color: color-mix( in srgb, var(--c-ivory) 55%, transparent );
}

.qr__cal-grid { display: grid; grid-template-columns: repeat( 7, 1fr ); gap: 2px; }

.qr__cal-grid span {
	font-family: var(--ff-sans);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	color: var(--c-silver-dim);
	text-align: center;
	padding: 4px 0;
	text-transform: uppercase;
}

.qr__cal-grid button {
	width: 100%;
	height: 31px;
	background: none;
	border: 0;
	color: var(--c-ivory);
	font-family: var(--ff-sans);
	font-size: 0.8rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.qr__cal-grid button:hover { background: color-mix( in srgb, var(--c-ivory) 12%, transparent ); }

.qr__cal-grid button[disabled] {
	color: color-mix( in srgb, var(--c-ivory) 25%, transparent );
	cursor: default;
	background: none;
}

.qr__cal-grid button.on { background: var(--c-ivory); color: var(--c-navy-900); }

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media ( max-width: 1023px ) {
	.qr { margin-top: var(--s-7); }
	.qr__row,
	.qr__row--return { grid-template-columns: 1fr 1fr; }
	.qr__row--leg { grid-template-columns: 32px 1fr 1fr; }
	.qr__cell {
		border-right: 0;
		border-top: var(--bw-hair) solid color-mix( in srgb, var(--c-ivory) 10%, transparent );
	}
	.qr__reassure,
	.qr__msg { position: static; padding: var(--s-3) var(--s-4); }
}