/**
 * MiMA Carousel — front-end styles ("Masked Reveal" direction).
 * Layout + look are CSS-driven; carousel.js only drives the GSAP motion.
 */

.mima-hero {
	--mima-accent: #D1292B;
	--mima-cta-hover: rgb(168, 33, 35); /* smooth colour-only hover, per brand spec */
	--mima-h-desktop: 600px;
	--mima-h-tablet: 500px;
	--mima-h-mobile: 400px;

	position: relative;
	width: 100%;
	/* FIXED height from the global setting, so every slide is exactly the same
	   height and there is no shift on transition. Slides are absolutely stacked
	   (inset:0) so each one fills this height edge-to-edge. */
	height: var(--mima-h-desktop);
	overflow: hidden;
	background: #0A0A0A;
	outline: none;
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

.mima-hero *,
.mima-hero *::before,
.mima-hero *::after {
	box-sizing: border-box;
}

.mima-hero__live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Slides ---------- */
.mima-hero__slide {
	position: absolute;
	inset: 0;            /* every slide fills the fixed-height carousel → identical height, no shift */
	height: 100%;
	min-width: 0;
	display: flex;
	flex-direction: row;
	align-items: stretch; /* image + content columns stretch to the same (full) height */
}

/* No-JS / GSAP-less fallback: show only the first slide. */
.mima-hero__slide { opacity: 0; }
.mima-hero__slide--first { opacity: 1; }
.mima-hero.is-booted .mima-hero__slide { opacity: 1; } /* JS took over; GSAP owns visibility via inline styles */

.mima-hero__imgwrap {
	flex: 0 0 50%; /* 50/50 editorial split */
	width: 100%;
	height: 100%;  /* defined height so the image can fill it; matches the content column */
	position: relative;
	overflow: hidden;
	background: #0A0A0A;
}

/* The image fills 100% of the wrapper's width AND height and crops with cover.
   Every property is forced with !important so a theme's global responsive-image
   rule (e.g. `img { height: auto }`, common in WP / Elementor / page builders)
   cannot shrink the image and leave empty space above/below it. */
.mima-hero__img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	object-fit: cover !important;       /* never contain — fill and crop, no letterboxing */
	object-position: center !important; /* keep the focal point centred */
	will-change: transform;
}

.mima-hero__img--placeholder {
	background: linear-gradient(135deg, #171717, #2a2a2a);
}

.mima-hero__sweep {
	position: absolute;
	inset: 0;
	background: var(--mima-accent);
	transform: scaleX(0);
	transform-origin: left center;
	z-index: 2;
}

.mima-hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 10, 10, 0) 72%, rgba(10, 10, 10, 0.14) 100%);
	z-index: 1;
	pointer-events: none;
}

/* ---------- Content column ---------- */
.mima-hero__content {
	flex: 1 1 50%;
	height: 100%;      /* exactly matches the image column height */
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center; /* short content is vertically centred */
	/* Vertical buffer so text never touches the edges; the larger bottom value
	   clears the progress bars that sit at the bottom of the column. */
	padding: 48px 56px 92px;
	background: #fff;
}

.mima-hero__mask {
	overflow: hidden;
}

.mima-hero__mask--tag {
	align-self: flex-start;
}

.mima-hero__tag {
	display: block;
	font: 700 12px/1 Poppins, sans-serif;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--mima-accent);
	border: 1px solid color-mix(in srgb, var(--mima-accent) 40%, transparent);
	border-radius: 2px;
	padding: 7px 11px;
}

.mima-hero__headline {
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 38px;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #0A0A0A;
	margin: 20px 0 0;
	/* Let long headlines use the full 50% column instead of wrapping into a
	   narrow, very tall block. */
	max-width: none;
	text-wrap: balance;
	will-change: clip-path, transform;
}

.mima-hero__headline.is-big {
	font-size: 48px;
	line-height: 1.05;
	letter-spacing: -0.025em;
	max-width: 14ch;
}

/* Even rhythm between tag → headline → description → CTA (all 20px). */
.mima-hero__mask--intro {
	margin-top: 20px;
}

.mima-hero__intro {
	font: 400 17px/1.55 Poppins, sans-serif;
	color: #333;
	margin: 0;
	max-width: 46ch;
	/* Description truncation. carousel.js trims the text word-by-word so the last
	   line is only ~half full and ends with "…" — giving a true 2.5 lines on
	   desktop/tablet (3.5 on mobile) with full-height letters, not a sliced line.
	   This -webkit-line-clamp is the no-JS fallback cap (whole lines). */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.mima-hero__mask--cta {
	margin-top: 20px;
}

/* CTA — colour-only hover to rgb(168,33,35), smoothly. No transform, no arrow. */
.mima-hero__cta {
	display: inline-flex;
	align-items: center;
	background: var(--mima-accent);
	color: #fff;
	font: 600 18px/1 Poppins, sans-serif;
	padding: 14px 28px;
	border-radius: 5px;
	text-decoration: none;
	transition: background-color 200ms ease;
}

.mima-hero__cta:hover,
.mima-hero__cta:focus-visible {
	background: var(--mima-cta-hover);
	color: #fff;
}

/* ---------- Prev / next ---------- */
.mima-hero__nav {
	position: absolute;
	left: 24px;
	bottom: 24px;
	display: flex;
	gap: 8px;
	z-index: 5;
}

.mima-hero__arrow {
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 2px;
	background: rgba(10, 10, 10, 0.6);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background-color 200ms ease;
	-webkit-tap-highlight-color: transparent; /* no mobile tap flash */
	outline-offset: 3px;
}

/* Exactly two states: default (dark) and hover/active/focus (brand red).
   !important + the scoped selector defeat any theme button styling that would
   otherwise paint a pink/magenta :active/:focus background. */
.mima-hero .mima-hero__arrow:hover,
.mima-hero .mima-hero__arrow:focus,
.mima-hero .mima-hero__arrow:focus-visible,
.mima-hero .mima-hero__arrow:active {
	background: var(--mima-accent) !important;
	color: #fff !important;
}

.mima-hero__arrow[disabled],
.mima-hero__arrow[disabled]:hover {
	opacity: 0.35;
	cursor: default;
	background: rgba(10, 10, 10, 0.6) !important;
}

/* ---------- Labelled progress bars ---------- */
.mima-hero__bars {
	position: absolute;
	bottom: 0;
	left: 50%; /* aligns with the 50/50 split */
	right: 0;
	display: flex;
	gap: 0;
	padding: 0 56px 24px;
	z-index: 4;
}

.mima-hero__bar {
	flex: 1;
	border: none;
	padding: 0 14px 0 0;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	/* No background in any interaction state — the ONLY active indicator is the
	   progress fill underneath. Reset appearance so no theme/UA button styling
	   adds a hover or clicked background. */
	background: transparent;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: none;
}

.mima-hero__bar:hover,
.mima-hero__bar:focus,
.mima-hero__bar:active,
.mima-hero__bar:focus-visible {
	background: transparent;
	box-shadow: none;
}

.mima-hero__bar:last-child {
	padding-right: 0;
}

.mima-hero__bar-head {
	display: flex;
	align-items: baseline;
	gap: 7px;
	font: 700 11px/1 Poppins, sans-serif;
	letter-spacing: 0.06em;
	color: #0A0A0A;
	min-height: 11px;
}

.mima-hero__bar-num {
	color: var(--mima-accent);
}

.mima-hero__bar-track {
	margin-top: 9px;
	height: 3px;
	background: #e2e2e2;
	border-radius: 2px;
	overflow: hidden;
}

.mima-hero__bar-fill {
	height: 100%;
	width: 100%;
	background: var(--mima-accent);
	transform: scaleX(0);
	transform-origin: left center;
}

.mima-hero :focus-visible {
	outline: 2px solid var(--mima-accent);
	outline-offset: 3px;
}

/* ---------- Responsive geometry ---------- */
/* Tablet: fixed 500px (from the setting). Slightly smaller headline so longer
   copy still fits the fixed height within the narrower content column. */
@media (max-width: 980px) {
	.mima-hero { height: var(--mima-h-tablet); }
	.mima-hero__content { padding: 40px 44px 84px; }
	.mima-hero__headline { font-size: 32px; }
	.mima-hero__headline.is-big { font-size: 40px; }
}

/* Mobile — "Clean Vertical Stack" (from the standalone design build):
   image sits on top as a fixed 200px band, roomy top-aligned white content
   below with the intro shown, full-width progress bars, and the prev/next
   arrows tucked bottom-right just above the bars. Carousel height comes from
   the mobile setting (default 700px) which gives the stack plenty of room. */
@media (max-width: 720px) {
	.mima-hero { height: var(--mima-h-mobile); }
	.mima-hero__slide { flex-direction: column; }
	.mima-hero__imgwrap { flex: 0 0 200px; width: 100%; height: auto; }
	.mima-hero__content {
		flex: 1 1 auto;
		min-height: 0;
		justify-content: flex-start; /* content flows from the top, under the image */
		padding: 24px 22px 104px;
	}
	/* Even 16px rhythm between tag → headline → description → CTA on mobile. */
	.mima-hero__headline { font-size: 20px; margin-top: 16px; }
	.mima-hero__headline.is-big { font-size: 26px; }
	.mima-hero__mask--intro { display: block; margin-top: 16px; }
	/* Mobile shows ~3.5 lines (JS trims to a half last line). This line-clamp is
	   the no-JS fallback cap. */
	.mima-hero__intro { font-size: 14px; -webkit-line-clamp: 4; line-clamp: 4; }
	.mima-hero__mask--cta { margin-top: 16px; }
	.mima-hero__bars { left: 0; right: 0; padding: 0 20px 18px; }
	.mima-hero__bar-head { font-size: 10px; }
	/* Arrows sit above the full-width bars with a clear gap between them. */
	.mima-hero__nav { left: auto; right: 20px; bottom: 74px; }
}

/* Static fallback when GSAP is unavailable. */
.mima-hero.is-static .mima-hero__slide { opacity: 0; transition: opacity 400ms ease; pointer-events: none; }
.mima-hero.is-static .mima-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.mima-hero.is-static .mima-hero__bar-fill { transform: scaleX(0); }
.mima-hero.is-static .mima-hero__bar.is-active .mima-hero__bar-fill { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.mima-hero__img { will-change: auto; }
}