/**
 * Zenth Toolkit — zenth-sg: mecánica del cuerpo editorial de Detalle
 * (template-parts/single-zenth.php, W4).
 *
 * Solo dos responsabilidades, ambas mecánica pura (sin colores de marca
 * ni tipografías ni medidas de página del mockup: eso vive en el bloque
 * gestionado del tema, seeds/style-header.css, bloque "DETALLE", anidado
 * bajo ".arr-sg-content" — specs/_ola2/ARQUITECTURA.md §4,
 * specs/programa-noticia/SPEC.md §6):
 *
 * 1. Convierte cualquier galería que WordPress imprima dentro de
 *    ".arr-sg-content" (".wp-block-gallery" del editor de bloques o
 *    ".gallery" del shortcode clásico [gallery], según qué use el
 *    contenido real) en una fila horizontal de 3 columnas iguales con
 *    scroll-snap — funciona SIN JavaScript (fila con scroll nativo, tal
 *    cual pide el encargo); assets/js/zenth-sg-gallery.js es una mejora
 *    progresiva que añade la barra de progreso por páginas de 3
 *    (".zenth-sg-gallery__bar").
 * 2. Mecánica mínima para imágenes/figuras sueltas (no agrupadas en una
 *    galería) dentro del mismo contenido: nunca desbordan su columna.
 *
 * Selectores genéricos a propósito (" > *" para el hijo directo de la
 * galería, "img" en cualquier profundidad): el marcado real de una
 * galería varía con la versión de WordPress/el editor que la generó
 * (".wp-block-gallery" reciente anida las imágenes directamente como
 * "figure.wp-block-image"; versiones antiguas del bloque y el shortcode
 * clásico [gallery] envuelven cada foto en "li"/"figure.gallery-item" con
 * un enlace y una leyenda opcional dentro) — apuntar al hijo directo sin
 * fijar su etiqueta cubre los tres casos sin tres copias de la misma
 * regla.
 */

.arr-sg-content .wp-block-gallery,
.arr-sg-content .gallery {
	--zenth-sg-ratio: 1 / 1;
	--zenth-sg-radius: 12px;
	--zenth-sg-gap: 16px;

	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var( --zenth-sg-gap );
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	/* No robar el scroll vertical de la página a un gesto táctil: solo se
	   captura el eje X (mismo criterio que .zenth-nslider__viewport). */
	touch-action: pan-y;
}

/* Cada foto ocupa 1/3 del ancho visible (3 columnas iguales, spec: "fila
   horizontal de 3 imágenes iguales"), sin encogerse por debajo de eso ni
   crecer más allá — el resto queda fuera de pantalla hasta desplazar. */
.arr-sg-content .wp-block-gallery > *,
.arr-sg-content .gallery > * {
	flex: 0 0 calc( ( 100% - 2 * var( --zenth-sg-gap, 16px ) ) / 3 );
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}

.arr-sg-content .wp-block-gallery > * > a,
.arr-sg-content .gallery > * > a {
	display: block;
}

.arr-sg-content .wp-block-gallery img,
.arr-sg-content .gallery img {
	display: block;
	width: 100%;
	aspect-ratio: var( --zenth-sg-ratio, 1 / 1 );
	object-fit: cover;
	border-radius: var( --zenth-sg-radius, 12px );
}

/* Leyenda opcional (figcaption / .gallery-caption): debajo de la foto,
   nunca encima ni desbordando la columna. */
.arr-sg-content .wp-block-gallery figcaption,
.arr-sg-content .gallery .gallery-caption {
	margin: 0;
	max-width: 100%;
}

.arr-sg-content .wp-block-gallery a:focus-visible,
.arr-sg-content .gallery a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* == Barra de progreso (assets/js/zenth-sg-gallery.js) ==
 * Un segmento por página de 3 fotos, todos del mismo ancho (repartidos a
 * partes iguales con flex), inyectada como hermana de la galería justo
 * después de ella. Sin colores propios: currentColor + opacidad para que
 * la piel (que fija el color de texto de ".arr-sg-content") ya distinga
 * algo por defecto, y el bloque DETALLE puede sobreescribir el color/alto
 * exactos del mockup sin pelear con esta mecánica.
 */
.zenth-sg-gallery__bar {
	display: flex;
	gap: 6px;
	margin-top: 12px;
}

/* Compuesto con ".arr-sg-content" (0,2,0), nunca la clase sola: el reset
   de Hello Elementor trae "button{color:#c36}" y, peor, "button:hover{
   background:#c36;color:#fff}" — el ":hover" cuenta como clase para la
   especificidad (0,1,1), así que le ganaba a ".zenth-sg-gallery__seg" sola
   (0,1,0) en hover y, para el "color" base, era la ÚNICA regla que lo
   fijaba (esta hoja nunca lo declaraba) — los segmentos salían rosas en
   vez de heredar currentColor de la piel. Mismo patrón ya usado en
   ".zenth-acar .zenth-acar__tab" (zenth-area-carousel.css) para el mismo
   problema, sin "!important" (regla de oro del proyecto). */
.arr-sg-content .zenth-sg-gallery__seg {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	flex: 1 1 0;
	height: 4px;
	min-width: 0;
	border-radius: 999px;
	border: 0;
	padding: 0;
	margin: 0;
	background: currentColor;
	color: inherit;
	opacity: 0.3;
	transition: opacity 0.25s ease;
	/* Los segmentos son informativos Y navegables (mejora de teclado/ratón:
	   un clic salta a esa página de fotos) — ver zenth-sg-gallery.js. */
	cursor: pointer;
	font: inherit;
}

.arr-sg-content .zenth-sg-gallery__seg[aria-current='true'] {
	opacity: 1;
}

/* Reafirma color/fondo en hover/focus por el mismo motivo de arriba: sin
   esto, "button:hover{background:#c36;color:#fff}" del reset de Hello
   gana en el estado ":hover" (su ":hover" iguala la especificidad que
   ganamos con el descendiente ".arr-sg-content"). */
.arr-sg-content .zenth-sg-gallery__seg:hover,
.arr-sg-content .zenth-sg-gallery__seg:focus-visible {
	color: inherit;
	background: currentColor;
}

.arr-sg-content .zenth-sg-gallery__seg:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* == Figuras/imágenes sueltas del cuerpo editorial (no agrupadas en una
 * galería): mecánica mínima, nunca desbordan su columna de texto.
 */
.arr-sg-content figure:not( .wp-block-gallery ):not( .gallery ) {
	margin: 0;
	max-width: 100%;
}

.arr-sg-content img {
	max-width: 100%;
	height: auto;
}

/* Salto directo, sin animación de scroll suave, para quien pide menos
   movimiento (mismo criterio que zenth-nslider/zenth-acar). El scroll de
   arrastre/rueda nativo del navegador no se ve afectado: solo el salto
   programático que dispara un clic en un segmento de la barra. */
@media ( prefers-reduced-motion: reduce ) {
	.arr-sg-content .wp-block-gallery,
	.arr-sg-content .gallery {
		scroll-behavior: auto;
	}

	.zenth-sg-gallery__seg {
		transition: none;
	}
}