/**
 * Zenth Toolkit — Gallery Feed
 *
 * Galería curada manual con dos layouts (grid / carrusel),
 * 4 aspect ratios, 3 estilos de hover, columnas responsive
 * configurables por instancia vía CSS variables.
 *
 * El widget inyecta en el wrapper estas custom properties:
 *   --zenth-gal-cols-desktop
 *   --zenth-gal-cols-tablet
 *   --zenth-gal-cols-mobile
 *
 * Mobile-first: el default es la versión mobile, y se escala
 * con min-width en los breakpoints estándar de Elementor.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * ÍNDICE
 *   §1  Tokens (:root)   → paleta, gaps, transiciones, defaults de columnas
 *   §2  Base             → .zenth-gallery (container) + box-sizing
 *   §3  Header           → eyebrow / heading / handle
 *   §4  Grid             → .zenth-gallery__grid + variantes de gap
 *   §5  Bento            → estructura bento (base, gap, slots, structure-bento)
 *   §6  Card             → .zenth-gallery__item / __card (+ focus, radius)
 *   §7  Media            → .zenth-gallery__media + aspect-ratios + __img
 *   §8  Overlay & hover  → overlay/título + modos hover (overlay/zoom/none)
 *   §9  Carrusel         → track + nav + estados (empty / img placeholder)
 *   §10 Responsive       → TODOS los @media de tamaño + a11y, consolidados acá
 * ─────────────────────────────────────────────────────────────────────────
 * BREAKPOINTS (mobile-first: la base es mobile, se escala con min-width)
 *   Base / Mobile  → sin media query              (< 768px)
 *   Tablet         → min-width: 768px             (sube cols a tablet)
 *   Desktop        → min-width: 1025px            (sube cols a desktop)
 *   Tablet-range   → min-width: 768px and max-width: 1024px  (plantillas bento)
 *   Mobile-only    → max-width: 767px             (plantillas bento + nav)
 *
 *   Nota cascade: los bloques min-width van de menor a mayor (768 → 1025) para
 *   que el más ancho pise al más angosto donde comparten selector
 *   (.zenth-gallery__grid y el item del carrusel). Las plantillas bento usan
 *   clases con el breakpoint en el nombre (desktop-/tablet-/mobile-bento-N),
 *   así que cada una vive en SU rango y no se pisan entre sí.
 *   + 1 media de accesibilidad (prefers-reduced-motion), aislada al final.
 * ─────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════════════════
   §1 · TOKENS (:root)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
	--zenth-gal-bg: transparent;
	--zenth-gal-text: #1a1a1a;
	--zenth-gal-text-muted: rgba(26, 26, 26, 0.6);
	--zenth-gal-accent: #c00000;
	--zenth-gal-overlay: rgba(0, 0, 0, 0.5);
	--zenth-gal-overlay-strong: rgba(0, 0, 0, 0.72);
	--zenth-gal-radius: 12px;
	--zenth-gal-radius-sm: 8px;

	/* Gaps (mapeados al control "gap" del widget). */
	--zenth-gal-gap-none: 0;
	--zenth-gal-gap-tight: 4px;
	--zenth-gal-gap-normal: 12px;
	--zenth-gal-gap-wide: 24px;

	/* Transiciones. */
	--zenth-gal-speed: 320ms;
	--zenth-gal-speed-fast: 180ms;
	--zenth-gal-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* Defaults — sobreescritos por el widget vía style="" inline. */
	--zenth-gal-cols-desktop: 6;
	--zenth-gal-cols-tablet: 3;
	--zenth-gal-cols-mobile: 2;
}


/* ═══════════════════════════════════════════════════════════════════════
   §2 · BASE — container
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-gallery {
	background: var(--zenth-gal-bg);
	color: var(--zenth-gal-text);
	width: 70%;
	max-width: 80rem;
	margin: auto;
}

.zenth-gallery *,
.zenth-gallery *::before,
.zenth-gallery *::after {
	box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════════════
   §3 · HEADER — eyebrow / heading / handle
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-gallery__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 20px 0;
}

.zenth-gallery__header-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.zenth-gallery__eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--zenth-gal-accent);
	line-height: 1;
}

.zenth-gallery__heading {
	margin: 0;
	font-size: clamp(20px, 3vw, 28px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--zenth-gal-text);
}

.zenth-gallery__handle {
	font-size: 14px;
	font-weight: 600;
	color: var(--zenth-gal-text-muted);
	text-decoration: none;
	transition: color var(--zenth-gal-speed-fast) var(--zenth-gal-ease);
	white-space: nowrap;
}

a.zenth-gallery__handle:hover,
a.zenth-gallery__handle:focus-visible {
	color: var(--zenth-gal-accent);
}


/* ═══════════════════════════════════════════════════════════════════════
   §4 · GRID — columnas configurables + variantes de gap
   ───────────────────────────────────────────────────────────────────────
   Base = mobile (cols-mobile). El escalado a tablet/desktop (min-width) vive
   en §10. Las variantes de gap aplican a grid + track (carrusel) por igual.
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--zenth-gal-cols-mobile), 1fr);
	gap: var(--zenth-gal-gap-normal);
}

.zenth-gallery--gap-none .zenth-gallery__grid,
.zenth-gallery--gap-none .zenth-gallery__track {
	gap: var(--zenth-gal-gap-none);
}

.zenth-gallery--gap-tight .zenth-gallery__grid,
.zenth-gallery--gap-tight .zenth-gallery__track {
	gap: var(--zenth-gal-gap-tight);
}

.zenth-gallery--gap-normal .zenth-gallery__grid,
.zenth-gallery--gap-normal .zenth-gallery__track {
	gap: var(--zenth-gal-gap-normal);
}

.zenth-gallery--gap-wide .zenth-gallery__grid,
.zenth-gallery--gap-wide .zenth-gallery__track {
	gap: var(--zenth-gal-gap-wide);
}


/* ═══════════════════════════════════════════════════════════════════════
   §5 · BENTO — estructura, gap, slots
   ───────────────────────────────────────────────────────────────────────
   Base del bento (grid + gap + asignación de slots a grid-area). Las
   PLANTILLAS concretas (grid-template-areas por layout/breakpoint) y la
   variante structure-bento+grid viven todas en §10 porque son media-query.
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-gallery__bento {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--zenth-gal-gap-normal);
}

.zenth-gallery--gap-none .zenth-gallery__bento {
	gap: var(--zenth-gal-gap-none);
}

.zenth-gallery--gap-tight .zenth-gallery__bento {
	gap: var(--zenth-gal-gap-tight);
}

.zenth-gallery--gap-normal .zenth-gallery__bento {
	gap: var(--zenth-gal-gap-normal);
}

.zenth-gallery--gap-wide .zenth-gallery__bento {
	gap: var(--zenth-gal-gap-wide);
}

/* En bento, el media toma 100% del slot — sin aspect-ratio fijo. */
.zenth-gallery--structure-bento .zenth-gallery__media {
	aspect-ratio: auto;
	height: 100%;
}

.zenth-gallery--structure-bento .zenth-gallery__card {
	height: 100%;
}

.zenth-gallery--structure-bento .zenth-gallery__img {
	height: 100%;
	object-fit: cover;
}

/* Cada item del bento se asigna a un grid-area mediante una clase --slot-N.
   Las plantillas concretas definen abajo el grid-template-areas. */
.zenth-gallery__item--slot-1 { grid-area: s1; }
.zenth-gallery__item--slot-2 { grid-area: s2; }
.zenth-gallery__item--slot-3 { grid-area: s3; }
.zenth-gallery__item--slot-4 { grid-area: s4; }
.zenth-gallery__item--slot-5 { grid-area: s5; }
.zenth-gallery__item--slot-6 { grid-area: s6; }
.zenth-gallery__item--slot-7 { grid-area: s7; }
.zenth-gallery__item--slot-8 { grid-area: s8; }
.zenth-gallery__item--slot-9 { grid-area: s9; }


/* ═══════════════════════════════════════════════════════════════════════
   §6 · CARD — item + card normalizada
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-gallery__item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

/* El envoltorio puede ser <a>, <button> o <div>: normalizamos. */
.zenth-gallery__card {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #000;
	color: inherit;
	text-decoration: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: default;
	-webkit-tap-highlight-color: transparent;
}

a.zenth-gallery__card,
button.zenth-gallery__card {
	cursor: pointer;
}

button.zenth-gallery__card {
	background: #000;
	text-align: left;
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	width: 100%;
}

.zenth-gallery__card:focus-visible {
	outline: 2px solid var(--zenth-gal-accent);
	outline-offset: 2px;
}

/* Border-radius por defecto en todas las cards. La variable
   --zenth-gal-radius permite overridear desde el tema o el sitio. */
.zenth-gallery__card {
	border-radius: var(--zenth-gal-radius);
}


/* ═══════════════════════════════════════════════════════════════════════
   §7 · MEDIA — wrapper + aspect-ratios + imagen
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-gallery__media {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Aspect ratios — 1:1, 4:5, 16:9. Usamos aspect-ratio nativo. */
.zenth-gallery--aspect-1x1 .zenth-gallery__media {
	aspect-ratio: 1 / 1;
}

.zenth-gallery--aspect-4x5 .zenth-gallery__media {
	aspect-ratio: 4 / 5;
}

.zenth-gallery--aspect-16x9 .zenth-gallery__media {
	aspect-ratio: 16 / 9;
}

/* Original: sin recorte forzado. La imagen impone su altura. */
.zenth-gallery--aspect-original .zenth-gallery__media {
	aspect-ratio: auto;
}

.zenth-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--zenth-gal-speed) var(--zenth-gal-ease);
}

/* En aspect-original, la imagen no se estira a 100% de altura. */
.zenth-gallery--aspect-original .zenth-gallery__img {
	height: auto;
	object-fit: initial;
}


/* ═══════════════════════════════════════════════════════════════════════
   §8 · OVERLAY & HOVER — título sobre la imagen + modos de hover
   ═══════════════════════════════════════════════════════════════════════ */

/* Overlay con título */
.zenth-gallery__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	padding: 14px;
	background: linear-gradient(
		to top,
		var(--zenth-gal-overlay-strong) 0%,
		rgba(0, 0, 0, 0) 60%
	);
	opacity: 0;
	transition: opacity var(--zenth-gal-speed) var(--zenth-gal-ease);
	pointer-events: none;
}

.zenth-gallery__overlay-inner {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	width: 100%;
	color: #fff;
	transform: translateY(8px);
	transition: transform var(--zenth-gal-speed) var(--zenth-gal-ease);
}

.zenth-gallery__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.zenth-gallery__subtitle {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	opacity: 0.85;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* Modo overlay: aparece en hover/focus. */
.zenth-gallery--hover-overlay .zenth-gallery__card:hover .zenth-gallery__overlay,
.zenth-gallery--hover-overlay .zenth-gallery__card:focus-visible .zenth-gallery__overlay {
	opacity: 1;
}

.zenth-gallery--hover-overlay .zenth-gallery__card:hover .zenth-gallery__overlay-inner,
.zenth-gallery--hover-overlay .zenth-gallery__card:focus-visible .zenth-gallery__overlay-inner {
	transform: translateY(0);
}

/* Modo zoom: escala la imagen. Si NO hay título, el overlay queda oculto.
   Si hay título (show_title = yes), el overlay también aparece en hover
   con el mismo comportamiento que el modo overlay. Esto da la combinación
   "imagen escala + título aparece" muy visual. */
.zenth-gallery--hover-zoom:not(.zenth-gallery--has-title) .zenth-gallery__overlay {
	display: none;
}

.zenth-gallery--hover-zoom .zenth-gallery__card:hover .zenth-gallery__img,
.zenth-gallery--hover-zoom .zenth-gallery__card:focus-visible .zenth-gallery__img {
	transform: scale(1.05);
}

/* Si hover-zoom Y has-title: el overlay aparece en hover (igual que modo overlay). */
.zenth-gallery--hover-zoom.zenth-gallery--has-title .zenth-gallery__card:hover .zenth-gallery__overlay,
.zenth-gallery--hover-zoom.zenth-gallery--has-title .zenth-gallery__card:focus-visible .zenth-gallery__overlay {
	opacity: 1;
}

.zenth-gallery--hover-zoom.zenth-gallery--has-title .zenth-gallery__card:hover .zenth-gallery__overlay-inner,
.zenth-gallery--hover-zoom.zenth-gallery--has-title .zenth-gallery__card:focus-visible .zenth-gallery__overlay-inner {
	transform: translateY(0);
}

/* Modo none: sin efecto. Pero si show_title está activo, mostramos el
   título permanentemente debajo de la imagen para no perder el dato. */
.zenth-gallery--hover-none .zenth-gallery__overlay {
	position: static;
	background: none;
	padding: 8px 2px 0;
	opacity: 1;
}

.zenth-gallery--hover-none .zenth-gallery__overlay-inner {
	transform: none;
	color: var(--zenth-gal-text);
}

.zenth-gallery--hover-none .zenth-gallery__subtitle {
	opacity: 1;
	color: var(--zenth-gal-text-muted);
}

/* Si el widget no muestra título, ocultar overlay completamente. */
.zenth-gallery:not(.zenth-gallery--has-title) .zenth-gallery__overlay {
	display: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   §9 · CARRUSEL — track + navegación + estados
   ───────────────────────────────────────────────────────────────────────
   El ancho de cada item escala por breakpoint (min-width) en §10. Acá vive
   la base (mobile) + nav + empty + placeholder de imagen.
   ═══════════════════════════════════════════════════════════════════════ */

.zenth-gallery__carousel {
	position: relative;
	width: 100%;
}

.zenth-gallery__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--zenth-gal-gap-normal);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
}

.zenth-gallery__track::-webkit-scrollbar {
	display: none; /* WebKit */
}

.zenth-gallery--layout-carousel .zenth-gallery__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: calc(
		(100% - (var(--zenth-gal-cols-mobile) - 1) * var(--zenth-gal-gap-normal))
		/ var(--zenth-gal-cols-mobile)
	);
}

/* Botones de navegación del carrusel */
.zenth-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--zenth-gal-text);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	padding: 0;
	transition:
		background var(--zenth-gal-speed-fast) var(--zenth-gal-ease),
		color var(--zenth-gal-speed-fast) var(--zenth-gal-ease),
		opacity var(--zenth-gal-speed-fast) var(--zenth-gal-ease);
}

.zenth-gallery__nav:hover,
.zenth-gallery__nav:focus-visible {
	background: var(--zenth-gal-accent);
	color: #fff;
	outline: none;
}

.zenth-gallery__nav--prev {
	left: -20px;
}

.zenth-gallery__nav--next {
	right: -20px;
}

.zenth-gallery__nav[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.zenth-gallery__empty {
	margin: 0;
	padding: 32px 16px;
	text-align: center;
	color: var(--zenth-gal-text-muted);
	font-size: 14px;
	background: rgba(0, 0, 0, 0.02);
	border-radius: var(--zenth-gal-radius-sm);
}

.zenth-gallery__img:not([src]),
.zenth-gallery__img[src=""] {
	background: rgba(0, 0, 0, 0.04);
}


/* ═══════════════════════════════════════════════════════════════════════
   §10 · RESPONSIVE — todos los @media, consolidados por breakpoint
   ───────────────────────────────────────────────────────────────────────
   Archivo MOBILE-FIRST: la base es mobile y se escala con min-width. Cada
   breakpoint queda en UN solo bloque @media (no uno por componente). Orden
   cascade-correcto (NO se puede invertir):

     1) min-width: 768px              → tablet-and-up (grid + carrusel)
     2) min-width: 1025px             → desktop (PISA al 768 donde comparten
        selector: .zenth-gallery__grid y el item del carrusel)
     3) min-width:768 and max-width:1024  → tablet-range (plantillas bento)
     4) max-width: 767px              → mobile-only (plantillas bento + nav)
     5) prefers-reduced-motion        → accesibilidad, aislada al final

   Por qué min-width asc (768 antes que 1025) y no "más ancho→más angosto":
   en mobile-first el bloque más específico-por-viewport es el de min-width
   MÁS ALTO, y para que gane debe ir DESPUÉS. Las plantillas bento llevan el
   breakpoint en el nombre de la clase (desktop-/tablet-/mobile-bento-N), así
   que entre sí no compiten y su orden interno es libre; se conserva el del
   original (bento-6 → 7 → 9 → feature-4 → structure-grid → ocultado de slots).
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── TABLET-AND-UP · min-width: 768px ───────────── */
@media (min-width: 768px) {

	/* §4 · Grid: columnas de tablet */
	.zenth-gallery__grid {
		grid-template-columns: repeat(var(--zenth-gal-cols-tablet), 1fr);
	}

	/* §9 · Carrusel: item al ancho de cols-tablet */
	.zenth-gallery--layout-carousel .zenth-gallery__item {
		width: calc(
			(100% - (var(--zenth-gal-cols-tablet) - 1) * var(--zenth-gal-gap-normal))
			/ var(--zenth-gal-cols-tablet)
		);
	}
}


/* ───────────────────────── DESKTOP · min-width: 1025px ────────────────── */
@media (min-width: 1025px) {

	/* §4 · Grid: columnas de desktop (pisa al de tablet) */
	.zenth-gallery__grid {
		grid-template-columns: repeat(var(--zenth-gal-cols-desktop), 1fr);
	}

	/* §5 · Bento-6 */
	.zenth-gallery--layout-desktop-bento-6 .zenth-gallery__bento {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(3, minmax(160px, 22vw));
		grid-template-areas:
			"s1 s1 s2 s4"
			"s1 s1 s3 s4"
			"s5 s5 s6 s6";
	}

	/* §5 · Bento-7 */
	.zenth-gallery--layout-desktop-bento-7 .zenth-gallery__bento {
		grid-template-columns: repeat(4, 1fr) 1.3fr;
		grid-template-rows: repeat(5, minmax(100px, 1fr));
		grid-template-areas:
			"s1 s1 s2 s3 s4"
			"s1 s1 s2 s3 s4"
			"s6 s6 s5 s5 s4"
			"s6 s6 s5 s5 s4"
			"s6 s6 s7 s7 s4";
	}

	/* §5 · Bento-9 */
	.zenth-gallery--layout-desktop-bento-9 .zenth-gallery__bento {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(4, minmax(160px, 18vw));
		grid-template-areas:
			"s1 s1 s2"
			"s1 s1 s3"
			"s4 s5 s6"
			"s7 s8 s9";
	}

	/* §5 · Bento feature-4 */
	.zenth-gallery--layout-desktop-bento-feature-4 .zenth-gallery__bento {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, minmax(160px, 22vw));
		grid-template-areas:
			"s1 s1 s2"
			"s1 s1 s3"
			"s4 s4 s4";
	}

	/* §5 · structure-bento + layout-grid (bento se aplana a grid uniforme) */
	.zenth-gallery--structure-bento.zenth-gallery--layout-desktop-grid .zenth-gallery__bento {
		grid-template-columns: repeat(var(--zenth-gal-cols-desktop), 1fr);
		grid-template-rows: auto;
		grid-template-areas: none;
	}

	.zenth-gallery--structure-bento.zenth-gallery--layout-desktop-grid .zenth-gallery__item {
		grid-area: auto;
		aspect-ratio: 1 / 1;
	}

	/* §5 · Ocultado de slots sobrantes según el layout activo */
	/* Desktop bento-feature-4: solo usa slots 1-4. */
	.zenth-gallery--layout-desktop-bento-feature-4 .zenth-gallery__item--slot-5,
	.zenth-gallery--layout-desktop-bento-feature-4 .zenth-gallery__item--slot-6,
	.zenth-gallery--layout-desktop-bento-feature-4 .zenth-gallery__item--slot-7,
	.zenth-gallery--layout-desktop-bento-feature-4 .zenth-gallery__item--slot-8,
	.zenth-gallery--layout-desktop-bento-feature-4 .zenth-gallery__item--slot-9 {
		display: none;
	}

	/* Desktop bento-6: solo usa slots 1-6. */
	.zenth-gallery--layout-desktop-bento-6 .zenth-gallery__item--slot-7,
	.zenth-gallery--layout-desktop-bento-6 .zenth-gallery__item--slot-8,
	.zenth-gallery--layout-desktop-bento-6 .zenth-gallery__item--slot-9 {
		display: none;
	}

	/* Desktop bento-7: solo usa slots 1-7. */
	.zenth-gallery--layout-desktop-bento-7 .zenth-gallery__item--slot-8,
	.zenth-gallery--layout-desktop-bento-7 .zenth-gallery__item--slot-9 {
		display: none;
	}

	/* §9 · Carrusel: item al ancho de cols-desktop (pisa al de tablet) */
	.zenth-gallery--layout-carousel .zenth-gallery__item {
		width: calc(
			(100% - (var(--zenth-gal-cols-desktop) - 1) * var(--zenth-gal-gap-normal))
			/ var(--zenth-gal-cols-desktop)
		);
	}
}


/* ─────────────────── TABLET-RANGE · min-width:768 and max-width:1024 ───── */
@media (min-width: 768px) and (max-width: 1024px) {

	/* §5 · Bento-6 */
	.zenth-gallery--layout-tablet-bento-6 .zenth-gallery__bento {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, minmax(120px, 1fr));
		grid-template-areas:
			"s1 s1 s2"
			"s1 s1 s3"
			"s4 s5 s6";
	}

	/* §5 · Bento-7 */
	.zenth-gallery--layout-tablet-bento-7 .zenth-gallery__bento {
		grid-template-columns: repeat(3, 1fr) 1.2fr;
		grid-template-rows: repeat(5, 1fr);
		grid-template-areas:
			"s1 s1 s2 s4"
			"s1 s1 s3 s4"
			"s6 s6 s5 s4"
			"s6 s6 s5 s4"
			"s6 s6 s7 s4";
	}

	/* §5 · Bento-9 */
	.zenth-gallery--layout-tablet-bento-9 .zenth-gallery__bento {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(4, minmax(120px, 1fr));
		grid-template-areas:
			"s1 s1 s2"
			"s1 s1 s3"
			"s4 s5 s6"
			"s7 s8 s9";
	}

	/* §5 · Bento feature-4 */
	.zenth-gallery--layout-tablet-bento-feature-4 .zenth-gallery__bento {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, minmax(120px, 1fr));
		grid-template-areas:
			"s1 s1 s2"
			"s1 s1 s3"
			"s4 s4 s4";
	}

	/* §5 · structure-bento + layout-grid */
	.zenth-gallery--structure-bento.zenth-gallery--layout-tablet-grid .zenth-gallery__bento {
		grid-template-columns: repeat(var(--zenth-gal-cols-tablet), 1fr);
		grid-template-rows: auto;
		grid-template-areas: none;
	}

	.zenth-gallery--structure-bento.zenth-gallery--layout-tablet-grid .zenth-gallery__item {
		grid-area: auto;
		aspect-ratio: 1 / 1;
	}

	/* §5 · Ocultado de slots sobrantes según el layout activo */
	.zenth-gallery--layout-tablet-bento-feature-4 .zenth-gallery__item--slot-5,
	.zenth-gallery--layout-tablet-bento-feature-4 .zenth-gallery__item--slot-6,
	.zenth-gallery--layout-tablet-bento-feature-4 .zenth-gallery__item--slot-7,
	.zenth-gallery--layout-tablet-bento-feature-4 .zenth-gallery__item--slot-8,
	.zenth-gallery--layout-tablet-bento-feature-4 .zenth-gallery__item--slot-9 {
		display: none;
	}

	.zenth-gallery--layout-tablet-bento-6 .zenth-gallery__item--slot-7,
	.zenth-gallery--layout-tablet-bento-6 .zenth-gallery__item--slot-8,
	.zenth-gallery--layout-tablet-bento-6 .zenth-gallery__item--slot-9 {
		display: none;
	}

	.zenth-gallery--layout-tablet-bento-7 .zenth-gallery__item--slot-8,
	.zenth-gallery--layout-tablet-bento-7 .zenth-gallery__item--slot-9 {
		display: none;
	}
}


/* ───────────────────────── MOBILE-ONLY · max-width: 767px ─────────────── */
@media (max-width: 767px) {

	/* §5 · Bento-6 (+ aspect-ratios de los slots) */
	.zenth-gallery--layout-mobile-bento-6 .zenth-gallery__bento {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			"s1 s1"
			"s2 s3"
			"s4 s4"
			"s5 s6";
	}

	.zenth-gallery--layout-mobile-bento-6 .zenth-gallery__item--slot-1,
	.zenth-gallery--layout-mobile-bento-6 .zenth-gallery__item--slot-4 {
		aspect-ratio: 16 / 9;
	}

	.zenth-gallery--layout-mobile-bento-6 .zenth-gallery__item--slot-2,
	.zenth-gallery--layout-mobile-bento-6 .zenth-gallery__item--slot-3,
	.zenth-gallery--layout-mobile-bento-6 .zenth-gallery__item--slot-5,
	.zenth-gallery--layout-mobile-bento-6 .zenth-gallery__item--slot-6 {
		aspect-ratio: 1 / 1;
	}

	/* §5 · Bento-7 (+ aspect-ratios de los slots) */
	.zenth-gallery--layout-mobile-bento-7 .zenth-gallery__bento {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			"s1 s1"
			"s2 s3"
			"s4 s4"
			"s5 s5"
			"s6 s6"
			"s7 s7";
	}

	.zenth-gallery--layout-mobile-bento-7 .zenth-gallery__item--slot-1,
	.zenth-gallery--layout-mobile-bento-7 .zenth-gallery__item--slot-4,
	.zenth-gallery--layout-mobile-bento-7 .zenth-gallery__item--slot-5,
	.zenth-gallery--layout-mobile-bento-7 .zenth-gallery__item--slot-6,
	.zenth-gallery--layout-mobile-bento-7 .zenth-gallery__item--slot-7 {
		aspect-ratio: 16 / 9;
	}

	.zenth-gallery--layout-mobile-bento-7 .zenth-gallery__item--slot-2,
	.zenth-gallery--layout-mobile-bento-7 .zenth-gallery__item--slot-3 {
		aspect-ratio: 1 / 1;
	}

	/* §5 · Bento-9 (+ aspect-ratios de los slots) */
	.zenth-gallery--layout-mobile-bento-9 .zenth-gallery__bento {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			"s1 s1"
			"s2 s3"
			"s4 s5"
			"s6 s7"
			"s8 s9";
	}

	.zenth-gallery--layout-mobile-bento-9 .zenth-gallery__item--slot-1 {
		aspect-ratio: 16 / 9;
	}

	.zenth-gallery--layout-mobile-bento-9 .zenth-gallery__item:not(.zenth-gallery__item--slot-1) {
		aspect-ratio: 1 / 1;
	}

	/* §5 · Bento feature-4 (+ aspect-ratios de los slots) */
	.zenth-gallery--layout-mobile-bento-feature-4 .zenth-gallery__bento {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			"s1 s1"
			"s2 s3"
			"s4 s4";
	}

	.zenth-gallery--layout-mobile-bento-feature-4 .zenth-gallery__item--slot-1,
	.zenth-gallery--layout-mobile-bento-feature-4 .zenth-gallery__item--slot-4 {
		aspect-ratio: 16 / 9;
	}

	.zenth-gallery--layout-mobile-bento-feature-4 .zenth-gallery__item--slot-2,
	.zenth-gallery--layout-mobile-bento-feature-4 .zenth-gallery__item--slot-3 {
		aspect-ratio: 1 / 1;
	}

	/* §5 · structure-bento + layout-grid */
	.zenth-gallery--structure-bento.zenth-gallery--layout-mobile-grid .zenth-gallery__bento {
		grid-template-columns: repeat(var(--zenth-gal-cols-mobile), 1fr);
		grid-template-rows: auto;
		grid-template-areas: none;
	}

	.zenth-gallery--structure-bento.zenth-gallery--layout-mobile-grid .zenth-gallery__item {
		grid-area: auto;
		aspect-ratio: 1 / 1;
	}

	/* §5 · Ocultado de slots sobrantes según el layout activo */
	.zenth-gallery--layout-mobile-bento-feature-4 .zenth-gallery__item--slot-5,
	.zenth-gallery--layout-mobile-bento-feature-4 .zenth-gallery__item--slot-6,
	.zenth-gallery--layout-mobile-bento-feature-4 .zenth-gallery__item--slot-7,
	.zenth-gallery--layout-mobile-bento-feature-4 .zenth-gallery__item--slot-8,
	.zenth-gallery--layout-mobile-bento-feature-4 .zenth-gallery__item--slot-9 {
		display: none;
	}

	.zenth-gallery--layout-mobile-bento-6 .zenth-gallery__item--slot-7,
	.zenth-gallery--layout-mobile-bento-6 .zenth-gallery__item--slot-8,
	.zenth-gallery--layout-mobile-bento-6 .zenth-gallery__item--slot-9 {
		display: none;
	}

	.zenth-gallery--layout-mobile-bento-7 .zenth-gallery__item--slot-8,
	.zenth-gallery--layout-mobile-bento-7 .zenth-gallery__item--slot-9 {
		display: none;
	}

	/* §9 · Carrusel: los botones se esconden y se confía en el swipe nativo */
	.zenth-gallery__nav {
		display: none;
	}
}


/* ─────────────────── ACCESIBILIDAD · prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
	.zenth-gallery__img,
	.zenth-gallery__overlay,
	.zenth-gallery__overlay-inner,
	.zenth-gallery__handle,
	.zenth-gallery__nav,
	.zenth-gallery__track {
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.zenth-gallery--hover-zoom .zenth-gallery__card:hover .zenth-gallery__img {
		transform: none;
	}
}