/**
 * Haven Destination Picker
 *
 * Phase 4 mid-page CTAs round 2, shipped 2026-05-06.
 *
 * Three-step "fit check" quiz on /destinations/. Sits between the explorer
 * cards section and the existing "Not sure where to start?" CTA.
 *
 * Brand palette: #1E1A14 ink, #C4A078 gold, #FAF7F1 cream.
 */

.haven-picker {
	background: linear-gradient(180deg, #FAF7F1 0%, #F2EBDF 100%);
	padding: 64px 24px;
	border-top: 1px solid rgba(196, 160, 120, 0.30);
	border-bottom: 1px solid rgba(196, 160, 120, 0.30);
}

.haven-picker__inner {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}

.haven-picker__eyebrow {
	margin: 0 0 12px;
	font: 600 11px/1 'Inter', system-ui, -apple-system, sans-serif;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: #7A6A52;
}

.haven-picker__title {
	margin: 0 0 12px;
	font: italic 400 clamp(28px, 4.5vw, 40px)/1.18 'Cormorant Garamond', Georgia, serif;
	color: #1E1A14;
}

.haven-picker__lede {
	margin: 0 auto 32px;
	max-width: 540px;
	font: 400 15px/1.55 'Inter', system-ui, -apple-system, sans-serif;
	color: #4A3F2E;
}

.haven-picker__progress {
	width: 200px;
	height: 3px;
	margin: 0 auto 36px;
	background: rgba(196, 160, 120, 0.30);
	border-radius: 999px;
	overflow: hidden;
}

.haven-picker__progress-fill {
	width: 33%;
	height: 100%;
	background: #C4A078;
	transition: width .35s ease;
}

.haven-picker__step {
	margin-top: 8px;
}

.haven-picker__question {
	margin: 0 0 24px;
	font: italic 400 clamp(22px, 3.5vw, 28px)/1.25 'Cormorant Garamond', Georgia, serif;
	color: #1E1A14;
}

.haven-picker__options {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 auto;
	max-width: 720px;
}

.haven-picker__option {
	min-height: 48px;
	padding: 12px 22px;
	font: 600 13px/1 'Inter', system-ui, -apple-system, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #1E1A14;
	background: #FFFFFF;
	border: 1px solid rgba(196, 160, 120, 0.55);
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease, border-color .15s ease;
}

.haven-picker__option:hover {
	background: rgba(196, 160, 120, 0.18);
}

.haven-picker__option.is-selected {
	color: #FFFFFF;
	background: #1E1A14;
	border-color: #1E1A14;
	transform: scale(1.04);
}

.haven-picker__step-meta {
	margin-top: 20px;
	font: 400 12px/1.4 'Inter', system-ui, -apple-system, sans-serif;
	color: #7A6A52;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Results step */

.haven-picker__results {
	margin-top: 8px;
}

.haven-picker__results-headline {
	margin: 0 0 8px;
	font: italic 400 clamp(24px, 4vw, 32px)/1.2 'Cormorant Garamond', Georgia, serif;
	color: #1E1A14;
}

.haven-picker__results-sub {
	margin: 0 0 28px;
	font: 400 14px/1.5 'Inter', system-ui, -apple-system, sans-serif;
	color: #4A3F2E;
}

.haven-picker__results-list {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.haven-picker__results-list { grid-template-columns: repeat(3, 1fr); }
}

/* The cloned destination card from the main collection. We inherit its
   styling from destination-hub-explorer.css and only adjust the layout
   slightly so it sits well in our results grid. */
.haven-picker__result-card {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
}

.haven-picker__results-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 12px;
}

.haven-picker__btn {
	min-height: 44px;
	padding: 11px 22px;
	font: 600 12px/1 'Inter', system-ui, -apple-system, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	border: 1px solid;
}

.haven-picker__btn--primary {
	color: #FFFFFF;
	background: #1E1A14;
	border-color: #1E1A14;
}

.haven-picker__btn--primary:hover { background: #000; }

.haven-picker__btn--ghost {
	color: #1E1A14;
	background: transparent;
	border-color: rgba(30, 26, 20, 0.30);
}

.haven-picker__btn--ghost:hover { background: rgba(30, 26, 20, 0.06); }

@media (prefers-reduced-motion: reduce) {
	.haven-picker__option,
	.haven-picker__progress-fill { transition: none; }
}