/*
 * front-page.css — Safaris Without Borders Homepage
 * Covers all 8 sections of the rebuilt front-page.php
 *
 * Naming: hp-* prefix for all homepage-specific classes
 * Brand tokens:
 *   Maroon    #800000
 *   Orange    #d53600
 *   Forest    #3D6B4F
 *   Charcoal  #46413A
 *   Sand      #E8DDD0
 *   Off-white #f6f3f3
 *   Type      Instrument Sans (body), EB Garamond (headings) — Google Fonts
 */

/* ════════════════════════════════════════════════════════
   SHARED UTILITIES
   ════════════════════════════════════════════════════ */

:root {
	--hp-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--hp-ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);
	--hp-maroon:     #800000;
	--hp-orange:     #d53600;
	--hp-forest:     #3D6B4F;
	--hp-charcoal:   #46413A;
	--hp-sand:       #E8DDD0;
	--hp-off-white:  #f6f3f3;
	--hp-container:  1280px;
	--hp-gutter:     clamp(24px, 5vw, 80px);
}

.container {
	max-width: var(--hp-container);
	margin-inline: auto;
	padding-inline: var(--hp-gutter);
}
.container--narrow { max-width: 680px; }

/* ── Section headers ────────────────────────────────── */
.hp-section-header { margin-bottom: clamp(40px, 5vw, 64px); }
.hp-section-header--center { text-align: center; }
.hp-section-header--split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.hp-eyebrow {
	font-family: var(--font-base);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hp-maroon);
	margin: 0 0 14px;
}
.hp-eyebrow--light { color: rgba(255,255,255,0.75); }
.hp-eyebrow--center { text-align: center; }

.hp-section-title {
	font-family: var(--font-heading);
	font-size: clamp(28px, 3.5vw, 48px);
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--hp-charcoal);
	margin: 0;
	line-height: 1.15;
}

.hp-link-arrow {
	font-family: var(--font-base);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--hp-charcoal);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--hp-charcoal);
	transition: color 0.2s, border-color 0.2s;
}
.hp-link-arrow:hover {
	color: var(--hp-maroon);
	border-color: var(--hp-maroon);
}

/* ── Scroll reveal ──────────────────────────────────── */
.hp-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.65s var(--hp-ease), transform 0.65s var(--hp-ease);
}
.hp-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Hero elements start immediately visible (handled via JS) */
.hp-hero .hp-reveal { transition-duration: 0.8s; }

/* ════════════════════════════════════════════════════════
   1. HERO
   ════════════════════════════════════════════════════ */
.hp-hero {
	position: relative;
	width: 100%;
	height: 100svh;
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* ── Media layer ─────────────────────────────────────── */
.hp-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hp-hero__video,
.hp-hero__img,
.hp-hero__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Video: poster image sits behind video, hidden once video loads */
.hp-hero__poster {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hp-hero__video { position: relative; z-index: 1; }

/* Ken Burns on fallback image */
.hp-hero__img--kenburns {
	animation: hp-kenburns 22s ease-in-out infinite alternate;
	transform-origin: center center;
}
@keyframes hp-kenburns {
	from { transform: scale(1.0) translate(0, 0); }
	to   { transform: scale(1.08) translate(-1%, 1%); }
}

/* Gradient overlay: dark bottom for text, slight top darkening */
.hp-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(to top,  rgba(20,12,8,0.82) 0%, rgba(20,12,8,0.15) 50%, transparent 100%),
		linear-gradient(to bottom, rgba(20,12,8,0.35) 0%, transparent 35%);
}

/* ── Content layer ───────────────────────────────────── */
.hp-hero__content {
	position: relative;
	z-index: 3;
	text-align: center;
	color: #fff;
	padding-inline: var(--hp-gutter);
	max-width: 860px;
}

.hp-hero__eyebrow {
	font-family: var(--font-base);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.75);
	margin: 0 0 20px;
}

.hp-hero__headline {
	font-family: var(--font-heading);
	font-size: clamp(28px, 5.5vw, 55px);
	font-weight: 200;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: #fff;
	margin: 0 0 24px;
}

.hp-hero__sub {
	font-family: var(--font-base);
	font-size: clamp(15px, 1.6vw, 19px);
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255,255,255,0.85);
	margin: 0 0 40px;
	max-width: 600px;
	margin-inline: auto;
	margin-bottom: 40px;
}

.hp-hero__ctas {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ── Scroll hint ─────────────────────────────────────── */
.hp-hero__scroll-hint {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}
.hp-hero__scroll-line {
	display: block;
	width: 1px;
	height: 60px;
	background: rgba(255,255,255,0.4);
	margin: 0 auto;
	animation: hp-scroll-drop 2s ease-in-out infinite;
	transform-origin: top center;
}
@keyframes hp-scroll-drop {
	0%   { transform: scaleY(0); opacity: 0; }
	30%  { opacity: 1; }
	100% { transform: scaleY(1); opacity: 0; }
}

/* ════════════════════════════════════════════════════════
   2. USP INTRO — split layout
   ════════════════════════════════════════════════════ */
.hp-intro {
	background: #E8DDD0;
	padding-block: clamp(72px, 9vw, 120px);
}

.hp-intro__layout {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(48px, 6vw, 96px);
	align-items: start;
}

.hp-intro__headline-col {
	position: sticky;
	top: 120px; /* clears the sticky nav */
}

.hp-intro__headline {
	font-family: var(--font-heading);
	font-size: clamp(26px, 3vw, 42px);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--hp-charcoal);
	margin: 0 0 32px;
}

.hp-intro__rule {
	display: block;
	width: 40px;
	height: 2px;
	background: var(--hp-maroon);
}

.hp-intro__prose-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.hp-intro__para {
	font-family: var(--font-base);
	font-size: clamp(15px, 1.4vw, 17px);
	font-weight: 300;
	line-height: 1.85;
	color: #4a3e38;
	margin: 0;
}

@media (max-width: 768px) {
	.hp-intro__layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.hp-intro__headline-col { position: static; }
	.hp-intro__headline { font-size: clamp(22px, 5vw, 30px); }
}

/* ════════════════════════════════════════════════════════
   3. DESTINATIONS — editorial mosaic
   ════════════════════════════════════════════════════ */
.hp-dest {
	background: var(--hp-off-white);
	padding-block: clamp(64px, 8vw, 120px);
}

.hp-dest__mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: stretch;
}

.hp-dest__stack {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 12px;
}

/* ── Card base ───────────────────────────────────────── */
.hp-dest__card {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	background: var(--hp-sand);
}

.hp-dest__card--large { min-height: 620px; }
.hp-dest__card--small { min-height: 290px; }

.hp-dest__link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.hp-dest__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.hp-dest__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s var(--hp-ease);
}
.hp-dest__card:hover .hp-dest__img { transform: scale(1.05); }

.hp-dest__img--placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--hp-sand) 0%, #c8bdb0 100%);
}

.hp-dest__img-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20,12,8,0.75) 0%, rgba(20,12,8,0.1) 55%, transparent 100%);
	transition: opacity 0.4s;
}
.hp-dest__card:hover .hp-dest__img-overlay { opacity: 0.85; }

/* ── Card body (text over image) ─────────────────────── */
.hp-dest__body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: clamp(20px, 3vw, 36px);
	color: #fff;
	z-index: 2;
}

.hp-dest__title {
	font-family: var(--font-heading);
	font-size: clamp(22px, 2.5vw, 34px);
	font-weight: 300;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0 0 8px;
}

.hp-dest__caption {
	font-family: var(--font-base);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.55;
	color: rgba(255,255,255,0.8);
	margin: 0 0 16px;
	max-width: 340px;
}

.hp-dest__cta {
	font-family: var(--font-base);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	display: block;
	transition: color 0.25s, letter-spacing 0.25s;
}
.hp-dest__card:hover .hp-dest__cta {
	color: #fff;
	letter-spacing: 0.18em;
}

/* Small card: compact text */
.hp-dest__card--small .hp-dest__title { font-size: clamp(18px, 2vw, 24px); }
.hp-dest__card--small .hp-dest__caption { display: none; }
.hp-dest__card--small:hover .hp-dest__caption { display: block; }

/* ════════════════════════════════════════════════════════
   3. FEATURED SAFARIS
   ════════════════════════════════════════════════════ */
.hp-featured {
	background: #fff;
	padding-block: clamp(64px, 8vw, 120px);
}

/* safari-cards is the existing card grid from functions.php */
.safari-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 900px) { .safari-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .safari-cards { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════
   4. HOW WE WORK
   ════════════════════════════════════════════════════ */
.hp-how {
	background: var(--hp-off-white);
	padding-block: clamp(64px, 8vw, 120px);
}

.hp-how__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	position: relative;
}

.hp-how__step {
	padding: 40px 48px 0 0;
	position: relative;
}
.hp-how__step:last-child { padding-right: 0; }

/* Large step number */
.hp-how__number {
	display: block;
	font-family: var(--font-base);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--hp-maroon);
	margin-bottom: 48px;
	position: relative;
}

/* Connector line between steps — horizontal rule after the number */
.hp-how__connector {
	position: absolute;
	top: 46px; /* aligns with centre of the number */
	left: calc(13px + 24px); /* after "01" text width + gap */
	right: 48px;
	height: 1px;
	background: var(--hp-sand);
}

.hp-how__step-title {
	font-family: var(--font-heading);
	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 400;
	color: var(--hp-charcoal);
	margin: 0 0 16px;
	line-height: 1.25;
}

.hp-how__step-body {
	font-family: var(--font-base);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: #5a5047;
	margin: 0;
}

.hp-how__cta {
	margin-top: 56px;
	text-align: center;
}

/* ════════════════════════════════════════════════════════
   5. SUSTAINABILITY BANNER
   ════════════════════════════════════════════════════ */
.hp-sustain {
	position: relative;
	min-height: 520px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.hp-sustain__media {
	position: absolute;
	inset: 0;
}

.hp-sustain__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hp-sustain__img--placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--hp-charcoal), #4a3830);
}

.hp-sustain__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(20,12,8,0.82) 0%, rgba(20,12,8,0.55) 60%, rgba(20,12,8,0.2) 100%);
}

.hp-sustain__content {
	position: relative;
	z-index: 2;
	color: #fff;
	padding: clamp(56px, 8vw, 100px) var(--hp-gutter);
	max-width: 640px;
	margin-left: max(var(--hp-gutter), calc((100vw - var(--hp-container)) / 2 + var(--hp-gutter)));
}

.hp-sustain__title {
	font-family: var(--font-heading);
	font-size: clamp(28px, 3.5vw, 48px);
	font-weight: 200;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 20px;
	line-height: 1.15;
}

.hp-sustain__body {
	font-family: var(--font-base);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255,255,255,0.82);
	margin: 0 0 32px;
}

/* ════════════════════════════════════════════════════════
   6. TESTIMONIALS
   ════════════════════════════════════════════════════ */
.hp-testimonials {
	background: #fff;
	padding-block: clamp(64px, 8vw, 120px);
}

.hp-testimonials__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
}

.hp-testimonial {
	background: var(--hp-off-white);
	padding: clamp(28px, 3vw, 44px);
	border-radius: 2px;
}

.hp-testimonial__quote { margin: 0; }

.hp-testimonial__mark {
	font-family: Georgia, serif;
	font-size: 72px;
	line-height: 0.6;
	color: var(--hp-sand);
	margin-bottom: 20px;
	display: block;
	user-select: none;
}

.hp-testimonial__quote p {
	font-family: var(--font-base);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--hp-charcoal);
	margin: 0 0 24px;
}

.hp-testimonial__attribution {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hp-testimonial__name {
	font-family: var(--font-base);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--hp-charcoal);
	font-style: normal;
}

.hp-testimonial__detail {
	font-family: var(--font-base);
	font-size: 12px;
	font-weight: 400;
	color: #9a8e84;
	letter-spacing: 0.04em;
}

.hp-testimonial__source {
	display: inline-block;
	font-family: var(--font-base);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-red);
	margin-top: 2px;
}

/* ════════════════════════════════════════════════════════
   7. BRAND VALUES — dark section
   ════════════════════════════════════════════════════ */
.hp-values {
	background: var(--hp-charcoal);
	padding-block: clamp(72px, 9vw, 130px);
}

.hp-values__layout {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: clamp(48px, 6vw, 96px);
	align-items: center;
}

/* ── Image column ────────────────────────────────────── */
.hp-values__image-col { position: relative; }

.hp-values__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 3px;
	object-fit: cover;
	aspect-ratio: 5 / 7;
}

.hp-values__img--placeholder {
	aspect-ratio: 5 / 7;
	background: linear-gradient(135deg, #3a2e28, #5a4a40);
	border-radius: 3px;
}

/* ── Content column ──────────────────────────────────── */
.hp-values__headline {
	font-family: var(--font-heading);
	font-size: clamp(26px, 3vw, 44px);
	font-weight: 200;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 20px;
	line-height: 1.18;
}

.hp-values__intro {
	font-family: var(--font-base);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.75;
	color: rgba(255,255,255,0.65);
	margin: 0 0 40px;
}

/* Values list */
.hp-values__list {
	list-style: none;
	margin: 0 0 48px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hp-values__item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding-block: 22px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hp-values__item:first-child { border-top: 1px solid rgba(255,255,255,0.08); }

/* Maroon accent marker */
.hp-values__item-marker {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hp-maroon);
	margin-top: 7px;
}

.hp-values__item-title {
	display: block;
	font-family: var(--font-base);
	font-size: 15px;
	font-weight: 500;
	color: #fff;
	margin-bottom: 5px;
	letter-spacing: 0.01em;
}

.hp-values__item-body {
	font-family: var(--font-base);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.65;
	color: rgba(255,255,255,0.55);
	margin: 0;
}

.hp-values__cta { margin-top: 0; }

/* ════════════════════════════════════════════════════════
   8. NEWSLETTER
   ════════════════════════════════════════════════════ */
.hp-newsletter {
	background: var(--hp-off-white);
	padding-block: clamp(64px, 7vw, 100px);
	text-align: center;
}

.hp-newsletter__title {
	font-family: var(--font-heading);
	font-size: clamp(24px, 2.8vw, 40px);
	font-weight: 300;
	letter-spacing: -0.02em;
	color: var(--hp-charcoal);
	margin: 0 0 16px;
}

.hp-newsletter__sub {
	font-family: var(--font-base);
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: #6a5e56;
	margin: 0 0 36px;
}

.hp-newsletter__form { max-width: 520px; margin-inline: auto; }

.hp-newsletter__row {
	display: flex;
	gap: 0;
	border: 1px solid var(--hp-sand);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 12px;
}

.hp-newsletter__input {
	flex: 1;
	padding: 14px 24px;
	font-family: var(--font-base);
	font-size: 14px;
	font-weight: 300;
	color: var(--hp-charcoal);
	background: #fff;
	border: none;
	outline: none;
}
.hp-newsletter__input::placeholder { color: #bbb; }

.hp-newsletter__row .btn { border-radius: 999px; flex-shrink: 0; }

.hp-newsletter__consent {
	font-family: var(--font-base);
	font-size: 12px;
	color: #aaa;
	margin: 0;
}

/* ════════════════════════════════════════════════════════
   BUTTON STYLES (homepage variants — supplement global btns)
   ════════════════════════════════════════════════════ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-base);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 32px;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
	background: var(--hp-maroon);
	color: #fff;
	border-color: var(--hp-maroon);
}
.btn--primary:hover { background: #6a0000; border-color: #6a0000; }

.btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,0.5);
}
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

.btn--ghost-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,0.5);
}
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,0.12); }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */

/* Tablet — 1024px */
@media (max-width: 1024px) {
	.hp-values__layout { grid-template-columns: 1fr 1fr; }
}

/* Tablet portrait — 768px */
@media (max-width: 768px) {
	.hp-dest__mosaic {
		grid-template-columns: 1fr;
	}
	.hp-dest__stack {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
	}
	.hp-dest__card--large  { min-height: 460px; }
	.hp-dest__card--small  { min-height: 240px; }
	.hp-dest__card--small .hp-dest__caption { display: block; }

	.hp-how__steps {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.hp-how__step { padding: 0; }
	.hp-how__connector { display: none; }
	.hp-how__number { margin-bottom: 16px; }

	.hp-testimonials__grid { grid-template-columns: 1fr; gap: 2px; }

	.hp-values__layout { grid-template-columns: 1fr; }
	.hp-values__image-col { max-width: 380px; margin-inline: auto; }

	.hp-section-header--split {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Mobile — 520px */
@media (max-width: 520px) {
	.hp-dest__stack { grid-template-columns: 1fr; }
	.hp-hero__ctas { flex-direction: column; align-items: center; }
	.hp-newsletter__row { flex-direction: column; border-radius: 24px; }
	.hp-newsletter__row .btn { border-radius: 999px; }
}

/* ════════════════════════════════════════════════════════
   SAFARI TYPES — Full-bleed hero with tall portrait card tray
   ════════════════════════════════════════════════════ */

.hp-safari-types {
	position: relative;
	width: 100%;
	height: clamp(560px, 78vh, 820px);
	overflow: hidden;
	background: var(--hp-charcoal);
}

/* ── Timer bar — top edge ── */
.hp-st-timer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: rgba(255,255,255,0.12);
	z-index: 20;
}
.hp-st-timer__bar {
	height: 100%;
	width: 0%;
	background: var(--hp-maroon);
}

/* ── Full-bleed background slides ── */
.hp-st-slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hp-st-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hp-st-slide.is-active { opacity: 1; }

.hp-st-slide__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.04);
	transition: transform 5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hp-st-slide.is-active .hp-st-slide__img { transform: scale(1); }

.hp-st-slide__img--placeholder { background: var(--hp-charcoal); }
.hp-st-slide__img--placeholder[data-index="0"] { background: linear-gradient(160deg, #2a1a0e 0%, #0e1a0e 100%); }
.hp-st-slide__img--placeholder[data-index="1"] { background: linear-gradient(160deg, #0e1a18 0%, #1a2e0a 100%); }
.hp-st-slide__img--placeholder[data-index="2"] { background: linear-gradient(160deg, #1a0e0e 0%, #2e1a0a 100%); }
.hp-st-slide__img--placeholder[data-index="3"] { background: linear-gradient(160deg, #0a1a0e 0%, #1a2e18 100%); }
.hp-st-slide__img--placeholder[data-index="4"] { background: linear-gradient(160deg, #1a180e 0%, #0e2020 100%); }
.hp-st-slide__img--placeholder[data-index="5"] { background: linear-gradient(160deg, #1a0e18 0%, #0e1a2e 100%); }

.hp-st-slide__overlay {
	position: absolute;
	inset: 0;
	/* Heavier on left (content side), lighter toward card tray */
	background: linear-gradient(
		105deg,
		rgba(10,6,4,0.78) 0%,
		rgba(10,6,4,0.30) 50%,
		rgba(10,6,4,0.10) 100%
	);
}

/* ── Content: bottom-left ── */
.hp-st-content {
	position: absolute;
	bottom: clamp(40px, 6vw, 80px);
	left: clamp(28px, 5vw, 72px);
	z-index: 10;
	max-width: 480px;
}

.hp-st-content__panel { display: none; }
.hp-st-content__panel.is-active {
	display: block;
	animation: hp-st-panel-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes hp-st-panel-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

.hp-st-content__title {
	font-family: var(--font-heading);
	font-size: clamp(32px, 3.8vw, 50px);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 16px;
	line-height: 1.05;
}

.hp-st-content__desc {
	font-family: var(--font-base);
	font-size: clamp(13px, 1.1vw, 15px);
	font-weight: 400;
	line-height: 1.75;
	color: rgba(255,255,255,0.75);
	margin: 0 0 28px;
	max-width: 400px;
}

.hp-st-content__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-base);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--hp-charcoal);
	background: #fff;
	text-decoration: none;
	padding: 11px 24px;
	border-radius: 999px;
	transition: background 0.22s ease, color 0.22s ease;
}
.hp-st-content__cta:hover {
	background: var(--hp-orange);
	color: #fff;
}

/* ── Card tray — bottom-right, tall portrait cards ── */
.hp-st-tray {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	/* Push tray content above the card row */
	padding-bottom: 0;
}

/* Counter + arrows sit above the card row */
.hp-st-tray-controls {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 clamp(16px, 2vw, 32px) 16px 0;
}

.hp-st-counter {
	font-family: var(--font-base);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.50);
	display: flex;
	align-items: baseline;
	gap: 3px;
}
.hp-st-counter__current {
	font-size: 32px;
	font-weight: 200;
	color: #fff;
	letter-spacing: -0.03em;
	line-height: 1;
}
.hp-st-counter__sep { margin-inline: 3px; }
.hp-st-counter__total { font-size: 14px; }

.hp-st-arrows {
	display: flex;
	gap: 6px;
}
.hp-st-arrow {
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255,255,255,0.30);
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, border-color 0.2s ease;
	backdrop-filter: blur(6px);
	flex-shrink: 0;
}
.hp-st-arrow:hover {
	background: rgba(255,255,255,0.20);
	border-color: rgba(255,255,255,0.60);
}

/* ── Thumb track: scrolling window of portrait cards ── */
.hp-st-thumbs-wrap {
	/* Clips the card row — overflow hidden so cards slide in/out */
	overflow: hidden;
	/* Width: show ~3.6 cards of 150px + 8px gap, cropping the last */
	width: clamp(460px, 38vw, 580px);
	padding-bottom: 28px;
}

.hp-st-thumbs {
	display: flex;
	gap: 8px;
	align-items: flex-end;
	/* JS will set transform: translateX() to slide the row */
	transition: transform 0.65s cubic-bezier(0.77, 0, 0.18, 1);
	will-change: transform;
}

/* ── Individual portrait card ── */
.hp-st-thumb {
	position: relative;
	/* Portrait ratio: ~3:4 */
	width: 150px;
	height: 220px;
	flex-shrink: 0;
	border: none;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border-radius: 4px;
	overflow: hidden;
	outline: none;
	/* Subtle scale + opacity for inactive state */
	opacity: 0.72;
	transform: scale(0.97) translateY(6px);
	transition:
		opacity 0.4s ease,
		transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		box-shadow 0.4s ease;
}

.hp-st-thumb.is-active {
	opacity: 1;
	transform: scale(1) translateY(0);
	box-shadow: 0 0 0 2px var(--hp-maroon);
}

.hp-st-thumb:hover:not(.is-active) {
	opacity: 0.90;
	transform: scale(0.98) translateY(4px);
}

.hp-st-thumb__img-wrap {
	position: absolute;
	inset: 0;
}

.hp-st-thumb__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Slight zoom-out on active */
	transform: scale(1.06);
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hp-st-thumb.is-active .hp-st-thumb__img { transform: scale(1); }

.hp-st-thumb__img--placeholder {
	width: 100%;
	height: 100%;
	background: #3a2e28;
}
.hp-st-thumb__img--placeholder[data-index="0"] { background: linear-gradient(160deg, #2a1a0e 0%, #0e1a0e 100%); }
.hp-st-thumb__img--placeholder[data-index="1"] { background: linear-gradient(160deg, #0e1a18 0%, #1a2e0a 100%); }
.hp-st-thumb__img--placeholder[data-index="2"] { background: linear-gradient(160deg, #1a0e0e 0%, #2e1a0a 100%); }
.hp-st-thumb__img--placeholder[data-index="3"] { background: linear-gradient(160deg, #0a1a0e 0%, #1a2e18 100%); }
.hp-st-thumb__img--placeholder[data-index="4"] { background: linear-gradient(160deg, #1a180e 0%, #0e2020 100%); }
.hp-st-thumb__img--placeholder[data-index="5"] { background: linear-gradient(160deg, #1a0e18 0%, #0e1a2e 100%); }

/* Gradient overlay so label is readable */
.hp-st-thumb__label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 32px 10px 12px;
	background: linear-gradient(to top, rgba(10,6,4,0.88) 0%, transparent 100%);
}

/* Small location-style eyebrow above the name, matching reference */
.hp-st-thumb__eyebrow {
	font-family: var(--font-base);
	font-size: 8px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
	display: block;
	margin-bottom: 4px;
}

.hp-st-thumb__name {
	font-family: var(--font-base);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	display: block;
	line-height: 1.3;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
	.hp-st-thumbs-wrap {
		width: clamp(320px, 34vw, 480px);
	}
	.hp-st-thumb {
		width: 130px;
		height: 190px;
	}
}

@media (max-width: 768px) {
	.hp-safari-types {
		height: clamp(500px, 82vh, 680px);
	}
	.hp-st-thumbs-wrap {
		width: clamp(240px, 65vw, 360px);
	}
	.hp-st-thumb {
		width: 110px;
		height: 160px;
	}
	.hp-st-content__title {
		font-size: clamp(26px, 6vw, 40px);
	}
}

@media (max-width: 520px) {
	.hp-st-thumbs-wrap { display: none; }
	.hp-st-tray {
		flex-direction: row;
		align-items: center;
		position: absolute;
		bottom: 24px;
		right: 20px;
		padding: 0;
	}
	.hp-st-tray-controls { padding: 0; }
	.hp-st-content {
		left: 20px;
		right: 20px;
		max-width: none;
		bottom: 96px;
	}
}

/* ════════════════════════════════════════════════════════
   LUXURY EFFECTS
   ════════════════════════════════════════════════════ */

/* ── Effect 1: Word stagger ── */
.hp-word-stagger {
	/* Reset margin/line-height from whatever heading it's applied to */
}

.hp-word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* Slight extra gap between words */
	margin-right: 0.2em;
}

.hp-word > span {
	display: inline-block;
	transform: translateY(105%);
	opacity: 0;
	transition:
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		opacity   0.5s ease;
}

.hp-word.is-visible > span {
	transform: translateY(0);
	opacity: 1;
}

/* Safari Types slide title: tighter timing */
.hp-st-content__panel .hp-word > span {
	transition:
		transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
		opacity   0.4s ease;
}

/* ── Effect 2: Card gloss sheen on hover ── */
.hp-dest__card::after,
.hp-st-thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		115deg,
		transparent 30%,
		rgba(255,255,255,0.08) 50%,
		transparent 70%
	);
	background-size: 200% 100%;
	background-position: 200% 0;
	transition: background-position 0.6s ease;
	z-index: 5;
	pointer-events: none;
	border-radius: inherit;
}

.hp-dest__card:hover::after,
.hp-st-thumb:hover::after {
	background-position: -30% 0;
}

/* ── Effect 3: Card lift — destination mosaic + safari cards ── */
.hp-dest__card {
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hp-dest__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 48px rgba(10,6,4,0.22);
}

/* ── Effect 4: Desaturate siblings on hover ── */
.hp-dest__card.is-dimmed,
.hp-dest__stack .hp-dest__card.is-dimmed {
	filter: saturate(0.45) brightness(0.85);
	transform: scale(0.99);
	transition:
		filter    0.4s ease,
		transform 0.4s ease;
}

/* safari-cards are <li> wrappers from swb_render_safari_card */
.safari-cards > li {
	transition:
		filter    0.4s ease,
		transform 0.4s ease;
}
.safari-cards > li.is-dimmed {
	filter: saturate(0.45) brightness(0.85);
	transform: scale(0.985);
}

/* ── Effect 5: Vignette intensifies on idle ── */
.hp-safari-types::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(
		ellipse at center,
		transparent 40%,
		rgba(6,3,2,0.55) 100%
	);
	opacity: 0;
	transition: opacity 1.8s ease;
}
.hp-safari-types.is-idle::after {
	opacity: 1;
}

/* ── Effect 6: Counter roll ── */
.hp-st-counter__current {
	display: inline-block;
	transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity   0.22s ease;
}
.hp-st-counter__current.is-rolling {
	transform: translateY(-40%);
	opacity: 0;
}

/* ── Effect 7: Active thumb scale pulse ── */
@keyframes hp-thumb-pulse {
	0%   { box-shadow: 0 0 0 2px var(--hp-maroon); }
	40%  { box-shadow: 0 0 0 6px rgba(128,0,0,0.25), 0 0 0 2px var(--hp-maroon); }
	100% { box-shadow: 0 0 0 2px var(--hp-maroon); }
}
.hp-st-thumb.is-pulsing {
	animation: hp-thumb-pulse 0.5s ease forwards;
}

/* ── Effect 8: Custom drag cursor on card tray ── */
.hp-safari-types.show-drag-cursor,
.hp-safari-types.show-drag-cursor .hp-st-thumbs-wrap,
.hp-safari-types.show-drag-cursor .hp-st-thumb {
	cursor: grab;
}
.hp-safari-types.show-drag-cursor:active {
	cursor: grabbing;
}

/* ── Effect 9: Magnetic arrows — smooth return handled by JS,
   but add a subtle glow on hover ── */
.hp-st-arrow {
	transition:
		background    0.2s ease,
		border-color  0.2s ease,
		transform     0.3s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow    0.3s ease;
}
.hp-st-arrow:hover {
	box-shadow: 0 0 0 6px rgba(255,255,255,0.06);
}

/* ════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.hp-hero__img--kenburns { animation: none; }
	.hp-hero__scroll-line   { animation: none; }
	.hp-reveal { opacity: 1; transform: none; transition: none; }
	.hp-word > span { transform: none; opacity: 1; transition: none; }
	.hp-st-slide,
	.hp-st-slide__img,
	.hp-st-thumb,
	.hp-st-thumb__img,
	.hp-st-thumbs,
	.hp-st-content__panel,
	.hp-st-timer__bar { transition: none; animation: none; }
	.hp-dest__card,
	.hp-dest__card.is-dimmed,
	.safari-cards > li.is-dimmed { transition: none; filter: none; transform: none; }
	.hp-safari-types::after { display: none; }
}