/**
 * InfoAsphalt — shared carousel chrome.
 *
 * Everything a carousel looks like that is not its cards: the arrows, the dots,
 * the progress bar and the no-JavaScript fallback. Of Splide only its «core»
 * sheet is loaded, the bare minimum for the track to work; the rest is here.
 *
 * The sheet paints no colours of its own. Each carousel sets the
 * `--ia-carousel-*` variables on `.ia-carousel` — or on any ancestor — and the
 * chrome takes the palette of whatever it has been dropped into. The neutral
 * values travel as the fallback of each `var()`, so that a carousel nobody
 * dressed is still visible; see the note on `.ia-carousel` for why they cannot
 * be declared there instead.
 *
 * @package InfoAsphalt
 */

/* Los valores neutros van como reserva de cada `var()`, no declarados aquí
   sobre `.ia-carousel`. Declararlos aquí era lo que impedía vestir el carrusel
   desde un ancestro: una variable puesta en el propio elemento gana a la que se
   hereda, así que la paleta de `.ia-rankings` —que envuelve al carrusel, no lo
   es— no llegaba nunca y sus puntos, flechas y barra salían del `currentColor`
   de reserva, blancos. Con la reserva en el uso, lo que herede manda, y quien no
   diga nada sigue viendo un carrusel visible. */
.ia-carousel {
	position: relative;
}

/* No-JavaScript fallback ---------------------------------------------------
   Splide hides the carousel until it mounts it. If the script never runs that
   would leave a hole in the page, so until it is mounted the cards show
   anyway, in a row that can be scrolled by hand. The breakpoints are the same
   ones the carousel itself applies. */
.ia-carousel:not( .is-initialized ) {
	--ia-carousel-shown: var( --ia-carousel-columns, 3 );

	visibility: visible;
}

.ia-carousel:not( .is-initialized ) .splide__track {
	overflow-x: auto;
}

.ia-carousel .splide__track{
	margin-bottom:15px;
}

.ia-carousel:not( .is-initialized ) .splide__list {
	gap: var( --ia-carousel-gap, 1rem );
}

.ia-carousel:not( .is-initialized ) .splide__slide {
	flex: 0 0 calc(
		( 100% - ( var( --ia-carousel-shown ) - 1 ) * var( --ia-carousel-gap, 1rem ) ) / var( --ia-carousel-shown )
	);
}

/* Nothing to slide to -------------------------------------------------------
   The script flags the carousel whose cards all fit on screen. Arrows, dots and
   bar exist to say that there is more further along, so where there is not they
   are put away entirely — `display`, not an opacity, so they take no room and
   no keyboard stop either. The measurement is the browser's and is redone on
   every resize: the very same carousel gets its chrome back the moment the
   window narrows enough to leave a card outside. */
.ia-carousel--fits .splide__arrows,
.ia-carousel--fits .splide__arrow,
.ia-carousel--fits .splide__pagination,
.ia-carousel--fits .ia-carousel__progress {
	display: none;
}

/* Arrows ------------------------------------------------------------------ */

.ia-carousel .splide__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var( --ia-carousel-edge, currentColor );
	border-radius: 999px;
	background: var( --ia-carousel-arrow-bg, transparent );
	color: var( --ia-carousel-ink, currentColor );
	cursor: pointer;
	transform: translateY( -50% );
	transition: background-color .2s ease, opacity .2s ease;
}

/* Outside the block, to the sides, so they do not eat width from the cards.
   When there is no room out there — a full-width block, or a narrow screen —
   they move in on their own: the `max()` compares what we would like, 3.25rem
   outwards, against the distance from the edge of the block to the edge of the
   window, which on a centred block is `50vw - 50%`, and keeps whichever fits.
   No media queries guessing at what margin the theme has to spare.

   Splide, besides, draws a single arrow and expects the previous one to be the
   same one mirrored; its «core» sheet does not do it, so we do it here. */
.ia-carousel .splide__arrow--prev {
	left: max( -3.25rem, calc( 50% - 50vw + 1rem ) );
	transform: translateY( -50% ) scaleX( -1 );
}

.ia-carousel .splide__arrow--next {
	right: max( -3.25rem, calc( 50% - 50vw + 1rem ) );
}

.ia-carousel .splide__arrow svg {
	width: .85rem;
	height: .85rem;
	fill: currentColor;
}

.ia-carousel .splide__arrow:hover,
.ia-carousel .splide__arrow:focus-visible {
	background: var( --ia-carousel-arrow-bg-hover, rgba( 255, 255, 255, .15 ) );
}

.ia-carousel .splide__arrow:focus-visible {
	outline: 2px solid var( --ia-carousel-focus, currentColor );
	outline-offset: 2px;
}

/* An arrow that leads nowhere stays put, dimmed: were it to disappear, the
   whole carousel would shift on reaching either end. */
.ia-carousel .splide__arrow:disabled {
	opacity: .3;
	cursor: default;
}

/* On a phone there is no room left out to the sides, so the arrows end up on top
   of the cards — over the very thing they are meant to help read — and the
   finger already drags the track without them. They go away entirely:
   `display`, like the ones of a carousel that fits, so they take no room and no
   keyboard stop either. The dots and the bar stay to say that there is more
   further along. */
@media ( max-width: 600px ) {
	.ia-carousel .splide__arrows,
	.ia-carousel .splide__arrow {
		display: none;
	}
}

/* Dots -------------------------------------------------------------------- */

/* The dots are a `<ul>` that Splide draws itself, and its «core» sheet zeroes
   the margin of that list but not its padding. So whatever indent the theme
   gives a `ul` in the content lands here, and the dots come out off centre: they
   are centred, yes, but inside a content box that starts an indent in from the
   left, so the whole row sits half that indent to the right.

   The `!important` is the same one the «core» sheet puts on `.splide__list` for
   this very reason, and it is here for that reason too: what we are up against
   is a rule of the theme whose weight we cannot know — `.entry-content ul` alone
   already beats the reset that the car slider does with `*`, which is why that
   reset was not enough. `list-style` goes along with it because the core sheet
   only takes the bullet off the `li`, so a theme that sets it on the list itself
   would still show it. */
.ia-carousel .splide__pagination {
	gap: .4rem;
	margin-top: var( --ia-carousel-chrome-gap, 1.75rem );
	padding: 0 !important;
	list-style: none;
}

.ia-carousel .splide__pagination__page {
	width: .6rem;
	height: .6rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var( --ia-carousel-dot, currentColor );
	opacity: .45;
	cursor: pointer;
	transition: opacity .2s ease, background-color .2s ease;
}

.ia-carousel .splide__pagination__page.is-active {
	background: var( --ia-carousel-dot-active, currentColor );
	opacity: 1;
}

.ia-carousel .splide__pagination__page:focus-visible {
	outline: 2px solid var( --ia-carousel-focus, currentColor );
	outline-offset: 2px;
}

/* Progress bar -------------------------------------------------------------
   It does not mark the active slide but the slice of carousel being looked at,
   so it starts out as wide as the visible cards are against the total. No
   transition, on purpose: the width is rewritten by the script on every frame
   while dragging, and a transition on top would leave it forever behind the
   finger. */
.ia-carousel__progress {
	height: .35rem;
	margin-top: var( --ia-carousel-chrome-gap, 1.75rem );
	border-radius: 999px;
	background: var( --ia-carousel-bar-track, rgba( 0, 0, 0, .35 ) );
	overflow: hidden;
}

.ia-carousel__progress .splide__progress__bar {
	height: 100%;
	border-radius: 999px;
	background: var( --ia-carousel-bar, currentColor );
}

/* Narrow screens -----------------------------------------------------------
   The same breakpoints the carousel applies, so the fallback does not show
   four cards where two will later fit. */
@media ( max-width: 1200px ) {
	.ia-carousel:not( .is-initialized ) {
		--ia-carousel-shown: min( var( --ia-carousel-columns, 3 ), 3 );
	}
}

@media ( max-width: 900px ) {
	.ia-carousel:not( .is-initialized ) {
		--ia-carousel-shown: min( var( --ia-carousel-columns, 3 ), 2 );
	}
}

@media ( max-width: 600px ) {
	.ia-carousel:not( .is-initialized ) {
		--ia-carousel-shown: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ia-carousel .splide__arrow,
	.ia-carousel .splide__pagination__page {
		transition: none;
	}
}