/*
Theme Name: Strategycomm - Duros a 4 Pesetas
Theme URI: https://durosa4pesetas.com
Description: Tema hijo de GeneratePress para el diario digital Duros a 4 Pesetas. Sistema de portada y secciones compuestas por módulos (CPT d4p_modulo): cada módulo define lienzo + posición + maquetación + fuente. Estructura por plantilla, presentación por interruptor.
Author: Strategycomm (Senén)
Template: generatepress
Version: 1.0.0
Text Domain: d4p
*/

/* ==========================================================================
   1. TOKENS  (:root)
   --------------------------------------------------------------------------
   El acento se conecta al Global Color de GeneratePress; aquí solo lo
   reexponemos como token para poder derivar variantes con color-mix().
   Las tipografías las gobierna el panel Typography de GeneratePress: estas
   plantillas HEREDAN, no cargan fuentes por su cuenta.
   ========================================================================== */
:root {
	/* Color de acento. Si defines un Global Color en GeneratePress llamado
	   "accent", puedes mapearlo aquí con var(--gp-accent, #b8121a). */
	--d4p-accent: #b8121a;
	--d4p-accent-dark: color-mix(in srgb, var(--d4p-accent) 82%, #000);

	--d4p-ink: #1a1a1a;      /* texto principal / titulares */
	--d4p-ink-soft: #555;    /* metadatos, fechas */
	--d4p-line: #e2e2e2;     /* filetes y separadores */
	--d4p-bg-soft: #f5f5f5;  /* fondos suaves ocasionales */

	/* Medidas */
	--d4p-maxw: 1180px;      /* ancho máximo del contenido del diario */
	--d4p-gap: 28px;         /* separación entre columnas dentro de un módulo */
	--d4p-block-gap: 44px;   /* separación vertical entre módulos */
	--d4p-radius: 4px;

	/* Tipografía: heredada de GeneratePress. Estas variables solo ajustan
	   escala relativa de los titulares del diario. */
	--d4p-h-lead: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); /* titular destacado grande */
	--d4p-h-1: 1.35rem;   /* titular destacada media */
	--d4p-h-2: 1.05rem;   /* titular de tarjeta */
	--d4p-h-3: 0.95rem;   /* titular de lista */
}

/* ==========================================================================
   2. WRAPPER  (.d4p)
   Todo el HTML propio cuelga de .d4p para no colisionar con GP ni plugins.
   ========================================================================== */
.d4p {
	color: var(--d4p-ink);
}
.d4p a { text-decoration: none; color: inherit; }
.d4p img { display: block; max-width: 100%; height: auto; }

/* Contenedor centrado del diario */
.d4p-wrap {
	max-width: var(--d4p-maxw);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Separación entre módulos apilados */
.d4p-modulo { margin-bottom: var(--d4p-block-gap); }
.d4p-modulo:last-child { margin-bottom: 0; }

/* Full-bleed opcional: rompe el contenedor de GeneratePress.
   GP pone .site-content en flex; por eso se fuerza block en las plantillas
   del diario (ver body.d4p-diario en la sección 6). */
.d4p-bleed {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
}

/* ==========================================================================
   3. PIEZAS COMPARTIDAS  (kicker, titular, meta, tarjeta)
   Cada noticia se prepara una sola vez en PHP; aquí solo se estiliza.
   ========================================================================== */

/* Kicker / etiqueta de sección sobre el titular */
.d4p-kicker {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--d4p-accent);
	margin-bottom: 6px;
}

/* Titulares */
.d4p-title { line-height: 1.2; font-weight: 700; color: var(--d4p-ink); margin: 0; }
.d4p-title:hover { color: var(--d4p-accent); }
.d4p-title--lead { font-size: var(--d4p-h-lead); }
.d4p-title--1 { font-size: var(--d4p-h-1); }
.d4p-title--2 { font-size: var(--d4p-h-2); }
.d4p-title--3 { font-size: var(--d4p-h-3); }

/* Entradilla / extracto */
.d4p-excerpt {
	margin: 8px 0 0;
	color: var(--d4p-ink-soft);
	font-size: 0.92rem;
	line-height: 1.5;
}

/* Metadatos (fecha · sección) */
.d4p-meta {
	margin-top: 8px;
	font-size: 0.78rem;
	color: var(--d4p-ink-soft);
}
.d4p-meta span + span::before { content: "·"; margin: 0 6px; }

/* Miniatura con proporción estable (evita saltos de layout) */
.d4p-thumb { position: relative; overflow: hidden; background: var(--d4p-bg-soft); border-radius: var(--d4p-radius); }
.d4p-thumb img { width: 100%; height: 100%; object-fit: cover; }
.d4p-thumb--16x9 { aspect-ratio: 16 / 9; }
.d4p-thumb--4x3 { aspect-ratio: 4 / 3; }
.d4p-thumb--1x1 { aspect-ratio: 1 / 1; }

/* Icono play sobre la foto (rasgo: vídeo) */
.d4p-thumb--video::after {
	content: "";
	position: absolute; inset: 0; margin: auto;
	width: 54px; height: 54px; border-radius: 50%;
	background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/20px no-repeat;
}

/* Enlace "MÁS NOTICIAS →" al pie de un módulo */
.d4p-more {
	display: inline-block;
	margin-top: 14px;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--d4p-accent);
}
.d4p-more:hover { color: var(--d4p-accent-dark); }

/* Título de la sección/módulo (cabecera del bloque) */
.d4p-modulo__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--d4p-accent);
}
.d4p-modulo__title {
	font-size: 1.1rem; font-weight: 800; text-transform: uppercase;
	letter-spacing: 0.04em; margin: 0; color: var(--d4p-ink);
}

/* ==========================================================================
   4. MAQUETACIONES
   Cada tipo es su propio bloque de CSS, legible de arriba abajo, igual que
   su plantilla PHP. Añadir un tipo = replicar el parcial y añadir su CSS.
   ========================================================================== */

/* ---- Tipo 1 — Destacada + lista lateral -------------------------------- */
.d4p-t1 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--d4p-gap); align-items: start; }
.d4p-t1--invert .d4p-t1__lead { order: 2; }

.d4p-t1__lead .d4p-thumb { margin-bottom: 12px; }

.d4p-t1__list { display: flex; flex-direction: column; }
.d4p-t1__item {
	display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start;
	padding: 14px 0; border-top: 1px solid var(--d4p-line);
}
.d4p-t1__item:first-child { padding-top: 0; border-top: 0; }
.d4p-t1__item--thumbright { grid-template-columns: 1fr 96px; }
.d4p-t1__item--thumbright .d4p-t1__itemthumb { order: 2; }

@media (max-width: 782px) {
	.d4p-t1 { grid-template-columns: 1fr; }
	.d4p-t1--invert .d4p-t1__lead { order: 0; } /* en móvil, destacada siempre primero */
}

/* ---- Tipo 3 — Rejilla (2/3/4 columnas) --------------------------------- */
.d4p-t3 { display: grid; gap: var(--d4p-gap); }
.d4p-t3--c2 { grid-template-columns: repeat(2, 1fr); }
.d4p-t3--c3 { grid-template-columns: repeat(3, 1fr); }
.d4p-t3--c4 { grid-template-columns: repeat(4, 1fr); }

.d4p-t3__card .d4p-thumb { margin-bottom: 10px; }
/* Kicker sobre la foto (cinta), cuando el rasgo está activo */
.d4p-t3__card--overlay .d4p-thumb { position: relative; }
.d4p-t3__card--overlay .d4p-kicker {
	position: absolute; left: 0; bottom: 0; margin: 0;
	background: var(--d4p-accent); color: #fff;
	padding: 5px 10px; letter-spacing: 0.05em;
}

@media (max-width: 960px) { .d4p-t3--c4 { grid-template-columns: repeat(2, 1fr); } .d4p-t3--c3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 782px) {
	.d4p-t3--c2, .d4p-t3--c3, .d4p-t3--c4 { grid-template-columns: 1fr; }
}

/* ---- Tipo 5 — Lista compacta (solo titulares) -------------------------- */
.d4p-t5 { display: flex; flex-direction: column; counter-reset: d4p-num; }
.d4p-t5__item {
	padding: 11px 0; border-top: 1px solid var(--d4p-line);
	display: flex; gap: 12px; align-items: baseline;
}
.d4p-t5__item:first-child { border-top: 0; padding-top: 0; }
.d4p-t5--numbered .d4p-t5__item::before {
	counter-increment: d4p-num; content: counter(d4p-num);
	font-weight: 800; color: var(--d4p-accent); font-size: 1.05rem;
	min-width: 1.2em; text-align: center;
}

/* ---- Compuesta — Destacada + lista (dos orígenes) ---------------------- */
.d4p-comp { display: grid; grid-template-columns: 2fr 1fr; gap: calc(var(--d4p-gap) * 1.4); align-items: start; }
.d4p-comp__lead .d4p-thumb { margin-bottom: 12px; }
.d4p-comp__subgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--d4p-gap); margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--d4p-line); }
.d4p-comp__sub .d4p-thumb { margin-bottom: 8px; }
.d4p-comp__side { padding-left: var(--d4p-gap); border-left: 1px solid var(--d4p-line); }

@media (max-width: 960px) {
	.d4p-comp { grid-template-columns: 1fr; }
	.d4p-comp__side { padding-left: 0; border-left: 0; border-top: 1px solid var(--d4p-line); padding-top: 22px; }
}
@media (max-width: 782px) {
	.d4p-comp__subgrid { grid-template-columns: 1fr; }
}

/* ---- Archivo clásico (red de seguridad) + paginación ------------------- */
.d4p-archive { padding-block: 8px; }
.d4p-pagination { margin-top: var(--d4p-block-gap); }
.d4p-pagination .page-numbers { display: inline-block; padding: 6px 12px; margin: 0 2px; border: 1px solid var(--d4p-line); border-radius: var(--d4p-radius); }
.d4p-pagination .page-numbers.current { background: var(--d4p-accent); color: #fff; border-color: var(--d4p-accent); }

/* ==========================================================================
   5. CABECERA DE SECCIÓN  (archivo de categoría)
   Título + fondo por categoría (campos ACF atados a la taxonomía).
   ========================================================================== */
.d4p-sechead {
	padding: 46px 20px;
	margin-bottom: var(--d4p-block-gap);
	background: var(--d4p-accent);
	color: #fff;
	text-align: center;
}
.d4p-sechead--image { position: relative; background-size: cover; background-position: center; }
.d4p-sechead--image::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.d4p-sechead__inner { position: relative; max-width: var(--d4p-maxw); margin-inline: auto; }
.d4p-sechead__title { margin: 0; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); font-weight: 800; }
.d4p-sechead__desc { margin: 10px auto 0; max-width: 60ch; opacity: .92; }

/* ==========================================================================
   6. INTEGRACIÓN CON GENERATEPRESS
   Variantes de cabecera por body_class + destrabar el ancho full-bleed.
   ========================================================================== */
/* En las plantillas del diario, GP pone .site-content en flex y eso rompe
   el full-bleed; lo forzamos a block. */
body.d4p-diario .site-content { display: block; }

/* Cabecera transparente/overlay en portada (se resuelve por CSS, sin forkear
   el header.php de GeneratePress). */
body.d4p-header-overlay .site-header { position: absolute; left: 0; right: 0; background: transparent; z-index: 5; }

/* ==========================================================================
   7. REPRODUCTOR DE AUDIO NATIVO  ([audio] embebido en el cuerpo)
   Rasgo por presencia: si el artículo trae [audio], se pinta con estilo;
   si no, no aparece nada. No se toca el shortcode ni las entradas.
   ========================================================================== */
.wp-audio-shortcode {
	border: 1px solid var(--d4p-line);
	border-left: 4px solid var(--d4p-accent);
	border-radius: var(--d4p-radius);
	padding: 6px 10px;
	background: var(--d4p-bg-soft);
}