/* Miss Horlogerie — Horizontal Story Slider
   Colors inherit from the theme's Elementor color bridge (--mh-*) with fallbacks,
   and can be overridden per-widget via the Elementor style controls. */
.mh-hero {
	--mh-hero-text: #fff;
	--mh-hero-accent: var( --mh-primary, #c9a961 );
	--mh-hero-btn-bg: var( --mh-primary, #c9a961 );
	--mh-hero-btn-text: #1a1a1a;
	--mh-hero-scrim: .62;

	position: relative;
	width: 100%;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	background: var( --mh-dark, #1a1a1a );
	color: var( --mh-hero-text, #fff );
	touch-action: pan-y;
}

.mh-hero__track {
	display: flex;
	height: 100%;
	will-change: transform;
}

/* Each slide is one full viewport wide. */
.mh-slide {
	position: relative;
	flex: 0 0 100vw;
	width: 100vw;
	height: 100%;
}
.mh-slide__link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.mh-slide__media {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
}
.mh-slide__media img,
.mh-slide__media picture {
	width: 100%;
	height: 100%;
	display: block;
}
.mh-slide__media > picture > img {
	object-fit: cover;
}

/* Gentle parallax-friendly zoom on the active slide. */
.mh-slide__media > picture > img {
	transform: scale( 1.06 );
	transition: transform 1.2s cubic-bezier( .16, 1, .3, 1 );
}
.mh-slide.is-active .mh-slide__media > picture > img {
	transform: scale( 1 );
}

/* Gallery fallback: pastel background derived from the dominant color.
   color-mix lightens to a modern, airy tone. Supported Chrome 111+, FF 113+, Safari 16.2+. */
.mh-slide__media--gallery {
	--mh-hero-bg: #c9b09a; /* overridden per-slide by inline style */
	/* Refined, airy wash: a warm off-white base lightly tinted with the dominant
	   colour, plus a soft top-left highlight for depth. Lower saturation reads
	   high-end rather than candy-bright. */
	background:
		radial-gradient(
			ellipse 78% 70% at 22% 6%,
			color-mix( in srgb, var( --mh-hero-bg ) 38%, #fff ) 0%,
			transparent 62%
		),
		linear-gradient(
			180deg,
			color-mix( in srgb, var( --mh-hero-bg ) 20%, #faf8f4 ) 0%,
			color-mix( in srgb, var( --mh-hero-bg ) 30%, #f3eee7 ) 100%
		);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mh-gallery {
	display: grid;
	gap: clamp( 8px, 1.4vw, 22px );
	width: min( 78%, 1100px );
	height: 70%;
	align-items: center;
}
.mh-gallery--1 { grid-template-columns: 1fr; max-width: 620px; }
.mh-gallery--2 { grid-template-columns: 1fr 1fr; }
.mh-gallery--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.mh-gallery--3 .mh-gallery__item:first-child { grid-row: 1 / span 2; }
.mh-gallery--4,
.mh-gallery--5 { grid-template-columns: repeat( 3, 1fr ); grid-auto-rows: 1fr; }
.mh-gallery--4 .mh-gallery__item:first-child,
.mh-gallery--5 .mh-gallery__item:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.mh-gallery__item {
	overflow: hidden;
	border-radius: 2px;
	box-shadow: 0 30px 70px -34px rgba( 40, 30, 20, .5 );
	aspect-ratio: 4 / 3;
}
.mh-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* Readability scrim, weighted to the lower-left where the text sits. */
.mh-slide__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient( 90deg, rgba( 0, 0, 0, var( --mh-hero-scrim ) ) 0%, rgba( 0, 0, 0, calc( .4 * var( --mh-hero-scrim ) ) ) 46%, rgba( 0, 0, 0, 0 ) 80% ),
		linear-gradient( 0deg, rgba( 0, 0, 0, calc( .85 * var( --mh-hero-scrim ) ) ) 0%, rgba( 0, 0, 0, 0 ) 62% );
	pointer-events: none;
}

/* Text block, lower-left. */
.mh-slide__content {
	position: absolute;
	left: clamp( 24px, 6vw, 96px );
	bottom: clamp( 80px, 12vh, 150px );
	max-width: min( 46ch, 80vw );
	z-index: 2;
	/* Soft shadow keeps light text legible over any photo without a heavy scrim. */
	text-shadow: 0 1px 2px rgba( 0, 0, 0, .28 ), 0 8px 30px rgba( 0, 0, 0, .35 );
}
/* No shadow where dark text sits on a light background. */
.mh-slide--gallery .mh-slide__content,
.mh-hero[data-text-scheme="dark"] .mh-slide__content { text-shadow: none; }
.mh-slide__cat {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: .7rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	font-weight: 600;
	color: var( --mh-hero-accent );
	margin-bottom: 18px;
}
/* Editorial hairline before the category label. */
.mh-slide__cat::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: .9;
}
.mh-slide__title {
	color: inherit; /* Follow the hero text scheme, not the theme's global h2 colour. */
	font-family: var( --mh-font-heading, inherit );
	font-size: clamp( 2rem, 5vw, 4.4rem );
	line-height: .98;
	font-weight: var( --mh-font-heading-weight, 800 );
	font-style: var( --e-global-typography-primary-font-style, normal );
	text-transform: var( --e-global-typography-primary-text-transform, none );
	letter-spacing: var( --e-global-typography-primary-letter-spacing, -.01em );
	margin: 0 0 16px;
	text-wrap: balance;
}
.mh-slide__excerpt {
	font-family: var( --mh-font-body, inherit );
	font-weight: var( --mh-font-body-weight, 400 );
	font-size: clamp( .95rem, 1.1vw, 1.1rem );
	line-height: 1.55;
	margin: 0 0 24px;
	max-width: 40ch;
	opacity: .92;
}
.mh-slide__btn {
	display: inline-flex;
	align-items: center;
	gap: .8em;
	margin-top: 8px;
	padding: 1.05em 1.9em;
	background: var( --mh-hero-btn-bg );
	color: var( --mh-hero-btn-text );
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 600;
	border-radius: 1px;
	transition: gap .3s ease, background-color .3s ease, color .3s ease;
}
.mh-slide__btn::after { content: "\2192"; transition: transform .3s ease; }
.mh-slide__link:hover .mh-slide__btn { gap: 1.1em; }
.mh-slide__link:hover .mh-slide__btn::after { transform: translateX( 4px ); }

/* Fixed UI: counter, progress, hint. */
.mh-hero__ui {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp( 22px, 4vh, 46px );
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	z-index: 3;
	pointer-events: none;
}
.mh-hero__counter {
	font-variant-numeric: tabular-nums;
	font-size: .82rem;
	letter-spacing: .18em;
	color: rgba( 255, 255, 255, .9 );
}
.mh-hero__counter-sep { margin: 0 .5em; opacity: .5; }
.mh-hero__progress {
	width: clamp( 90px, 16vw, 220px );
	height: 2px;
	background: rgba( 255, 255, 255, .25 );
	overflow: hidden;
	border-radius: 2px;
}
.mh-hero__progress > span {
	display: block;
	height: 100%;
	width: 0;
	background: var( --mh-hero-accent );
	transition: width .35s cubic-bezier( .16, 1, .3, 1 );
}
.mh-hero__hint {
	position: absolute;
	right: clamp( 24px, 5vw, 70px );
	bottom: 0;
	font-size: .68rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	opacity: .6;
	animation: mh-hint 2.4s ease-in-out infinite;
}
@keyframes mh-hint { 0%, 100% { transform: translateX( 0 ); opacity: .35; } 50% { transform: translateX( 6px ); opacity: .75; } }

/* Empty state. */
.mh-hero--empty { display: flex; align-items: center; justify-content: center; color: #fff; }

/* ---- Gallery slides: light background → dark text ---- */

/* No dark gradient scrim needed — the bg is already a solid light color. */
.mh-slide--gallery .mh-slide__scrim { display: none; }

/* All text switches to near-black so it reads on the pastel bg. */
.mh-slide--gallery .mh-slide__content { color: #1a1a1a; }
.mh-slide--gallery .mh-slide__title   { color: #1a1a1a; }
.mh-slide--gallery .mh-slide__excerpt { color: #1a1a1a; opacity: .72; }

/* Category label keeps the gold accent — works well on light backgrounds. */
.mh-slide--gallery .mh-slide__cat { color: var( --mh-hero-accent ); }

/* Button: use a slightly deeper tint of the dominant color for contrast,
   with dark text to match the overall light-mode look. */
.mh-slide--gallery .mh-slide__btn {
	background: color-mix( in srgb, var( --mh-hero-btn-bg ) 100%, transparent );
	color: var( --mh-hero-btn-text, #1a1a1a );
	/* Subtle dark border so the gold button doesn't disappear on light bg. */
	box-shadow: inset 0 0 0 1.5px rgba( 0, 0, 0, .12 );
}

/* The image zoom animation stays but skip the scale-down on active (already flat). */
.mh-slide--gallery.is-active .mh-slide__media > picture > img { transform: none; }

/* ---- Gallery slides: editorial split — copy left · imagery right ---- */
@media ( min-width: 769px ) {
	.mh-slide--gallery .mh-slide__media--gallery {
		justify-content: flex-end;
		/* Push the gallery into the right half; the left half is reserved for copy. */
		padding: clamp( 96px, 13vh, 150px ) clamp( 40px, 6vw, 110px ) clamp( 96px, 13vh, 150px ) 52%;
	}
	.mh-slide--gallery .mh-gallery {
		width: 100%;
		height: 100%;
		max-height: 68%;
	}
	.mh-slide--gallery .mh-slide__content {
		bottom: auto;
		top: 50%;
		transform: translateY( -50% );
		left: clamp( 40px, 6vw, 110px );
		max-width: min( 34ch, 36vw );
	}
}

/* ---- Manual text scheme override (Elementor "Text scheme" control) ---- */

/* Force LIGHT text on every slide regardless of background. */
.mh-hero[data-text-scheme="light"] .mh-slide__content,
.mh-hero[data-text-scheme="light"] .mh-slide__title,
.mh-hero[data-text-scheme="light"] .mh-slide__excerpt { color: #fff; }
.mh-hero[data-text-scheme="light"] .mh-slide__excerpt { opacity: .92; }

/* Force DARK text on every slide; drop the dark scrim and outline the button. */
.mh-hero[data-text-scheme="dark"] .mh-slide__scrim { display: none; }
.mh-hero[data-text-scheme="dark"] .mh-slide__content,
.mh-hero[data-text-scheme="dark"] .mh-slide__title { color: #1a1a1a; }
.mh-hero[data-text-scheme="dark"] .mh-slide__excerpt { color: #1a1a1a; opacity: .72; }
.mh-hero[data-text-scheme="dark"] .mh-slide__btn {
	color: var( --mh-hero-btn-text, #1a1a1a );
	box-shadow: inset 0 0 0 1.5px rgba( 0, 0, 0, .12 );
}

/* Mobile: vertical scroll-snap instead of scroll-jacking. */
@media ( max-width: 768px ) {
	.mh-hero { height: auto; touch-action: auto; }
	.mh-hero__track {
		flex-direction: column;
		height: auto;
		transform: none !important;
	}
	.mh-slide { flex-basis: auto; width: 100%; height: 88svh; }
	.mh-hero__ui { position: fixed; bottom: 16px; }
	.mh-hero__hint { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.mh-slide__media > picture > img { transition: none; transform: none; }
	.mh-hero__hint { animation: none; }
}