/* =================================================================
   base.css — tokens + reset + tipografía + layout + componentes globales.
   Se encola SIEMPRE (inc/enqueue.php). Los componentes específicos y las
   vistas se cargan condicionalmente. Ver arquitectura §4.

   El orden de @layer se declara aquí (primer CSS cargado): gana la capa
   más a la derecha, independiente de la especificidad.
   CSS v1: plano, sin nesting nativo. @layer sí queda habilitado (§4.3).
   ================================================================= */

@layer reset, legacy, base, components, views, utilities;

/* ---- Design tokens (Custom Properties) ---- */
:root {
	/* Color en hex/rgba (legible y pegable directo desde Figma). Variantes a mano, sin preprocesador. */
	--c-brand:       #1a75d1;
	--c-brand-dark:  #14529e;
	--c-ink:         #21242b;
	--c-muted:       #74798a;
	--c-surface:     #ffffff;
	--c-surface-alt: #f5f6f9;
	--c-line:        #d9dce3;

	/* Tipografía fluida (clamp, sin media queries) */
	--font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;
	--step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--step-2: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
	--step-3: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);

	/* Espaciado y formas */
	--space-xs: .5rem; --space-s: 1rem; --space-m: 1.5rem;
	--space-l: 2.5rem; --space-xl: 4rem;
	--radius: 12px;
	--measure: 65ch;
	--container: 1200px;

	/* DIA DS — tokens de marca (extraídos de Figma, nodo Header 2415:3310). Hex tal cual los entrega Figma (§4.1). */
	--dia-color-text-primary: #121212;
	--dia-color-nav-active: #7d95b0;
	--dia-color-border-strong: #232323;
	--dia-color-border-subtle: #eff1f3;
	--dia-color-text-inverse-muted: #cccccc;
	--dia-color-icon-muted: #71717b;
	--dia-radius-sm: 4px;

	/* Tipografía editorial. Cargadas vía Google Fonts en inc/enqueue.php (dia_enqueue_fonts). */
	--font-serif: "Noto Serif Condensed", "Georgia", serif;

	/* Sombra estándar de thumbnail editorial (News/Resource/Event), tal cual el Inspect de Figma. */
	--shadow-thumb: 0 356px 100px 0 rgba(0, 0, 0, 0), 0 228px 91px 0 rgba(0, 0, 0, .04),
		0 128px 77px 0 rgba(0, 0, 0, .12), 0 57px 57px 0 rgba(0, 0, 0, .2), 0 14px 31px 0 rgba(0, 0, 0, .23);

	/* Proporción ÚNICA de imagen editorial (News/Resource/Event): home hero, cards y detalle
	   comparten esta relación de aspecto para que el admin no tenga que dar de alta tamaños
	   distintos por vista. Vertical → ajustar con --img-focal (object-position) en vez de crop. */
	--ratio-article: 16 / 9;
	--ratio-article-compact: 8 / 5;
	--img-focal: 50% 50%;
}

@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	body, h1, h2, h3, p, figure, ul { margin: 0; }
	img { max-width: 100%; height: auto; display: block; }
	a { color: inherit; }
	button { font: inherit; cursor: pointer; }
	.screen-reader-text {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
	}
}

@layer base {
	body {
		font-family: var(--font-sans);
		font-size: var(--step-0);
		line-height: 1.6;
		color: var(--c-ink);
		background: var(--c-surface);
	}
	h1 { font-size: var(--step-3); line-height: 1.1; }
	h2 { font-size: var(--step-2); }
	h3 { font-size: var(--step-1); }

	/* ---- Headings reutilizables por ROL, no por nivel semántico (§A.1 del PRD aplicado a CSS):
	   el nivel de heading (h1/h2/h3) lo decide cada plantilla según su propio outline; el ESTILO
	   visual se aplica con estas clases para no acoplar "se ve como titular grande" a "es un h1". ---- */
	/* Valores literales del nodo Hero Home (Figma 2813:5914 → Heading 3, Noto Serif Condensed SemiBold). */
	.heading-display {
		font-family: var(--font-serif);
		font-weight: 600;
		font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.125rem); /* hasta 34px desktop */
		line-height: 1.294; /* 44/34, igual que Figma */
		margin: 0;
	}
	.heading-card {
		font-weight: 400;
		font-size: 1.125rem;
		line-height: 1.35;
		margin: 0;
	}
	.label-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-inverse-muted);
	}
	.label-section {
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 3px;
		text-transform: uppercase;
		margin: 0;
	}

	.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-m); }

	.grid {
		display: grid;
		gap: var(--space-m);
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	}
}

@layer components {
	.btn {
		display: inline-block;
		background: var(--c-brand);
		color: #fff;
		padding: .6rem 1.2rem;
		border: 0;
		border-radius: 8px;
		text-decoration: none;
	}
	.btn:hover { background: var(--c-brand-dark); }

	.site-header {
		background: var(--c-surface);
		border-bottom: 1px solid var(--dia-color-border-subtle);
	}
	.site-header .site-header__inner {
		display: flex; align-items: center; justify-content: space-between; gap: var(--space-m);
		padding-block: var(--space-m);
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}
	.site-header .site-header__brand { display: block; flex: 0 0 auto; line-height: 0; }
	.site-header .site-header__logo { height: 58px; width: auto; }
	.site-header .site-header__burger { display: none; background: none; border: 0; font-size: 1.5rem; }

	.site-header .site-header__nav { flex: 1 1 auto; display: flex; justify-content: center; }
	.site-header .menu {
		display: flex; align-items: center; gap: .125rem; list-style: none; padding: 0; margin: 0;
	}
	.site-header .menu a {
		display: inline-block;
		padding: .375rem .625rem;
		border-radius: var(--dia-radius-sm);
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--dia-color-text-primary);
	}
	.site-header .menu .current-menu-item > a,
	.site-header .menu .current_page_item > a {
		color: var(--dia-color-nav-active);
	}

	.site-header .site-header__tools { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
	.site-header .icon { width: 16px; height: 16px; color: var(--dia-color-text-primary); }

	.site-header .lang-dropdown { position: relative; }
	.site-header .lang-dropdown__toggle {
		display: flex; align-items: center; gap: .25rem;
		border: 1px solid var(--dia-color-border-strong);
		border-radius: var(--dia-radius-sm);
		background: none;
		padding: .625rem 1rem;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 2px;
		color: var(--dia-color-text-primary);
	}
	.site-header .lang-dropdown__menu {
		display: none;
		position: absolute; top: calc(100% + .25rem); left: 0; min-width: 100%;
		list-style: none; margin: 0; padding: .25rem 0;
		background: var(--c-surface);
		border: 1px solid var(--dia-color-border-strong);
		border-radius: var(--dia-radius-sm);
		z-index: 10;
	}
	.site-header .lang-dropdown.is-open .lang-dropdown__menu { display: block; }
	.site-header .lang-dropdown__menu a {
		display: block; padding: .375rem 1rem; text-decoration: none;
		color: var(--dia-color-text-primary); font-size: 13px; font-weight: 700; letter-spacing: 2px;
	}
	.site-header .lang-dropdown__menu a:hover { background: var(--dia-color-border-subtle); }
	.site-header .lang-dropdown__menu a[aria-current] { color: var(--dia-color-nav-active); }

	.site-header .site-header__search {
		display: flex; align-items: center; justify-content: center;
		border: 1px solid var(--dia-color-border-strong);
		border-radius: var(--dia-radius-sm);
		background: none;
		padding: .75rem;
	}

	@media (width < 64rem) {
		.site-header .site-header__burger { display: block; }
		.site-header .site-header__nav { display: none; flex-basis: 100%; order: 3; }
		.site-header .site-header__nav.is-open { display: flex; }
		.site-header .menu { flex-direction: column; align-items: flex-start; width: 100%; }
		.site-header .site-header__inner { flex-wrap: wrap; }
	}

	.site-footer {
		margin-top: var(--space-xl);
		padding-block: var(--space-l);
		background: var(--c-surface-alt);
		border-top: 1px solid var(--c-line);
	}

	.card {
		background: var(--c-surface);
		border: 1px solid var(--c-line);
		border-radius: var(--radius);
		overflow: hidden;
		transition: box-shadow .2s, transform .2s;
	}
	.card .card__link { text-decoration: none; color: inherit; display: block; }
	.card .card__media { aspect-ratio: var(--ratio-article); background-size: cover; background-position: var(--img-focal); }
	.card .card__body { padding: var(--space-m); }
	.card .card__meta { color: var(--c-muted); font-size: .85rem; margin-bottom: .25rem; }
	.card .card__title { font-size: var(--step-1); }
	.card .card__sub { color: var(--c-muted); margin-top: .25rem; }
	.card:hover { box-shadow: 0 8px 30px rgba(33, 36, 43, .12); transform: translateY(-2px); }

	/* Hero: CSS PLANO a propósito (sin nesting) — above-the-fold/LCP, blinda Safari 15/Catalina (§4.3). */
	.hero {
		min-height: 40vh;
		display: grid;
		align-items: end;
		color: #fff;
		background: linear-gradient(180deg, transparent, rgba(33, 36, 43, .6)), var(--hero-image) center/cover;
	}
	.hero__title { padding-block: var(--space-l); }
}