/*
 * Layout Periódico: tres columnas densas desde arriba, sin destacado.
 *
 * Todo lo importante por encima del pliegue. La jerarquía la marcan el ancho
 * de columna y los filetes, no el tamaño de una foto, y la densidad sale del
 * gap reducido, nunca de encoger el texto: el cuerpo lo fija la pareja
 * tipográfica del sitio y tiene que seguir siendo legible.
 *
 * Solo lo que este layout hace distinto. Lo compartido está en base.css y
 * components.css, que se cargan antes.
 */

/* ── Chrome ── */

/* La cabecera es una cinta baja con filete doble, no una banda con aire: en
   un sitio que publica a diario, cada píxel de cabecera es un titular que no
   se ve al abrir. */
.pf-header {
	border-bottom: calc(var(--border-width) * 3) double var(--line);
	background: var(--page);
}

.pf-header .pf-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-3);
}

.pf-header__brand {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--h2);
	letter-spacing: var(--track-display);
	text-transform: uppercase;
}

.pf-header__brand a {
	color: var(--ink);
	text-decoration: none;
}

.pf-header__brand img {
	display: block;
	max-height: 44px;
	width: auto;
}

.pf-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Separadores entre secciones, como una cabecera de diario. */
.pf-nav li + li {
	border-left: var(--border-width) solid var(--line);
}

.pf-nav a {
	display: block;
	padding-inline: var(--space-3);
	color: var(--ink);
	text-decoration: none;
}

.pf-nav a:hover { color: var(--accent); }

.pf-main { padding-block: var(--space-5); }

.pf-footer {
	margin-top: var(--space-6);
	padding-block: var(--space-6);
	border-top: calc(var(--border-width) * 3) double var(--line);
	background: var(--page);
}

.pf-footer__legal {
	margin: var(--gap) 0 0;
	color: var(--muted);
	font-size: 0.8125rem;
}

/* ── Portada ── */

.pf-periodico {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

/* Las columnas se separan con filete, no con espacio: el espacio a esta
   densidad no basta para que se lean como columnas distintas. */
@media (min-width: 700px) {
	.pf-periodico { grid-template-columns: 3fr 2fr; }

	.pf-periodico__col--c {
		grid-column: 1 / -1;
		border-top: var(--border-width) solid var(--line);
		padding-top: var(--space-4);
	}
}

@media (min-width: 1000px) {
	.pf-periodico { grid-template-columns: 5fr 4fr 3fr; }

	.pf-periodico__col--b,
	.pf-periodico__col--c {
		padding-left: var(--space-4);
		border-left: var(--border-width) solid var(--line);
	}

	.pf-periodico__col--c {
		grid-column: auto;
		border-top: 0;
		padding-top: 0;
	}
}

.pf-periodico__col {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* La primera tarjeta de la columna principal es la única con imagen. */
.pf-periodico__col--a .pf-card--card {
	padding-bottom: var(--space-4);
	border-bottom: var(--border-width) solid var(--line);
}

.pf-periodico__col--a .pf-card--card .pf-card__title {
	font-size: var(--h2);
	line-height: var(--lh-tight);
}

/* ── Lista compacta ── */

/* La columna dice qué es: sin encabezado, una lista de secciones al lado de
   «Latest» no se distingue de otra lista de artículos. */
.pf-periodico__coltitulo {
	margin: 0 0 var(--space-3);
	padding-bottom: var(--space-2);
	border-bottom: var(--border-width) solid var(--line);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.pf-compacta + .pf-compacta { margin-top: var(--space-5); }

.pf-compacta__title {
	margin: 0 0 var(--space-2);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--accent);
}

.pf-compacta__title a {
	color: inherit;
	text-decoration: none;
}

.pf-compacta__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pf-compacta__item {
	padding-block: var(--space-2);
	border-top: var(--border-width) solid var(--line);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.pf-compacta__link {
	color: var(--ink);
	text-decoration: none;
	font-family: var(--font-display);
	font-size: var(--body-size);
	line-height: var(--lh-tight);
}

.pf-compacta__link:hover { color: var(--accent); }

.pf-compacta__date {
	color: var(--muted);
	font-size: 0.75rem;
}

/* ── Archivo ── */

.pf-archive__head {
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: calc(var(--border-width) * 3) double var(--line);
}

.pf-archive__title { margin: 0; }

.pf-archive__sub {
	margin: var(--space-2) 0 0;
	color: var(--muted);
}

.pf-periodico__lista {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--space-6);
}

@media (min-width: 700px) {
	.pf-periodico__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Artículo ── */

.pf-periodico__single {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--block-gap);
}

@media (min-width: 1000px) {
	.pf-periodico__single {
		grid-template-columns: minmax(0, 65ch) minmax(220px, 1fr);
		gap: var(--space-6);
	}

	.pf-periodico__rail {
		padding-left: var(--space-5);
		border-left: var(--border-width) solid var(--line);
		align-self: start;
		position: sticky;
		top: var(--gap);
	}
}

.pf-single__title { line-height: var(--lh-tight); }

.pf-single__meta,
.pf-single__kicker {
	color: var(--muted);
	font-size: 0.8125rem;
}

.pf-single__media { margin: var(--gap) 0; }

.pf-prose { line-height: var(--lh-body); }