/**
 * CzarCommerce — Justified Gallery (pendência #73-residual, 2026-05-29).
 *
 * Substitui a lib jQuery `justifiedGallery` por CSS puro. Layout column-count
 * (fallback universal) com upgrade para `grid-template-rows: masonry` quando
 * suportado (Safari 17.4+, Firefox Nightly).
 *
 * Markup opt-in via classe `.czar-justified-gallery`:
 *   - `inc/shortcodes/images-gallery.php` (view=justified)
 *   - `inc/shortcodes/gallery.php` (filtro do shortcode WP `[gallery]`)
 *
 * Regras legacy de `style.css` (`display: none` para galeria não-inicializada)
 * são derrotadas pela maior especificidade dos seletores compostos abaixo.
 */

.czar-justified-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-auto-flow: dense;
	gap: var(--czar-space-2, 0.5rem);
}

/* Native masonry (Safari 17.4+, Firefox Nightly). */
@supports (grid-template-rows: masonry) {
	.czar-justified-gallery {
		grid-template-rows: masonry;
	}
}

/* Fallback universal: column-count masonry-like. */
@supports not (grid-template-rows: masonry) {
	.czar-justified-gallery {
		display: block;
		column-count: 3;
		column-gap: var(--czar-space-2, 0.5rem);
	}
	.czar-justified-gallery > * {
		break-inside: avoid;
		margin-bottom: var(--czar-space-2, 0.5rem);
		display: block;
	}
	.czar-justified-gallery > * img,
	.czar-justified-gallery img {
		max-width: 100%;
		height: auto;
		display: block;
	}
	@media (max-width: 960px) {
		.czar-justified-gallery {
			column-count: 2;
		}
	}
	@media (max-width: 640px) {
		.czar-justified-gallery {
			column-count: 1;
		}
	}
}

/* Override regras legacy de display:none em wrappers que ficaram com a classe
   wd-* + nova classe czar-* na estratégia aditiva (gallery.php usa wd-justified-gallery).
   Especificidade 0,2,0 ganha de `.wd-justified-gallery:not(.justified-gallery)`. */
.wd-justified-gallery.czar-justified-gallery,
.wd-images-gallery .czar-justified-gallery {
	display: grid;
}
@supports not (grid-template-rows: masonry) {
	.wd-justified-gallery.czar-justified-gallery,
	.wd-images-gallery .czar-justified-gallery {
		display: block;
	}
}

/* Esconde elementos de UI da lib legacy (caption/spinner) que ficaram no markup
   mas não fazem sentido sem inicialização. */
.czar-justified-gallery .caption,
.czar-justified-gallery .spiner {
	display: none;
}