/**
 * MH Unlock banner slider — dark teal theme.
 *
 * Sizing is fixed up front (min-height) so the slider never shifts the page as
 * images load; layout shift is a Core Web Vitals penalty.
 */

.mh-slider {
	position: relative;
	margin: 0 0 3rem;
	border-radius: var(--mh-radius-lg, 16px);
	overflow: hidden;
	/* Fallback ground behind a slide while its image loads. */
	background: var(--mh-surface-alt, #152329);
	border: 1px solid var(--mh-line, #1c2f36);
	isolation: isolate;
}

.mh-slider__viewport {
	overflow: hidden;
}

/* The theme styles `.entry-content ul/li` with more specific selectors than a
   bare class, which leaks a left padding and vertical margin into the track and
   leaves a dark frame around every slide. Match that specificity to kill it. */
.mh-slider .mh-slider__track,
.entry-content .mh-slider .mh-slider__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* ---------------------------------------------------------------------------
   Slides
   --------------------------------------------------------------------------- */

.mh-slider .mh-slide,
.entry-content .mh-slider .mh-slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 100%;
	/* 3:1 at desktop — see the aspect note in the plugin readme. */
	min-height: clamp(300px, 34vw, 400px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1.5rem 3.5rem;
	margin: 0;
	list-style: none;
	background-size: cover;
	background-position: center;
	text-align: center;
	overflow: hidden;
}

/* <picture> is inline by default, which would collapse around the absolutely
   positioned image and leave the slide empty. */
.mh-slide picture {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 0;
}

.mh-slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* ---------------------------------------------------------------------------
   Slides with artwork
   ---------------------------------------------------------------------------
   Uploaded banner art normally has its own headline and feature list baked in,
   so the overlay would just cover it. On these slides the text and the scrim
   stay hidden and fade in on hover instead.

   Colour-preset slides (no image) have nothing but the overlay, so their text
   stays visible at all times.
   --------------------------------------------------------------------------- */

/* Whole-slide link. Sits under the overlay so the button still takes its own
   clicks, and gives touch devices — which never hover — something to tap. */
.mh-slide__cover {
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Uploaded artwork already carries the product name, its feature list and its
   own call to action, and the whole slide is a link (.mh-slide__cover). So the
   overlay adds nothing here: the words appeared twice in two typefaces, and the
   button repeated a click target that already covered the full banner.
   Image slides therefore show the artwork and nothing else. */
.mh-slide--has-image .mh-slide__inner {
	display: none;
}

/* No scrim either — it existed only to seat the button, and dimming artwork
   that is the whole point of the slide is a net loss. */
.mh-slide--has-image::after {
	content: none;
}

.mh-slide__inner {
	position: relative;
	z-index: 3;
	max-width: 46rem;
}

.mh-slide__title {
	margin: 0 0 0.7rem;
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: #fff;
	text-wrap: balance;
}

.mh-slide__text {
	margin: 0 auto 1.6rem;
	max-width: 40rem;
	font-size: clamp(0.95rem, 1.3vw, 1.05rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.mh-slide__btn {
	display: inline-block;
	padding: 0.8rem 2rem;
	border-radius: 8px;
	background: #fff;
	color: #0b3b46;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	/* The theme underlines content links; this is a button. */
	text-decoration: none !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.mh-slide__btn:hover,
.mh-slide__btn:focus-visible {
	background: #e6f7fa;
	color: #072a33;
	text-decoration: none !important;
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   Arrows
   --------------------------------------------------------------------------- */

.mh-slider__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.mh-slider__nav:hover,
.mh-slider__nav:focus-visible {
	background: rgba(255, 255, 255, 0.9);
	border-color: #fff;
	color: #0b3b46;
}

.mh-slider__nav svg {
	width: 19px;
	height: 19px;
}

.mh-slider__nav--prev {
	left: 16px;
}

.mh-slider__nav--next {
	right: 16px;
}

/* ---------------------------------------------------------------------------
   Dots
   --------------------------------------------------------------------------- */

.mh-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 20px;
	z-index: 3;
	display: flex;
	gap: 8px;
	transform: translateX(-50%);
}

.mh-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: width 0.25s ease, background 0.25s ease;
}

.mh-slider__dot.is-active {
	width: 26px;
	background: #fff;
}

.mh-slider__dot:focus-visible,
.mh-slider__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.mh-slider {
		border-radius: 12px;
	}

	.mh-slide {
		min-height: 280px;
		padding: 2.25rem 1.25rem 3rem;
	}

	/* Arrows crowd the text at this width; dots and swipe are enough. */
	.mh-slider__nav {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mh-slider__track,
	.mh-slide__btn {
		transition: none;
	}

	.mh-slide__btn:hover,
	.mh-slide__btn:focus-visible {
		transform: none;
	}
}