/* ==========================================================================
   El Banderín — layout.css
   Cabecera, navegación, búsqueda, pie y rejillas de página.
   Enfoque "mobile first": los estilos base son para móvil y se amplían
   con min-width.
   ========================================================================== */

/* ---------- Cabecera ---------------------------------------------------- */
.elb-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--elb-black);
	color: var(--elb-white);
	border-bottom: 1px solid rgba(176, 141, 72, 0.45);
	transition: transform 0.25s ease;
}

/* Firma del logo: la franja del derbi (rojo → verde) sobre la cabecera. */
.elb-header::before {
	content: "";
	display: block;
	height: 3px;
	background: var(--elb-derbi);
}

.elb-header.is-hidden { transform: translateY(-100%); }

body.admin-bar .elb-header { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .elb-header { top: 46px; }
}

@media (max-width: 600px) {
	body.admin-bar .elb-header { top: 0; }
}

.elb-header__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"brand actions"
		"nav   nav";
	align-items: center;
}

/* Marca */
.elb-brand-wrap { grid-area: brand; margin: 0; font: inherit; justify-self: start; }

.elb-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 56px;
	color: var(--elb-white);
	text-decoration: none;
	justify-self: start;
}

.elb-brand .elb-badge {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex: none;
}

.elb-brand__text { display: flex; flex-direction: column; line-height: 1; }

.elb-brand__name {
	font-family: var(--elb-font-head);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.elb-brand__tagline {
	margin-top: 4px;
	font-family: var(--elb-font-ui);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--elb-gold);
}

/* Acciones (búsqueda) */
.elb-header__actions { grid-area: actions; display: flex; gap: 4px; }

.elb-icon-button {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: var(--elb-white);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.elb-icon-button:hover { border-color: var(--elb-gold); color: var(--elb-gold-bright); }

.elb-icon-button .elb-icon--close { display: none; }

/* Redes sociales en la cabecera: desde 600 px (en móvil caben en el pie). */
.elb-header__social { display: none; }
@media (min-width: 600px) {
	.elb-header__social { display: inline-grid; }
}
.elb-icon-button[aria-expanded="true"] .elb-icon--close { display: block; }
.elb-icon-button[aria-expanded="true"] .elb-icon--search { display: none; }

/* Navegación: en móvil es una fila deslizable siempre visible */
.elb-nav {
	grid-area: nav;
	margin-inline: calc(var(--elb-gutter) * -1);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
	mask-image: linear-gradient(90deg, #000 85%, transparent);
}

.elb-nav::-webkit-scrollbar { display: none; }

.elb-nav__list {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 0 var(--elb-gutter);
	list-style: none;
}

.elb-nav__list > li { flex: none; }

.elb-nav__list a {
	position: relative;
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 12px;
	color: var(--elb-white);
	font-family: var(--elb-font-head);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.elb-nav__list a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 3px;
	background: var(--elb-accent-bright);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

.elb-nav__list a:hover::after,
.elb-nav__list .current-menu-item > a::after,
.elb-nav__list .current-post-ancestor > a::after,
.elb-nav__list .current-menu-parent > a::after,
.elb-nav__list .current-category-ancestor > a::after { transform: scaleX(1); }

/* Panel de búsqueda */
.elb-search-panel {
	background: var(--elb-black);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-block: var(--elb-space-3);
}

.elb-search-panel[hidden] { display: none; }

@media (min-width: 960px) {
	.elb-header__inner {
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "brand nav actions";
		column-gap: var(--elb-space-4);
		min-height: 72px;
	}

	.elb-brand .elb-badge { width: 52px; height: 52px; }
	.elb-brand__name { font-size: 1.625rem; }
	.elb-brand__tagline { font-size: 0.6875rem; }

	.elb-nav {
		margin: 0;
		border: 0;
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.elb-nav__list { padding: 0; gap: 8px; }
	.elb-nav__list a { height: 72px; font-size: 1.1875rem; padding: 0 14px; }
	.elb-nav__list a::after { bottom: 0; height: 4px; }
}

/* ---------- Formulario de búsqueda ------------------------------------- */
.elb-search-form {
	display: flex;
	gap: 8px;
	max-width: var(--elb-read);
}

.elb-search-form input[type="search"] { flex: 1; }

.elb-search-panel .elb-search-form { margin-inline: auto; }

.elb-search-panel input[type="search"] {
	background: #161616;
	border-color: #3a3a3a;
	color: var(--elb-white);
}

.elb-search-panel input[type="search"]:focus { border-color: var(--elb-gold); }

.elb-search-panel .elb-button {
	background: var(--elb-gold);
	border-color: var(--elb-gold);
	color: var(--elb-black);
}

/* ---------- Pie --------------------------------------------------------- */
.elb-footer {
	background: var(--elb-black);
	color: #d7d3ca;
	font-family: var(--elb-font-ui);
	font-size: 0.9375rem;
}

.elb-footer::before {
	content: "";
	display: block;
	height: 3px;
	background: var(--elb-derbi);
}

.elb-footer a { color: var(--elb-white); text-decoration: none; }
.elb-footer a:hover { color: var(--elb-gold-bright); text-decoration: underline; }

.elb-footer__grid {
	display: grid;
	gap: var(--elb-space-4);
	padding-block: var(--elb-space-5);
}

.elb-footer__brand .elb-brand { min-height: 0; }
.elb-footer__brand .elb-badge { width: 72px; height: 72px; }

.elb-footer__about {
	margin-top: var(--elb-space-2);
	max-width: 38ch;
	font-family: var(--elb-font-text);
	font-size: 1rem;
	line-height: 1.55;
	color: #bdb8ad;
}

.elb-footer__title {
	margin-bottom: 0.75rem;
	font-family: var(--elb-font-head);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--elb-gold);
}

.elb-footer__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elb-footer__list .elb-accent--betis a::before,
.elb-footer__list .elb-accent--sevilla a::before,
.elb-footer__list .elb-accent--laliga a::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	background: var(--elb-accent-bright);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.elb-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: var(--elb-space-3);
	font-size: 0.8125rem;
	color: #9d988d;
}

.elb-footer__hint { color: #9d988d; font-style: italic; }

.elb-footer__social-link { display: inline-flex; align-items: center; gap: 8px; }
.elb-footer__social-link .elb-icon { width: 18px; height: 18px; color: var(--elb-gold); }
.elb-footer__social-link:hover .elb-icon { color: var(--elb-gold-bright); }

@media (min-width: 700px) {
	.elb-footer__grid { grid-template-columns: repeat(3, 1fr); }
	.elb-footer__brand { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
	.elb-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
	.elb-footer__brand { grid-column: auto; }
}

/* ---------- Rejillas de página ----------------------------------------- */

/* Columna principal + lateral (portada y secciones) */
.elb-columns {
	display: grid;
	gap: var(--elb-space-5);
}

@media (min-width: 1024px) {
	.elb-columns { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; }
	.elb-columns__aside {
		position: sticky;
		top: calc(var(--elb-header-h) + 24px);
		align-self: start;
	}
}

.elb-columns__aside { display: grid; gap: var(--elb-space-4); align-content: start; }

/* Bloques apilados de portada */
.elb-stack { display: grid; gap: var(--elb-space-5); }

.elb-section { margin-top: var(--elb-space-5); }