/**
 * Dumar Sport — páginas de competiciones (listado /competiciones/ y cada
 * competición).
 *
 * Se carga solo en esas páginas, después de main.css y de gallery.css, del
 * que reutiliza la cabecera (.gallery-head), compartir y la paginación. La
 * cabecera y la franja de galerías van sobre grafito con acento lima; la
 * descripción, las noticias y el listado, sobre papel con acento verde
 * sombra, como la portada.
 *
 * Índice
 *  1. Cabecera
 *  2. Resultados (enlaces externos)
 *  2b. Descripción
 *  3. Galerías de la competición
 *  4. Noticias de la competición
 *  5. Listado de competiciones
 */

/* 1. Cabecera
   ========================================================================== */

/* Contexto oscuro: el acento es lima, con letra grafito encima */
.competition-head,
.competition-galleries {
	--accent: var(--ds-acento-oscuro);
	--on-accent: var(--ds-sobre-acento-oscuro);

	background: var(--ds-grafito);
	color: var(--ds-blanco);
}

/* Estado: aplazada, suspendida, cancelada, finalizada o en curso */
.competition-status {
	padding: 2px 10px 1px;
	border: 1px solid currentColor;
	color: var(--ds-gris-claro);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
}

.competition-status--en-curso {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

/* Fecha prevista antes del aplazamiento: tachada y en segundo plano */
.competition-head del {
	color: var(--ds-gris-claro);
	text-decoration-thickness: 2px;
}

/* Listado: solo el título y el resumen */
.competition-head--archive {
	padding-block: 20px 22px;
}

.competition-head__title {
	font-size: clamp(2.5rem, 1.5rem + 4.5vw, 5rem);
	overflow-wrap: anywhere;
}

.competition-head__summary {
	margin-top: 10px;
	color: var(--ds-gris-claro);
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.competition-head--archive {
		padding-block: 28px 30px;
	}
}

/* 2. Resultados (enlaces externos)
   ==========================================================================
   Sobre papel, con acento verde sombra. Las clasificaciones son de otras
   webs: cada fila dice qué es y de quién, y el enlace muestra el destino. */

.competition-results {
	margin-block: 32px;
	scroll-margin-top: 16px;
}

.competition-results:focus {
	outline: none;
}

.competition-results__note {
	margin-top: 10px;
	color: var(--ds-gris-pista);
	font-size: 0.9375rem;
}

.competition-results__group {
	margin-top: 24px;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.competition-results__list {
	display: grid;
	gap: 1px;
	margin-top: 14px;
	border: 1px solid var(--ds-gris-linea);
	background: var(--ds-gris-linea);
}

.competition-result {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	min-width: 0;
	padding: 14px 16px;
	background: var(--ds-blanco);
}

.competition-result__text {
	flex: 1 1 260px;
	min-width: 0;
}

.competition-result__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}

.competition-result__type,
.competition-result__status {
	padding: 2px 10px 1px;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-transform: uppercase;
}

.competition-result__type {
	background: var(--ds-grafito);
	color: var(--ds-blanco);
}

.competition-result__status {
	border: 1px solid currentColor;
	color: var(--ds-gris-pista);
}

.competition-result__status--oficial {
	color: var(--ds-texto-acento-claro);
}

.competition-result__name {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.competition-result__source {
	margin-top: 4px;
	color: var(--ds-gris-pista);
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.competition-result .result-link {
	flex: 0 1 auto;
}

@media (min-width: 768px) {
	.competition-results {
		margin-block: 48px;
	}
}

/* 2b. Descripción
   ========================================================================== */

.competition-text {
	margin-block: 32px;
}

.competition-text__body {
	max-width: 68ch;
	font-size: 1.0625rem;
}

.competition-text__body > * + * {
	margin-top: 1em;
}

.competition-text__body a {
	color: var(--ds-texto-acento-claro);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.competition-text__body h2,
.competition-text__body h3 {
	margin-top: 1.4em;
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
}

.competition-text__body img {
	height: auto;
}

@media (min-width: 768px) {
	.competition-text {
		margin-block: 48px;
	}
}

/* 3. Galerías de la competición
   ==========================================================================
   Franja grafito con las tarjetas de «Más galerías» de la portada. */

.competition-galleries {
	padding-block: 28px 36px;
}

.competition-head + .competition-galleries {
	border-top: 1px solid var(--ds-gris-borde);
}

.competition-galleries .more-galleries__head {
	margin-bottom: 16px;
}

@media (min-width: 768px) {
	.competition-galleries {
		padding-block: 40px 48px;
	}
}

/* 4. Noticias de la competición
   ========================================================================== */

.competition-news {
	display: grid;
	gap: 28px 24px;
}

@media (min-width: 600px) {
	.competition-news {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.competition-news {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 5. Listado de competiciones
   ========================================================================== */

.competition-archive__body {
	padding-block: 32px 48px;
}

.competition-archive__group + .competition-archive__group {
	margin-top: 44px;
}

/* Temporada: rótulo sobre cada bloque de competiciones anteriores */
.competition-archive__season {
	margin: 24px 0 10px;
	color: var(--ds-gris-pista);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1;
}

.competition-archive__group .section-heading + .competition-archive__season {
	margin-top: 0;
}

.competition-archive__empty {
	padding: 18px 20px;
	border: 1px solid var(--ds-gris-linea);
	background: var(--ds-blanco);
	color: var(--ds-gris-pista);
}

/* En el listado, las líneas las dibuja cada celda: así los huecos de la
   última fila quedan vacíos y no se rellenan con el fondo del panel */
.events--list {
	gap: 1px;
	border: 0;
	background: none;
}

.events--list .event {
	box-shadow: 0 0 0 1px var(--ds-gris-linea);
}

/* En el listado, tres columnas como máximo: el nombre tiene más sitio */
@media (min-width: 1200px) {
	.events--list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.competition-archive__body {
		padding-block: 44px 64px;
	}
}