/* =============================================================================
 * Section — Moments (Accueil)
 * Pinned horizontal scroll. 6 portrait cards drift right→left as you scroll.
 * ========================================================================== */

.exspa-moments {
	background: var(--exspa-sage-deep, #2A3325);
	color: var(--exspa-cream, #F5F1E8);
	overflow: hidden;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	padding-top: clamp(96px, 12vw, 160px);
}

.exspa-moments__header {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 80px) clamp(56px, 8vw, 96px);
	text-align: left;
}

.exspa-moments__eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin: 0 0 24px;
	color: var(--exspa-cream, #F5F1E8);
	opacity: 0.6;
}

.exspa-moments__heading {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-size: clamp(32px, 5vw, 60px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--exspa-cream, #F5F1E8);
}

.exspa-moments__heading em {
	font-style: italic;
	opacity: 0.7;
}

/* -----------------------------------------------------------------------------
 * Horizontal viewport — pinned on desktop (GSAP ScrollTrigger scrubs the
 * horizontal translate), native swipe on touch.
 * -------------------------------------------------------------------------- */
.exspa-moments__viewport {
	position: relative;
	width: 100%;
	padding: 0 0 clamp(96px, 12vw, 160px);
	overflow: hidden;
}

.exspa-moments__track {
	display: inline-flex;
	gap: 32px;
	padding: 0 clamp(24px, 5vw, 80px);
	will-change: transform;
}

.exspa-moments__card {
	flex: 0 0 360px;
	width: 360px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

@media (min-width: 1200px) {
	.exspa-moments__card {
		flex: 0 0 400px;
		width: 400px;
	}
}

/* Touch only — fall back to native horizontal swipe.
   Desktop reduce-motion users still get the GSAP pin (controlled, not jarring). */
@media (pointer: coarse) {
	.exspa-moments__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.exspa-moments__viewport::-webkit-scrollbar { display: none; }
	.exspa-moments__card { scroll-snap-align: start; }
}

.exspa-moments__media {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--exspa-sage, #3F4D38);
}

.exspa-moments__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.exspa-moments__card:hover .exspa-moments__media img {
	transform: scale(1.04);
}

.exspa-moments__caption {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
}

.exspa-moments__num {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-size: 20px;
	font-style: italic;
	color: var(--exspa-cream, #F5F1E8);
	opacity: 0.55;
}

.exspa-moments__tag {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--exspa-cream, #F5F1E8);
	opacity: 0.78;
}

.exspa-moments__name {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 400;
	letter-spacing: -0.005em;
	margin: 0;
	color: var(--exspa-cream, #F5F1E8);
	line-height: 1.2;
}

/* -----------------------------------------------------------------------------
 * Mobile — narrower cards
 * -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.exspa-moments {
		padding-top: 72px;
	}
	.exspa-moments__header {
		padding-bottom: 48px;
	}
	.exspa-moments__viewport {
		padding-bottom: 88px;
	}
	.exspa-moments__track {
		padding: 0 20px;
		gap: 20px;
	}
	.exspa-moments__card {
		flex: 0 0 78vw;
		width: 78vw;
	}
}