/**
 * Ensaya Carabanchel — Base.
 *
 * Reseteos mínimos y utilidades transversales que theme.json no
 * puede resolver. No se toca aquí ningún color/tipografía/spacing:
 * eso vive en tokens.css y theme.json. Este archivo es solo
 * comportamiento y estructura.
 */

/* -------------------------------------------------- */
/* Reset ligero                                        */
/* -------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Punto 29 — evita scroll horizontal introducido por los márgenes
   negativos de .full-bleed en viewports estrechos (320-375px). */
html {
	overflow-x: hidden;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block; /* evita CLS y espacios inline fantasma, punto 27/31 */
}

/* -------------------------------------------------- */
/* Puntos 16 y 17 — eliminar título automático y       */
/* márgenes/paddings heredados de Gutenberg             */
/* -------------------------------------------------- */

/* El header nunca debe llevar un hueco antes del hero */
.wp-site-blocks > header:first-child,
.wp-site-blocks > .wp-block-template-part:first-child {
	margin-block-start: 0;
}

/* FASE 10: WordPress añade automáticamente un margen superior
   (--wp--preset--spacing--5, 40px) a TODOS los hijos directos de
   .wp-site-blocks (header, main, footer) salvo al primero. Eso
   dejaba un hueco visible del color de fondo entre el header y el
   hero, y otro entre el final del contenido y el footer, porque
   solo habíamos anulado el margen del primer hijo. Lo anulamos para
   los tres: nuestros patterns ya controlan su propio espaciado
   interno con padding, no necesitamos que WordPress añada más.
*/
.wp-site-blocks > * {
	margin-block-start: 0 !important;
}

/* Si un template incluye por error wp:post-title, no genera el
   bloque "título + espacio" no deseado — se neutraliza aquí y el
   diseñador decide su propio título dentro del contenido. */
.wp-block-post-title {
	margin: 0;
}

main {
	margin-block-start: 0;
}

/* -------------------------------------------------- */
/* Punto 15 — header sticky OPCIONAL.                  */
/* Activado por defecto; para desactivarlo basta con   */
/* quitar esta regla o sobreescribir position:static.  */
/* -------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--duration-base) var(--ease-editorial),
		border-color var(--duration-base) var(--ease-editorial);
}

/* Sombra sutil que aparece solo al hacer scroll (clase añadida por
   main.js), para separar visualmente el header del contenido sin
   necesidad de un borde permanente. */
.site-header.is-scrolled {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Menú del header con la misma voz tipográfica que el resto del
   sitio (Archivo Black, cargada en parts/header.html). */
.site-header__nav .wp-block-navigation-item__content {
	font-family: "Archivo Black", var(--font-family-grotesk);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* -------------------------------------------------- */
/* Menú hamburguesa hasta 1024px (no solo en móvil).   */
/* El bloque de navegación de WordPress ya trae su      */
/* propio botón de hamburguesa y menú a pantalla        */
/* completa (overlayMenu:"mobile" en header.html) — por */
/* defecto solo se activa por debajo de 600px. Con 7     */
/* elementos y texto largo, lo ampliamos hasta 1024px    */
/* para que tablets y portátiles pequeños también lo     */
/* usen en vez de un menú apretado en varias líneas.     */
/* -------------------------------------------------- */
@media (max-width: 1024px) {
	.site-header__nav .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
	.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	.site-header__nav .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
}

/* Hover tipo píldora naranja en los enlaces del menú. */
.site-header__nav .wp-block-navigation-item__content {
	padding: var(--space-2) var(--space-2) !important;
	border-radius: 999px;
	transition: background-color var(--duration-fast) var(--ease-editorial),
		color var(--duration-fast) var(--ease-editorial);
}

.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item__content:focus-visible {
	background-color: var(--color-accent);
	color: var(--color-inverted-foreground);
}

/* -------------------------------------------------- */
/* Punto 17 — sección FULL BLEED (100vw real)          */
/* -------------------------------------------------- */
.full-bleed,
.is-style-full-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* -------------------------------------------------- */
/* Punto 29 — sistema de grid responsive               */
/* Mobile-first: 1 columna por defecto, 2 desde 600px, */
/* completo (3/4) desde 1024px. No es "encoger          */
/* desktop": en 320-599px cada tarjeta ocupa el ancho    */
/* completo, composición propia para mobile.            */
/* -------------------------------------------------- */
.grid-2,
.grid-3,
.grid-4,
.bands-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gap);
}

@media (min-width: 600px) {
	.grid-2,
	.grid-3,
	.grid-4,
	.bands-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	.grid-4,
	.bands-grid .wp-block-post-template {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -------------------------------------------------- */
/* Búsqueda (search.html) — el bloque nativo de         */
/* WordPress no hereda tokens.css automáticamente.      */
/* -------------------------------------------------- */
.site-search .wp-block-search__input {
	border: 1px solid var(--color-border);
	border-radius: 0;
	padding: var(--space-2) var(--space-3);
	font-family: var(--font-family-sans);
	font-size: var(--font-body);
	background: var(--color-background);
	color: var(--color-foreground);
}

.site-search .wp-block-search__input:focus {
	border-color: var(--color-foreground);
}

.site-search .wp-block-search__button {
	border-radius: 0;
	background: var(--color-foreground);
	color: var(--color-background);
	font-family: var(--font-family-grotesk);
	font-size: var(--font-small);
	border: none;
	padding: var(--space-2) var(--space-4);
}

.site-search .wp-block-search__button:hover {
	background: var(--color-accent);
	color: var(--color-inverted-foreground);
}

.search-result:hover .wp-block-post-title,
.search-result:focus-within .wp-block-post-title {
	color: var(--color-accent);
}

/* -------------------------------------------------- */
/* Punto 20 — grid de bandas, hover revela información  */
/* -------------------------------------------------- */
.band-card__media {
	position: relative;
	overflow: hidden;
}

.band-card__overlay {
	position: absolute;
	inset: 0;
	padding: var(--space-3);
	background: linear-gradient(to top, rgba(20, 18, 15, 0.65), transparent 60%);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--duration-base) var(--ease-editorial),
		transform var(--duration-base) var(--ease-editorial);
}

.band-card:hover .band-card__overlay,
.band-card:focus-within .band-card__overlay {
	opacity: 1;
	transform: translateY(0);
}

.band-card__media img {
	transition: transform var(--duration-base) var(--ease-editorial);
}

.band-card:hover .band-card__media img,
.band-card:focus-within .band-card__media img {
	transform: scale(1.03);
}

/* -------------------------------------------------- */
/* Punto 29 — mobile 320-375px: reduce el aire vertical  */
/* del hero para no forzar demasiado scroll en pantallas */
/* cortas, sin tocar el resto de la composición.        */
/* -------------------------------------------------- */
@media (max-width: 479px) {
	.hero-editorial .wp-block-cover__inner-container {
		padding-top: var(--space-4) !important;
		padding-bottom: var(--space-4) !important;
	}
}

/* -------------------------------------------------- */
/* Punto 30 — objetivo táctil mínimo (~44px) en los     */
/* enlaces de navegación y filtros en mobile.            */
/* -------------------------------------------------- */
@media (max-width: 767px) {
	.site-header .wp-block-navigation-item > a,
	.bands-filter-bar a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-top: var(--space-1);
		padding-bottom: var(--space-1);
	}
}

/* -------------------------------------------------- */
/* Accesibilidad — foco visible, punto 30              */
/* -------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--color-accent-bright);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	top: -999px;
	left: 0;
	z-index: 100000;
	padding: var(--space-2) var(--space-3);
	background: var(--color-foreground);
	color: var(--color-background);
	font-family: var(--font-family-grotesk);
	font-size: var(--font-small);
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

/* -------------------------------------------------- */
/* Punto 28 — respetar prefers-reduced-motion          */
/* -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------- */
/* Utilidades tipográficas de bajo nivel                */
/* (caption/meta llevan tracking y mayúsculas propias   */
/* de un sistema editorial, no cubierto por theme.json) */
/* -------------------------------------------------- */
.text-caption,
.text-meta {
	font-family: var(--font-family-grotesk);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted);
}

.text-caption {
	font-size: var(--font-caption);
}

.text-meta {
	font-size: var(--font-meta);
}