/**
 * Chaotic Gallery (PW) – style frontend.
 * Wszystkie klasy mają prefiks .pw-chaotic-gallery aby uniknąć konfliktów.
 */

.pw-chaotic-gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
}

.pw-chaotic-gallery *,
.pw-chaotic-gallery *::before,
.pw-chaotic-gallery *::after {
	box-sizing: border-box;
}

/* Pojedynczy kafelek. */
.pw-chaotic-gallery__item {
	position: relative;
	display: block;
	flex-grow: 0;
	flex-shrink: 1;
	min-width: 0;
	height: 220px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* Link opakowujący kafelek. */
.pw-chaotic-gallery__link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/* Obraz. object-fit i object-position sterowane zmiennymi CSS per-kafelek
 * (--pw-cg-fit / --pw-cg-pos-x / --pw-cg-pos-y) ustawianymi przez kontrolki. */
.pw-chaotic-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--pw-cg-fit, cover);
	object-position: var(--pw-cg-pos-x, center) var(--pw-cg-pos-y, center);
	transition: transform 0.4s ease, opacity 0.3s ease;
	will-change: transform;
}

/* Tryb: wypełnij całą szerokość – kafelki rozciągają się, by zapełnić rząd. */
.pw-chaotic-gallery--mode-fill .pw-chaotic-gallery__item {
	flex-grow: 1;
}

/* Tryb: stałe odstępy – kafelki zachowują zadaną szerokość. */
.pw-chaotic-gallery--mode-gap .pw-chaotic-gallery__item {
	flex-grow: 0;
}

/* Obszar podpisu – warstwa pozycjonująca tekst nad obrazem. */
.pw-chaotic-gallery__caption {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* pion (nadpisywane przez kontrolki) */
	align-items: flex-start;   /* poziom (nadpisywane przez kontrolki) */
	padding: 10px;
	pointer-events: none;      /* nie blokuje kliknięcia w link */
	margin: 0;
}

/* Sam tekst podpisu – tu trafia tło/typografia/kolor. */
.pw-chaotic-gallery__caption-text {
	display: inline-block;
	max-width: 100%;
	padding: 6px 10px;
	color: #ffffff;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Opcjonalny gradient pod podpisem (scrim) – tylko gdy ustawiony kolor. */
.pw-chaotic-gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: transparent;
}

/* Reset domyślnych marginesów figure w niektórych motywach. */
.pw-chaotic-gallery figure.pw-chaotic-gallery__item {
	margin: 0;
}

/* ===========================================================
 * Przeciąganie kafelków – TYLKO w edytorze Elementora.
 * Klasy nakładane przez pw-chaotic-gallery-editor.js (na froncie nieaktywne).
 * =========================================================== */
.pw-chaotic-gallery--editable .pw-chaotic-gallery__item { cursor: grab; }
.pw-chaotic-gallery--editable .pw-chaotic-gallery__item:active { cursor: grabbing; }
.pw-chaotic-gallery--editable .pw-chaotic-gallery__item::before {
	content: "\2630";
	position: absolute; top: 6px; left: 6px; z-index: 5;
	width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
	font-size: 14px; line-height: 1; color: #fff;
	background: rgba(17, 24, 39, 0.65); border-radius: 6px;
	opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.pw-chaotic-gallery--editable .pw-chaotic-gallery__item:hover::before { opacity: 1; }
.pw-chaotic-gallery__item.pw-cg-dragging { opacity: 0.4; }
.pw-chaotic-gallery__item.pw-cg-drop-target { outline: 3px dashed #00b4d8; outline-offset: -3px; }

/* Tryb siatki (ręczny układ). Kontener staje się CSS Grid (inline style ustawia
 * kolumny i wysokość rzędu); kafelki pozycjonowane są przez grid-column/grid-row
 * dodawane inline w renderze. */
.pw-chaotic-gallery--mode-grid .pw-chaotic-gallery__item { width: auto; min-width: 0; }

/* ===========================================================
 * Lightbox (pełny ekran po kliknięciu w obraz).
 * =========================================================== */
.pw-chaotic-gallery__img { cursor: zoom-in; }

.pw-cg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.92);
}
.pw-cg-lightbox.is-open { display: flex; }

.pw-cg-lightbox .pw-cg-lb-fig {
	margin: 0;
	max-width: 100vw;
	max-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.pw-cg-lightbox img {
	max-width: 100vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	display: block;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.pw-cg-lightbox figcaption {
	color: #fff;
	margin-top: 12px;
	font-size: 14px;
	letter-spacing: 0.04em;
	text-align: center;
}
.pw-cg-lightbox button {
	position: absolute;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}
.pw-cg-lightbox button:hover { background: rgba(0, 0, 0, 0.8); }
.pw-cg-lb-close { top: 16px; right: 16px; }
.pw-cg-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.pw-cg-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

@media (max-width: 767px) {
	.pw-cg-lightbox button { width: 40px; height: 40px; font-size: 22px; }
}