/* =========================================================
   Секція: галерея приміщень
   Макет «Unsere Praxis» → Galerie
   ========================================================= */

.phm-gallery {
	padding-block: 140px;
}

.phm-gallery--beige { background: var(--phm-beige); }
.phm-gallery--white { background: var(--phm-white); }

.phm-gallery__head {
	max-width: var(--phm-measure);
}

.phm-gallery--center .phm-gallery__head {
	margin-inline: auto;
	text-align: center;
}

.phm-gallery__title {
	margin: 0;
}

.phm-gallery__lead {
	margin: 20px 0 0;
}

.phm-gallery--center .phm-gallery__lead {
	margin-inline: auto;
}

/* ---- Розкладка ----
   CSS-колонки, а не grid: висоту кожного кадру диктують його власні
   пропорції, тому «шахівниця» з макета збирається сама за будь-якої
   кількості фото. Колонки заповнюються згори вниз — так само, як три
   flex-стовпці в макеті. */

.phm-gallery__grid {
	margin-top: 80px;
	column-count: var(--phm-gallery-columns, 3);
	column-gap: var(--phm-gap);
}

.phm-gallery__item {
	/* Проміжок — padding, а не margin: Elementor обнуляє margin у будь-якого
	   <figure> всередині віджета правилом вагою в чотири класи. Виглядає
	   однаково — фон картки прозорий, рамка з тінню лежить усередині. */
	margin: 0;
	padding: 0 0 var(--phm-gallery-gap, var(--phm-gap));
	/* Фото не має розриватися між колонками. */
	break-inside: avoid;
	page-break-inside: avoid;
}

/* Обгортка кадру — і кнопка, і span (коли лайтбокс вимкнено). */
.phm-gallery__trigger {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	text-align: left;
	font: inherit;
	color: inherit;
}

.phm-gallery--zoomable .phm-gallery__trigger {
	cursor: zoom-in;
}

.phm-gallery__frame {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--phm-radius);
	background: var(--phm-shell);
	box-shadow: var(--phm-shadow-card);
}

.phm-gallery__img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.6s var(--phm-ease-out);
}

/* ---- Наведення ---- */

.phm-gallery__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(14, 83, 79, 0.28);
	color: var(--phm-white);
	opacity: 0;
	transition: opacity var(--phm-dur) var(--phm-ease);
}

.phm-gallery__zoom {
	transform: translateY(6px);
	transition: transform var(--phm-dur) var(--phm-ease-out);
}

.phm-gallery__trigger:hover .phm-gallery__overlay,
.phm-gallery__trigger:focus-visible .phm-gallery__overlay {
	opacity: 1;
}

.phm-gallery__trigger:hover .phm-gallery__zoom,
.phm-gallery__trigger:focus-visible .phm-gallery__zoom {
	transform: translateY(0);
}

.phm-gallery__trigger:hover .phm-gallery__img {
	transform: scale(1.04);
}

.phm-gallery__trigger:focus-visible {
	outline: 2px solid var(--phm-primary);
	outline-offset: 4px;
	border-radius: var(--phm-radius);
}

/* На тач-екранах немає наведення: підказка-лупа має бути видимою одразу,
   інакше про збільшення ніхто не дізнається. */
@media (hover: none) {
	.phm-gallery__overlay {
		opacity: 1;
		background: none;
		align-items: flex-end;
		justify-content: flex-end;
		padding: 14px;
	}

	.phm-gallery__zoom {
		transform: none;
		background: rgba(14, 83, 79, 0.55);
		border-radius: 50%;
		padding: 6px;
		box-sizing: content-box;
	}
}

/* Підпис з'їдає частину проміжку до наступного кадру, тому картці з
   підписом додаємо повітря знизу — інакше текст липне до фото під ним. */
.phm-gallery__item:has(.phm-gallery__caption) {
	padding-bottom: calc(var(--phm-gallery-gap, var(--phm-gap)) + 24px);
}

.phm-gallery__caption {
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--phm-text);
}

/* =========================================================
   Лайтбокс
   ========================================================= */

.phm-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 72px 96px;
	background: rgba(14, 83, 79, 0.94);
	opacity: 0;
	transition: opacity var(--phm-dur) var(--phm-ease);
}

.phm-lightbox.is-open {
	opacity: 1;
}

/*
 * Обов'язково: display:flex вище перебиває браузерне [hidden]{display:none},
 * і закрите вікно лишалося б прозорим шаром поверх сторінки — кліки по
 * посиланнях не проходили б. pointer-events — друга страховка на час
 * згасання, поки атрибут hidden ще не виставлено.
 */
.phm-lightbox[hidden] {
	display: none;
}

.phm-lightbox:not(.is-open) {
	pointer-events: none;
}

.phm-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.phm-lightbox__img {
	max-width: 100%;
	/* Місце під підпис і лічильник унизу. */
	max-height: calc(100vh - 200px);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--phm-radius);
	background: var(--phm-primary-dark);
}

.phm-lightbox__caption {
	font-size: 15px;
	line-height: 1.6;
	color: var(--phm-mint);
	text-align: center;
	max-width: 62ch;
}

/* ---- Керування ---- */

.phm-lightbox__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: transparent;
	color: var(--phm-white);
	cursor: pointer;
	transition: background var(--phm-dur) var(--phm-ease),
	            border-color var(--phm-dur) var(--phm-ease);
}

.phm-lightbox__btn:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--phm-white);
}

.phm-lightbox__btn[hidden] {
	display: none;
}

.phm-lightbox__close { top: 24px; right: 24px; }
.phm-lightbox__prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.phm-lightbox__next  { right: 24px; top: 50%; transform: translateY(-50%); }

.phm-lightbox__count {
	position: absolute;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%);
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--phm-mint);
}

/* ---- Адаптив ---- */

@media (max-width: 1024px) {
	.phm-gallery {
		padding-block: 88px;
	}

	.phm-gallery__grid {
		margin-top: 48px;
		column-count: 2;
	}

	.phm-lightbox {
		padding: 24px 20px 88px;
	}

	.phm-lightbox__prev { left: 12px; }
	.phm-lightbox__next { right: 12px; }
}

@media (max-width: 767px) {
	.phm-gallery {
		padding-block: 56px;
	}

	.phm-gallery__grid {
		margin-top: 32px;
		column-count: 1;
	}

	.phm-gallery--center .phm-gallery__head {
		margin-inline: 0;
		text-align: left;
	}

	.phm-lightbox__btn {
		width: 44px;
		height: 44px;
	}

	.phm-lightbox__img {
		max-height: calc(100vh - 180px);
	}
}

/* Поважаємо системне «менше руху» (ТЗ §7). */
@media (prefers-reduced-motion: reduce) {
	.phm-gallery__img,
	.phm-gallery__zoom {
		transition: none;
	}

	.phm-gallery__trigger:hover .phm-gallery__img {
		transform: none;
	}
}