/**
 * InfoAsphalt — front-end styles.
 *
 * Deliberately low-specificity and colour-scheme aware so the shortcodes blend
 * into whatever theme bebuchines.com is running.
 */

.ia-rankings,
.ia-timeline,
.ia-codes,
.ia-ranking-form {
	--ia-border: rgba( 0, 0, 0, .12 );
	--ia-muted: rgba( 0, 0, 0, .6 );
	--ia-accent: #e8b923;
	--ia-ok: #2ecc71;
	--ia-ko: #e74c3c;
}

@media ( prefers-color-scheme: dark ) {
	.ia-rankings,
	.ia-timeline,
	.ia-codes,
	.ia-ranking-form {
		--ia-border: rgba( 255, 255, 255, .18 );
		--ia-muted: rgba( 255, 255, 255, .65 );
	}
}

.ia-empty {
	padding: 1em 0;
	color: var( --ia-muted, #666 );
	font-style: italic;
}

.ia-badge {
	display: inline-block;
	margin: 0 .25em .25em 0;
	padding: .15em .6em;
	border: 1px solid var( --ia-border );
	border-radius: 999px;
	font-size: .8em;
	line-height: 1.6;
}

.ia-badge--ongoing {
	border-color: var( --ia-ok );
}

.ia-badge--upcoming {
	border-color: var( --ia-accent );
}

.ia-message {
	margin: 0 0 1rem;
	padding: .75em 1em;
	border-left: 4px solid var( --ia-border );
	border-radius: 4px;
	background: rgba( 127, 127, 127, .08 );
}

.ia-message--success {
	border-left-color: var( --ia-ok );
}

.ia-message--error {
	border-left-color: var( --ia-ko );
}

.ia-message--warning {
	border-left-color: var( --ia-accent );
}

/* Ranking form ------------------------------------------------------------ */

.ia-ranking-form {
	max-width: 520px;
}

.ia-field {
	display: flex;
	flex-direction: column;
	gap: .3em;
	margin: 0 0 1rem;
}

.ia-field label {
	font-weight: 600;
}

.ia-field select,
.ia-field input {
	max-width: 100%;
	padding: .45em .6em;
	border: 1px solid var( --ia-border );
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
}

.ia-field__hint {
	color: var( --ia-muted );
	font-size: .85em;
}

.ia-field__hint:empty {
	display: none;
}

.ia-cuts--preview {
	margin-bottom: 1.25rem;
}

.ia-button {
	padding: .5em 1.2em;
	border: 1px solid var( --ia-border );
	border-radius: 4px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
}

.ia-button--primary {
	border-color: currentColor;
	font-weight: 600;
}

/* Rankings slider --------------------------------------------------------- */

/* El carrusel es el compartido (`carousel.css`): aquí sólo se le da la paleta
   de los rankings, que es todo lo que esa hoja pide para vestirse. */
.ia-rankings {
	--ia-rank-bg: #73008F;
	--ia-rank-row: rgba( 0, 0, 0, .28 );
	--ia-rank-edge: #B53EE4;
	--ia-rank-label: #DC84FF;

	--ia-carousel-edge: var( --ia-rank-edge );
	--ia-carousel-arrow-bg: var( --ia-rank-bg );
	--ia-carousel-arrow-bg-hover: #8f00b3;
	--ia-carousel-ink: #fff;
	--ia-carousel-focus: var( --ia-rank-label );
	--ia-carousel-dot: var( --ia-rank-edge );
	--ia-carousel-dot-active: var( --ia-rank-label );
	--ia-carousel-bar-track: var( --ia-rank-row );
	--ia-carousel-bar: linear-gradient( 90deg, var( --ia-rank-edge ) 0%, var( --ia-rank-label ) 100% );

	color: #fff;
}

/* La tarjeta ya no reparte el ancho: dentro del carrusel lo decide Splide con
   `perPage`, y en el respaldo sin script lo hace la hoja del carrusel. Lo que
   sí se queda es que la tarjeta llene su diapositiva de alto, para que dos
   tarjetas contiguas midan lo mismo aunque una tenga más cortes que la otra. */
.ia-rankings .splide__slide {
	height: auto;
}

.ia-rank-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 1rem;
	border: 1px solid var( --ia-rank-edge );
	/* El tipo de evento se reconoce por el costado antes de leer la etiqueta,
	   igual que en las tarjetas de evento de la página de una temporada. */
	border-left: 3px solid var( --ia-rank-type-color, var( --ia-rank-edge ) );
	border-radius: 14px;
	background: var( --ia-rank-bg );
}

.ia-rank-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0 0 .6rem !important;
}

.ia-rank-card__badge {
	display: inline-block;
	padding: .2em .8em;
	border: 1px solid transparent;
	border-radius: 999px;
	color: #fff;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Platforms are outlined instead of filled, so a card can carry several of
   them without competing with the event-type badge. */
.ia-rank-card__platform {
	display: inline-block;
	padding: .2em .8em;
	border: 1px solid var( --ia-platform-color, #fff );
	border-radius: 999px;
	background: none;
	color: #fff;
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Both rules carry the tag name so a theme's heading and paragraph styles —
   which are what turned the title dark and swallowed the countdown margin —
   cannot win the cascade inside the card. */
.ia-rank-card h3.ia-rank-card__title {
	margin: 0 0 .2em;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1.25;
}

.ia-rank-card p.ia-rank-card__countdown {
	margin: 0 0 1rem;
	color: rgba( 255, 255, 255, .65 );
	font-size: 1rem;
	text-transform: none;
}

/* Scoped with the tag and the card so a theme's `.entry-content ul` indent
   cannot win the cascade over the reset. */
.ia-rank-card ul.ia-rank-card__cuts {
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .2rem;
	flex: 1 1 auto;
}

.ia-rank-card__cut {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .3em .9em;
	border-radius: 8px;
	background: var( --ia-rank-row );
	font-size: .85rem;
	font-weight: 700;
	text-transform: uppercase;
}

.ia-rank-card__cut--empty {
	justify-content: center;
	opacity: .7;
	font-weight: 400;
	text-transform: none;
}

.ia-rank-card__pos {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* «TOP» y «POS.» son rótulos, no datos: se apagan para que la cifra que
   acompañan sea lo que se lee. Ambos comparten regla porque cualquier
   diferencia entre los dos lados de la fila se nota de inmediato. */
.ia-rank-card__pct-label,
.ia-rank-card__pos-label {
	margin-right: .35em;
	color: var( --ia-rank-label );
	font-size: .8em;
	font-weight: 100;
	text-transform: none;
}

.ia-rank-card__footer {
	margin-top: 1rem;
	font-size: 1rem;
}

.ia-rank-card__footer p {
	margin: 0 0 .25em;
}

.ia-rank-card__footer strong {
	color: #fff;
}

/* Rótulo apagado, fecha destacada: el `strong` recupera el blanco de la regla
   `.ia-rank-card__footer strong` de más arriba. */
.ia-rank-card__updated {
	color: rgba( 255, 255, 255, .6 );
	font-weight: 400;
	margin-top:.5rem;
}

.ia-rank-card__updated strong {
	font-weight: 700;
	white-space: nowrap;
}

/* La lista del carrusel es un `ul`, y un tema que sangre las listas del
   contenido lo sangraría también: las diapositivas quedarían descolocadas
   respecto del carril. Va con el nombre de la etiqueta por la misma razón que
   el resto de la hoja: es la especificidad que el tema trae. */
.ia-rankings ul.splide__list {
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	list-style: none;
}

.ia-cuts {
	width: 100%;
	border-collapse: collapse;
}

.ia-cuts th,
.ia-cuts td {
	padding: .35em .5em;
	border-bottom: 1px solid var( --ia-border );
	text-align: left;
}

.ia-cuts td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Calendar ----------------------------------------------------------------
 *
 * The timeline itself lives in calendar.css; only the optional filter bar is
 * styled here, since it reuses the generic form controls above.
 */

.ia-calendar__filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

/* Codes -------------------------------------------------------------------
   Same slider as the rankings — the chrome is the shared `carousel.css`, and
   all this sheet does about it is hand over the palette. The card is two
   surfaces stacked: the code and its buttons on the purple, the date and the
   votes on the strip that closes it — que no es un color propio sino el mismo
   cuerpo con un velo negro por encima, así que las dos superficies no pueden
   descasarse. */

.ia-codes {
	--ia-code-bg: #73008F;
	--ia-code-foot: rgba( 0, 0, 0, .2 );
	--ia-code-ink: #510066;
	--ia-code-label: #DC84FF;
	--ia-code-ok: #00D954;
	--ia-code-ko: #FF3A3A;

	--ia-carousel-edge: var( --ia-code-bg );
	--ia-carousel-arrow-bg: var( --ia-code-bg );
	--ia-carousel-arrow-bg-hover: #8f00b3;
	--ia-carousel-ink: #fff;
	--ia-carousel-focus: var( --ia-code-label );
	--ia-carousel-dot: var( --ia-code-bg );
	--ia-carousel-dot-active: var( --ia-code-label );
	--ia-carousel-bar-track: rgba( 0, 0, 0, .28 );
	--ia-carousel-bar: linear-gradient( 90deg, var( --ia-code-bg ) 0%, var( --ia-code-label ) 100% );

	color: #fff;
}

/* The track's list is a `ul`, and a theme that indents the lists of its content
   would indent it too, pushing every slide off the rail. Same reason — and same
   remedy — as the rankings slider above. */
.ia-codes ul.splide__list {
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	list-style: none;
}

/* The slide stretches and the card fills it, so two cards side by side measure
   the same however long their description is. */
.ia-codes .splide__slide {
	display: flex;
	height: auto;
}

.ia-codes .ia-code {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 14px;
	background: var( --ia-code-bg );
	color: #fff;
	/* The footer paints to the very edge, so the card clips it to its own
	   corners instead of the strip having to repeat the radius. */
	overflow: hidden;
}

.ia-code--inactive {
	opacity: .55;
}

/* Everything above the strip, centred both ways so a card with no description
   does not leave its code hanging at the top. */
.ia-code__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	padding: 1.75rem 1.25rem;
	text-align: center;
}

/* Carries the tag name because it is a `<code>`, and a theme dresses those with
   a monospace face, a tinted background and a padding of their own — none of
   which belongs on the headline of the card. */
.ia-codes code.ia-code__value {
	display: block;
	padding: 0;
	background: none;
	color: #fff;
	font-family: inherit;
	font-size: clamp( 1.4rem, 3vw, 2rem );
	font-style: italic;
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1.1;
	word-break: break-word;
	user-select: all;
}

.ia-code__uses {
	display: block;
	color: var( --ia-code-label );
	font-size: .85rem;
	font-weight: 700;
}

.ia-codes p.ia-code__description {
	margin: 0;
	color: #fff;
	font-size: .9rem;
}

/* What the code gives away. The list is centred like the rest of the card, so
   the marker is drawn inside it — `list-style: none` plus a bullet of our own —
   instead of hanging off an indent that centring would leave floating. */
/* A la izquierda, y no centrada como el resto de la tarjeta: es una lista, y
   una lista se lee por su columna de la izquierda —los iconos uno debajo de
   otro y las cifras arrancando a la misma altura—. Centrada, cada línea
   empezaba en un sitio distinto según lo que midiera. Ocupa el ancho de la
   tarjeta para que una sola línea corta quede donde quedará la siguiente y no
   en medio. Es la misma lista que se ve en «Se publicará así» al escribirla. */
.ia-codes ul.ia-code__rewards {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	align-items: flex-start;
	gap: .15rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff;
	font-size: .9rem;
	text-align: left;
}

/* Cada línea empieza por el icono de lo que reparte, así que no lleva viñeta:
   el dibujo ya dice de qué va, y dos marcas delante del mismo renglón sobran.
   En línea y centrado con el texto, para que el icono no descuelgue la primera
   línea cuando la descripción ocupa dos. */
.ia-codes .ia-code__reward {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: .35em;
}

/* Alto atado a la letra y ancho libre: los iconos no son cuadrados —van de 13×13
   a 19×19— y forzarlos a una caja los deformaría. */
.ia-codes .ia-code__reward-icon {
	flex: 0 0 auto;
	width: auto;
	height: 1.05em;
}

/* La cifra es lo que se lee de un vistazo: en blanco y en negrita, con el texto
   que la describe en redonda. En blanco y no en la tinta de los rótulos porque
   aquí la cifra no rotula nada, es el dato. */
.ia-code__reward strong {
	color: #fff;
	font-weight: 800;
}

.ia-code__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .75rem;
}

/* Los dos botones comparten la forma. «Canjear» va perfilado en reposo y se
   rellena de blanco al pasar por encima; «Copiar» va relleno desde el principio
   —sobre el morado oscuro de la tarjeta, un botón perfilado y en tinta oscura
   se perdía— y al pasar por encima llega al mismo blanco que su vecino.
   El borde se declara en la regla común para que ningún estado cambie el tamaño
   de la píldora. */
.ia-codes .ia-code__button {
	display: inline-block;
	padding: .55em 1.6em;
	border: 2px solid transparent;
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	font: inherit;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Relleno y con filete blanco de un píxel. El píxel que se le quita al borde
   —los dos de la regla común— se le devuelve en relleno, para que la píldora
   siga midiendo lo mismo que la de «Canjear», que va a su lado. */
.ia-codes button.ia-code__copy {
	padding: calc( .55em + 1px ) calc( 1.6em + 1px );
	border-width: 1px;
	border-color: #fff;
	background: var( --ia-code-ink );
	color: #fff;
}

/* Al pasar por encima, lo mismo que «Canjear»: el blanco entra al fondo y la
   letra toma el color de la tarjeta. */
.ia-codes button.ia-code__copy:hover,
.ia-codes button.ia-code__copy:focus-visible {
	border-color: #fff;
	background: #fff;
	color: var( --ia-code-bg );
}

/* Redeem is an anchor, and that is a fight of a different kind: a theme paints
   the links of its content with chained selectors — `.entry-content
   a:not(.button)` and the like — that beat any specificity we can reach for
   here, so the button came out in the theme's link colour instead of white.
   These are the only `!important` declarations of the sheet, and they are the
   same remedy the car slider already applies to the name of a car, for the same
   reason and with the same limits: only the properties a theme actually
   repaints, and only on this anchor.

   The underline is called off three times over because each theme draws it its
   own way: with `text-decoration`, with a `box-shadow` under the baseline, or
   with a background gradient. */
.ia-codes a.ia-code__redeem {
	border-color: #fff !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #fff !important;
	text-decoration: none !important;
}

.ia-codes a.ia-code__redeem:hover,
.ia-codes a.ia-code__redeem:focus,
.ia-codes a.ia-code__redeem:focus-visible {
	background-color: #fff !important;
	color: var( --ia-code-bg ) !important;
}

.ia-code__button:focus-visible {
	outline: 2px solid var( --ia-code-label );
	outline-offset: 2px;
}

/* The «Copiado» flash keeps the pill's filled shape rather than inventing a
   third colour for it. */
.ia-codes button.ia-code__copy.is-copied {
	border-color: var( --ia-code-ok );
	background: var( --ia-code-ok );
	color: var( --ia-code-ink );
}

/* Closing strip: date to the left, votes to the right. */
.ia-code__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem .75rem;
	padding: .75rem 1.25rem;
	background: var( --ia-code-foot );
}

/* Label in roman, date in bold — the same reading order as the foot of a
   ranking card. */
.ia-codes p.ia-code__published {
	margin: 0;
	color: var( --ia-code-label );
	font-size: .95rem;
	font-weight: 400;
}

.ia-code__published strong {
	font-weight: 700;
	white-space: nowrap;
}

.ia-code__votes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

.ia-codes .ia-vote {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3em .8em;
	border: 1px solid var( --ia-code-label );
	border-radius: 999px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.4;
	transition: border-color .2s ease;
}

.ia-vote__icon {
	display: block;
	width: 13px;
	height: 12px;
	flex: 0 0 auto;
}

.ia-vote__count {
	font-variant-numeric: tabular-nums;
}

.ia-codes .ia-vote--ok:hover:not( [disabled] ),
.ia-codes .ia-vote--ok:focus-visible:not( [disabled] ) {
	border-color: var( --ia-code-ok );
}

.ia-codes .ia-vote--ko:hover:not( [disabled] ),
.ia-codes .ia-vote--ko:focus-visible:not( [disabled] ) {
	border-color: var( --ia-code-ko );
}

.ia-codes .ia-vote:focus-visible {
	outline: 2px solid var( --ia-code-label );
	outline-offset: 2px;
}

.ia-codes .ia-vote[disabled] {
	cursor: default;
	opacity: .6;
}

/* Sits under the buttons, inside the light half, so a message never pushes the
   closing strip out of line with the card beside it. */
.ia-vote__message {
	display: block;
	color: #fff;
	font-size: .85rem;
}

.ia-vote__message:empty {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.ia-codes .ia-code__button,
	.ia-codes .ia-vote {
		transition: none;
	}
}

/* Seasons ----------------------------------------------------------------- */

/*
 * Two states of the same card. The current season sits directly on whatever is
 * behind it; the next one carries its own surface, which is what tells them
 * apart at a glance. Every colour is a variable so a theme can restate them
 * without fighting the selectors.
 */
.ia-seasons {
	--ia-season-gap: 1.5rem;
	--ia-season-radius: 16px;
	--ia-season-title: #fff;
	--ia-season-overline: #dc84ff;
	--ia-season-border: transparent;
	--ia-season-next-bg: #7a26b8;
	--ia-season-next-border: #b53ee4;
	--ia-season-next-button-bg: #fff;
	--ia-season-next-button-color: #7a26b8;
	--ia-season-media-width: 185px;
	--ia-season-media-height: 150px;

	display: flex;
	flex-wrap: wrap;
	gap: var( --ia-season-gap );
	align-items: stretch;
}

/*
 * Both variants carry the same 1px border — the current one just makes it
 * transparent. Declaring it on the shared rule keeps the two cards on identical
 * geometry, so the next card's outline cannot nudge its contents out of line
 * with the card beside it.
 */
.ia-season-card {
	display: flex;
	flex: 1 1 22rem;
	gap: 1.25rem;
	align-items: center;
	box-sizing: border-box;
	padding: 5px;
	border: 1px solid var( --ia-season-border );
	border-radius: var( --ia-season-radius );
}

.ia-season-card--next {
	border-color: var( --ia-season-next-border );
	background: var( --ia-season-next-bg );
	padding: 5px 25px;
}

.ia-season-card__media {
	flex: 0 0 auto;
	width: var( --ia-season-media-width );
	height: var( --ia-season-media-height );
	max-width: 40%;
	overflow: hidden;
	border-radius: calc( var( --ia-season-radius ) - 4px );
	line-height: 0;
}

.ia-season-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Centred against the image, whichever of the two ends up taller. */
.ia-season-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .5rem;
	align-items: flex-start;
	justify-content: center;
	min-width: 0;
}

.ia-season-card__overline {
	margin: 0 !important;
	color: var( --ia-season-overline );
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.ia-season-card--next .ia-season-card__overline {
	color: var( --ia-season-overline );
	margin:0;
}

.ia-season-card__title {
	margin: 0 !important;
	color: var( --ia-season-title );
	font-size: clamp( 1.35rem, 3.2vw, 2rem );
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Reads as a caption to the name, so it keeps the title's baseline but none of
   its weight. */
.ia-season-card__dates {
	display: inline-block;
	font-size: .5em;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: none;
	white-space: nowrap;
	color:white;
	line-height:12px;
	font-size:14px;
}

.ia-season-card__button {
	display: inline-block;
	margin-top: .35rem;
	padding: .7em 1.6em;
	border: 1px solid #dc84ff;
	border-radius: 999px;
	color: #dc84ff;
	font-size: .9rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.ia-season-card__button:hover,
.ia-season-card__button:focus-visible {
	opacity: .85;
	text-decoration: none;
	color:white;
	border: 1px solid white;
}

.ia-season-card--next .ia-season-card__button {
	border-color: var( --ia-season-next-button-bg );
	background: var( --ia-season-next-button-bg );
	color: var( --ia-season-next-button-color );
}

/*
 * The card keeps its row on narrow screens. Stacking it turned the image into a
 * full-bleed square that pushed the name off the fold, which is the opposite of
 * what the card is for: the image is decoration, the season name is the point.
 */
@media ( max-width: 30rem ) {
	.ia-season-card {
		gap: .9rem;
		padding: .75rem;
	}

	/* Same 37:30 proportion, scaled so the image cannot crowd out the name. */
	.ia-season-card__media {
		--ia-season-media-width: 111px;
		--ia-season-media-height: 90px;
	}

	.ia-season-card__button {
		padding: .6em 1.2em;
		font-size: .8rem;
	}
}