/* .......... CAROUSEL ..........
   Native scroll-snap carousel (scripts/js/theme.carousel.js). The .slides
   list itself is the scroller, so swiping, momentum and snapping are the
   browser's own; the JS wraps it in .slider__frame and adds the arrows
   (.slider__arrow) and dots (.slider__dots > .slider__dot) alongside. Every
   style for the carousel and its controls lives in this file. */

/* flow-root keeps the list's negative margins (hover room below, and the
   -2rem .post-watch pull-up) inside the frame instead of collapsing through
   it, so the frame is exactly the visible row and the arrows' top: 50% / 44%
   centre on the slides rather than on the invisible hover padding. */
.slider__frame {
	position: relative;
	display: flow-root;
}

/* Carousel state: one non-wrapping row that scrolls sideways. Slides keep
   their Bootstrap col-* widths, which resolve against the row's content
   box, so a col-lg-4 slide is still a third of the container.
   Bleed: the next slide shows past the container edge, all the way to
   the viewport edge. A scroller clips at its own box, so the row reaches
   out to the viewport edges — negative margin out, matching padding back
   in, so slides still line up with the container. The margin and padding
   percentages both resolve against the parent's width, so the content box
   stays exactly as wide as the parent even when the parent isn't centered
   (that side just bleeds less). theme.carousel.js sets the matching
   scroll-padding in px, since a scroll-padding percentage would resolve
   against the scroller's own, wider box instead.
   Vertical padding/negative margin gives card hover lifts and shadows
   (theme.atmos.css: up to 10px up, 0 20px 40px shadow) room inside the
   scroller without shifting anything around it.
   isolation: cards bring their own z-indexes (image overlays, .imagebg
   .container and [data-overlay] children at 2, play icons at 4-10); this
   keeps them all inside the list, so they can't rise above the arrows and
   dots next to it. */
.slider .slides {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
	padding-bottom: 64px;
	margin-bottom: -64px;
}
.slider .slides::-webkit-scrollbar {
	display: none;
}
.slider .slides > * {
	flex-shrink: 0;
	scroll-snap-align: start;
}
.slider .slides > *:not([class*="col-"]) {
	width: 100%;
}

/* Grid state: "Carousel on mobile" from 768px up, and "Grid" everywhere —
   a plain wrapping row, no scrolling, no bleed. */
.slider[data-layout="grid"] .slides {
	flex-wrap: wrap;
	overflow: visible;
	scroll-snap-type: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
	.slider[data-layout="mobile"] .slides {
		flex-wrap: wrap;
		overflow: visible;
		scroll-snap-type: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;
		margin-bottom: 0;
	}
}

/* The announcement bar shows one message at a time with no neighbours
   peeking in, so no bleed there. */
.hero-bar .slider .slides {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Mouse drag (fine pointers only — touch already swipes natively). Snapping
   is off mid-drag so the row follows the cursor; theme.carousel.js snaps to
   the nearest slide on release. */
@media (hover: hover) and (pointer: fine) {
	.slider.is-scrollable .slides {
		cursor: grab;
	}
}
.slider .slides.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
	-webkit-user-select: none;
}

/* Controls — theme.carousel.js hides both arrows and dots when there's
   nothing to scroll, and each arrow at its own end unless Infinity is on. */
.slider__arrow[hidden],
.slider__arrow:disabled,
.slider__dots[hidden] {
	display: none !important;
}

/* Arrows: white circles with a Font Awesome chevron, over the row's
   edges, centred on the slides (the frame minus the dots row below them).
   Desktop only — below 991px it's swipe and dots. */
.slider__arrow {
	position: absolute;
	top: calc((100% - var(--dots-height, 0px)) / 2);
	z-index: 1;
	width: 3.71428571em;
	height: 3.71428571em;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: #252525;
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.3);
	transform: translateY(-50%);
	cursor: pointer;
	transition: 0.3s ease;
}
.slider__arrow--prev {
	left: 0;
}
.slider__arrow--next {
	right: 0;
}
.slider__arrow::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 1em;
	content: "\f054";
}
.slider__arrow--prev::before {
	content: "\f053";
}
.slider__arrow:focus {
	outline: 0;
}
.slider__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
@media all and (max-width: 990px) {
	.slider__arrow {
		display: none;
	}
}

/* Announcement bar: bare white chevrons, centred on the message, and
   shown at every width. */
.hero-bar .slider__arrow {
	display: block;
	top: 50%;
	width: auto;
	height: 3.71428571em;
	border-radius: 0;
	background: none;
	color: #fff;
	box-shadow: none;
}

/* Dots: small circles; the current one stretches into a pill (width
   eases over .25s), the rest fade back. Each sits in a 24px tap target.
   --dots-height is the whole row, gap above included, so the arrows can
   centre themselves on the slides alone (see .slider__arrow). Two classes
   on .slider__dot so it outranks the theme's list-item spacing
   (ol li:not(:last-child)). */
.slider:has(> .slider__frame > .slider__dots:not([hidden])) {
	--dots-height: calc(var(--item-gap) + 24px);
}
.slider__dots {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: var(--item-gap) 0 0;
	list-style: none;
}
.slider__dots .slider__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	color: #252525;
	cursor: pointer;
}
.slider__dot::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: currentColor;
	opacity: 0.32;
	transition: width 0.25s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.25s ease;
}
.slider__dot:hover:not(.is-selected)::before {
	opacity: 0.6;
}
.slider__dot.is-selected::before {
	width: 18px;
	opacity: 1;
}
.slider__dot:focus {
	outline: 0;
}
.slider__dot:focus-visible::before {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.slider__dot::before {
		transition: none;
	}
}
/* White on dark backgrounds — unless the current slide asks for dark
   controls (.controls--dark on the slide, mirrored onto the slider). */
.bg--dark .slider__dot,
.imagebg:not(.image--light) .slider__dot {
	color: #fff;
}
.slider.controls--dark .slider__dot {
	color: #252525;
}