/* =============================================================================
   foreto — galeria zrzutów

   Kit ma kadr (Media), siatkę (Grid), kartę (Card) i przycisk ikonowy
   (IconButton). Nie ma galerii ani okna powiększenia, więc tutaj stoi
   wyłącznie to, czego z tamtych nie da się złożyć: proporcja kadru, rysunek
   okna <dialog> i maska glifu zamknięcia.

   Ani jednej wartości z palca — wszystko przez tokeny mostu (kit-bridge.css).
   Tam, gdzie mostu nie ma (proporcja kadru), sięgamy po preset rdzenia
   --wp--preset--aspect-ratio--*, dokładnie jak sections.css.

   Arkusz musi stać w kolejce ZA kit.css: reguła marginesu figury ma tę samą
   wagę selektora co zerowanie marginesów w kicie i wygrywa kolejnością.
   ========================================================================== */


/* =============================================================================
   1. Siatka zrzutów — .foreto-gallery
   ========================================================================== */

.foreto-gallery {
	/* Zrzut ekranu jest szerszy niż wyższy, więc 16:9, a nie 4:3 kafla
	   realizacji. Proporcja siedzi na zmiennej, żeby dało się ją przestawić
	   jednej sekcji zamiast wszystkim galeriom naraz. */
	--foreto-gallery-ratio: var(--wp--preset--aspect-ratio--16-9);
}

.foreto-gallery__figure {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-3);
}

/* Kadr kitu stoi w źródle na elemencie blokowym, a tutaj jest <span>-em
   w odsyłaczu — pudełko liniowe ignoruje aspect-ratio i wychodzi zerowej
   wysokości. Karta realizacji rozstrzyga to samo inaczej, bo jej kadr nie stoi
   w odsyłaczu: renderer podaje tam wprost <div> (foreto_media, argument $tag). */
.foreto-gallery__frame {
	display: block;
}

.foreto-gallery__frame .foreto-media {
	display: block;
	aspect-ratio: var(--foreto-gallery-ratio);
}

/* Powiększa się WYŁĄCZNIE warstwa wierzchnia: rozmyte tło stoi już w skali 1,8
   (--foreto-media-scale), więc ten sam krok byłby na nim nie do zauważenia,
   a przy okazji rozjeżdżałby oba plany kadru względem siebie. */
.foreto-gallery__frame .foreto-media__img {
	transition: transform var(--foreto-transition-base);
}

.foreto-gallery__frame:is(:hover, :focus-visible) .foreto-media__img {
	transform: scale(var(--foreto-icon-hover-scale));
}


/* =============================================================================
   2. Okno powiększenia — .foreto-lightbox

   Okno buduje assets/js/gallery.js. Bez skryptu ta połowa arkusza nie ma czego
   opisać, a galeria zostaje siatką odsyłaczy do plików obrazów — czyli działa.
   ========================================================================== */

/* Przyciemnienie niesie SAMO OKNO, rozciągnięte na całe pole widzenia.
   Warstwa ::backdrop dokładałaby pod nim drugie, a przy tym nie w każdej
   przeglądarce dziedziczy zmienne motywu — przyciemnienie oparte wyłącznie
   na niej mogłoby więc po prostu nie przyjść. */
.foreto-lightbox {
	position: fixed;
	inset: 0;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: var(--foreto-space-6);
	border: 0;
	background: var(--foreto-scrim);
	overscroll-behavior: contain;
}

.foreto-lightbox::backdrop {
	background: transparent;
}

/* display WYŁĄCZNIE przy [open]: reguła autora bije regułę przeglądarki
   niezależnie od wagi selektora, więc display na samej klasie pokazywałby
   także okno zamknięte. */
.foreto-lightbox[open] {
	display: flex;
	justify-content: center;
	overflow: auto;
}

/* Zrzut bywa wyższy niż ekran i wtedy ma się PRZEWIJAĆ, a nie kurczyć do
   nieczytelnego paska — po to się go powiększa. margin: auto wyśrodkowuje
   kartę, dopóki obraz się mieści, a przy nadmiarze schodzi do zera, więc górna
   krawędź zostaje w zasięgu przewinięcia. */
/* Figura jest dziś JEDYNYM dzieckiem okna, więc dostaje całą jego szerokość —
   sterowanie zjechało do paska w karcie i nie odbiera już obrazowi miejsca. */
.foreto-lightbox__figure {
	display: flex;
	flex-direction: column;
	gap: var(--foreto-space-3);
	margin: auto;
	max-width: 100%;
	min-width: 0;
}

/* align-self, bo w kolumnowym flexie element zastępczy JEST rozciągany na
   osi poprzecznej: podpis szerszy od zrzutu powiększał go ponad wymiar pliku,
   czyli dawał rozmycie zamiast powiększenia. */
.foreto-lightbox__img {
	align-self: center;
	max-width: 100%;
}

/* Zamknięcie STOI W PASKU STEROWANIA, nie obok karty.
   Wcześniej było rodzeństwem figury w rzędzie okna i przegrywało z nią walkę
   o miejsce: przy szerokim zrzucie ściskało się z 40 do 25 px, czyli poniżej
   progu celu dotykowego z 2.5.8, i wjeżdżało pod kartę. Dało się to załatać
   rezerwacją miejsca (`flex: 0 0 auto` po jednej stronie, `min-width: 0` po
   drugiej), ale prościej jest nie mieć dwóch elementów walczących o tę samą
   oś. Sterowanie zjeżdża do karty, obraz dostaje całą szerokość okna.

   Zniknął przy okazji cały problem przewijania, dla którego stało tu
   `position: sticky`: pasek jedzie z kartą, więc nie ma z czego uciec.       */
/* PRZY LEWEJ KRAWĘDZI, wyjęte z rzędu. Gdyby stało w nim zwyczajnie, strzałki
   z licznikiem środkowałyby się w tym, co po nim zostanie — czyli nie na
   środku karty, tylko obok. Wyjęcie z przepływu trzyma je dokładnie pośrodku
   niezależnie od tego, jak szeroki jest przycisk, i przy okazji oddziela
   zamknięcie od nawigacji: robi co innego, więc ma stać osobno. */
.foreto-lightbox__close {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 50%;
	transform: translateY(-50%);
}

/* Udostępnianie po przeciwnej stronie, tą samą metodą i z tego samego powodu:
   nawigacja ma zostać dokładnie pośrodku karty. */
.foreto-lightbox__share {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 50%;
	transform: translateY(-50%);
}

/* Glify w stylu FormImpress (kreska 1.8, zaokrąglone końce) zamiast
   pikselowych ikon Foreto; jako data-URI w masce, bez osobnych plików. */
.foreto-lightbox__share-glyph {
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v6a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-6M12 15V4M8 8l4-4 4 4'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v6a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-6M12 15V4M8 8l4-4 4 4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Komunikat NAD paskiem, poza przepływem: gdyby stał w rzędzie, pojawienie
   się tekstu przesuwałoby strzałki w chwili, gdy ktoś w nie celuje. Znika
   przez opróżnienie treści, więc `:empty` odpowiada dokładnie stanowi
   „nie ma nic do powiedzenia". */
.foreto-lightbox__status {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: calc(100% + var(--foreto-space-2));
	white-space: nowrap;
}

.foreto-lightbox__status:empty {
	display: none;
}

/* Glif jako maska w kolorze tekstu — ten sam zapis co przy ikonach
   społecznościowych w parts.css. */
.foreto-lightbox__glyph {
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- Przechodzenie między zrzutami --------------------------------------
   Pasek buduje gallery.js i TYLKO przy więcej niż jednym zrzucie, więc ta
   część arkusza bywa bez adresata — tak samo jak reszta opisu okna.

   Pasek stoi POD obrazem, w karcie, a nie po bokach ekranu. Strzałki
   przyklejone do krawędzi okna wyglądają jak sterowanie odtwarzaczem i przy
   wysokim zrzucie, który się przewija, uciekają poza pole widzenia razem
   z nim. Tutaj jadą z kartą i zawsze stoją obok licznika, który mówi, ile
   jeszcze zostało.                                                        */
.foreto-lightbox__pasek {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--foreto-space-4);
	/* Wysokość celu dotykowego, żeby pasek nie kurczył się poniżej przycisku
	   wyjętego z przepływu — ten nie rozpycha już rodzica. */
	min-height: var(--foreto-hit);
}

/* Licznik na cyfrach tabelarycznych: bez tego „1 z 6" i „6 z 6" mają różną
   szerokość i strzałki drgają przy każdym przejściu. */
.foreto-lightbox__licznik {
	margin: 0;
	min-width: 6ch;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.foreto-lightbox__arrow {
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Jedna ikona na oba kierunki, obrócona. Drugi plik dla tego samego kształtu
   to drugie miejsce do poprawiania, gdy zmieni się rysunek strzałki. */
.foreto-lightbox__nav--prev .foreto-lightbox__arrow {
	transform: rotate(180deg);
}

/* OBRÓT I POWIĘKSZENIE RAZEM, bo `transform` się NIE SUMUJE — nadpisuje.
   Kit powiększa ikonę na wskazanie (`.foreto-icon-btn:hover > .foreto-icon`),
   a ta deklaracja kasowała obrót strzałki „wstecz": pod kursorem wskakiwała
   z powrotem w prawo i wyglądało to jak animacja obrotu. Wariant wskazany
   musi więc powtórzyć oba przekształcenia, w tej kolejności — obrót przed
   skalą, żeby powiększenie liczyło się już w obróconym układzie.

   Ta sama pułapka i to samo rozwiązanie co przy grocie podmenu w kit.css.   */
.foreto-lightbox__nav--prev:is(:hover, :focus-visible) .foreto-lightbox__arrow {
	transform: rotate(180deg) scale(var(--foreto-icon-hover-scale, 1.1));
}

/* base.css skraca czasy przejść do zera, ale nie cofa samego przekształcenia
   — bez tego kadr nadal skacze, tylko natychmiast. Ta sama przeciwwaga stoi
   przy kaflu realizacji w sections.css. */
@media (prefers-reduced-motion: reduce) {
	.foreto-gallery__frame:is(:hover, :focus-visible) .foreto-media__img {
		transform: none;
	}
}

/* Przyciski okna (zamknij, udostępnij, strzałki) jako koła z obrysem — ten
   sam kształt i hover, co koła strzałek w kartach i karuzeli FormImpress. */
.foreto-lightbox .foreto-icon-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--foreto-border-control);
	background: transparent;
	color: var(--fi-granat-900);
	transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

.foreto-lightbox .foreto-icon-btn > .foreto-icon { width: 20px; height: 20px; }

.foreto-lightbox .foreto-icon-btn:hover,
.foreto-lightbox .foreto-icon-btn:focus-visible {
	background: var(--fi-blekit-500);
	border-color: var(--fi-blekit-500);
	color: var(--fi-biel);
}