/* WS2 — Home hero carousel (Bricks Slider (Nestable) / Splide). Everything is scoped to .spf-hero.
 * Markup: section.spf-hero > .brxe-slider-nested.spf-hero__slider > .spf-hero__slide x4 > img.spf-hero__img + p.spf-hero__title
 * Per-slide styling is class based on purpose: Splide clones slides for the loop and Bricks' #id selectors would not be reliable there.
 */

.spf-hero {
	--spf-hero-h: clamp(28rem, 21.14746rem + 18.033vw, 50rem); /* same fluid height the old single banner had: 280px phone -> 500px from 1600px up */
	--spf-yellow: #f6dd03;
	--spf-ink: #1f1f1f;
	--spf-scrim: 5, 12, 32;
	padding: 0;
	margin: 0;
	width: 100%;
}

/* ---------- frame: fixed height so nothing shifts while Splide boots ---------- */
.spf-hero .spf-hero__slider {
	width: 100%;
	height: var(--spf-hero-h);
	background: var(--spf-ink);
}
.spf-hero .spf-hero__slider .splide__track,
.spf-hero .spf-hero__slider .splide__list { height: 100%; }

/* Splide hides the whole slider until its JS has run (visibility:hidden), which would delay the LCP image.
 * Until then show slide 1 only. Splide puts .is-active on the root as the very first thing it mounts, i.e. BEFORE it measures the
 * slides, so the pre-init layout rules key on :not(.is-active) and never interfere with its measurements. */
.spf-hero .spf-hero__slider.splide:not(.is-initialized) { visibility: visible; }
.spf-hero .spf-hero__slider:not(.is-active) .splide__track { overflow: hidden; }
.spf-hero .spf-hero__slider:not(.is-active) .splide__list > .spf-hero__slide { flex: 0 0 100%; }
.spf-hero .spf-hero__slider:not(.is-active) .splide__list > .spf-hero__slide:not(:first-child) { display: none; }

/* ---------- slide ---------- */
.spf-hero .spf-hero__slide {
	--spf-focal: 50% 50%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: var(--spf-hero-h);
	margin: 0;
	padding: 0 clamp(1.6rem, 4vw, 8rem) 3.6rem; /* bottom room for the dots keeps the headline optically centred */
	overflow: hidden;
	background: var(--spf-ink); /* dark base: white text stays legible even before an image arrives */
	text-align: center;
}

/* Focal points (IMAGE-PLACEMENT.md), tuned against the 3:1 hero crop */
.spf-hero .spf-hero__slide--aerial { --spf-focal: 45% 50%; }
.spf-hero .spf-hero__slide--stock  { --spf-focal: 60% 56%; }
.spf-hero .spf-hero__slide--grinder{ --spf-focal: 45% 48%; }
.spf-hero .spf-hero__slide--laser  { --spf-focal: 50% 55%; }

.spf-hero .spf-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: var(--spf-focal);
}

/* Scrim: dark to transparent. A navy-black wash that is lightest at the top edge and holds >= .62 behind the headline band, which is
 * what keeps white text at >= 4.5:1 even over a pure-white pixel (sky, laser sparks); measured in _work/ws2-contrast.py.
 * On narrow screens the headline wraps to 3-4 lines and reaches the top of the slide, so the light top edge is raised. */
.spf-hero .spf-hero__slide { --spf-scrim-top: .22; }
@media (max-width: 1100px) {
	.spf-hero .spf-hero__slide { --spf-scrim-top: .58; }
}
.spf-hero .spf-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(var(--spf-scrim), var(--spf-scrim-top)) 0%,
		rgba(var(--spf-scrim), .62) 30%,
		rgba(var(--spf-scrim), .64) 62%,
		rgba(var(--spf-scrim), .70) 100%
	);
}

/* ---------- headline: same treatment on every slide (a <p>, never a heading: the page H1 lives in the About section) ---------- */
.spf-hero .spf-hero__title {
	position: relative;
	z-index: 2;
	margin: 0;
	max-width: min(100%, 128rem);
	font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
	font-size: clamp(3.2rem, 2rem + 3vw, 6rem);
	font-weight: 700;
	line-height: 105%;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: center;
	text-wrap: balance;
	color: #fff;
	text-shadow: 0 2px 3px rgba(0, 0, 0, .55), 0 0 24px rgba(0, 0, 0, .5);
}
.spf-hero .spf-hero__line { display: block; }

/* ---------- pagination dots: white, active = yellow, 28px hit area ---------- */
.spf-hero .splide__pagination {
	bottom: 1rem;
	z-index: 3;
	padding: 0;
}
.spf-hero .splide__pagination li { line-height: 0; }
.spf-hero .splide__pagination .splide__pagination__page {
	position: relative;
	width: 2.8rem;
	height: 2.8rem;
	margin: 0;
	border-radius: 50%;
	background: transparent;
	opacity: 1;
	transform: none;
	cursor: pointer;
}
.spf-hero .splide__pagination .splide__pagination__page::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1rem;
	margin: -.5rem 0 0 -.5rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .55);
	transition: transform .2s ease, background-color .2s ease;
}
.spf-hero .splide__pagination .splide__pagination__page:hover::before { transform: scale(1.25); }
.spf-hero .splide__pagination .splide__pagination__page.is-active { background: transparent; }
.spf-hero .splide__pagination .splide__pagination__page.is-active::before {
	background: var(--spf-yellow);
	transform: scale(1.4);
}

/* ---------- arrows: desktop only (>= 1025px, not on touch-only devices) ---------- */
.spf-hero .splide__arrows .splide__arrow {
	z-index: 3;
	width: 5.2rem;
	height: 5.2rem;
	border-radius: 50%;
	background: rgba(var(--spf-scrim), .6);
	opacity: 1;
	transition: background-color .2s ease;
}
.spf-hero .splide__arrows--ltr .splide__arrow--prev { left: 2rem; }
.spf-hero .splide__arrows--ltr .splide__arrow--next { right: 2rem; }
.spf-hero .splide__arrows .splide__arrow svg {
	width: 2rem;
	height: 2rem;
	fill: #fff;
	transition: fill .2s ease;
}
.spf-hero .splide__arrows .splide__arrow:hover { background: var(--spf-yellow); }
.spf-hero .splide__arrows .splide__arrow:hover svg { fill: var(--spf-ink); }

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
	.spf-hero .splide__arrows { display: none; }
}

/* ---------- pause / play button (added by home-carousel.js; WCAG 2.2.2) ---------- */
.spf-hero .spf-hero__toggle {
	position: absolute;
	right: 2rem;
	bottom: .6rem;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.6rem;
	height: 3.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(var(--spf-scrim), .6);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.spf-hero .spf-hero__toggle svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.spf-hero .spf-hero__toggle .spf-hero__icon-play { display: none; }
.spf-hero .spf-hero__toggle.is-paused .spf-hero__icon-play { display: block; }
.spf-hero .spf-hero__toggle.is-paused .spf-hero__icon-pause { display: none; }
.spf-hero .spf-hero__toggle:hover { background: var(--spf-yellow); color: var(--spf-ink); }
@media (max-width: 478px) {
	.spf-hero .spf-hero__toggle { right: 1rem; }
}

/* ---------- visible keyboard focus ---------- */
.spf-hero .spf-hero__slider:focus-visible {
	outline: 3px solid var(--spf-yellow);
	outline-offset: -3px;
}
.spf-hero .splide__arrows .splide__arrow:focus-visible,
.spf-hero .splide__pagination .splide__pagination__page:focus-visible,
.spf-hero .spf-hero__toggle:focus-visible {
	outline: 3px solid var(--spf-yellow);
	outline-offset: 3px;
}
.spf-hero .splide__pagination .splide__pagination__page:focus-visible { outline-offset: -2px; }

/* ---------- reduced motion: no sliding (Splide speed is forced to 0 by its own reducedMotion option), no transitions, nothing to pause ---------- */
@media (prefers-reduced-motion: reduce) {
	.spf-hero *,
	.spf-hero *::before,
	.spf-hero *::after { transition: none !important; animation: none !important; }
	.spf-hero .spf-hero__toggle { display: none; }
}