/**
 * Segmented pill carousel indicators.
 *
 * Replicated 1:1 from the Battle.net shop pagination pill
 * (`.meka-pagination-pill`, us.shop.battle.net), measured from the live page:
 *
 *   inactive  40 x 4px, rgba(255,255,255,0.48), border-radius 4px
 *   active    40 x 6px, solid accent
 *   gap       8px, row centred, pause control to the left
 *   motion    transition: background-color 0.2s ease-out — nothing else
 *
 * The reference grows the pill with real `height`, not a transform, and runs
 * NO progress/countdown fill on the active pill. Both are deliberate here: the
 * row sits at a fixed 22px hit-area height, so a 2px height change on one child
 * reflows nothing around it.
 *
 * Hosts: Shop hero (page-shop-v2.php) and the game / product media gallery
 * (#gallery.game-detail-slider).
 *
 * @package renewal2023
 */

.exa-pills {
	/* The reference's track is white-48% because battle.net is a dark page. Our
	   hosts are mixed — the game detail page is black, the product detail page
	   and the Shop hero surface are white — so the track is the theme's neutral
	   dot grey instead, which clears 4:1 contrast on both. A white track here
	   rendered the pills invisible on /product/*. */
	--exa-pill-track: #6e7264;
	--exa-pill-active: #D90500;
	--exa-pill-height: 4px;
	--exa-pill-height-active: 6px;
	--exa-pill-width: 40px;
	--exa-pill-gap: 8px;
	--exa-pill-hit: 22px;

	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Spacing is a margin rather than a flexbox `gap` for the same reason as the
   nav row: gap is a no-op in Safari < 14.1 / iOS Safari < 14.5 and the pills
   would butt together into one continuous bar. */
.exa-pill + .exa-pill {
	margin-left: var(--exa-pill-gap);
}

.exa-pill {
	position: relative;
	/* 40px whenever the row fits; shrinks only when a long gallery would
	   otherwise overflow a narrow viewport. The reference never grows a pill
	   past 40px, so there is no flex-grow. */
	flex: 0 1 var(--exa-pill-width);
	min-width: 4px;
	height: var(--exa-pill-height);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: var(--exa-pill-track);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background-color 0.2s ease-out;
}

.exa-pill.is-active {
	height: var(--exa-pill-height-active);
	background: var(--exa-pill-active);
}

/* The visible pill is 4-6px tall; this invisible overlay restores a real
   touch target without changing the row's geometry. */
.exa-pill::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: var(--exa-pill-hit);
	transform: translateY(-50%);
	margin: 0 calc(var(--exa-pill-gap) / -2);
}

/* The overlay is invisible but 22px tall, so on the end pills it must not spill
   outside the row — past the first pill it would sit over the Shop hero's
   pause/play button and silently swallow its clicks. */
.exa-pill:first-child::after {
	margin-left: 0;
}

.exa-pill:last-child::after {
	margin-right: 0;
}

.exa-pill:focus-visible {
	outline: 2px solid var(--exa-pill-active);
	outline-offset: 4px;
}

/* ── Host: game / product media gallery ─────────────────────────────────────
   Sits directly under the media strip, in the slot slick's own dots used to
   occupy (the gallery now runs dots:false). position:relative pins the row to
   the slider rather than whichever ancestor happened to be positioned. */

.game-detail-slider {
	position: relative;
}

.game-detail-slider .exa-pills {
	position: absolute;
	right: 0;
	bottom: -1.5rem;
	left: 0;
	z-index: 2;
	width: 100%;
	max-width: 40rem;
	/* A third narrower than the hero pill: these rows carry far more slides
	   than the reference's eight, so full-width pills read as overstretched. */
	--exa-pill-width: calc(40px / 1.5);
}

@media only screen and (max-width: 40em) {
	.game-detail-slider .exa-pills {
		bottom: -1.25rem;
		max-width: calc(100% - 2rem);
		--exa-pill-gap: 5px;
	}
}

/* ── Host: Shop hero nav bar ────────────────────────────────────────────────
   The bar sits on the page's white surface rather than on hero art, so the
   track flips to a dark alpha to stay visible. */

.shop-v2-hero__nav-bar .exa-pills {
	/* The hero row keeps its original light track and 0.35rem spacing — the
	   darker gallery grey was too heavy against the white shop surface. */
	--exa-pill-track: rgba(0, 0, 0, 0.15);
	--exa-pill-gap: 0.35rem;
	width: auto;
	max-width: 100%;
	/* Must stay nowrap: the bar is a shrink-to-fit flex item inside
	   .shop-v2-hero__nav-main, so allowing wrap lets it resolve to a single
	   pill's width and stack all four vertically. */
	flex-wrap: nowrap;
}

/* No hit-area overlay in the hero row. It is the only structural element this
   component adds that the previous working markup did not have: an invisible
   22px-tall box on every pill, in a row whose pause/play control is 24px tall
   and only 8px away. Dropping it makes the hero pill exactly what it was
   before — a bare button — so nothing can extend toward that control. The
   gallery rows keep the overlay; they have no adjacent control to reach. */
.shop-v2-hero__nav-bar .exa-pill::after {
	content: none;
}

.shop-v2-hero__nav-bar .exa-pill {
	/* Only a handful of hero slides, so they always fit at full width.
	 *
	 * min-width must be restated to match. The base rule drops it to 4px so a
	 * long gallery row can shrink, but Firefox derives a shrink-to-fit flex
	 * container's intrinsic width from its items' min-width rather than their
	 * flex-basis. With the 4px floor left in place the bar measured
	 * 4*4px + 3*gap = 32.8px, the 40px pills overflowed it, and
	 * justify-content:center spilled them ~72px out each side — directly under
	 * the pause/play control. Chromium sizes from the basis and never shows it. */
	flex: 0 0 var(--exa-pill-width);
	min-width: var(--exa-pill-width);
}