/**
 * Trip planner - /plan-my-trip/
 *
 * A sticky rail on the left carries the whole journey, so the traveller can
 * always see where they are, what is behind them and what is still to come.
 * The right column carries one step at a time, opened by a photograph so the
 * page reads as travel rather than as a form.
 *
 * The rail is driven from mtf_plan_steps(), so more steps cost nothing here.
 * Archivo throughout, radius 0, accent on the active marker and the progress
 * fill only.
 */

.planner { padding-bottom: 0; }

.pshell {
	display: grid;
	grid-template-columns: minmax(230px, 292px) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: start;
	padding-top: var(--sec-sm);
	padding-bottom: var(--sec);
}

/* ---- Left rail ---- */
.prail {
	position: sticky;
	top: 104px;
	align-self: start;
}
.prail__in { position: static; }
.prail h1 {
	margin: var(--space-3) 0 0;
	font-size: clamp(1.7rem, 2.4vw, 2.3rem);
	line-height: 1.04;
	letter-spacing: -.03em;
}
.prail__lede {
	margin: var(--space-4) 0 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--color-neutral-600);
}

.prail__steps {
	list-style: none;
	margin: var(--space-8) 0 0;
	padding: 0;
	position: relative;
}
/* The spine: one continuous line the markers sit on. */
.prail__steps::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 18px;
	bottom: 18px;
	width: 1px;
	background: var(--color-neutral-300);
}
.prail__steps li { position: relative; }
.prail__steps button {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	width: 100%;
	padding: var(--space-3) 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: inherit;
}
.prail__dot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 31px;
	height: 31px;
	background: var(--color-bg);
	border: 1px solid var(--color-neutral-400);
	color: var(--color-neutral-600);
	transition: background-color 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
}
.prail__dot i {
	font-style: normal;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .06em;
}
.prail__tx { display: block; padding-top: 4px; min-width: 0; }
.prail__tx b {
	display: block;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: .98rem;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: var(--color-neutral-600);
	transition: color 220ms var(--ease);
}
.prail__tx em {
	display: block;
	margin-top: 3px;
	font-style: normal;
	font-size: .8rem;
	line-height: 1.4;
	color: var(--color-neutral-500);
}
.prail__steps button:hover .prail__dot { border-color: var(--color-text); }
.prail__steps button:hover .prail__tx b { color: var(--color-text); }
.prail__steps button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.prail__steps li.is-done .prail__dot {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-bg);
}
.prail__steps li.is-done .prail__tx b { color: var(--color-text); }
.prail__steps li.is-on .prail__dot {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}
.prail__steps li.is-on .prail__tx b { color: var(--color-text); font-weight: 800; }

.prail__trust {
	list-style: none;
	margin: var(--space-8) 0 0;
	padding: var(--space-6) 0 0;
	border-top: 1px solid var(--color-neutral-300);
}
.prail__trust li {
	position: relative;
	padding-left: 16px;
	margin-bottom: 7px;
	font-size: .82rem;
	color: var(--color-neutral-700);
}
.prail__trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 5px;
	height: 5px;
	background: var(--color-accent);
}

/* ---- Step header photograph ---- */
.phero {
	position: relative;
	display: block;
	aspect-ratio: 21 / 8;
	overflow: hidden;
	background: var(--color-neutral-300);
	margin-bottom: var(--space-8);
}
.phero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.phero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(32, 30, 29, .88) 0%,
		rgba(32, 30, 29, .42) 52%,
		rgba(32, 30, 29, .12) 100%);
}
.phero__tx {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: clamp(18px, 2.4vw, 30px);
	color: #fff;
}
.phero__tx i {
	display: block;
	font-style: normal;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-accent-300);
}
.phero__tx b {
	display: block;
	margin-top: 6px;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(1.5rem, 2.8vw, 2.2rem);
	line-height: 1.05;
	letter-spacing: -.03em;
}

/* ---- Steps ---- */
.pstep { border: 0; padding: 0; margin: 0 0 var(--sec-sm); min-width: 0; }
.pform.is-wizard .pstep { display: none; }
.pform.is-wizard .pstep.is-on { display: block; }

.pq { margin-bottom: var(--space-8); }
.pq h2 {
	margin: 0;
	font-size: clamp(1.1rem, 1.7vw, 1.4rem);
	line-height: 1.18;
	letter-spacing: -.02em;
}
.pq__hint {
	margin: var(--space-2) 0 0;
	max-width: 64ch;
	color: var(--color-neutral-600);
	font-size: .9rem;
	line-height: 1.55;
}

/* ---- Options ---- */
.popts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
	gap: var(--space-3);
	margin-top: var(--space-6);
}
.popts--chip { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.popts--media { grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); }

.popt { position: relative; display: block; cursor: pointer; min-width: 0; }
.popt input { position: absolute; top: 12px; left: 12px; width: 16px; height: 16px; margin: 0; opacity: 0; }
.popt > span {
	display: block;
	padding: var(--space-4) var(--space-4) var(--space-4) 40px;
	background: var(--color-surface);
	border: 1px solid var(--color-neutral-300);
	transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.popt > span::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 14px;
	width: 14px;
	height: 14px;
	border: 1.5px solid var(--color-neutral-400);
	background: var(--color-bg);
	transition: border-color 200ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.popt > span b {
	display: block;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: .98rem;
	letter-spacing: -.01em;
	line-height: 1.25;
}
.popt > span i {
	display: block;
	margin-top: 4px;
	font-style: normal;
	font-size: .84rem;
	line-height: 1.45;
	color: var(--color-neutral-600);
}
.popt:hover > span { border-color: var(--color-neutral-500); }
.popt input:checked + span { border-color: var(--color-accent); background: var(--color-accent-100); }
.popt input:checked + span::before {
	border-color: var(--color-accent);
	background: var(--color-accent);
	box-shadow: inset 0 0 0 3px var(--color-accent-100);
}
.popt input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Compact chips for short single-line answers. */
.popts--chip .popt > span { padding: 11px 15px 11px 34px; }
.popts--chip .popt > span::before { top: 13px; left: 12px; }

/* Cards with a photograph, for activities and festivals. */
.popt--media > span { padding: 0 0 var(--space-4); overflow: hidden; }
.popt--media > span::before { top: auto; bottom: 16px; left: 14px; }
.popt--media .popt__img {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-neutral-300);
	margin-bottom: var(--space-4);
}
.popt--media .popt__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.02);
	transition: transform 700ms var(--ease);
}
.popt--media:hover .popt__img img { transform: scale(1.07); }
.popt--media > span b,
.popt--media > span i { padding-left: 40px; padding-right: var(--space-4); }

/* ---- Plain fields ---- */
.psel select,
.pcount input,
.pfield input,
.pfield textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--color-neutral-400);
	background: var(--color-bg);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-text);
	border-radius: 0;
}
.psel { display: block; max-width: 340px; margin-top: var(--space-6); }
.psel select { appearance: none; }
.pcount { display: flex; gap: var(--space-4); margin-top: var(--space-4); }
.pcount label { display: block; max-width: 132px; }
.pcount span,
.pfield span {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
}
.pfield em { font-style: normal; color: var(--color-accent); }
.pfields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
	gap: var(--space-4);
	margin-top: var(--space-6);
}
.pfield--wide { display: block; margin-top: var(--space-4); }
.pfield textarea { resize: vertical; line-height: 1.55; }
.psel select:focus-visible,
.pcount input:focus-visible,
.pfield input:focus-visible,
.pfield textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.pfield input.is-bad { border-color: var(--color-accent); }

/* ---- Summary ---- */
.psummary {
	margin: 0 0 var(--space-8);
	padding: var(--space-6);
	background: var(--color-surface);
	border-top: 3px solid var(--color-accent);
}
.psummary dl { margin: var(--space-4) 0 0; }
.psummary dt {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-neutral-300);
}
.psummary dd { margin: 3px 0 var(--space-3); font-size: .93rem; }

/* ---- Action bar ---- */
.pbar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	background: var(--color-bg);
	border-top: 2px solid var(--color-divider);
}
.pbar__mid { flex: 1 1 auto; min-width: 0; }
.pbar__track { height: 3px; background: var(--color-neutral-300); overflow: hidden; }
.pbar__track span {
	display: block;
	height: 100%;
	width: 20%;
	background: var(--color-accent);
	transition: width 320ms var(--ease);
}
.pbar__count {
	display: block;
	margin-top: 7px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
}
.pbar .btn { flex: none; }
.pbar .btn[hidden] { display: none; }

.pform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pform__err {
	margin: var(--space-4) 0 0;
	padding: var(--space-3) var(--space-4);
	background: var(--color-accent-100);
	border-left: 3px solid var(--color-accent);
	color: var(--color-accent-700);
	font-size: .93rem;
}
.pform.is-busy { opacity: .55; pointer-events: none; }

/* ---- Done ---- */
.pdone h1,
.pdone h2 {
	margin: var(--space-3) 0 0;
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	line-height: 1.06;
	letter-spacing: -.02em;
}
.pdone p { margin-top: var(--space-4); max-width: 60ch; color: var(--color-neutral-700); }
.pdone__acts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* ---- Small screens: the rail lies down above the step ---- */
@media (max-width: 900px) {
	.pshell { grid-template-columns: 1fr; gap: var(--space-8); }
	.prail { position: static; }
	.prail__lede,
	.prail__trust { display: none; }
	.prail__steps {
		display: flex;
		gap: 0;
		margin-top: var(--space-6);
		overflow-x: auto;
		scrollbar-width: none;
	}
	.prail__steps::-webkit-scrollbar { display: none; }
	.prail__steps::before { left: 0; right: 0; top: 15px; bottom: auto; width: auto; height: 1px; }
	.prail__steps li { flex: 1 0 auto; }
	.prail__steps button { flex-direction: column; align-items: center; gap: 7px; padding: 0 var(--space-4); }
	.prail__tx { padding-top: 0; text-align: center; }
	.prail__tx em { display: none; }
	.prail__tx b { font-size: .8rem; white-space: nowrap; }
}
@media (max-width: 560px) {
	.phero { aspect-ratio: 16 / 9; }
	.pbar { flex-wrap: wrap; }
	.pbar__mid { order: -1; flex-basis: 100%; }
}

/* =========================================================================
   Option variants added after the first round of feedback.
   ========================================================================= */

/* ---- Native select needs its own arrow once appearance is stripped ---- */
.psel--arrow { position: relative; }
.psel--arrow::after {
	content: "";
	position: absolute;
	right: 17px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid var(--color-text);
	border-bottom: 2px solid var(--color-text);
	transform: rotate(45deg);
	pointer-events: none;
}
.psel--arrow select { padding-right: 44px; }

/* ---- Options with a line icon ---- */
.popt--icon > span {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: var(--space-3);
	align-items: start;
	padding: var(--space-4);
	padding-left: 38px;
}
.popt--icon > span::before { top: 18px; left: 14px; }
.popt__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: none;
	color: var(--color-neutral-500);
	transition: color 200ms var(--ease);
}
.popt__ic svg { width: 21px; height: 21px; display: block; }
.popt:hover .popt__ic { color: var(--color-neutral-700); }
.popt input:checked + span .popt__ic { color: var(--color-accent); }

.popt--icon > span b,
.popt--icon > span i { grid-column: 2; }

/* ---- Dense picker: a thumbnail, a title, a line of detail ------------
   Activities and festivals both grow over time, so these are compact rows
   in a two-up grid rather than large cards. Twenty of them still scan.
   -------------------------------------------------------------------- */
.popts--pick {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-2);
}
.popt--pick > span {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: var(--space-4);
	align-items: center;
	padding: 10px 14px 10px 38px;
	min-height: 82px;
}
.popt--pick > span::before { top: 50%; left: 13px; margin-top: -7px; }
.popt__thumb {
	display: block;
	width: 62px;
	height: 62px;
	overflow: hidden;
	background: var(--color-neutral-300);
}
.popt__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.popt__body { display: block; min-width: 0; }
.popt__body b {
	display: block;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: .95rem;
	line-height: 1.25;
	letter-spacing: -.01em;
}
.popt__body i {
	display: block;
	margin-top: 3px;
	font-style: normal;
	font-size: .8rem;
	line-height: 1.4;
	color: var(--color-neutral-600);
}

/* Anything past the first eight stays folded until asked for. */
.popt.is-extra { display: none; }
.popts--pick.is-open .popt.is-extra { display: block; }
.pmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--space-4);
	padding: 10px 16px;
	background: none;
	border: 1px solid var(--color-neutral-400);
	cursor: pointer;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-text);
	transition: background-color 200ms var(--ease);
}
.pmore:hover { background: var(--color-surface); }
.pmore:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (max-width: 560px) {
	.popts--pick { grid-template-columns: 1fr; }
}

/* =========================================================================
   GUIDES - directory, profile, language filter
   ========================================================================= */

.gfilter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
}
.gfilter__x {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	border: 1px solid var(--color-neutral-300);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-neutral-700);
	text-decoration: none;
	transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.gfilter__x:hover { background: var(--color-surface); color: var(--color-text); }
.gfilter__x.is-on {
	background: var(--color-text);
	border-color: var(--color-text);
	color: var(--color-bg);
}

.gcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: var(--space-6);
}
.gcard {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 260ms var(--ease), transform 260ms var(--ease);
}
.gcard:hover { box-shadow: var(--shadow-md); transform: translate3d(0, -2px, 0); }
.gcard--noimg { border-top: 3px solid var(--color-accent); }
.gcard__img {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-neutral-300);
}
.gcard__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.02);
	transition: transform 700ms var(--ease);
}
.gcard:hover .gcard__img img { transform: scale(1.06); }
.gcard__b { padding: var(--space-6); display: flex; flex-direction: column; flex: 1 1 auto; }

/* The one badge that earns the accent: it is a claim we stand behind. */
.gcard__v {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	padding: 4px 9px;
	background: var(--color-accent);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.gcard__t {
	margin: var(--space-3) 0 0;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(19px, 2vw, 23px);
	line-height: 1.12;
	letter-spacing: -.02em;
	transition: color 200ms var(--ease);
}
.gcard:hover .gcard__t { color: var(--color-accent); }
.gcard__m {
	display: block;
	margin-top: 5px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
}
.gcard__x {
	margin: var(--space-3) 0 0;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--color-neutral-700);
}
.gcard .acard__tags { margin-top: auto; padding-top: var(--space-4); }

/* ---- Empty state: honest, not padded out ---- */
.gempty {
	padding: clamp(36px, 6vw, 72px);
	background: var(--color-surface);
	border-top: 3px solid var(--color-accent);
}
.gempty h2 {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	line-height: 1.08;
	letter-spacing: -.02em;
}
.gempty p {
	margin: var(--space-4) 0 0;
	max-width: 62ch;
	color: var(--color-neutral-700);
	line-height: 1.6;
}

/* ---- Profile ---- */
.gprofile {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
.gprofile__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-neutral-300);
}
.gprofile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gprofile__body h1 {
	margin: var(--space-3) 0 0;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.04;
	letter-spacing: -.03em;
}
.gprofile__lede {
	margin: var(--space-4) 0 0;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--color-neutral-700);
}
.gfacts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0;
	margin: var(--space-8) 0 0;
}
.gfacts dt {
	padding: 11px 0;
	border-top: 1px solid var(--color-neutral-300);
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-neutral-600);
	align-self: center;
}
.gfacts dd {
	margin: 0;
	padding: 11px 0 11px var(--space-6);
	border-top: 1px solid var(--color-neutral-300);
	font-size: .98rem;
	text-align: right;
}
.gprofile__bio { margin-top: var(--space-8); max-width: 66ch; line-height: 1.65; color: var(--color-neutral-800); }
.gprofile__bio > * + * { margin-top: var(--space-4); }

.gcta {
	margin-top: var(--space-8);
	padding: var(--space-8);
	background: var(--color-text);
	color: var(--color-bg);
}
.gcta h2 {
	margin: 0;
	font-size: clamp(1.3rem, 2.4vw, 1.8rem);
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--color-bg);
}
.gcta p { margin: var(--space-3) 0 var(--space-6); color: rgba(243, 242, 242, .82); max-width: 52ch; }

@media (max-width: 860px) {
	.gprofile { grid-template-columns: 1fr; }
	.gprofile__media { max-width: 320px; }
}

/* Sample data must never be mistakable for a verified profile. */
.gcard__v--demo { background: var(--color-neutral-700); }
.gdemo {
	margin: 0 0 var(--space-8);
	padding: var(--space-4) var(--space-6);
	background: var(--color-accent-100);
	border-left: 3px solid var(--color-accent);
	color: var(--color-accent-700);
	font-size: .92rem;
	line-height: 1.55;
}
.gprofile__body .gdemo { margin: var(--space-4) 0 0; }