/**
 * KIT Galeria — style frontu (ładowane tylko na stronach z blokiem).
 * Wersja: 1.1.0 | KAMARO IT
 *
 * Breakpointy: telefon < 600 px, tablet 600–1023 px, komputer od 1024 px.
 * Kolory z tokenów --cp-* strony (z wartościami domyślnymi). Fonty z motywu.
 */

.kit-gal {
	--kg-fg: var(--cp-noc, #2B2326);
	--kg-muted: var(--cp-mauve, #7A6469);
	--kg-ph: var(--cp-perla, #F5F1F2);
	--kg-ease: cubic-bezier(.2, .7, .1, 1);
	--kg-c: var(--kg-cols-m, 1);

	box-sizing: border-box;
}
.kit-gal *,
.kit-gal *::before,
.kit-gal *::after { box-sizing: inherit; }

@media (min-width: 600px) { .kit-gal { --kg-c: var(--kg-cols-t, 2); } }
@media (min-width: 1024px) { .kit-gal { --kg-c: var(--kg-cols, 3); } }

/* ===== Element galerii ===== */
.kit-gal__item {
	margin: 0;
	min-width: 0;
}
.kit-gal__link {
	display: block;
	overflow: hidden;
	background: var(--kg-ph);
	cursor: zoom-in;
}
/* Kadr: domyślnie naturalne proporcje zdjęcia (znane z góry, więc bez przeskoków układu) */
.kit-gal__link,
.kit-gal__item > .kit-gal__img {
	aspect-ratio: var(--kg-w, 4) / var(--kg-h, 5);
}
.kit-gal .kit-gal__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 25%;
	transition: transform 1s var(--kg-ease);
}
.kit-gal__link:hover .kit-gal__img { transform: scale(1.03); }
.kit-gal__link:focus-visible {
	outline: 2px solid var(--kg-fg);
	outline-offset: 3px;
}
/* ===== Kafelek filmu ===== */
.kit-gal__item--video .kit-gal__link {
	position: relative;
	cursor: pointer;
}
.kit-gal__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: clamp(3rem, 18%, 4.5rem);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--kg-fg);
	box-shadow: 0 2px 18px rgba(43, 35, 38, .18);
	transform: translate(-50%, -50%);
	transition: transform .4s var(--kg-ease), background-color .3s ease;
	pointer-events: none;
}
.kit-gal__play svg { width: 46%; height: 46%; margin-left: 6%; }
.kit-gal__link:hover .kit-gal__play,
.kit-gal__link:focus-visible .kit-gal__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: #FFFFFF;
}
/* Odtwarzacz w miejscu kafelka (gdy powiększanie wyłączone): bez przycinania kadru */
.kit-gal .kit-gal__player {
	object-fit: contain;
	background: #000;
	transition: none;
}

.kit-gal__caption {
	margin-top: .6rem;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--kg-muted);
}

/* ===== Mozaika ===== */
.kit-gal--masonry .kit-gal__grid,
.kit-gal--grid .kit-gal__grid {
	display: grid;
	grid-template-columns: repeat(var(--kg-c), minmax(0, 1fr));
	gap: var(--kg-gap, 16px);
	align-items: start;
}
/* Po uruchomieniu JS: wiersze co 1 px, wysokość elementu liczona ze zdjęcia */
.kit-gal--masonry.is-masonry .kit-gal__grid {
	grid-auto-rows: 1px;
	row-gap: 0;
}

/* ===== Siatka: równe kadry ===== */
.kit-gal--grid .kit-gal__link,
.kit-gal--grid .kit-gal__item > .kit-gal__img {
	aspect-ratio: var(--kg-aspect, var(--kg-w, 4) / var(--kg-h, 5));
}

/* ===== Wiersze justowane ===== */
.kit-gal--justified {
	--kg-rh: calc(var(--kg-row, 360px) * .6);
}
@media (min-width: 600px) {
	.kit-gal--justified { --kg-rh: calc(var(--kg-row, 360px) * .8); }
}
@media (min-width: 1024px) {
	.kit-gal--justified { --kg-rh: var(--kg-row, 360px); }
}
.kit-gal--justified .kit-gal__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kg-gap, 16px);
}
.kit-gal--justified .kit-gal__item {
	flex-grow: calc(var(--kg-w, 4) / var(--kg-h, 5));
	flex-basis: calc(var(--kg-rh) * var(--kg-w, 4) / var(--kg-h, 5));
}
/* Ostatni wiersz nie rozciąga się na siłę */
.kit-gal--justified .kit-gal__grid::after {
	content: "";
	flex-grow: 999999;
}

/* ===== Edytorial: rytm duże / małe, jak w magazynie ===== */
.kit-gal--editorial .kit-gal__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: calc(var(--kg-gap, 16px) * 2.5) var(--kg-gap, 16px);
}
.kit-gal--editorial .kit-gal__link,
.kit-gal--editorial .kit-gal__item > .kit-gal__img { aspect-ratio: 4 / 5; }

@media (min-width: 600px) {
	.kit-gal--editorial .kit-gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kit-gal--editorial .kit-gal__item--p0 { grid-column: 1 / -1; }
	.kit-gal--editorial .kit-gal__item--p0 .kit-gal__link,
	.kit-gal--editorial .kit-gal__item--p0 > .kit-gal__img { aspect-ratio: 3 / 2; }
	.kit-gal--editorial .kit-gal__item--p2 { margin-top: 12%; }
	.kit-gal--editorial .kit-gal__item--p4 { margin-top: 12%; }
}

@media (min-width: 1024px) {
	.kit-gal--editorial .kit-gal__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: start;
	}
	/* Wzór powtarza się co 5 zdjęć */
	.kit-gal--editorial .kit-gal__item--p0 { grid-column: 1 / span 7; margin-top: 0; }
	.kit-gal--editorial .kit-gal__item--p1 { grid-column: 9 / span 4; align-self: end; }
	.kit-gal--editorial .kit-gal__item--p2 { grid-column: 2 / span 4; margin-top: 0; }
	.kit-gal--editorial .kit-gal__item--p3 { grid-column: 7 / span 6; margin-top: 18%; }
	.kit-gal--editorial .kit-gal__item--p4 { grid-column: 4 / span 6; margin-top: 0; }

	.kit-gal--editorial .kit-gal__item--p0 .kit-gal__link,
	.kit-gal--editorial .kit-gal__item--p0 > .kit-gal__img { aspect-ratio: 4 / 5; }
	.kit-gal--editorial .kit-gal__item--p1 .kit-gal__link,
	.kit-gal--editorial .kit-gal__item--p1 > .kit-gal__img { aspect-ratio: 3 / 4; }
	.kit-gal--editorial .kit-gal__item--p2 .kit-gal__link,
	.kit-gal--editorial .kit-gal__item--p2 > .kit-gal__img { aspect-ratio: 2 / 3; }
	.kit-gal--editorial .kit-gal__item--p4 .kit-gal__link,
	.kit-gal--editorial .kit-gal__item--p4 > .kit-gal__img { aspect-ratio: 3 / 2; }
}

/* ===== Lightbox ===== */
html.kit-lb-open { overflow: hidden; }

.kit-lb {
	--kg-fg: var(--cp-noc, #2B2326);
	--kg-muted: var(--cp-mauve, #7A6469);

	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, .98);
	color: var(--kg-fg);
	overscroll-behavior: contain;
}
.kit-lb[open] {
	display: grid;
	grid-template-rows: 1fr auto;
}
.kit-lb::backdrop { background: rgba(255, 255, 255, .98); }

.kit-lb__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 0;
	overflow: hidden;
	padding: clamp(3.5rem, 6vh, 4.5rem) clamp(.75rem, 6vw, 6rem) .75rem;
	touch-action: pan-y pinch-zoom;
}
.kit-lb .kit-lb__img {
	display: block;
	max-width: 100%;
	/* Wysokość okna minus pasek u góry (przycisk) i u dołu (licznik, podpis) */
	max-height: calc(100vh - 9.5rem);
	max-height: calc(100dvh - 9.5rem);
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 1;
	transition: opacity .3s ease;
}
.kit-lb .kit-lb__img.is-loading { opacity: 0; }
.kit-lb .kit-lb__img[hidden] { display: none; }

/* Film w powiększeniu */
.kit-lb .kit-lb__video {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 9.5rem);
	max-height: calc(100dvh - 9.5rem);
	width: auto;
	height: auto;
	background: #000;
}
.kit-lb .kit-lb__frame {
	display: block;
	width: min(100%, calc((100vh - 9.5rem) * var(--kg-r, 1.7778)));
	width: min(100%, calc((100dvh - 9.5rem) * var(--kg-r, 1.7778)));
	height: auto;
	aspect-ratio: var(--kg-r, 1.7778);
	border: 0;
	background: #000;
}

.kit-lb__bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem clamp(1rem, 6vw, 6rem) 1.25rem;
	font-size: .9375rem;
	line-height: 1.5;
}
.kit-lb__caption { margin: 0; color: var(--kg-muted); }
.kit-lb__count {
	margin: 0 0 0 auto;
	font-variant-numeric: tabular-nums;
	color: var(--kg-muted);
	white-space: nowrap;
}

.kit-lb__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--kg-fg);
	cursor: pointer;
	transition: background-color .2s ease;
}
.kit-lb__btn:hover { background: var(--cp-perla, #F5F1F2); }
.kit-lb__btn:focus-visible {
	outline: 2px solid var(--kg-fg);
	outline-offset: 2px;
}
.kit-lb__btn svg { width: 22px; height: 22px; }
.kit-lb__close { top: .75rem; right: .75rem; }
.kit-lb__prev,
.kit-lb__next { top: 50%; transform: translateY(-50%); }
.kit-lb__prev { left: clamp(.25rem, 1.5vw, 1.5rem); }
.kit-lb__next { right: clamp(.25rem, 1.5vw, 1.5rem); }
.kit-lb__btn[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.kit-gal *,
	.kit-lb * { transition-duration: .01ms !important; }
	.kit-gal__link:hover .kit-gal__img { transform: none; }
}