/* ═══════════════════════════════════════════════════════════════════════════
 * Lámina de próximos eventos del hero del home (mu-plugins/la-hero-eventos.php)
 *
 * Diseño aprobado: planes/hero-eventos/maqueta.html. Todo en px (en el sitio 1rem = 14px).
 * La lámina se adapta a la CAJA del slider con container queries, no al viewport:
 * el mismo HTML va en los tres widgets (desktop 1170×335, tablet 930×342 / 690×342,
 * mobile 360×504).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- convivencia con el slider de Elementor ---------- */
/* El alto lo fija el widget (y la-ajustes-diseno.css con aspect-ratio en mobile y en
 * escritorio angosto) sobre .swiper-slide: la lámina ocupa esa caja entera, en absoluto,
 * así su contenido nunca empuja el alto del slider. */
.swiper-slide.la-hero-ev-slide {
	position: relative;
	overflow: hidden;
	min-height: 280px; /* red de seguridad si el widget quedara sin alto propio */
	background: #1a2744; /* azul tinta: el sitio entero es celeste y la lámina se perdía */
	text-align: left;
}
.la-hero-ev-slide > .la-hero-ev {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
}

/* ---------- la lámina ---------- */
.la-hero-ev {
	--la-blue: #476EC2; --la-blue-deep: #3558a8; --la-blue-light: #eef2fb; --la-ink: #1a2744;
	--ev-celeste: #DCF2FF; --ev-rojo: #D93A2F; --ev-ink-mid: #4a5673;
	container-type: size; width: 100%; height: 100%; box-sizing: border-box;
	background: var(--la-ink); color: #fff; font-family: "DM Sans", sans-serif;
}
.la-hero-ev *, .la-hero-ev *::before, .la-hero-ev *::after { box-sizing: border-box; }
.la-hero-ev [hidden] { display: none !important; }
.la-hero-ev a,
.la-hero-ev a:hover,
.la-hero-ev a:focus { color: inherit; text-decoration: none; }
/* El kit de Elementor (.elementor-kit-9 a) fija familia, tamaño y peso en todos los
   enlaces: los de la lámina heredan la tipografía de su contenedor. El botón y
   «Ver toda la agenda» definen la suya más abajo. */
.la-hero-ev a:not(.la-hero-ev__btn):not(.la-hero-ev__todos) { font: inherit; letter-spacing: inherit; }
.la-hero-ev a:focus-visible { outline: 3px solid var(--ev-celeste); outline-offset: 2px; border-radius: 4px; }
.la-hero-ev__in { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: auto minmax(0, 1fr) 372px; gap: 32px; padding: 20px 28px; align-items: stretch; }

/* afiche */
/* El afiche se muestra ENTERO, sin recortar: el marco toma la proporción de la imagen
   (los afiches vienen en 4:5 y en 9:16) y sólo se limita el ancho por si llega uno apaisado. */
.la-hero-ev .la-hero-ev__afiche { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; max-width: 300px; min-width: 0; }
.la-hero-ev .la-hero-ev__afiche img { display: block; width: auto; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 16px; box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .6); }
.la-hero-ev__sinimg { height: 100%; aspect-ratio: 4 / 5; border-radius: 16px; background: var(--la-blue-deep); box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .6); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 2px; }
.la-hero-ev__sinimg b { font: 800 96px/0.9 "Bricolage Grotesque", sans-serif; }
.la-hero-ev__sinimg span { font: 700 18px/1 "Space Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.la-hero-ev__sinimg small { font: 500 13px/1 "DM Sans", sans-serif; opacity: .85; margin-top: 10px; }

/* principal */
.la-hero-ev__main { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.la-hero-ev .la-hero-ev__kicker { font: 700 12px/1 "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: #9db7ee; margin: 0 0 14px; padding: 0; }
.la-hero-ev__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.la-hero-ev__chip { font: 700 12px/1 "Space Mono", monospace; letter-spacing: .04em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: #fff; color: var(--la-ink); }
.la-hero-ev__chip--hoy { background: var(--ev-celeste); color: var(--la-ink); }
.la-hero-ev__chip--curso { background: var(--ev-rojo); color: #fff; }
.la-hero-ev .la-hero-ev__titulo { font: 800 32px/1.08 "Bricolage Grotesque", sans-serif; letter-spacing: -.01em; color: #fff; margin: 0 0 10px; padding: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.la-hero-ev .la-hero-ev__lugar { font: 500 16px/1.3 "DM Sans", sans-serif; color: #d3dcf0; margin: 0 0 18px; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-hero-ev__lugar:empty { display: none; }
.la-hero-ev__lugar b { color: #fff; font-weight: 700; }
.la-hero-ev .la-hero-ev__btn,
.la-hero-ev .la-hero-ev__btn:hover,
.la-hero-ev .la-hero-ev__btn:focus { color: var(--la-ink); }
.la-hero-ev .la-hero-ev__btn { align-self: flex-start; display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border-radius: 999px; background: var(--ev-celeste); font: 700 15px/1 "DM Sans", sans-serif; transition: background .2s; }
.la-hero-ev .la-hero-ev__btn:hover { background: #fff; }
.la-hero-ev .la-hero-ev__btn:focus-visible { border-radius: 999px; outline-offset: 3px; }

/* secundarios */
.la-hero-ev .la-hero-ev__mas a:focus-visible { outline-color: var(--la-ink); }
.la-hero-ev__mas { background: #fff; color: var(--la-ink); border-radius: 20px; padding: 16px 18px 14px; display: flex; flex-direction: column; min-width: 0; }
.la-hero-ev .la-hero-ev__mas h3 { font: 700 11px/1 "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ev-ink-mid); margin: 0 0 6px; padding: 0; }
.la-hero-ev .la-hero-ev__lista { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.la-hero-ev .la-hero-ev__fila { margin: 0; padding: 0; list-style: none; }
.la-hero-ev__fila a { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; }
/* La primera fila del DOM es el principal y va oculta: la línea separadora se cuenta sólo entre visibles. */
.la-hero-ev__fila:not([hidden]) ~ .la-hero-ev__fila:not([hidden]) { border-top: 1px solid var(--la-blue-light); }
.la-hero-ev__dia { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 46px; border-radius: 12px; background: var(--la-blue-light); color: var(--la-blue-deep); }
.la-hero-ev__dia b { font: 800 20px/1 "Bricolage Grotesque", sans-serif; }
.la-hero-ev__dia span { font: 700 10px/1 "Space Mono", monospace; letter-spacing: .08em; margin-top: 2px; text-transform: uppercase; }
.la-hero-ev__ftxt { display: block; min-width: 0; }
.la-hero-ev__ft { display: block; font: 700 15px/1.2 "DM Sans", sans-serif; color: var(--la-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-hero-ev__fs { display: block; font: 400 13px/1.3 "DM Sans", sans-serif; color: var(--ev-ink-mid); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.la-hero-ev__fila a:hover .la-hero-ev__ft { color: var(--la-blue-deep); }
.la-hero-ev .la-hero-ev__todos,
.la-hero-ev .la-hero-ev__todos:hover,
.la-hero-ev .la-hero-ev__todos:focus { color: var(--la-blue-deep); }
.la-hero-ev .la-hero-ev__todos { font: 700 14px/1 "DM Sans", sans-serif; padding-top: 10px; border-top: 1px solid var(--la-blue-light); }
.la-hero-ev .la-hero-ev__todos:hover { text-decoration: underline; }

/* un solo evento: el panel de la derecha queda sólo con el enlace a la agenda */
.la-hero-ev--solo .la-hero-ev__mas { justify-content: center; }
.la-hero-ev--solo .la-hero-ev__mas h3,
.la-hero-ev--solo .la-hero-ev__lista { display: none; }
.la-hero-ev--solo .la-hero-ev__todos { border-top: 0; padding-top: 0; }

/* tablet: caja de 690 a 930 px */
@container (max-width: 999px) {
	.la-hero-ev__in { grid-template-columns: auto minmax(0, 1fr) 300px; gap: 24px; padding: 20px 22px; }
	.la-hero-ev .la-hero-ev__titulo { font-size: 26px; }
	.la-hero-ev .la-hero-ev__lugar { font-size: 15px; margin-bottom: 14px; }
}
/* en tablet entran 2 secundarios: el tercero se oculta (en mobile vuelve a entrar) */
@container (min-width: 600px) and (max-width: 999px) {
	.la-hero-ev__fila--tercera { display: none; }
}
@container (max-width: 800px) {
	.la-hero-ev__in { grid-template-columns: auto minmax(0, 1fr) 236px; gap: 18px; padding: 18px; }
	.la-hero-ev .la-hero-ev__afiche { max-width: 180px; }
	.la-hero-ev .la-hero-ev__titulo { font-size: 22px; }
	.la-hero-ev .la-hero-ev__kicker { font-size: 11px; margin-bottom: 10px; }
	.la-hero-ev .la-hero-ev__btn { height: 44px; padding: 0 20px; font-size: 14px; }
	.la-hero-ev__mas { padding: 14px; }
}

/* mobile: caja de 360×504, con los puntos de navegación del slider abajo */
@container (max-width: 599px) {
	.la-hero-ev__in { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 12px 14px; padding: 16px 16px 30px; }
	.la-hero-ev .la-hero-ev__kicker { grid-column: 1 / -1; margin: 0; font-size: 11px; }
	.la-hero-ev .la-hero-ev__afiche { height: 176px; max-width: 142px; grid-row: 2; }
	.la-hero-ev .la-hero-ev__afiche img, .la-hero-ev__sinimg { border-radius: 12px; }
	.la-hero-ev__main { display: contents; }
	.la-hero-ev__cuerpo { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
	.la-hero-ev__chips { margin-bottom: 8px; gap: 6px; }
	.la-hero-ev__chip { font-size: 11px; padding: 6px 9px; }
	.la-hero-ev .la-hero-ev__titulo { font-size: 20px; line-height: 1.1; margin-bottom: 6px; -webkit-line-clamp: 4; }
	.la-hero-ev .la-hero-ev__lugar { font-size: 13px; margin: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	.la-hero-ev .la-hero-ev__lugar:empty { display: none; }
	.la-hero-ev .la-hero-ev__btn { display: none; }
	.la-hero-ev__mas { grid-column: 1 / -1; grid-row: 3; padding: 12px 14px 10px; border-radius: 16px; }
	.la-hero-ev__fila a { padding: 5px 0; }
	.la-hero-ev__sinimg b { font-size: 60px; }
	.la-hero-ev__sinimg span { font-size: 14px; }
	.la-hero-ev__sinimg small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.la-hero-ev *, .la-hero-ev .la-hero-ev__btn { transition: none !important; animation: none !important; }
}

/* Puntos de navegación: son del widget (compartidos con las otras láminas) y vienen
   oscuros. Mientras la lámina de eventos está activa, sobre el azul tinta van claros. */
.elementor-widget-slides:has(.la-hero-ev-slide.swiper-slide-active) .swiper-pagination-bullet { background: #fff; opacity: .45; }
.elementor-widget-slides:has(.la-hero-ev-slide.swiper-slide-active) .swiper-pagination-bullet-active { opacity: 1; }