/* Component: ad-carousel (a group of ads as a slider). Swiping is native horizontal scrolling. */

.wpar-carousel {
	--wpar-ad-ratio: 16 / 9;
}

.wpar-carousel__stage {
	position: relative;
}

.wpar-carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.wpar-carousel__track::-webkit-scrollbar {
	display: none;
}

.wpar-carousel__track:focus-visible {
	outline-offset: -3px;
}

/* Every slide has the same shape, so the card never changes height as it slides. */
.wpar-carousel__slide {
	position: relative;
	flex: 0 0 100%;
	aspect-ratio: var(--wpar-ad-ratio);
	overflow: hidden;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.wpar-carousel__link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.wpar-carousel .wpar-carousel__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
}

/* The caption sits on the bottom of the image, so slides with and without one stay the same size. */
.wpar-carousel__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 28px 14px 42px; /* bottom space keeps the text above the dots */
	background: linear-gradient(to top, var(--overlay-strong), rgba(15, 17, 23, 0));
	color: #fff;
	font-size: 13px;
	line-height: 1.35;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.wpar-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--overlay-control);
	color: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background .15s ease, opacity .15s ease;
}

.wpar-carousel__nav:hover {
	background: var(--overlay-control-hover);
}

.wpar-carousel__nav--prev { left: 8px; }
.wpar-carousel__nav--next { right: 8px; }

/* Arrows appear on hover / keyboard focus where there is a pointer; always visible on touch screens. */
@media (hover: hover) {
	.wpar-carousel__nav { opacity: 0; }
	.wpar-carousel:hover .wpar-carousel__nav,
	.wpar-carousel:focus-within .wpar-carousel__nav { opacity: 1; }
}

/* The dots float over the bottom of the image, in a dark pill so they read on light and dark ads alike.
   They take no space of their own, so the image fills the whole card. */
.wpar-carousel__dots {
	position: absolute;
	bottom: 10px;
	left: 50%;
	z-index: 2;
	display: flex;
	gap: 0;
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--overlay-control);
	transform: translateX(-50%);
}

/* The dot is small; the transparent border makes the tappable area bigger. */
.wpar-carousel__dot {
	box-sizing: content-box;
	width: 7px;
	height: 7px;
	padding: 0;
	border: 6px solid transparent;
	border-radius: 999px;
	background: rgba(255, 255, 255, .5);
	background-clip: padding-box;
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}

.wpar-carousel__dot:hover {
	background-color: rgba(255, 255, 255, .8);
	background-clip: padding-box;
}

.wpar-carousel__dot[aria-current="true"] {
	width: 18px;
	background-color: #fff;
	background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
	.wpar-carousel__dot,
	.wpar-carousel__nav { transition: none; }
}