/* ─────────────────────────────────────────────────────────────────
 *  Falcon Vision — Destination & Experience Archive Styles
 *
 *  Used by archive-destination.php, archive-experience.php,
 *  single-destination.php, single-experience.php.
 * ───────────────────────────────────────────────────────────────── */


/* ╔════════════════════════════════════════════════════════════════╗
 *  ARCHIVE HEADER (page-band variant with hero image)
 *  ╚════════════════════════════════════════════════════════════════╝ */

.fv-archive-header {
	position: relative;
	overflow: hidden;
	padding-block: clamp(8rem, 14vw, 14rem) clamp(3rem, 7vw, 7rem);
	text-align: center;
	color: var(--fv-color-white);
	background: var(--fv-color-black);
}

.fv-archive-header__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.fv-archive-header__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.4;
}
.fv-archive-header__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.92) 100%);
}

.fv-archive-header__inner {
	position: relative;
	z-index: 1;
}

.fv-archive-header__title {
	font-size: clamp(var(--fv-text-4xl), 7vw, var(--fv-text-7xl));
	margin: 0;
}
.fv-archive-header__title .fv-display { display: block; }

.fv-archive-header__lede {
	max-width: 42rem;
	margin: var(--fv-space-6) auto 0;
	color: var(--fv-color-bone);
	font-size: var(--fv-text-lg);
	line-height: var(--fv-leading-relaxed);
}


/* ╔════════════════════════════════════════════════════════════════╗
 *  INTERACTIVE EAST AFRICA MAP
 *  ╚════════════════════════════════════════════════════════════════╝ */

.fv-map {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-width: 720px;
	margin-inline: auto;
}

.fv-map__svg {
	width: 100%;
	height: 100%;
	display: block;
}

.fv-map__land {
	fill: rgba(255, 255, 255, 0.06);
	stroke: rgba(255, 255, 255, 0.2);
	stroke-width: 1;
	transition: fill var(--fv-dur-base) var(--fv-ease-soft);
}

.fv-map__pin {
	cursor: pointer;
	transition: transform var(--fv-dur-base) var(--fv-ease-out);
	transform-origin: center;
	transform-box: fill-box;
}
.fv-map__pin:hover,
.fv-map__pin:focus {
	transform: scale(1.25);
}

.fv-map__pin-dot {
	fill: var(--fv-color-blue);
	stroke: var(--fv-color-white);
	stroke-width: 2;
}
.fv-map__pin:hover .fv-map__pin-dot,
.fv-map__pin:focus .fv-map__pin-dot {
	fill: var(--fv-color-accent);
}

.fv-map__pin-ring {
	fill: none;
	stroke: var(--fv-color-blue);
	stroke-width: 2;
	opacity: 0.5;
}

@media (prefers-reduced-motion: no-preference) {
	.fv-map__pin-ring {
		animation: fv-map-pulse 2.4s ease-out infinite;
		transform-origin: center;
		transform-box: fill-box;
	}
}
@keyframes fv-map-pulse {
	0%   { transform: scale(1);   opacity: 0.6; }
	100% { transform: scale(2.5); opacity: 0;   }
}

.fv-map__label {
	font-family: var(--fv-font-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	fill: var(--fv-color-white);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--fv-dur-fast) var(--fv-ease-soft);
}
.fv-map__pin:hover + .fv-map__label,
.fv-map__pin:focus + .fv-map__label,
.fv-map__label--always { opacity: 1; }


/* ╔════════════════════════════════════════════════════════════════╗
 *  EXPERIENCE GROUP (category section on archive)
 *  ╚════════════════════════════════════════════════════════════════╝ */

.fv-exp-group + .fv-exp-group {
	margin-top: var(--fv-section-y);
	padding-top: var(--fv-section-y);
	border-top: 1px solid var(--fv-border);
}

.fv-exp-group__header {
	margin-bottom: var(--fv-space-12);
	max-width: 60rem;
}

.fv-exp-group__title {
	font-size: clamp(var(--fv-text-2xl), 4.5vw, var(--fv-text-5xl));
	margin: 0;
}
.fv-exp-group__title .fv-display { display: block; }

.fv-exp-group__copy {
	color: var(--fv-fg-muted);
	margin-top: var(--fv-space-4);
	max-width: 42rem;
	line-height: var(--fv-leading-relaxed);
}


/* ╔════════════════════════════════════════════════════════════════╗
 *  SINGLE DESTINATION / EXPERIENCE PAGE
 *  Editorial layout with sticky sidebar.
 *  ╚════════════════════════════════════════════════════════════════╝ */

.fv-detail-hero {
	position: relative;
	height: 75vh;
	min-height: 540px;
	max-height: 800px;
	overflow: hidden;
	background: var(--fv-color-black);
}

.fv-detail-hero__bg {
	position: absolute;
	inset: 0;
}
.fv-detail-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fv-detail-hero__vignette {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.95) 100%);
}

.fv-detail-hero__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding-block: var(--fv-space-12);
}

.fv-detail-hero__title {
	font-size: clamp(var(--fv-text-4xl), 7vw, var(--fv-text-7xl));
	margin: 0;
	text-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
}
.fv-detail-hero__title .fv-display {
	display: block;
	font-size: 0.7em;
	letter-spacing: 0;
}

.fv-detail-hero__tagline {
	margin-top: var(--fv-space-4);
	font-size: var(--fv-text-2xs);
	font-weight: var(--fv-weight-bold);
	letter-spacing: var(--fv-tracking-extreme);
	text-transform: uppercase;
	color: var(--fv-color-blue-light);
}

.fv-detail-hero__meta {
	display: flex;
	gap: var(--fv-space-6);
	margin-top: var(--fv-space-6);
	flex-wrap: wrap;
	color: var(--fv-color-bone);
	font-size: var(--fv-text-sm);
	letter-spacing: var(--fv-tracking-wide);
}

.fv-detail-hero__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--fv-space-2);
}
.fv-detail-hero__meta-item svg {
	width: 1rem;
	height: 1rem;
	color: var(--fv-color-blue-light);
}


/* ── Detail layout (sidebar + content) ────────────────────────── */

.fv-detail-layout {
	display: grid;
	gap: var(--fv-space-12);
	grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
	.fv-detail-layout {
		grid-template-columns: 280px 1fr;
		gap: var(--fv-space-16);
	}
}

.fv-detail-sidebar {
	position: relative;
}
@media (min-width: 1024px) {
	.fv-detail-sidebar {
		position: sticky;
		top: 6rem;
		align-self: start;
		height: fit-content;
	}
}

.fv-detail-sidebar__group + .fv-detail-sidebar__group {
	margin-top: var(--fv-space-8);
	padding-top: var(--fv-space-8);
	border-top: 1px solid var(--fv-border);
}

.fv-detail-sidebar__label {
	font-size: var(--fv-text-2xs);
	font-weight: var(--fv-weight-bold);
	letter-spacing: var(--fv-tracking-widest);
	text-transform: uppercase;
	color: var(--fv-fg-muted);
	margin-bottom: var(--fv-space-2);
}

.fv-detail-sidebar__value {
	color: var(--fv-color-white);
	font-size: var(--fv-text-base);
	line-height: var(--fv-leading-relaxed);
}
.fv-detail-sidebar__value--price {
	font-family: var(--fv-font-display);
	font-style: italic;
	font-size: var(--fv-text-3xl);
	color: var(--fv-color-blue-light);
}


/* ── Detail body typography ───────────────────────────────────── */

.fv-detail-body {
	font-size: var(--fv-text-lg);
	line-height: var(--fv-leading-relaxed);
	color: var(--fv-color-bone);
}

.fv-detail-body > * + * { margin-top: var(--fv-space-6); }

.fv-detail-body h2 {
	font-size: clamp(var(--fv-text-2xl), 3vw, var(--fv-text-3xl));
	margin-top: var(--fv-space-12);
	color: var(--fv-color-white);
}

.fv-detail-body h3 {
	font-size: var(--fv-text-xl);
	margin-top: var(--fv-space-8);
	color: var(--fv-color-white);
}

.fv-detail-body ul {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--fv-space-3);
}
.fv-detail-body ul li {
	position: relative;
	padding-left: 1.75rem;
}
.fv-detail-body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 1rem;
	height: 1px;
	background: var(--fv-color-blue-light);
}


/* ── Highlights blocks (rendered from newline-separated meta) ─── */

.fv-highlights {
	display: grid;
	gap: var(--fv-space-4);
	padding: var(--fv-space-8);
	background: var(--fv-bg-card);
	border: 1px solid var(--fv-border);
	margin-block: var(--fv-space-10);
}

.fv-highlights__title {
	font-size: var(--fv-text-2xs);
	font-weight: var(--fv-weight-bold);
	letter-spacing: var(--fv-tracking-extreme);
	text-transform: uppercase;
	color: var(--fv-color-blue-light);
	margin-bottom: var(--fv-space-2);
}

.fv-highlights ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--fv-space-3);
}

.fv-highlights ul li {
	position: relative;
	padding-left: 1.75rem;
	color: var(--fv-color-bone);
	font-size: var(--fv-text-base);
	line-height: var(--fv-leading-relaxed);
}
.fv-highlights ul li::before {
	content: "✦";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--fv-color-blue-light);
}