/**
 * Midwest Armor - Home hero slider ("Top Slider / Reel").
 * Full-bleed auto-advancing hero. Scoped under .mwhs; tokens mirror the theme
 * (Inter + JetBrains Mono, ink #141416) with an orange hero accent (#D97A4A).
 * Behaviour in assets/home/slider.js. Spec: ref-design/homepage_slider.html.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

.mwhs {
	--mwhs-accent: #D97A4A;
	--mwhs-ink: #0a0a0b;
	--mwhs-sans: 'Inter', system-ui, -apple-system, sans-serif;
	--mwhs-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--mwhs-pad: 56px;

	position: relative;
	width: 100%;
	/* Fill the viewport below the 162px sticky chrome header on desktop (the hero
	   "takes up the screen"); phones get a shorter hero in the media query below. */
	height: calc(100vh - 162px);
	min-height: 560px;
	overflow: hidden;
	background: var(--mwhs-ink);
	container-type: inline-size; /* headline scales with the slider's own width (cqw) */
	font-family: var(--mwhs-sans);
	-webkit-font-smoothing: antialiased;
	user-select: none;
}
.mwhs * { box-sizing: border-box; }

/* ---------------- Slides (crossfade) ---------------- */
.mwhs__viewport { position: absolute; inset: 0; }
.mwhs__slide {
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden;
	transition: opacity 1s ease, visibility 0s linear 1s;
}
.mwhs__slide.is-active {
	opacity: 1; visibility: visible;
	transition: opacity 1s ease, visibility 0s;
	z-index: 1;
}

.mwhs__bg {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
	/* legibility filter so white copy always holds */
	filter: brightness(0.64) contrast(1.06);
	transform: scale(1);
	transform-origin: center;
}
/* Ken Burns: active image drifts 1 -> 1.06 for slow life under the copy */
.mwhs.is-kenburns .mwhs__slide.is-active .mwhs__bg {
	animation: mwhs-kenburns 6.5s ease-out forwards;
}
@keyframes mwhs-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }

/* Fixed top + bottom gradient scrim over the image */
.mwhs__scrim {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 26%),
		linear-gradient(0deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 46%);
}

/* Whole-slide click target sits above the bg/scrim but below the content + nav.
   The content is pointer-events:none so clicks fall through to this cover; the
   visible CTA re-enables pointer-events so it stays a real link. */
.mwhs__cover { position: absolute; inset: 0; z-index: 2; }

/* ---------------- Meta (top corners) ---------------- */
.mwhs__meta {
	position: absolute; top: var(--mwhs-pad); z-index: 3; pointer-events: none;
	font-family: var(--mwhs-mono); font-size: 11px; letter-spacing: 1.8px;
	text-transform: uppercase; color: rgba(255,255,255,0.92);
}
.mwhs__meta--tl { left: var(--mwhs-pad); display: flex; align-items: center; gap: 10px; }
.mwhs__meta--tr { right: var(--mwhs-pad); color: rgba(255,255,255,0.7); }
.mwhs__sq { width: 9px; height: 9px; background: var(--mwhs-accent); display: block; flex-shrink: 0; }
.mwhs__tag { font-weight: 600; }

/* ---------------- Content (bottom-left) ---------------- */
.mwhs__content {
	position: absolute; left: var(--mwhs-pad); bottom: calc(var(--mwhs-pad) + 36px);
	right: var(--mwhs-pad); z-index: 3;
	max-width: 760px; color: #fff; pointer-events: none;
}
.mwhs__eyebrow {
	margin: 0 0 16px; font-family: var(--mwhs-mono); font-size: 12px; font-weight: 600;
	letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255,255,255,0.85);
}
.mwhs__headline {
	margin: 0; font-weight: 800; letter-spacing: -1.5px; line-height: 0.96; color: #fff;
	font-size: clamp(56px, 8cqw, 120px); text-wrap: balance;
}
.mwhs__sub {
	margin: 20px 0 0; font-size: 16px; line-height: 1.5; font-weight: 400;
	color: rgba(255,255,255,0.86); max-width: 520px; text-wrap: pretty;
}
.mwhs__actions { margin-top: 28px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.mwhs__cta,
.mwhs__cta:link,
.mwhs__cta:visited {
	display: inline-flex; align-items: center; gap: 10px; pointer-events: auto;
	background: #fff; color: var(--mwhs-ink) !important; text-decoration: none;
	font-family: var(--mwhs-mono); font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
	text-transform: uppercase; padding: 15px 22px; border-radius: 2px;
	transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.mwhs__cta:hover { background: var(--mwhs-accent); color: #fff !important; transform: translateY(-1px); }
.mwhs__cta-arrow { transition: transform 0.18s ease; }
.mwhs__cta:hover .mwhs__cta-arrow { transform: translateX(3px); }
.mwhs__price {
	font-family: var(--mwhs-mono); font-size: 14px; font-weight: 700; letter-spacing: 0.6px;
	color: var(--mwhs-accent);
}

/* ---------------- Segmented timer (bottom-left) ---------------- */
.mwhs__timer {
	position: absolute; left: var(--mwhs-pad); bottom: var(--mwhs-pad); z-index: 4;
	display: flex; gap: 8px;
}
.mwhs__seg {
	width: 46px; height: 3px; padding: 0; border: 0; cursor: pointer;
	background: rgba(255,255,255,0.28); position: relative; overflow: hidden; border-radius: 2px;
}
.mwhs__seg-fill {
	position: absolute; inset: 0; width: 0; background: #fff; border-radius: 2px;
}
.mwhs__seg.is-done .mwhs__seg-fill { width: 100%; }

/* ---------------- Prev / next (bottom-right) ---------------- */
.mwhs__nav {
	position: absolute; right: var(--mwhs-pad); bottom: var(--mwhs-pad); z-index: 4;
	display: flex; gap: 10px;
}
.mwhs__arrow {
	width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.4); background: rgba(0,0,0,0.18);
	color: #fff; font-size: 17px; cursor: pointer; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	transition: background 0.18s ease, border-color 0.18s ease;
	-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.mwhs__arrow:hover { background: #fff; color: var(--mwhs-ink); border-color: #fff; }

/* ---------------- Responsive (mobile TODO in spec - sensible default) ---------------- */
@media (max-width: 760px) {
	.mwhs { height: 72vh; min-height: 440px; --mwhs-pad: 22px; }
	.mwhs__content { bottom: calc(var(--mwhs-pad) + 30px); }
	.mwhs__headline { letter-spacing: -0.8px; }
	.mwhs__sub { font-size: 14.5px; }
	.mwhs__meta--tr { display: none; } /* coords would crowd the corner on phones */
	.mwhs__seg { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.mwhs__slide, .mwhs__bg, .mwhs__cta, .mwhs__cta-arrow, .mwhs__arrow { transition: none; animation: none; }
	.mwhs.is-kenburns .mwhs__slide.is-active .mwhs__bg { animation: none; }
}