/* Galeria inwestycji.
 *
 * Scena i pasek miniatur zamiast jednego kadru w pustym polu. Scena jest
 * przewijalna poziomo ze zderzakami (`scroll-snap`), więc bez JavaScriptu
 * odnośnik z miniatury przewija do właściwego zdjęcia. Skrypt tylko wygładza
 * to przejście i podświetla aktywną miniaturę.
 */

.galeria {
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.galeria__scena {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	background: var(--bg-alt);
	/* Pasek przewijania chowamy: nawigację niesie pasek miniatur,
	   a poziomy scrollbar pod zdjęciem czytał się jak usterka. */
	scrollbar-width: none;
}
.galeria__scena::-webkit-scrollbar { display: none; }

.galeria__kadr {
	margin: 0;
	scroll-snap-align: start;
	/* Stała proporcja sceny: broszury mają strony od 4:3 do kwadratu,
	   a skacząca wysokość przy zmianie zdjęcia przesuwałaby całą stronę.
	   16:9 zamiast 3:2 — przy 1336 px szerokości trójdwójka zabierała
	   891 px wysokości i wypychała treść oferty pod linię zgięcia. */
	aspect-ratio: 16 / 9;
	background: var(--bg-alt);
}
.galeria__kadr img,
.galeria__kadr img[width][height] {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.galeria__pasek {
	display: flex;
	gap: 0.5rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
}
.galeria__mini {
	display: block;
	width: 120px;
	flex: 0 0 120px;
	line-height: 0;
	opacity: 0.55;
	outline-offset: 2px;
	transition: opacity 160ms var(--ease-out-quart, ease);
}
.galeria__mini img,
.galeria__mini img[width][height] {
	width: 100%;
	height: 86px;
	object-fit: cover;
	display: block;
}
.galeria__mini:hover { opacity: 0.85; }
/* Stan wybrany niesie krycie i kreska pod spodem, nie sama jasność. */
.galeria__mini.is-aktywna {
	opacity: 1;
	box-shadow: 0 2px 0 0 var(--accent);
}

.galeria__zrodlo {
	margin: 0.75rem 0 0;
	font-size: var(--fs-sm);
	color: var(--muted);
}

@media (max-width: 767px) {
	.galeria__kadr { aspect-ratio: 4 / 3; }
	.galeria__mini { width: 84px; flex-basis: 84px; }
	.galeria__mini img { height: 60px; }
}

/* --- panel boczny: blok kontaktu bez zaślepki --------------------------- */
.rail__kontakt {
	display: grid;
	gap: 0.25rem;
}
.rail__tel {
	/* Odsyłacz telefoniczny musi mieć 44 px wysokości: to jest cel dotykowy,
	   a nie sam napis. Wyściółka zamiast większego kroju, żeby nie konkurował
	   z ceną nad nim. */
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-family: var(--font-ui);
	font-size: 1.125rem;
	font-variation-settings: "wght" 600;
	font-variant-numeric: tabular-nums lining-nums;
	color: var(--ink);
	text-decoration: none;
}
.rail__tel:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.rail__kontakt .muted { font-size: var(--fs-sm); }

/* --- blok o formie własności na stronie oferty -------------------------- */
/* Kreskowany pasek u góry i obwódka dookoła czytały się jak ostrzeżenie
   z lat dziewięćdziesiątych. To jest wyjaśnienie, nie alarm: zostaje
   kreska z boku i spokojne tło, bez ramki i bez kreskowania. */
.legalbox {
	border: 0;
	border-left: 3px solid var(--accent);
	border-radius: 0;
	background: var(--bg-alt);
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1.5vw, 2rem);
}
.legalbox::before { content: none; }
.legalbox h2 {
	font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	margin-bottom: 0.75rem;
}
.legalbox p { max-width: 62ch; }