/**
 * Portada tipo portal — composición
 *
 * Respeta el aspecto propio de CoverNews: no cambia tipografías ni colores base,
 * solo usa el acento (#ff184e) para el filo de los encabezados y los enlaces al pasar.
 *
 * Reparto: el DESTACADO va a todo lo ancho, por encima de las dos columnas.
 * Los BLOQUES DE SECCIÓN van dentro de la columna izquierda, con la barra
 * lateral a la derecha, como estaba organizada la página antes.
 */

/* ============================================================
   0. Fuera lo que sustituye la composición
   OJO: solo cuando la composición PINTA bloques. Cada sección necesita
   3 noticias, así que con pocas no se pinta nada; en ese caso el listado
   del tema tiene que seguir viéndose, o la portada se queda vacía.
   La clase «dum-con-portada» la pone dum-portada.php cuando sí hay bloques.
   ============================================================ */
body.dum-con-portada #aft-inner-row { display: none !important; }

/* La paginación SÍ se queda: va al final de la columna izquierda, debajo de los
   bloques de sección, que es donde estaba. */

/* Esta banda se quedaba sin artículos al sustituir el listado: solo era un título vacío */
body.dum-con-portada .af-main-banner-latest-posts { display: none !important; }

/* La paginación heredada del listado se queda pegada a los bloques de sección */
.home #main .covernews-pagination,
.home #main .pagination { margin-top: 10px; }

/* ============================================================
   1. Destacado: 1 grande + 2 medianas, a todo lo ancho
   ============================================================ */
.dp-hero {
	display: grid;
	grid-template-columns: 1.9fr 1fr;
	gap: 22px;
	max-width: 1215px;
	margin: 26px auto 34px;
	padding: 0 15px;
	box-sizing: border-box;
}

.dp-hero__lado {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 22px;
}

.dp-card { margin: 0; }

.dp-card__foto { display: block; overflow: hidden; }

.dp-card__foto img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.35s ease;
}

.dp-card:hover .dp-card__foto img { transform: scale(1.04); }

.dp-cat {
	display: inline-block;
	margin: 10px 0 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	/* Un rojo algo más oscuro que el de acento: sobre fondo claro, el #ff184e
	   solo daba 3,57:1 y a 10 px hace falta 4,5:1. Este da 4,61:1. */
	color: #e00040;
}

.dp-titulo { margin: 0 0 6px; line-height: 1.25; }

.dp-titulo a { text-decoration: none; }

/* El hover usa el rojo oscuro en claro y el claro en oscuro, para que siempre
   supere el mínimo de contraste sobre su fondo */
.dp-titulo a:hover { color: #e00040; }
html[data-theme='dark'] .dp-titulo a:hover { color: #ff6b8b; }

.dp-meta {
	display: inline-block;
	font-size: 12px;
	/* #888 daba 3,31:1 sobre el fondo claro; este da 5,0:1 */
	color: #6b6b6b;
}

/* Titular destacado: el más grande de la página */
.dp-card--grande .dp-titulo { font-size: 38px; }
.dp-card--mediana .dp-titulo { font-size: 21px; }
.dp-card--rejilla .dp-titulo { font-size: 17px; }

.dp-card--grande .dp-card__texto { padding-top: 4px; }

/* ============================================================
   2. Bloques por sección — dentro de la columna izquierda
   Versión COMPACTA: una sola fila por sección (lista de 2 a la
   izquierda + 3 tarjetas a la derecha), en vez de una rejilla 2x2
   que hacía cada bloque el doble de alto.
   ============================================================ */
.dp-seccion { margin-bottom: 28px; }

/* Al ir el destacado desactivado, el primer bloque necesita su aire arriba */
#primary > .dp-seccion:first-of-type { margin-top: 20px; }

.dp-seccion__titulo {
	margin: 0 0 12px;
	padding-bottom: 6px;
	border-bottom: 3px solid var(--dum-acento, #ff184e);
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.dp-seccion__titulo a { text-decoration: none; }

.dp-seccion__cuerpo {
	display: grid;
	grid-template-columns: 1fr 1.25fr;
	gap: 20px;
	align-items: start;
}

/* Lista: miniatura pequeña + titular */
.dp-lista { display: grid; gap: 12px; }

.dp-item {
	display: grid;
	grid-template-columns: 78px 1fr;
	gap: 12px;
	align-items: start;
	padding-bottom: 12px;
	border-bottom: 1px solid #ececec;
}

.dp-item:last-child { border-bottom: 0; padding-bottom: 0; }

.dp-item__foto img {
	display: block;
	width: 78px;
	height: 55px;
	object-fit: cover;
}

.dp-item .dp-cat { margin-top: 0; }

.dp-item .dp-titulo { font-size: 15px; }

/* Una fila de 3 tarjetas */
.dp-rejilla {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.dp-card--rejilla .dp-cat { margin: 7px 0 3px; }

/* ============================================================
   3. Modo oscuro
   ============================================================ */
html[data-theme='dark'] .dp-item { border-bottom-color: #ffffff1a; }
html[data-theme='dark'] .dp-meta { color: #b9c1cd; }

/* ============================================================
   4. Pantallas medianas y móvil
   ============================================================ */
@media (max-width: 1100px) {
	.dp-seccion__cuerpo { grid-template-columns: 1fr; }
	.dp-item { grid-template-columns: 96px 1fr; }
	.dp-item__foto img { width: 96px; height: 68px; }
}

@media (max-width: 900px) {
	.dp-hero { grid-template-columns: 1fr; }
	.dp-card--grande .dp-titulo { font-size: 27px; }
}

@media (max-width: 600px) {
	.dp-rejilla { grid-template-columns: 1fr; }
	.dp-card--mediana .dp-titulo,
	.dp-card--rejilla .dp-titulo { font-size: 19px; }
	.dp-item { grid-template-columns: 84px 1fr; }
	.dp-item__foto img { width: 84px; height: 60px; }
	.dp-seccion__titulo { font-size: 19px; }
}