/* ==========================================================================
   "Home 2" hero: auto-moving photo slider (21 Oct 2026). Contained in the page width with rounded corners,
   and short enough that the About Us section shows below it on the first screen.
   ========================================================================== */

.hero-slides {
	--slide-time: 5s; /* keep in sync with INTERVAL in hero-slides.js */
	padding-top: clamp(14px, 2vw, 24px);
}
.hero-slides__frame {
	position: relative;
	height: clamp(320px, 58vh, 600px);
	height: clamp(320px, 58svh, 600px);
	border-radius: var(--radius);
	overflow: hidden;
	isolation: isolate;
	background: #cfe3f1; /* sky tone while a photo loads */
	box-shadow: 0 30px 60px -36px rgba(20, 26, 61, 0.55);
}

.hero-slides__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.hero-slides__slide.is-on { opacity: 1; z-index: 1; }
.hero-slides__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 7s cubic-bezier(0.2, 0.6, 0.3, 1);
}
.hero-slides__slide.is-on .hero-slides__img { transform: scale(1); } /* slow zoom-out on the photo in view */

.hero-slides__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(0deg, rgba(10, 18, 45, 0.62) 0%, rgba(10, 18, 45, 0.18) 45%, transparent 70%),
		linear-gradient(90deg, rgba(10, 18, 45, 0.3) 0%, transparent 60%);
}

.hero-slides__title {
	position: absolute;
	z-index: 3;
	left: clamp(22px, 4vw, 56px);
	right: clamp(22px, 4vw, 56px);
	bottom: clamp(56px, 8vh, 84px);
	margin: 0;
	max-width: 14ch;
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 5.2vw, 4.4rem);
	font-weight: 600;
	line-height: 1.03;
	letter-spacing: -0.025em;
	color: #fff;
	text-shadow: 0 2px 24px rgba(10, 18, 45, 0.35);
	text-wrap: balance;
}

/* About Us follows closely, so its heading is already on the first screen. */
.hero-slides + .home-story { padding-top: clamp(40px, 4.4vw, 64px); }

/* Dots double as a timer: the active one fills up while its photo is shown. */
.hero-slides__dots {
	position: absolute;
	z-index: 3;
	left: clamp(22px, 4vw, 56px);
	bottom: clamp(24px, 3.4vh, 34px);
	display: flex;
	gap: 8px;
}
.hero-slides__dot {
	position: relative;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	overflow: hidden;
	cursor: pointer;
	transition: width 0.4s var(--ease), background-color 0.3s;
}
.hero-slides__dot:hover { background: rgba(255, 255, 255, 0.8); }
.hero-slides__dot:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.hero-slides__dot.is-on { width: 44px; background: rgba(255, 255, 255, 0.35); }
.hero-slides__dot span { position: absolute; inset: 0; border-radius: inherit; background: var(--sun); transform: scaleX(0); transform-origin: left; }
.hero-slides__dot.is-on span { animation: slide-timer var(--slide-time) linear forwards; }
.hero-slides.is-paused .hero-slides__dot.is-on span { animation-play-state: paused; }
@keyframes slide-timer { to { transform: scaleX(1); } }

/* Phones: shorter frame so About Us peeks in below; the gutter keeps the rounded frame inside the screen. */
@media (max-width: 800px) {
	.hero-slides__frame { height: clamp(320px, 58svh, 520px); }
	.hero-slides__title { max-width: 12ch; bottom: 58px; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-slides__slide, .hero-slides__img { transition: none; }
	.hero-slides__img { transform: none; }
	.hero-slides__dot.is-on span { animation: none; transform: scaleX(1); }
}

/* Diba, 23 Oct 2026: the text sits at the TOP of each slide, above the travellers' heads, and belongs to its
   slide (so each photo has its own caption). The dark fade is per slide, at the top, behind the text. */
.hero-slides__scrim { display: none; }
.hero-slides__slide::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 62%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 18, 45, 0.6) 0%, rgba(10, 18, 45, 0.22) 55%, transparent 100%);
}
.hero-slides__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.hero-slides__video.is-playing { opacity: 1; }
.hero-slides .hero-slides__title,
.hero-slides__caption {
	position: absolute;
	z-index: 2;
	top: clamp(26px, 5vh, 52px);
	bottom: auto;
	left: clamp(22px, 4vw, 56px);
	right: clamp(22px, 4vw, 56px);
	max-width: none;
	margin: 0;
	color: #fff;
	text-shadow: 0 2px 24px rgba(10, 18, 45, 0.45);
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.8s ease 0.3s, transform 0.8s var(--ease) 0.3s;
}
.hero-slides__slide.is-on .hero-slides__title,
.hero-slides__slide.is-on .hero-slides__caption { opacity: 1; transform: none; }
.hero-slides__caption {
	max-width: 22ch;
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 3.8vw, 3.1rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.hero-slides__dots { z-index: 3; }
@media (max-width: 800px) {
	.hero-slides .hero-slides__title { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }
	.hero-slides__caption { font-size: clamp(1.4rem, 6vw, 1.9rem); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-slides .hero-slides__title, .hero-slides__caption { transition: none; }
}
/* Diba/Lucian 23 Oct 2026: on big screens the headline still touched the travellers' heads.
   Smaller text (max ~2.6rem) and the captions to match; the group photo shows more sky at the top. */
.hero-slides .hero-slides__title { font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.08; top: clamp(20px, 3.5vh, 36px); }
.hero-slides__caption { font-size: clamp(1.35rem, 2.4vw, 2.1rem); top: clamp(20px, 3.5vh, 36px); max-width: 26ch; }
@media (max-width: 800px) {
	.hero-slides .hero-slides__title { font-size: clamp(1.35rem, 6vw, 1.8rem); }
	.hero-slides__caption { font-size: clamp(1.15rem, 5vw, 1.5rem); }
}