/*
 * Powiększenie całego zdjęcia: tweak `image_lightbox`,
 * klasa `Media\PowiekszenieZdjec`.
 *
 * Układ okna i neutralny wygląd w kolorach systemowych. Wszystko w `:where()`,
 * więc motyw nadaje własny wygląd zwykłą klasą, bez licytacji wagi.
 * Wzór: makieta SPZOZ (`.lightbox`), z oknem o szerokości zdjęcia.
 *
 * Wymiary okna motyw zmienia zmiennymi na `.flexisnap-lightbox`:
 *   --flexisnap-lightbox-gutter     odstęp okna od krawędzi ekranu
 *   --flexisnap-lightbox-max-width  największa szerokość okna
 *   --flexisnap-lightbox-min-width  najmniejsza szerokość okna
 *   --flexisnap-lightbox-padding    wcięcie okna
 *   --flexisnap-lightbox-gap        odstęp zdjęcia, podpisu i paska
 *   --flexisnap-lightbox-bar        wysokość paska przycisków
 *   --flexisnap-lightbox-caption    wysokość linii podpisu
 * Moduł `assets/js/lightbox.js` ustawia na oknie szerokość pliku
 * (`--flexisnap-lightbox-width`) i jego proporcje
 * (`--flexisnap-lightbox-ratio`, szerokość przez wysokość).
 */

:where(.flexisnap-lightbox) {
	--flexisnap-lightbox-gutter: 1rem;
	--flexisnap-lightbox-max-width: 75rem;
	--flexisnap-lightbox-min-width: 20rem;
	--flexisnap-lightbox-padding: 1rem;
	--flexisnap-lightbox-gap: 1rem;
	--flexisnap-lightbox-bar: 2.75rem;
	--flexisnap-lightbox-caption: 1.5rem;

	/* Pomocnicze, liczone z powyższych: wiersz podpisu, odstęp zdjęcia
	   od krawędzi ekranu, miejsce na podpis z paskiem. */
	--flexisnap-lightbox-caption-row: calc(var(--flexisnap-lightbox-caption) + var(--flexisnap-lightbox-gap));
	--flexisnap-lightbox-edge: calc(var(--flexisnap-lightbox-gutter) + var(--flexisnap-lightbox-padding));
	--flexisnap-lightbox-chrome: calc(var(--flexisnap-lightbox-bar) + var(--flexisnap-lightbox-gap) + var(--flexisnap-lightbox-caption-row));

	/* Największa wysokość zdjęcia. */
	--flexisnap-lightbox-stage: calc(100dvh - 2 * var(--flexisnap-lightbox-edge) - var(--flexisnap-lightbox-chrome));

	/* Szerokość zdjęcia w oknie: nie ponad plik, ekran, okno ani wysokość
	   miejsca. Procent liczy się od ekranu, bo zmienna trafia do `width`
	   okna (okno modalne leży w warstwie wierzchniej). */
	--flexisnap-lightbox-fit: min(var(--flexisnap-lightbox-width, 100vw), 100% - 2 * var(--flexisnap-lightbox-edge), var(--flexisnap-lightbox-max-width) - 2 * var(--flexisnap-lightbox-padding), var(--flexisnap-lightbox-stage) * var(--flexisnap-lightbox-ratio, 1));

	box-sizing: border-box;
	width: calc(var(--flexisnap-lightbox-fit) + 2 * var(--flexisnap-lightbox-padding));
	min-width: min(100% - 2 * var(--flexisnap-lightbox-gutter), var(--flexisnap-lightbox-min-width));
	max-width: none;
	max-height: calc(100dvh - 2 * var(--flexisnap-lightbox-gutter));
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	background: Canvas;
	color: CanvasText;
}

/* Bez podpisu zdjęcie dostaje jego wiersz. */
:where(
	.flexisnap-lightbox:has(
		> .flexisnap-lightbox__box > .flexisnap-lightbox__caption[hidden]
	)
) {
	--flexisnap-lightbox-caption-row: 0px;
}

:where(.flexisnap-lightbox)::backdrop {
	background: rgb(0 0 0 / 0.8);
}

:where(.flexisnap-lightbox__box) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--flexisnap-lightbox-gap);
	padding: var(--flexisnap-lightbox-padding);
}

:where(.flexisnap-lightbox__image) {
	display: block;
	width: 100%;
	height: auto;
	max-width: var(--flexisnap-lightbox-width, 100%);
	max-height: var(--flexisnap-lightbox-stage);
	margin-inline: auto;
	object-fit: contain;
}

:where(.flexisnap-lightbox.is-zoomable .flexisnap-lightbox__image) {
	cursor: zoom-in;
}

/* Rzeczywisty rozmiar: okno na całą dostępną szerokość, zdjęcie
   przewijane w obu kierunkach. */
:where(.flexisnap-lightbox.is-zoomed) {
	width: min(100% - 2 * var(--flexisnap-lightbox-gutter), var(--flexisnap-lightbox-max-width), var(--flexisnap-lightbox-width, 100vw) + 2 * var(--flexisnap-lightbox-padding));
}

:where(.flexisnap-lightbox.is-zoomed .flexisnap-lightbox__stage) {
	max-height: var(--flexisnap-lightbox-stage);
	overflow: auto;
	overscroll-behavior: contain;
}

:where(.flexisnap-lightbox.is-zoomed .flexisnap-lightbox__image) {
	width: var(--flexisnap-lightbox-width, auto);
	max-width: none;
	max-height: none;
	cursor: zoom-out;
}

:where(.flexisnap-lightbox__caption, .flexisnap-lightbox__count) {
	margin: 0;
}

:where(.flexisnap-lightbox__nav) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
}

:where(.flexisnap-lightbox__count) {
	margin-inline-end: auto;
	white-space: nowrap;
}

:where(.flexisnap-lightbox__button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border: 2px solid currentcolor;
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

:where(
	.flexisnap-lightbox:not([data-nav="icon"])
	:is(.flexisnap-lightbox__prev, .flexisnap-lightbox__next)
) {
	padding-inline: 0.75rem;
}

:where(.flexisnap-lightbox__icon) {
	display: inline-flex;
}

/* Poza `:where()`: `display` z motywu nie może przykryć stanu okna. */
.flexisnap-lightbox .flexisnap-lightbox__button[hidden],
.flexisnap-lightbox .flexisnap-lightbox__caption[hidden],
.flexisnap-lightbox[data-nav="icon"] .flexisnap-lightbox__label,
.flexisnap-lightbox[data-nav="text"] .flexisnap-lightbox__prev .flexisnap-lightbox__icon,
.flexisnap-lightbox[data-nav="text"] .flexisnap-lightbox__next .flexisnap-lightbox__icon,
.flexisnap-lightbox .flexisnap-lightbox__zoom[aria-pressed="true"] .flexisnap-lightbox__icon--in,
.flexisnap-lightbox .flexisnap-lightbox__zoom[aria-pressed="false"] .flexisnap-lightbox__icon--out {
	display: none;
}

:where(.flexisnap-lightbox-trigger) {
	cursor: zoom-in;
}

/* Dopisek dla czytnika, także w motywie bez reguły `.screen-reader-text`. */
:where(.flexisnap-lightbox-trigger) .screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}