/**
 * Stili del blocco core `bricks/gallery`.
 *
 * Selettori BEM prefissati `.bricks-gallery*` (API pubblica del blocco —
 * rinominarli è MAJOR per conventions §6). Qui vivono SOLO regole "statiche"
 * che non dipendono dalla config editor: tutto ciò che dipende da scelte
 * dell'editor (colonne, gap, aspect, bordo) arriva da utility Tailwind nel
 * template.
 *
 * Distribuito come asset del core (`vendor/tnd/bricks/blocks/gallery/style.css`),
 * enqueuato da WordPress quando la pagina contiene il blocco. Non passa
 * dalla pipeline Tailwind del tema: è statico.
 */

/* Wrapper. Nessuna regola visiva qui — lo styling di sfondo / spaziatura
   arriva dalle utility Tailwind (Support\Background / Support\Spacing). */
.bricks-gallery {
}

/* Grid container. In grid usiamo `display: grid` (via classe Tailwind),
   in masonry usiamo `column-count` (idem). Le altre regole sono comuni. */
.bricks-gallery__grid {
}

/* Masonry: gli item NON devono essere `break-inside: avoid` perché ne
   spezzerebbe il flusso. `column-fill: balance` (default) distribuisce gli
   item fra le colonne in modo bilanciato. */
.bricks-gallery__grid--masonry {
	column-fill: balance;
}

.bricks-gallery__grid--masonry .bricks-gallery__item {
	break-inside: avoid;
	display: block;
	margin-bottom: var(--bricks-gallery-masonry-gap, 1.5rem);
	width: 100%;
}

/* Item. `<figure>`: reset margini di default. La struttura è già coperta
   dalle utility (overflow, border, aspect) — qui solo il reset. */
.bricks-gallery__item {
	margin: 0;
	padding: 0;
}

/* Link wrap (immagini cliccabili). `block` arriva dal template come
   utility Tailwind; qui solo `outline-offset` per il focus visibile. */
.bricks-gallery__link:focus-visible {
	outline: 2px solid var(--color-brand, currentColor);
	outline-offset: 2px;
}

/* Immagine. `display: block` evita l'inline-baseline gap di default. */
.bricks-gallery__image {
	display: block;
}

/* ── Caption overlay ────────────────────────────────────────────────────
   Mostrata in overlay sopra l'item. Su desktop appare su hover/focus;
   su touch (pointer: coarse) resta sempre visibile — niente hover affidabile
   su touch (a11y + UX). Gradient di sfondo per garantire contrasto sul
   testo bianco indipendentemente dal media sottostante. */
.bricks-gallery__caption {
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 70%);
	bottom: 0;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	justify-content: flex-end;
	left: 0;
	opacity: 0;
	padding: 1rem;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	transition: opacity 250ms ease-out;
}

.bricks-gallery__caption-title {
	font-weight: 600;
	line-height: 1.25;
}

.bricks-gallery__caption-description {
	font-size: 0.875rem;
	line-height: 1.4;
	opacity: 0.95;
}

/* Hover (desktop) e focus-within (tastiera): mostra la caption. Il `group`
   sul wrapper item arriva dal template come utility Tailwind. */
.bricks-gallery__item:hover .bricks-gallery__caption,
.bricks-gallery__item:focus-within .bricks-gallery__caption {
	opacity: 1;
}

/* Touch: sempre visibile (no hover affidabile). */
@media (hover: none) {
	.bricks-gallery__caption {
		opacity: 1;
	}
}

/* ── Video player ──────────────────────────────────────────────────────
   Poster: l'immagine `<img>` riempie il riquadro; il bottone play è
   centrato in overlay. Player (iframe): occupa tutto il riquadro quando
   visibile (attributo `hidden` è il toggle, gestito dal JS). */
.bricks-gallery__video {
	height: 100%;
	position: relative;
	width: 100%;
}

.bricks-gallery__video-poster {
	height: 100%;
	position: relative;
	width: 100%;
}

.bricks-gallery__video-play {
	background: transparent;
	border: 0;
	cursor: pointer;
	left: 50%;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: transform 200ms ease-out;
}

.bricks-gallery__video-play:hover,
.bricks-gallery__video-play:focus-visible {
	transform: translate(-50%, -50%) scale(1.06);
}

.bricks-gallery__video-play:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.bricks-gallery__video-player {
	inset: 0;
	position: absolute;
}

.bricks-gallery__video-iframe {
	height: 100%;
	width: 100%;
}

.bricks-gallery__video-close {
	background: rgba(0, 0, 0, 0.6);
	border: 0;
	border-radius: 9999px;
	cursor: pointer;
	height: 2rem;
	padding: 0.25rem;
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
	width: 2rem;
}

.bricks-gallery__video-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Placeholder editor (preview-only): nascosto in front. */
.bricks-gallery--placeholder {
	background: rgba(0, 0, 0, 0.04);
	border: 1px dashed rgba(0, 0, 0, 0.2);
}

/* ── Slider su mobile (opzione gallery_mobile_slider) ─────────────────────────
 * < 768px: Swiper è attivo e gestisce il layout (flex sul .swiper-wrapper).
 * ≥ 768px: Swiper è disabilitato (breakpoint JS): il wrapper torna trasparente
 * al layout (`display:contents`) così i .bricks-gallery__item tornano celle del
 * grid container e la griglia CSS riprende il controllo. Senza questo, il
 * .swiper-wrapper resterebbe un flex-row e romperebbe la grid da tablet in su. */
@media (min-width: 768px) {
	.bricks-gallery__grid--has-mobile-slider .bricks-gallery__swiper-wrapper {
		display: contents;
	}
	/* Neutralizza eventuali residui Swiper sul container sopra il breakpoint. */
	.bricks-gallery__grid--has-mobile-slider.swiper {
		overflow: visible;
	}
}