/*
Theme Name: Periódico — Informativo Al Día
Template: periodico
Author: Informativo Al Día
Description: Tema hijo del kit `periodico` para informativoaldia.com. Réplica estructural del diseño JN del sitio, con colores y tipografías tomados de sus ajustes guardados.
Version: 1.0.7
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: periodico-informativoaldia
*/

:root {
	--iad-morado: #1e0472;
	--iad-acento: #1809bf;
	--iad-amarillo: #f6da09;
	--iad-gris: #f2f2f2;
	--iad-titular: #212121;
	--iad-texto: #53585c;
}

/* ===== Cabecera ===== */
.iad-header { background: var(--iad-morado); color: #fff; }
.iad-topbar { padding: 0.4rem clamp(1rem, 4vw, 2rem); font-size: 0.78rem; }
.iad-topbar > .alignwide { gap: 1rem; }
.iad-topbar__date { margin: 0; color: #fff; }
.iad-topbar__search { margin: 0; max-width: 190px; }
.iad-topbar__search .wp-block-search__inside-wrapper { border: 0; padding: 0; background: rgba(255, 255, 255, 0.14); border-radius: 2px; }
.iad-topbar__search input { background: transparent; border: 0; color: #fff; padding: 0.2rem 0.5rem; font-size: 0.78rem; }
.iad-topbar__search input::placeholder { color: rgba(255, 255, 255, 0.75); }
.iad-topbar__search button { background: transparent; color: #fff; padding: 0.15rem 0.35rem; }
.iad-topbar__search button svg { fill: #fff; width: 18px; height: 18px; min-width: 18px; min-height: 18px; }
.iad-logo-bar { text-align: center; padding: 0.5rem 1rem 0.85rem; }
.iad-logo-bar img { display: inline-block; width: 607px; max-width: 100%; height: auto; }

.pb-mega {
	--pb-mega-bg: var(--iad-morado);
	--pb-mega-text: #fff;
	--pb-mega-accent: #d1d1d1;
	border-bottom: 0;
}
.pb-mega__link {
	font-family: var(--wp--preset--font-family--sistema);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* ===== Portada ===== */
.iad-fila { padding: 1.75rem clamp(1rem, 4vw, 2rem); }
.iad-fila--gris { background: var(--iad-gris); }
.iad-fila--negro { background: #000; color: #fff; }
.iad-negro__title { margin: 0 0 1rem; color: #fff; font-size: 1.15rem; }
.iad-sec { margin-block: 0 1.75rem; }
.iad-sec:last-child { margin-bottom: 0; }

/* Títulos de sección como barra rellena, con el color de cada módulo original. */
.iad-sec .pb-seccion__title {
	margin: 0 0 1.25rem;
	padding: 0.45rem 0.9rem;
	border: 0;
	background: var(--iad-barra, var(--iad-acento));
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.iad-sec--politica { --iad-barra: #dd9933; }
.iad-sec--economia { --iad-barra: #18b025; }
.iad-sec--deportes { --iad-barra: #eb1e4e; }

/* Etiqueta de categoría amarilla, como en el original. */
.iad-portada [class*="__cat"],
.iad-archivo__hero [class*="__cat"] {
	background: var(--iad-amarillo);
	color: #000;
}
.iad-portada [class*="__cat"] a,
.iad-archivo__hero [class*="__cat"] a { color: #000; }

/* Textos */
.iad-sec h3, .iad-sec h3 a,
.iad-sec [class*="__title"] a { color: var(--iad-titular); text-decoration: none; }
.iad-sec h3 a:hover,
.iad-sec [class*="__title"] a:hover { color: var(--iad-acento); }

/* Fila negra: mosaico sobre fondo oscuro. */
.iad-fila--negro .pb-hero a { color: #fff; text-decoration: none; }

/* ===== Barra lateral ===== */
.iad-sidebar { display: grid; gap: 1.5rem; }
.iad-sidebar img,
.iad-sidebar video,
.iad-sidebar iframe { display: block; max-width: 100%; height: auto; }
.iad-sidebar iframe { aspect-ratio: 16 / 9; width: 100%; }
.iad-widget:empty { display: none; }
@media (min-width: 782px) {
	.wp-block-column.iad-col-sticky { position: sticky; top: 1rem; align-self: flex-start; }
}

/* ===== Artículo ===== */
.iad-single__title {
	margin: 0 0 1rem;
	color: var(--iad-titular);
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}
.iad-single__meta { gap: 0.4rem 1rem; margin-bottom: 1.25rem; color: #8a8f94; font-size: 0.8rem; }
.iad-single__meta a { color: var(--iad-acento); font-weight: 700; text-decoration: none; }
.iad-single__meta .wp-block-post-terms a { color: #6b7075; }
.iad-entry { color: #000; font-family: var(--wp--preset--font-family--lectura); font-size: 1.0625rem; line-height: 1.65; }
.iad-entry img { max-width: 100%; height: auto; }
.iad-relacionadas { margin: 2rem 0 1rem; padding: 0.45rem 0.9rem; background: var(--iad-acento); color: #fff; font-size: 0.95rem; }

/* ===== Categoría ===== */
.iad-archivo__title { margin: 0 0 1.5rem; color: var(--iad-titular); font-family: var(--wp--preset--font-family--sistema); font-size: 2rem; font-weight: 700; }
.iad-archivo__lista .pb-grid > * { text-align: center; margin-bottom: 2.25rem; padding-bottom: 2.25rem; border-bottom: 1px solid #eee; }
.iad-archivo__lista h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 400; line-height: 1.25; }
.iad-archivo__lista p { text-align: left; font-family: var(--wp--preset--font-family--lectura); }

/* ===== Pie ===== */
.iad-footer { background: #002c5b; color: #b2c0cd; font-size: 0.9rem; }
.iad-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 2.25rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2.1rem clamp(1rem, 4vw, 2rem) 1.1rem;
}
.iad-footer h3 { margin: 0 0 0.9rem; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 1rem; }
.iad-footer ul { margin: 0; padding: 0; list-style: none; }
.iad-footer li { margin: 0 0 0.55rem; }
.iad-footer p { margin: 0; line-height: 1.6; }
.iad-footer a { color: #b9c4d4; text-decoration: none; }
.iad-footer a:hover { color: #fff; }
.iad-footer .iad-footer__copy { padding: 0.9rem 1rem; background: #00214f; color: #cfd8e3; font-size: 0.8rem; text-align: center; }

/* ===== Ajustes tras primera comparación ===== */
/* Slider: una nota por vista, sin asomar la siguiente ni cortar el titular. */
.iad-portada .pb-slider { margin-bottom: 1.75rem; }
.iad-portada .pb-slider--principal .pb-slider__slide { flex: 0 0 100%; width: 100%; max-width: 100%; }
.iad-portada .pb-slider--principal .pb-card__title,
.iad-portada .pb-slider--principal .pb-card__title a { color: #fff; }

/* Títulos sobre foto: blancos. Va después de la regla general de .iad-sec. */
.iad-sec .pb-overlay [class*="__title"] a,
.iad-sec .pb-overlay h3,
.iad-sec .pb-overlay h3 a { color: #fff; }
.iad-sec .pb-overlay [class*="__title"] a:hover { color: var(--iad-amarillo); }

/* Botones de compartir: conservan su propio color dentro de la línea de meta. */
.iad-single__meta .pb-compartir a,
.iad-single__meta [class*="compartir"] a { color: #fff; font-weight: 600; }

/* Móvil: el módulo con imagen lateral se apila para no estrechar el texto. */
@media (max-width: 600px) {
	.iad-sec .pb-lateral > *,
	.iad-sec .pb-lateral .pb-card { display: block; }
	.iad-sec .pb-lateral [class*="__media"] { width: 100%; max-width: 100%; margin-bottom: 0.6rem; }
	.iad-sec .pb-lateral [class*="__media"] img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
}

/* Slider en móvil: el kit apila el texto bajo la imagen, sobre fondo claro. */
@media (max-width: 600px) {
	.iad-portada .pb-slider--principal .pb-card__title,
	.iad-portada .pb-slider--principal .pb-card__title a { color: var(--iad-titular); }
}

/* Anuncios: mismo ancho en toda la barra lateral, sin recortar ni deformar. */
.iad-sidebar .iad-widget,
.iad-sidebar figure,
.iad-sidebar .wp-video,
.iad-sidebar .iad-lazyyt { width: 100% !important; max-width: 100%; margin: 0; }
.iad-sidebar img,
.iad-sidebar video { width: 100% !important; max-width: 100%; height: auto !important; }

/* La barra ya es más alta que la pantalla: fija arriba ocultaría sus últimos anuncios. */
@media (min-width: 782px) {
	.wp-block-column.iad-col-sticky { position: static; }
}

/* Dos bloques de anuncios bajo Nacionales: misma caja, sin recortar la pieza. */
.iad-anuncios { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.75rem; }
.iad-anuncios .iad-widget { display: flex; align-items: center; justify-content: center; height: 440px; background: var(--iad-gris); padding: 0.5rem; }
.iad-anuncios a,
.iad-anuncios figure { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; }
.iad-anuncios img { display: block; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain; }
@media (max-width: 600px) {
	.iad-anuncios { gap: 0.75rem; }
	.iad-anuncios .iad-widget { height: 300px; }
}

/* Portada: la barra ya es corta, acompaña al lector mientras baja por la columna. */
@media (min-width: 782px) {
	.iad-portada .wp-block-column.iad-col-sticky { position: sticky; top: 1rem; align-self: flex-start; }
}

/* Móvil: tarjetas sobre foto a una columna, para que el titular quepa en la imagen. */
@media (max-width: 600px) {
	.iad-sec .pb-overlay { grid-template-columns: minmax(0, 1fr) !important; }
}