/*
 * Carousel primitive.
 *
 * Registered as the shared handle "apollo-carousel" and pulled in by the blocks
 * that need it via their block.json "style" array, so it still loads only on
 * pages using one of those blocks.
 *
 * Built on CSS scroll-snap rather than a slider library. star loaded Owl
 * Carousel (108KB of CSS+JS, jQuery-dependent, unmaintained since 2018) on
 * every page. This is ~1KB of CSS plus ~1KB of optional JS, works with touch,
 * trackpad and keyboard natively, and degrades to a plain scrollable row if the
 * JS never arrives.
 */

.apollo-carousel {
	--apollo-carousel-cols: 1;
	--apollo-carousel-gap: var(--wp--preset--spacing--50);

	position: relative;

	/*
	 * The track is a flex row of cards, so its min-content width is the width
	 * of all of them side by side. Dropped into an `auto`-minimum flex or grid
	 * item that becomes the item's minimum size, and the carousel pushes its
	 * container wider than the page instead of scrolling. Containers should
	 * also use minmax(0, 1fr); this makes the primitive safe either way.
	 */
	min-width: 0;
}

@media (min-width: 48rem) {
	.apollo-carousel {
		--apollo-carousel-cols: 2;
	}
}

@media (min-width: 62rem) {
	.apollo-carousel {
		/* Blocks set --apollo-carousel-cols-lg inline from a Columns field. */
		--apollo-carousel-cols: var(--apollo-carousel-cols-lg, 3);
	}
}

/* Show 2 cards from 35rem on selected carousels only. */
@media (min-width: 35rem) and (max-width: 47.99rem) {
    .apollo-carousel.apollo-carousel--two-cards-on-small-screens {
        --apollo-carousel-cols: 2;
    }
}

.apollo-carousel__track {
	display: flex;
	gap: var(--apollo-carousel-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Room for focus rings on the cards, which would otherwise be clipped. */
	padding: 4px;
	margin: -4px;
	/* The prev/next buttons are the affordance; a scrollbar under the row is a
	   second one that only shows up on some platforms. */
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

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

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

.apollo-carousel__item {
	flex: 0 0 calc(
		(100% - (var(--apollo-carousel-cols) - 1) * var(--apollo-carousel-gap))
		/ var(--apollo-carousel-cols)
	);
	min-width: 0;
	scroll-snap-align: start;
}

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

/*
 * Hidden until the script confirms the track actually overflows — controls that
 * do nothing are worse than no controls. The script also removes [hidden] only
 * when it can scroll, so a non-overflowing carousel stays clean.
 */
/*
 * Dots in the middle, arrows either side.
 *
 * The dots are the position indicator - the same one the product gallery uses
 * on a phone - and the arrows are the pointer affordance. On a phone the arrows
 * go: swiping is the interaction there, and two buttons that duplicate it are
 * just something else to fit on the line.
 */
.apollo-carousel__controls {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--60);
}

.apollo-carousel__dots {
	display: flex;
	align-items: center;
	gap: 0.1rem;
}

.apollo-carousel__dot {
	display: grid;
	place-items: center;
	/* 7px dot, 40px target. */
	width: 1rem;
	height: 1rem;
	padding: 0;
	border: 0;
	background: none;
}

.apollo-carousel__dot::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	opacity: 0.25;
	transition: opacity 150ms ease;
}

.apollo-carousel__dot:hover::after {
	opacity: 0.5;
}

.apollo-carousel__dot.is-active::after {
	opacity: 1;
}


@media (prefers-reduced-motion: reduce) {
	.apollo-carousel__dot::after {
		transition: none;
	}
}

.apollo-carousel__controls[hidden] {
	display: none;
}

.apollo-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transition: border-color 150ms ease, color 150ms ease;
}

.apollo-carousel__button:hover:not(:disabled) {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.apollo-carousel__button:disabled {
	opacity: 0.35;
	cursor: default;
}

.apollo-carousel__button--prev svg {
	transform: rotate(180deg);
}

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

/*
 * Phones get the dots only. Swiping is the interaction there, and two arrow
 * buttons duplicating it are just more to fit on the line.
 *
 * Last in the file on purpose: .apollo-carousel__button sets its own display
 * further up, and at equal specificity the later rule is the one that wins.
 */
@media (max-width: 47.99rem) {
	.apollo-carousel__button {
		display: none;
	}
}