/* ==========================================================================
   Home hero slider — the carousel chrome only.

   The track is a scroll-snap container, so swipe, momentum and keyboard
   scrolling are the browser's own. The JS only adds dots, arrows and autoplay.
   Slide appearance lives in blocks/hero-slide/hero-slide.css.
   ========================================================================== */

.hero-slider {
	position: relative;
	background-color: #000;
	/* Clears the fixed header. ⚠ Two states: the .special-alert promo bar is
	   optional and style.css hides it at 992px, so this cannot be one number.
	   Keep in step with .main-menu and .special-alert in style.css. */
	margin-top: 67px;
}

@media (min-width: 993px) {
	body:has(.special-alert-active) .hero-slider {
		margin-top: 127px;
	}
}

.hero-slider__track {
	display: flex;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.hero-slider__track::-webkit-scrollbar {
	display: none;
}

/* align-items defaults to stretch, which is what holds every slide to the
   height of the tallest one on mobile where copy length varies. */
.hero-slider__slide {
	flex: 0 0 100%;
	width: 100%;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

.hero-slider__slide > .hero-slide {
	flex: 1 1 auto;
}

/* --- Controls ------------------------------------------------------------ */

/* One set of buttons for both layouts. The bar is the container; where each
   control sits is the media queries' business. */
.hero-slider__bar {
	display: flex;
	align-items: center;
	gap: 14px;
}

.hero-slider__dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hero-slider__dot,
.hero-slider__arrow,
.hero-slider__pause {
	appearance: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: none;
}

.hero-slider__dot:focus-visible,
.hero-slider__arrow:focus-visible,
.hero-slider__pause:focus-visible {
	outline: 2px solid #ffc720;
	outline-offset: 3px;
}

/* The live slider's colours. Each dot is ringed in the opposite colour so the
   set reads over artwork as well as over a panel, without needing to be
   recoloured per slide the way the old one was. */
.hero-slider__dot {
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border-radius: 50%;
	background-color: #ffffff;
	border: 2px solid rgb(0 0 0 / 0.55);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.hero-slider__dot[aria-current='true'] {
	background-color: #000000;
	border-color: #ffffff;
}

.hero-slider__arrow {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: #ffc720;
	display: grid;
	place-items: center;
	/* ⚠ Load-bearing on the yellow slides — without it a yellow disc on yellow
	   artwork has no edge at all. */
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
}

.hero-slider__arrow::before {
	content: '';
	width: 9px;
	height: 9px;
	border-right: 2.5px solid #000000;
	border-bottom: 2.5px solid #000000;
}

.hero-slider__arrow--prev::before {
	transform: rotate(135deg);
	margin-left: 3px;
}

.hero-slider__arrow--next::before {
	transform: rotate(-45deg);
	margin-right: 3px;
}

/* ⚠ WCAG 2.2.2 — anything that moves for more than five seconds needs a control
   to stop it. Do not remove this because it is not in the comp.
   It hides until the pointer is over the slider, or focus reaches it, or it is
   actually stopped — a stopped slideshow must never look like a broken one. */
.hero-slider__pause {
	position: absolute;
	z-index: 4;
	right: 10px;
	bottom: 10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background-color: rgb(0 0 0 / 0.7);
	color: #ffffff;
	opacity: 0;
	transition: opacity 0.3s ease-out, background-color 0.15s ease;
}

.hero-slider:hover .hero-slider__pause,
.hero-slider__pause:focus-visible,
.hero-slider__pause[aria-pressed='true'] {
	opacity: 1;
}

.hero-slider__pause:hover {
	background-color: #000000;
}

.hero-slider__pause-icon {
	display: block;
	width: 14px;
	height: 14px;
}

/* One button, two glyphs — the visible one is whichever matches the state. */
.hero-slider__pause-icon--play,
.hero-slider__pause[aria-pressed='true'] .hero-slider__pause-icon--pause {
	display: none;
}

.hero-slider__pause[aria-pressed='true'] .hero-slider__pause-icon--play {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.hero-slider__pause {
		transition: none;
	}
}

/* ⚠ The button is positioned against the whole slider, and on mobile the
   control bar is part of that — bottom-right would land it on top of the next
   arrow. Over the artwork instead, where nothing else sits. */
@media (max-width: 1199px) {
	.hero-slider__pause {
		top: 10px;
		bottom: auto;
	}
}

/* --- Desktop: arrows at the edges, dots over the bottom ------------------ */

@media (min-width: 1200px) {
	/* The bar covers the whole slide so the arrows can sit at its edges and the
	   dots along its bottom. ⚠ pointer-events must come back on for the buttons
	   or the bar swallows every click meant for the slide. */
	.hero-slider__bar {
		position: absolute;
		inset: 0;
		z-index: 3;
		justify-content: space-between;
		padding: 0 18px;
		pointer-events: none;
	}

	.hero-slider__bar > * {
		pointer-events: auto;
	}

	/* The dot strip spans the full width, so only the dots themselves take
	   clicks — otherwise a band across the bottom of the slide is dead. */
	.hero-slider__dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 18px;
		justify-content: center;
		pointer-events: none;
	}

	.hero-slider__dot {
		pointer-events: auto;
	}

}

/* --- Mobile: everything in one row under the slide ----------------------- */

@media (max-width: 1199px) {
	/* Arrows used to float over the artwork and cover it. In the row they cover
	   nothing and the dots stay reachable. */
	.hero-slider__bar {
		padding: 14px 16px 16px;
		background-color: #000;
	}

	.hero-slider__dots {
		position: static;
	}

	.hero-slider__arrow {
		width: 34px;
		height: 34px;
		background-color: #ffc720;
	}

	.hero-slider__arrow::before {
		border-color: #000;
	}

	.hero-slider__dots {
		flex: 1 1 auto;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-slider__track {
		scroll-behavior: auto;
	}
}