/**
 * Tarjeta de evento.
 *
 * La misma tarjeta en la página de temporada y en la de eventos en curso, así
 * que sus estilos viven aquí y no duplicados en las dos hojas. Los selectores
 * cuelgan de `.iat-tpl`, que es el contenedor común de todas las plantillas:
 * siguen encapsulados —fuera del bloque no se aplica nada— y a la vez sirven
 * para cualquiera de ellas.
 *
 * Los colores no se declaran aquí: se toman de las variables que define la
 * plantilla anfitriona, de modo que la tarjeta se tiñe con la paleta de la
 * página en la que caiga. El color del tipo de evento llega por
 * `--iat-evento-color`, que pone el marcado tarjeta a tarjeta.
 *
 * @package InfoAsphaltTemplates
 */

.iat-tpl .iat-evento {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1rem;
	background: var(--card);
	/* El color del tipo de evento entra por el borde izquierdo: es lo que deja
	   agrupar la rejilla de un vistazo sin repetir la etiqueta en cada línea.
	   Al costado y no arriba porque así lo lleva también la tarjeta de ranking,
	   y las dos rejillas conviven en la misma página. */
	border: 1px solid var(--card-border);
	border-left: 3px solid var(--iat-evento-color, var(--accent));
	border-radius: var(--radius);
}

/* El estado a la izquierda y el tipo a la derecha, como en la tarjeta de coche:
   la etiqueta de color cae en la misma esquina en las dos rejillas. */
.iat-tpl .iat-evento__cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.iat-tpl .iat-evento__cab .iat-etiquetas {
	justify-content: flex-end;
}

/* La etiqueta del tipo es la misma que la de la tarjeta de coche, y allí está
   escrita —`tarjeta-coche.css`—, pero esta hoja tiene que servir sola en una
   página que no pinte ni un coche. Acotadas a la tarjeta de evento dicen lo
   mismo que las de allí, así que donde conviven no hay nada que discutir. */
.iat-tpl .iat-evento .iat-etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.iat-tpl .iat-evento .iat-etiqueta {
	--iat-chip-color: var(--accent);
	--iat-chip-ink: var(--tinta);
	background: var(--iat-chip-color);
	color: var(--iat-chip-ink);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
}

.iat-tpl .iat-estado {
	flex: none;
	border-radius: 999px;
	padding: 0.15rem 0.5rem;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-soft);
}

.iat-tpl .iat-estado--ongoing {
	background: rgba(0, 255, 136, 0.15);
	color: var(--verde);
}

.iat-tpl .iat-estado--upcoming {
	background: rgba(211, 85, 255, 0.18);
	color: var(--accent-soft);
}

/* El título va en blanco enlace o no: que un evento tenga a dónde apuntar no
   debería cambiar cómo se lee su nombre en la rejilla. */
.iat-tpl .iat-evento__nombre,
.iat-tpl .iat-evento__nombre a {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--text);
}

.iat-tpl .iat-evento__nombre a:hover {
	color: var(--accent-soft);
}

/* En la tarjeta de un evento las fechas son un dato secundario bajo el título,
   no la línea de cabecera de la página, así que se quedan apagadas. */
.iat-tpl .iat-fechas--evento {
	font-size: 0.75rem;
	color: var(--text-soft);
}

.iat-tpl .iat-evento__foto {
	background: var(--card-alt);
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.iat-tpl .iat-evento__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iat-tpl .iat-evento__coches {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.78rem;
	/* En redonda: la negrita se reserva para el coche principal, que es lo que
	   la lista tiene que distinguir de un vistazo. */
	font-weight: 400;
}

.iat-tpl .iat-evento__coche.is-principal {
	font-weight: 800;
}

.iat-tpl .iat-evento__coches a {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* El mismo icono de clase que la tarjeta de coche, delante del nombre. */
.iat-tpl .iat-evento__clase {
	flex: none;
	width: 24px;
	height: auto;
}

/* El punto de siempre, para los coches cuya clase no tiene dibujo: ocupa lo
   mismo que el icono, así que la lista sigue alineada aunque se mezclen. */
.iat-tpl .iat-evento__punto {
	flex: none;
	width: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.iat-tpl .iat-evento__punto::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--iat-evento-color, var(--accent));
}

.iat-tpl .iat-evento__coches a:hover {
	color: var(--accent-soft);
}

/* El botón cierra la tarjeta, pegado abajo: `margin-top: auto` es lo que
   mantiene alineados los de toda una fila cuando unas tarjetas traen más coches
   que otras. */
.iat-tpl .iat-evento .iat-boton {
	display: block;
	margin-top: auto;
	padding: 0.7rem 1rem;
	border: 1px solid var(--text);
	border-radius: 999px;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: var(--text);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.iat-tpl .iat-evento .iat-boton:hover {
	background: var(--text);
	color: var(--tinta);
}