/**
 * MS Justified Gallery
 *
 * Użycie: dodaj galerii klasę .is-justified (Zaawansowane → Dodatkowe klasy CSS).
 * Rzędy mają wspólną wysokość docelową (--ms-row-height, domyślnie 235px),
 * obrazki zachowują proporcje — zmienia się tylko ich szerokość.
 *
 * Mechanika: flex-grow i flex-basis każdego kafelka są proporcjonalne do
 * aspect ratio obrazka (zmienna --ar ustawiana przez JS z atrybutów width/height).
 * Pełne rzędy dociągają się do szerokości kontenera; rząd niepełny (w tym
 * galeria z małą liczbą zdjęć) NIE wypełnia kontenera na siłę — wolne miejsce
 * pochłania wypełniacz ::after, a zdjęcia zostają w oryginalnych proporcjach.
 * Przycinanie pojawia się dopiero, gdy zdjęcia nie mieszczą się w rzędzie.
 */

figure.wp-block-gallery.is-justified.is-layout-flex {
	--ms-row-height: 235px;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: stretch;
}

.wp-block-gallery.is-justified.has-nested-images figure.wp-block-image {
	/* Nadpisanie sztywnej szerokości 50% z galerii WP */
	width: auto !important;
	max-width: 100%;
	margin: 0 !important;

	/* Klucz układu justified: udział w rzędzie proporcjonalny do proporcji zdjęcia.
	   flex-basis = naturalna szerokość zdjęcia przy wysokości rzędu, więc dopóki
	   rząd nie jest pełny, kafelek ma dokładnie oryginalne proporcje. */
	flex-grow: calc(var(--ar, 1.5) * 100);
	flex-basis: calc(var(--ar, 1.5) * var(--ms-row-height));

	height: var(--ms-row-height);
	display: block;
}

/* Wypełniacz: pochłania wolne miejsce w niepełnym rzędzie, dzięki czemu
   zdjęcia nie są rozciągane do szerokości kontenera, gdy jest ich mało */
figure.wp-block-gallery.is-justified.is-layout-flex::after {
	content: '';
	flex-grow: 1000000;
	flex-basis: 0;
	height: 0;
}

.wp-block-gallery.is-justified.has-nested-images figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* Mobile: mniejsza wysokość rzędu, żeby zdjęcia nie były mikroskopijne po zawinięciu */
@media (max-width: 640px) {
	figure.wp-block-gallery.is-justified.is-layout-flex {
		--ms-row-height: 180px;
	}
}