/*
 * KrokoDent — galeria.css
 * Style dla page-galeria.php: hero, masonry wall, lightbox.
 */


/* ════════════════════════════════════════════════════════════════
   HERO GALERII
═══════════════════════════════════════════════════════════════════ */

.kd-gallery-hero {
	min-height: 55vh;
}

.kd-gallery-hero .gallery-lead {
	font-size: 17px;
	color: rgba(255,255,255,.88);
	max-width: 60ch;
	margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   MASONRY WALL — CSS columns
═══════════════════════════════════════════════════════════════════ */

.gallery-section { padding: var(--space-7, 64px) 0 var(--space-8, 96px); }

.gallery-wall {
	column-count: 3;
	column-gap: 12px;
}

.gallery-item {
	display: block;
	break-inside: avoid;
	margin-bottom: 12px;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md, 16px);
	cursor: pointer;
	padding: 0;
	border: none;
	background: var(--bg-near-black, #f0f2ef);
	width: 100%;
}

.gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .55s cubic-bezier(.4,0,.2,1);
}

.gallery-item:hover img {
	transform: scale(1.04);
}

/* Overlay z lupą */
.gallery-item-overlay {
	position: absolute;
	inset: 0;
	background: rgba(10,25,12,0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .3s ease;
}

.gallery-item-overlay svg {
	width: 44px;
	height: 44px;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity .3s ease, transform .3s ease;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}

.gallery-item:hover .gallery-item-overlay {
	background: rgba(10,25,12,.45);
}

.gallery-item:hover .gallery-item-overlay svg {
	opacity: 1;
	transform: scale(1);
}

.gallery-item:focus-visible {
	outline: 3px solid #2d7a3a;
	outline-offset: 2px;
}

@media (max-width: 900px)  { .gallery-wall { column-count: 2; } }
@media (max-width: 500px)  { .gallery-wall { column-count: 1; } }


/* ════════════════════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════════════════════ */

.kd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kd-lightbox[hidden] { display: none; }

/* Tło */
.lb-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8,18,10,.96);
	backdrop-filter: blur(4px);
	cursor: pointer;
}

/* Content wrapper */
.lb-content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 90vw;
	max-height: 90vh;
}

/* Zdjęcie */
.lb-image {
	max-width: 90vw;
	max-height: 85vh;
	width: auto;
	height: auto;
	display: block;
	border-radius: var(--radius-md, 16px);
	box-shadow: 0 24px 80px rgba(0,0,0,.6);
	transition: opacity .25s ease;
	object-fit: contain;
}

.lb-image.loading { opacity: 0; }

/* Loader */
.lb-loader {
	position: absolute;
	width: 40px;
	height: 40px;
	border: 3px solid rgba(255,255,255,.15);
	border-top-color: #2d7a3a;
	border-radius: 50%;
	animation: lbSpin .7s linear infinite;
	display: none;
}

.lb-loader.visible { display: block; }

@keyframes lbSpin { to { transform: rotate(360deg); } }

/* Nawigacja — przyciski */
.lb-close,
.lb-prev,
.lb-next {
	position: absolute;
	z-index: 3;
	background: rgba(255,255,255,.12);
	backdrop-filter: blur(8px);
	border: 1.5px solid rgba(255,255,255,.25);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .2s ease;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
	background: rgba(45,122,58,.45);
	border-color: rgba(45,122,58,.70);
	transform: scale(1.1);
}

.lb-close {
	top: 20px; right: 20px;
	width: 48px; height: 48px;
}
.lb-close svg { width: 20px; height: 20px; }

.lb-prev {
	left: 20px; top: 50%;
	transform: translateY(-50%);
	width: 52px; height: 52px;
}
.lb-prev:hover { transform: translateY(-50%) scale(1.1); }
.lb-prev svg { width: 22px; height: 22px; }

.lb-next {
	right: 20px; top: 50%;
	transform: translateY(-50%);
	width: 52px; height: 52px;
}
.lb-next:hover { transform: translateY(-50%) scale(1.1); }
.lb-next svg { width: 22px; height: 22px; }

/* Licznik */
.lb-counter {
	position: absolute;
	bottom: -36px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 13px;
	color: rgba(255,255,255,.55);
	white-space: nowrap;
	font-family: var(--font-sans, 'Inter', sans-serif);
}

/* Animacja wejścia */
@keyframes lbFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.kd-lightbox:not([hidden]) {
	animation: lbFadeIn .2s ease;
}

/* Mobile */
@media (max-width: 640px) {
	.lb-prev { left: 8px; }
	.lb-next { right: 8px; }
	.lb-close { top: 10px; right: 10px; }
	.lb-prev, .lb-next { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.gallery-item img,
	.gallery-item-overlay,
	.gallery-item-overlay svg,
	.lb-image { transition-duration: .01ms !important; }
	.lb-loader { animation: none !important; }
}