/*
 * `[oxea_banner]` (Frontend/BannerSlider.php). `scroll-snap` nativo para el
 * swipe en mobile; el JS (banner-slider.js) solo agrega rotación y controles.
 *
 * Los dos tamaños y sus alturas son valores de partida: se ajustan después de
 * ver el resultado (docs/2026-10-02-diseno-banners.md §7). El alto va fijo (y
 * en mobile con aspect-ratio) para que no haya salto de layout cuando carga la
 * imagen. El ancho es el del contenedor donde se inserte el shortcode.
 */

.oxea-banner {
	--oxea-banner-height: 380px;
	--oxea-banner-height-mobile: 3 / 2;
	position: relative;
	width: 100%;
}

/* Un Content Block de Blocksy envuelve el shortcode en `.entry-content.is-layout-constrained`,
   que limita a los hijos al ancho de contenido: acá el ancho lo manda el contenedor donde se inserte. */
.oxea-banner,
.is-layout-constrained > .oxea-banner {
	max-width: none;
}

.oxea-banner--secundario {
	--oxea-banner-height: 210px;
	--oxea-banner-height-mobile: 3 / 1;
}

/* home_bottom (el único placement secundario): 260 px en escritorio, con el
   mismo recorte centrado (cover) de siempre. En mobile sigue mandando el
   aspect-ratio de arriba. */
.oxea-banner[data-oxea-placement="home_bottom"] {
	--oxea-banner-height: 260px;
}

.oxea-banner__track {
	position: relative;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.oxea-banner__track::-webkit-scrollbar {
	display: none;
}

.oxea-banner__slide {
	position: relative;
	flex: 0 0 100%;
	height: var( --oxea-banner-height );
	scroll-snap-align: start;
}

.oxea-banner__link {
	display: block;
	height: 100%;
}

.oxea-banner__slide picture {
	display: block;
	height: 100%;
}

.oxea-banner__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* directory: ancho completo del contenedor y alto según la proporción de la
   imagen, con un tope de 480 px (abajo). Los demás placements tienen un alto
   fijo (--oxea-banner-height / aspect-ratio en mobile). Con varios slides de
   proporciones distintas la pista toma el más alto. */
.oxea-banner[data-oxea-placement="directory"] .oxea-banner__slide {
	height: auto;
	aspect-ratio: auto;
}

.oxea-banner[data-oxea-placement="directory"] .oxea-banner__link,
.oxea-banner[data-oxea-placement="directory"] .oxea-banner__slide picture {
	height: auto;
}

/* Tope de 480 px de alto en escritorio: si la imagen a ese ancho es más alta,
   se centra y se recorta (cover) arriba y abajo, sin deformarla ni dejar
   espacio a los costados. En móvil no hay tope: el alto sale de la
   proporción de la imagen y no se recorta. */
.oxea-banner[data-oxea-placement="directory"] .oxea-banner__img {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 600px) {
	.oxea-banner[data-oxea-placement="directory"] .oxea-banner__img {
		max-height: none;
	}
}

/* home_bottom: el banner nunca pasa del ancho de su contenedor (ni empuja el
   ancho de la página) y el swipe del carrusel no se encadena al scroll de la
   página. Con un solo banner queda estático: la pista es un contenedor con
   scroll nativo (así funciona el carrusel) y con un único slide no hay nada
   que deslizar. Con varios banners (sin .oxea-banner--single) el carrusel
   queda como estaba. */
.oxea-banner[data-oxea-placement="home_bottom"] {
	/* 100vw + max-width: ver la nota de .oxea-home-categories -- con un 100%
	   cíclico dentro de un contenedor flex en columna con Wrap, el banner medía
	   0 de ancho hasta que cargaba la imagen (lazy, que nunca arrancaba). */
	width: 100vw;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 12px;
	overflow: hidden;
}

/* Imagen centrada en los dos ejes; si hay que recortar, se recorta desde el
   centro, sin deformar. El height/width/max-width se repiten acá a propósito:
   en una página de Elementor `.elementor img { height: auto; max-width: 100% }`
   (especificidad 0,1,1) le gana a `.oxea-banner__img` y la imagen quedaba a su
   alto natural (516 px en un banner de 260), anclada arriba y cortada abajo en
   vez de centrada con cover. */
.oxea-banner[data-oxea-placement="home_bottom"] .oxea-banner__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.oxea-banner[data-oxea-placement="home_bottom"] .oxea-banner__track {
	overscroll-behavior-x: contain;
}

.oxea-banner--single[data-oxea-placement="home_bottom"] .oxea-banner__track {
	overflow: hidden;
	scroll-snap-type: none;
	touch-action: pan-y;
}

.oxea-banner__tag {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 2px 8px;
	border-radius: 3px;
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: 0.02em;
	pointer-events: none;
}

.oxea-banner__nav,
.oxea-banner__pause {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.85 );
	color: #222;
	cursor: pointer;
	z-index: 1;
}

.oxea-banner__nav {
	top: 50%;
	width: 40px;
	height: 40px;
	transform: translateY( -50% );
}

.oxea-banner__nav:hover,
.oxea-banner__pause:hover {
	background: #fff;
}

.oxea-banner__nav--prev {
	left: 16px;
}

.oxea-banner__nav--next {
	right: 16px;
}

.oxea-banner__pause {
	bottom: 10px;
	left: 12px;
	width: 28px;
	height: 28px;
}

.oxea-banner__pause .oxea-banner__icon-play,
.oxea-banner__pause.is-paused .oxea-banner__icon-pause {
	display: none;
}

.oxea-banner__pause.is-paused .oxea-banner__icon-play {
	display: block;
}

.oxea-banner__dots {
	position: absolute;
	bottom: 14px;
	left: 50%;
	display: flex;
	gap: 8px;
	transform: translateX( -50% );
}

.oxea-banner__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.6 );
	cursor: pointer;
}

.oxea-banner__dot.is-active {
	background: var( --oxea-color-primary, #2e7d32 );
}

.oxea-banner__nav:focus-visible,
.oxea-banner__pause:focus-visible,
.oxea-banner__dot:focus-visible,
.oxea-banner__link:focus-visible {
	outline: 3px solid var( --oxea-color-primary, #2e7d32 );
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.oxea-banner__slide {
		height: auto;
		aspect-ratio: var( --oxea-banner-height-mobile );
	}

	.oxea-banner__nav {
		width: 32px;
		height: 32px;
	}

	.oxea-banner__nav--prev {
		left: 8px;
	}

	.oxea-banner__nav--next {
		right: 8px;
	}
}