/*
 * torneos-historico.css — Estilos específicos del archivo histórico.
 *
 * Reusa la mayoría de los componentes de torneos.css (.tn-card, .tn-filters,
 * .tn-hero, .tn-cross-link). Aquí solo viven los elementos exclusivos del
 * archivo: el strip de stats en el hero y los year markers que agrupan
 * la lista cronológica.
 */

/* ============================================================
   STATS STRIP (hero)
   ============================================================ */
.th-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
	max-width: 720px;
	margin: var(--space-6) auto 0;
	padding: 0;
	text-align: left;
}
.th-stats > div {
	border-left: 1px solid var(--border-default);
	padding-left: var(--space-4);
}
.th-stats > div:first-child { border-left: 0; padding-left: 0; }
.th-stats dt {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-tertiary);
	margin: 0 0 var(--space-2);
}
.th-stats dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 36px;
	font-weight: 500;
	line-height: 1;
	color: var(--text-primary);
	letter-spacing: -0.02em;
}
.th-stats dd .num {
	font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
	.th-stats {
		grid-template-columns: 1fr;
		gap: var(--space-3);
		max-width: 320px;
	}
	.th-stats > div {
		border-left: 0;
		border-top: 1px solid var(--border-default);
		padding-left: 0;
		padding-top: var(--space-3);
	}
	.th-stats > div:first-child { border-top: 0; padding-top: 0; }
	.th-stats dd { font-size: 28px; }
}

/* ============================================================
   YEAR MARKER (separador entre grupos de años)
   ============================================================ */
.th-year-marker {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin: var(--space-8) 0 var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--border-default);
	font-family: var(--font-display);
	font-weight: 500;
}
.th-year-marker:first-child { margin-top: 0; }
.th-year-marker__num {
	font-size: 44px;
	line-height: 1;
	color: var(--text-primary);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.th-year-marker__count {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

@media (max-width: 720px) {
	.th-year-marker { margin-top: var(--space-6); }
	.th-year-marker__num { font-size: 32px; }
}

/* ============================================================
   VIEW TOGGLE WRAP en historico — 3-col grid para mantener el toggle
   centrado y acomodar el link "Próximos torneos" a la derecha.
   El margin-bottom va aquí porque al pasar el toggle a un grid item
   su propio margin-bottom queda absorbido.
   ============================================================ */
.tn-page--historico .tn-view-toggle__wrap {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}
.tn-page--historico .tn-view-toggle__wrap .tn-view-toggle {
	grid-column: 2;
	margin: 0;
}
.tn-page--historico .tn-archive-link--back {
	justify-self: end;
	padding-right: 0;
}
@media (max-width: 720px) {
	.tn-page--historico .tn-view-toggle__wrap {
		grid-template-columns: 1fr;
		gap: var(--space-2);
		margin-bottom: var(--space-4);
	}
	.tn-page--historico .tn-view-toggle__wrap .tn-view-toggle {
		grid-column: auto;
		justify-self: center;
	}
	.tn-page--historico .tn-view-toggle__spacer { display: none; }
	.tn-page--historico .tn-archive-link--back { justify-self: center; }
}