/**
 * Carrusel de coches del shortcode `[ia_slider_coches]`.
 *
 * Todo cuelga de `.iat-tpl--slider-coches`, que además de encapsular es lo que
 * le da a la tarjeta las variables de color que `tarjeta-coche.css` espera: en
 * las plantillas las pone la página anfitriona, y un shortcode puede caer en
 * cualquier sitio. Son las mismas que las del listado de coches, para que la
 * tarjeta se vea igual esté donde esté.
 *
 * De Splide sólo se carga su hoja «core», la imprescindible para que el carril
 * funcione; las flechas, los puntos y la barra se visten aquí.
 *
 * @package InfoAsphaltTemplates
 */

.iat-tpl--slider-coches {
	--card: #73008F;
	--card-alt: #2b0038;
	--card-border: #B53EE4;
	/* Fondo de una fila de características y el de la fila de rango, que cierra
	   la tabla. Van como capa negra sobre la tarjeta en vez de como hexadecimal
	   propio: así siguen al color de la tarjeta si algún día cambia. */
	--fila: rgba(0, 0, 0, 0.18);
	--fila-total: rgba(0, 0, 0, 0.42);
	--accent: #d355ff;
	--accent-soft: #dc84ff;
	--oc: #FE7112;
	--text: #ffffff;
	--text-soft: #c9a2d9;
	--tinta: #1a0022;
	--radius: 14px;
	/* Sin fondo ni margen propios: el shortcode se mete en el contenido de una
	   página cualquiera y el aire alrededor lo pone quien lo coloca. */
	box-sizing: border-box;
	color: var(--text);
	line-height: normal;
	text-align: left;
	margin: 0;
}

.iat-tpl--slider-coches *,
.iat-tpl--slider-coches *::before,
.iat-tpl--slider-coches *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* La tipografía la pone el tema. Los botones no la heredan por sí solos. */
.iat-tpl--slider-coches button {
	font-family: inherit;
}

.iat-tpl--slider-coches .iat-oculto-visual {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Frente al tema -----------------------------------------------------------
   Las plantillas ocupan la página entera y quedan fuera del contenedor de
   contenido del tema; el shortcode, en cambio, cae dentro de él, y ahí el tema
   viste párrafos, títulos, tablas y enlaces con selectores contextuales
   —`.entry-content p`, `.entry-content a:not(.button)`— que le ganan por
   especificidad tanto al reinicio de arriba como a la hoja de la tarjeta. Los
   estilos de la tarjeta no se tocan por esto: es un problema de este envoltorio
   y no de ella, así que se resuelve aquí repitiendo la clase del contenedor,
   que es lo que sube el peso sin inventarse selectores nuevos.

   El reinicio no se repite entero a propósito: al doblar la clase pasaría por
   encima de los rellenos que la tarjeta se pone a sí misma. Se enumeran sólo
   las etiquetas que el tema toca, que son las que se cuelan. */
.iat-tpl--slider-coches.iat-tpl--slider-coches p,
.iat-tpl--slider-coches.iat-tpl--slider-coches h1,
.iat-tpl--slider-coches.iat-tpl--slider-coches h2,
.iat-tpl--slider-coches.iat-tpl--slider-coches h3,
.iat-tpl--slider-coches.iat-tpl--slider-coches h4,
.iat-tpl--slider-coches.iat-tpl--slider-coches h5,
.iat-tpl--slider-coches.iat-tpl--slider-coches h6,
.iat-tpl--slider-coches.iat-tpl--slider-coches table,
.iat-tpl--slider-coches.iat-tpl--slider-coches ul,
.iat-tpl--slider-coches.iat-tpl--slider-coches ol,
.iat-tpl--slider-coches.iat-tpl--slider-coches li {
	margin: 0;
}

/* Un tema que dibuje rejilla en las tablas la pintaría también en la de
   características, que separa sus filas con fondos y no con líneas. */
.iat-tpl--slider-coches.iat-tpl--slider-coches th,
.iat-tpl--slider-coches.iat-tpl--slider-coches td {
	border: 0;
	background-image: none;
}

/* El nombre del coche es el enlace a su ficha, y se lee como un título: blanco,
   sin subrayado, y al rosa claro al pasar por encima, igual que en la temporada
   y en el listado.

   Éstas son las únicas declaraciones con `!important` de la hoja, y no por
   comodidad: subir especificidad aquí es una carrera que no se puede ganar de
   antemano, porque no sabemos con qué la defiende el tema —los enlaces son lo
   que más blindan, con selectores encadenados o con `!important` ellos mismos—.
   El resto de la hoja no lo necesita: con repetir la clase le basta.

   El subrayado se quita por partida triple porque cada tema lo dibuja a su
   manera: con `text-decoration`, con un `box-shadow` bajo la línea de base o
   con un degradado de fondo. */
.iat-tpl--slider-coches .iat-coche__nombre a,
.iat-tpl--slider-coches .iat-coche__foto {
	color: var(--text) !important;
	text-decoration: none !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0;
}

.iat-tpl--slider-coches .iat-coche__nombre a:hover,
.iat-tpl--slider-coches .iat-coche__nombre a:focus,
.iat-tpl--slider-coches .iat-coche__nombre a:focus-visible {
	color: var(--accent-soft) !important;
}

/* Carril -------------------------------------------------------------------
   Las tarjetas de una fila miden todas lo mismo, como en la rejilla de la
   temporada: la diapositiva estira y la tarjeta la llena. */
.iat-tpl--slider-coches .splide__list {
	align-items: stretch;
}

.iat-tpl--slider-coches .splide__slide {
	display: flex;
	height: auto;
}

.iat-tpl--slider-coches .splide__slide > .iat-coche {
	width: 100%;
}

.iat-tpl--slider-coches .splide__slide:focus-visible,
.iat-tpl--slider-coches .splide__track:focus-visible {
	outline: 2px solid var(--accent-soft);
	outline-offset: 3px;
}

/* El carrusel es el del plugin base (`carousel.css`): aquí sólo se le da la
   paleta de la tarjeta, que es todo lo que esa hoja pide para vestirse. Las
   flechas, los puntos, la barra y el respaldo sin script viven allí, y son los
   mismos que usa el shortcode de rankings. */
/* El reinicio de arriba (`.iat-tpl--slider-coches *`) le empata en peso al
   `margin-top` con el que `carousel.css` separa el cromo de las tarjetas, y como
   esta hoja carga después, ganaba el cero: la barra quedaba pegada al pie de las
   tarjetas. Se devuelve aquí, y a los puntos con ella para que los dos midan lo
   mismo pase lo que pase con el orden de carga. La medida es la variable del
   carrusel, así que se toca en un solo sitio. */
.iat-tpl--slider-coches .ia-carousel__progress,
.iat-tpl--slider-coches .splide__pagination {
	margin-top: var(--ia-carousel-chrome-gap);
}

.iat-tpl--slider-coches .iat-slider {
	/* Más aire que en el resto de carruseles: la tarjeta de coche termina en la
	   fila de RANGO, que lleva fondo propio hasta el mismo canto, y con la
	   separación de siempre los puntos parecían la última fila de la tabla. */
	--ia-carousel-chrome-gap: 2.5rem;
	--ia-carousel-edge: var(--card-border);
	--ia-carousel-arrow-bg: var(--card-alt);
	--ia-carousel-arrow-bg-hover: var(--card);
	--ia-carousel-ink: var(--text);
	--ia-carousel-focus: var(--accent-soft);
	--ia-carousel-dot: var(--card-border);
	--ia-carousel-dot-active: var(--accent);
	--ia-carousel-bar-track: var(--fila-total);
	--ia-carousel-bar: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 100%);
}