/* Dvaja — interaktívna mapa jednotiek.
   Farby prevzaté z webu: petrolejová #1a6367, oranžová #f36e3e. */

.dvaja-mapa {
	--dvaja-teal: #1a6367;
	--dvaja-teal-tmava: #12474a;
	--dvaja-oranzova: #f36e3e;
	--dvaja-siva: #8b9a9c;
	--dvaja-linka: #d8e4e5;
	--dvaja-atrament: #16262a;
	--dvaja-popis: #5c7275;

	font-family: inherit;
	color: var(--dvaja-atrament);
}

/* Obrana proti štýlom témy a Elementora ----------------------------------
   Elementor Kit štýluje globálne každý <button> na stránke:
     .elementor-kit-8 button { background-color:#F36E3E; border-radius:0;
                               text-transform:uppercase; padding:17px 35px }
   Selektor má špecificitu (0,1,1), takže prebije samotnú triedu (0,1,0)
   a z cenoviek mapy urobí oranžové hranaté tlačidlá. To isté robí téma
   pravidlom `button, input[type=submit], .button`.

   Preto: najprv reset (0,1,1) — vyhráva poradím, lebo naše CSS ide posledné —
   a komponenty nižšie sú písané cez .dvaja-mapa (0,2,0), aby vyhrali vždy. */
.dvaja-mapa button {
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	line-height: normal;
	text-shadow: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

/* Legenda ---------------------------------------------------------------- */

.dvaja-mapa__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 12px;
}

.dvaja-mapa__legenda span {
	font-size: 13px;
	color: var(--dvaja-popis);
	white-space: nowrap;
}

/* Mapa na tmavej sekcii (`[dvaja_mapa … pozadie="tmave"]`). Mapa samotná je
   obrázok a nesie sa sama, ale všetko okolo nej je bežný text — v tmavej
   petrolejovej sekcii Bieleho Kostola zanikal. Karta nad mapou zostáva biela,
   tej sa to netýka; ide o legendu a o zoznam, ktorý sa ukazuje na mobile. */
.dvaja-mapa--na-tmavom .dvaja-mapa__legenda span {
	color: rgba(255, 255, 255, .88);
}

.dvaja-mapa--na-tmavom .dvaja-mapa__zoznam-nadpis,
.dvaja-mapa--na-tmavom .dvaja-mapa__polozka-cislo {
	color: #fff;
}

.dvaja-mapa--na-tmavom .dvaja-mapa__polozka-popis {
	color: rgba(255, 255, 255, .78);
}

.dvaja-mapa--na-tmavom .dvaja-mapa__polozka-cena {
	color: var(--dvaja-oranzova, #f36e3e);
}

.dvaja-mapa--na-tmavom .dvaja-mapa__zoznam ul,
.dvaja-mapa--na-tmavom .dvaja-mapa__polozka {
	border-color: rgba(255, 255, 255, .22);
}

.dvaja-mapa__bod {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	margin-right: 7px;
	vertical-align: -1px;
}

.dvaja-mapa__bod--volne { background: var(--dvaja-teal); }
.dvaja-mapa__bod--rezervovane { background: var(--dvaja-siva); }

/* Rozloženie ------------------------------------------------------------- */

/* Karta „vyskočí" z domu (desktop) alebo zospodu (mobil), takže telo je
   jednoduchý stĺpec — mapa cez celú šírku, zoznam pod ňou. */
.dvaja-mapa__telo { display: block; }

.dvaja-mapa__platno {
	position: relative;
	line-height: 0;
}

.dvaja-mapa__podklad {
	display: block;
	width: 100%;
	height: auto;
}

.dvaja-mapa__vrstva {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Jednotky --------------------------------------------------------------- */

.dvaja-mapa__jednotka {
	cursor: pointer;
	pointer-events: auto;
}

/* Hrúbky a veľkosti sú v jednotkách plátna SVG. Premenná --dvaja-mierka
   (nastavuje ju PHP podľa šírky plátna) drží ich optickú veľkosť rovnakú
   naprieč lokalitami — Križovany majú plátno takmer dvakrát širšie než
   Biely Kostol, bez toho by text aj obrysy vyšli polovičné. */
.dvaja-mapa__vrstva { --dvaja-mierka: 1; }

.dvaja-mapa__tvar {
	stroke: #fff;
	stroke-width: calc(1 * var(--dvaja-mierka));
	transition: fill .15s ease, stroke .15s ease;
}

.dvaja-mapa__jednotka--volne .dvaja-mapa__tvar {
	fill: rgba(26, 99, 103, .62);
}

.dvaja-mapa__jednotka--rezervovane .dvaja-mapa__tvar {
	fill: rgba(60, 70, 72, .48);
}

.dvaja-mapa__jednotka:hover .dvaja-mapa__tvar,
.dvaja-mapa__jednotka.je-aktivna .dvaja-mapa__tvar {
	fill: rgba(26, 99, 103, .88);
	stroke: var(--dvaja-oranzova);
	stroke-width: calc(2.5 * var(--dvaja-mierka));
}

.dvaja-mapa__jednotka--rezervovane:hover .dvaja-mapa__tvar,
.dvaja-mapa__jednotka--rezervovane.je-aktivna .dvaja-mapa__tvar {
	fill: rgba(60, 70, 72, .72);
}

/* Križovany — podklad je detailný situačný výkres s popiskami domov. Plochy
   sa nefarbia natrvalo (inak prekryjú mapu), iba sa zvýraznia pri prejdení —
   a zvýraznenie je priehľadné, aby cez pozemok bolo vidno dom aj dvor.
   pointer-events: all drží aj priehľadnú plochu klikateľnou. */
.dvaja-mapa[data-lokalita="knd"] .dvaja-mapa__tvar {
	fill: transparent;
	stroke: transparent;
	pointer-events: all;
}

.dvaja-mapa[data-lokalita="knd"] .dvaja-mapa__jednotka:hover .dvaja-mapa__tvar,
.dvaja-mapa[data-lokalita="knd"] .dvaja-mapa__jednotka.je-aktivna .dvaja-mapa__tvar,
.dvaja-mapa[data-lokalita="knd"] .dvaja-mapa__jednotka:focus-visible .dvaja-mapa__tvar {
	fill: rgba(26, 99, 103, .30);
	stroke: var(--dvaja-oranzova);
	stroke-width: calc(2.5 * var(--dvaja-mierka));
}

.dvaja-mapa__jednotka:focus { outline: none; }

.dvaja-mapa__jednotka:focus-visible .dvaja-mapa__tvar {
	stroke: var(--dvaja-oranzova);
	stroke-width: calc(3 * var(--dvaja-mierka));
}

.dvaja-mapa__cislo {
	font-size: calc(13px * var(--dvaja-mierka));
	font-weight: 700;
	fill: #fff;
	text-anchor: middle;
	pointer-events: none;
}

/* Cenové bubliny — len na voľných, aby mapa nezhustla ---------------------- */

.dvaja-mapa__bubliny {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.dvaja-mapa .dvaja-mapa__bublina {
	--posun-x: 0px;
	--posun-y: 0px;

	position: absolute;
	transform: translate(-50%, -50%) translate(var(--posun-x), var(--posun-y));
	pointer-events: auto;
	cursor: pointer;

	font: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;

	background: #fff;
	color: var(--dvaja-teal);
	border: 1.5px solid var(--dvaja-teal);
	border-radius: 100px;
	padding: 5px 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

/* Bublina je vysoká len ~25 px, no na mape Bieleho Kostola je hlavným spôsobom,
   ako sa dom vyberie — taký cieľ sa trafí ťažko aj myšou. Neviditeľné pole ju
   zväčší na 40 px bez toho, aby narástla opticky. */
.dvaja-mapa .dvaja-mapa__bublina::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	min-width: 44px;
	height: 40px;
	transform: translate(-50%, -50%);
}

.dvaja-mapa .dvaja-mapa__bublina:hover,
.dvaja-mapa .dvaja-mapa__bublina.je-aktivna {
	background: var(--dvaja-teal);
	color: #fff;
	transform: translate(-50%, -50%) translate(var(--posun-x), var(--posun-y)) scale(1.08);
	z-index: 2;
}

.dvaja-mapa .dvaja-mapa__bublina:focus-visible {
	outline: 2px solid var(--dvaja-oranzova);
	outline-offset: 2px;
}

/* Zoznam voľných domov ---------------------------------------------------
   Na mobile je mapa úzka a pás domu vyjde na pár pixelov — tam je zoznam
   jediný použiteľný spôsob výberu. Na desktope to zastanú bubliny. */

.dvaja-mapa__zoznam { display: none; }

.dvaja-mapa__zoznam-nadpis {
	font-size: 15px;
	font-weight: 600;
	color: var(--dvaja-teal);
	margin: 22px 0 10px;
}

.dvaja-mapa__zoznam ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--dvaja-linka);
}

.dvaja-mapa__zoznam li { margin: 0; }

.dvaja-mapa .dvaja-mapa__polozka {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: 4px 10px;
	width: 100%;
	text-align: left;

	background: none;
	border: 0;
	border-bottom: 1px solid var(--dvaja-linka);
	padding: 13px 2px;
	font: inherit;
	cursor: pointer;
}

.dvaja-mapa__polozka-cislo {
	font-weight: 600;
	color: var(--dvaja-atrament);
}

.dvaja-mapa__polozka-popis {
	font-size: 13px;
	color: var(--dvaja-popis);
}

.dvaja-mapa__polozka-cena {
	font-weight: 700;
	color: var(--dvaja-teal);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.dvaja-mapa .dvaja-mapa__polozka:focus-visible {
	outline: 2px solid var(--dvaja-oranzova);
	outline-offset: -2px;
}

@media (max-width: 767px) {
	.dvaja-mapa__zoznam { display: block; }
	/* Bubliny by na úzkej mape zakryli celý projekt. */
	.dvaja-mapa__bubliny { display: none; }
}

/* Karta ------------------------------------------------------------------ */

.dvaja-mapa__karta {
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--dvaja-linka);
	border-radius: 8px;
	padding: 16px;
	line-height: 1.6;
}

/* Desktop — karta je vyskakovacie okno ukotvené k domu.
   Poloha (left/top v %) prichádza inline z JS; tu je len tvar a smer. */
@media (min-width: 768px) {
	.dvaja-mapa__karta {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 300px;
		max-width: 62%;
		z-index: 6;
		box-shadow: 0 14px 38px rgba(0, 0, 0, .22);
		/* Prisadnutá k pravej hrane pozemku (bez medzery), aby prechod myšou na
		   kartu — a na tlačidlo — neprešiel cez susedný pozemok a neprepol ju. */
		transform: translate(0, -50%);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .14s ease;
	}

	.dvaja-mapa__karta.je-otvorena {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	/* šípka mieri doľava na pozemok */
	.dvaja-mapa__karta::after {
		content: "";
		position: absolute;
		top: 50%;
		left: -7px;
		width: 13px;
		height: 13px;
		background: #fff;
		border-left: 1px solid var(--dvaja-linka);
		border-bottom: 1px solid var(--dvaja-linka);
		transform: translateY(-50%) rotate(45deg);
	}

	/* Križovany — karta je len náhľad, kurzor ňou prechádza.
	   Inak by karta ležiaca nad mapou chytila myš a susedný pozemok sa už nedal
	   trafiť (pozemky sú vedľa seba, karta prekryje ten vedľajší). Klik na dom
	   aj tak vedie na jeho podstránku, takže sa neklikateľnou kartou nič nestráca.
	   Biely Kostol má v karte „Mám záujem", tam musí ostať klikateľná. */
	.dvaja-mapa[data-lokalita="knd"] .dvaja-mapa__karta {
		pointer-events: none;
	}

	/* pozemok v pravej polovici → karta naľavo od neho, šípka doprava */
	.dvaja-mapa__karta--vlavo { transform: translate(-100%, -50%); }
	.dvaja-mapa__karta--vlavo::after {
		left: auto;
		right: -7px;
		border-left: 0;
		border-bottom: 0;
		border-right: 1px solid var(--dvaja-linka);
		border-top: 1px solid var(--dvaja-linka);
	}
}

.dvaja-mapa__vyzva {
	margin: 0;
	color: var(--dvaja-popis);
	font-size: 14px;
}

.dvaja-mapa__foto {
	width: 100%;
	height: auto;
	border-radius: 3px;
	margin-bottom: 12px;
	display: block;
}

.dvaja-mapa__nadpis {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--dvaja-teal);
	margin: 0;
}

.dvaja-mapa__odznak {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	border-radius: 100px;
	padding: 3px 11px;
	margin: 8px 0 12px;
}

.dvaja-mapa__odznak--volne { background: var(--dvaja-teal); }
.dvaja-mapa__odznak--rezervovane { background: var(--dvaja-siva); }

.dvaja-mapa__cena {
	font-size: 21px;
	font-weight: 700;
	color: var(--dvaja-atrament);
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}

.dvaja-mapa__riadok {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--dvaja-linka);
	font-size: 14px;
}

.dvaja-mapa__riadok:last-of-type { border-bottom: 0; }
.dvaja-mapa__riadok span { color: var(--dvaja-popis); }
.dvaja-mapa__riadok b { font-weight: 600; font-variant-numeric: tabular-nums; }

.dvaja-mapa .dvaja-mapa__tlacidlo {
	display: block;
	width: 100%;
	margin-top: 14px;
	text-align: center;
	text-decoration: none;

	background: var(--dvaja-oranzova);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;

	border: 0;
	border-radius: 3px;
	padding: 12px;
	cursor: pointer;
	transition: background-color .15s ease, scale .12s ease;
}

.dvaja-mapa .dvaja-mapa__tlacidlo:hover { background: #d45223; color: #fff; }

/* Stlačenie musí byť cítiť — bez toho pôsobí tlačidlo mŕtvo. 0,96 je hranica,
   pod ktorou už efekt pôsobí prehnane. */
.dvaja-mapa .dvaja-mapa__tlacidlo:active { scale: .96; }
.dvaja-mapa .dvaja-mapa__tlacidlo:focus-visible { outline: 2px solid var(--dvaja-teal); outline-offset: 2px; }

.dvaja-mapa .dvaja-mapa__tlacidlo[disabled] {
	background: var(--dvaja-siva);
	cursor: not-allowed;
}

/* Mobil — karta sa vysunie zospodu --------------------------------------- */

@media (max-width: 767px) {
	.dvaja-mapa__karta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		border-radius: 12px 12px 0 0;
		border: 0;
		background: #fff;
		box-shadow: 0 -6px 28px rgba(0, 0, 0, .22);
		transform: translateY(101%);
		transition: transform .22s ease;
		max-height: 76vh;
		overflow-y: auto;
		min-height: 0;
		padding: 20px 18px 26px;
	}

	.dvaja-mapa__karta.je-otvorena { transform: translateY(0); }
	.dvaja-mapa__karta .dvaja-mapa__vyzva { display: none; }

	/* Hlavička panela drží pri vrchu aj pri rolovaní obsahu. Krížik bol predtým
	   voľne v karte bez `z-index`, takže ho pôdorys prekryl a pri rolovaní odišiel
	   mimo dohľadu — panel sa prakticky nedal zavrieť. */
	.dvaja-mapa .dvaja-mapa__hlavicka {
		position: sticky;
		top: -20px;              /* vyrovná horné odsadenie karty */
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: -20px -18px 8px;
		padding: 10px 18px;
		background: #fff;
		/* Prst pri ťahaní nadol nemá rolovať stránku pod panelom. */
		touch-action: none;
		cursor: grab;
	}

	/* Úchyt — bez neho nič nenapovie, že panel je panel a dá sa stiahnuť. */
	.dvaja-mapa .dvaja-mapa__uchyt {
		width: 40px;
		height: 4px;
		border-radius: 100px;
		background: #cfdcdd;
	}

	.dvaja-mapa .dvaja-mapa__zavriet {
		position: absolute;
		top: 50%;
		right: 8px;
		translate: 0 -50%;
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 50%;
		background: #eef3f4;
		color: var(--dvaja-atrament);
		font-size: 22px;
		line-height: 1;
		cursor: pointer;
	}

	.dvaja-mapa .dvaja-mapa__zavriet:active { scale: .94; }

	/* Ťuknutie vedľa panela je prvé, čo človek na telefóne skúsi. */
	.dvaja-mapa__prekryv {
		position: fixed;
		inset: 0;
		z-index: 9998;
		background: rgba(11, 43, 45, .38);
		opacity: 0;
		pointer-events: none;
		transition: opacity .22s ease;
	}

	.dvaja-mapa.ma-otvorenu-kartu .dvaja-mapa__prekryv {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Na desktope panel ani podklad neexistujú — karta je ukotvený popup.
   Hlavičku treba skryť tiež: na dotykovom notebooku ju JS vykreslí (rozhoduje
   `hover: none`, nie šírka) a ostal by z nej prázdny sivý pruh nad kartou. */
@media (min-width: 768px) {
	.dvaja-mapa__prekryv,
	.dvaja-mapa .dvaja-mapa__hlavicka { display: none; }
}

@media (min-width: 768px) {
	.dvaja-mapa .dvaja-mapa__zavriet { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dvaja-mapa__tvar,
	.dvaja-mapa .dvaja-mapa__bublina,
	.dvaja-mapa__karta { transition: none; }
}

/* -------------------------------------------------------------------------
 * Príbehové bloky lokality ([dvaja_pribeh])
 *
 * Fotka kryje dve tretiny šírky a celú výšku bloku, textový panel je polovica
 * šírky — presahuje teda cez fotku a text na nej leží. Panel je priehľadný na
 * 88 %, takže fotku cezeň jemne tušíš, ale biely text ostáva čitateľný aj na
 * svetlých vizualizáciách. Časť panela mimo fotky podkladá plná farba, takže
 * pôsobí ako jeden kus. Bloky nemajú vonkajšie okraje — na výšku sa dotýkajú.
 * ---------------------------------------------------------------------- */

.dvaja-pribeh {
	/* Farby sa dedia z .dvaja-mapa, ale príbeh stojí samostatne — musí si ich
	   niesť sám, inak by podklad panela vypadol. */
	--dvaja-teal: #1a6367;

	/* Von zo stĺpca stránky na celú šírku okna — netreba roztiahnuté sekcie.
	   Bez width: 100vw, aby zvislý posuvník nespôsobil vodorovné rolovanie. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	color: #fff;
}

.dvaja-pribeh__blok {
	position: relative;
	display: flex;
	justify-content: flex-end;   /* text vpravo, fotka vľavo */
	align-items: stretch;
	/* Strop, nech blok na vysokom monitore nenarastie do nezmyslu. */
	min-height: min(100vh, 780px);
	overflow: hidden;
}

.dvaja-pribeh__foto {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 66.6vw;
	z-index: 0;
}

.dvaja-pribeh__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dvaja-pribeh__panel {
	position: relative;
	z-index: 2;
	width: 50vw;
	display: flex;
	align-items: center;
	padding: clamp(40px, 5.5vw, 96px);
}

/**
 * Podklad panela. Panel je 50vw široký a končí pri okraji okna; fotka siaha po
 * 66,6vw, čiže cez ňu presahuje presne prvou tretinou panela (16,6vw z 50vw).
 * Preto sa farba prelieva: nad fotkou je priehľadná, aby ju bolo cez text vidno,
 * a k okraju plynule tuhne na plnú — prechod tak nikde nevytvorí viditeľný šev.
 */
.dvaja-pribeh__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(26, 99, 103, .62) 0%,
		rgba(26, 99, 103, .86) 14%,
		rgba(26, 99, 103, .95) 26%,
		var(--dvaja-teal) 33.2%,
		var(--dvaja-teal) 100%
	);
}

/* Zrkadlový blok má fotku vpravo — prechod ide opačne. */
.dvaja-pribeh__blok--vpravo .dvaja-pribeh__panel::before {
	background: linear-gradient(
		to left,
		rgba(26, 99, 103, .62) 0%,
		rgba(26, 99, 103, .86) 14%,
		rgba(26, 99, 103, .95) 26%,
		var(--dvaja-teal) 33.2%,
		var(--dvaja-teal) 100%
	);
}

.dvaja-pribeh__text {
	position: relative;
	z-index: 1;
	max-width: 34em;
}

.dvaja-pribeh__eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

.dvaja-pribeh__nadpis {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(28px, 3.4vw, 50px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.dvaja-pribeh__odsek {
	margin: 0;
	color: rgba(255, 255, 255, .92);
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.7;
	/* Zabráni osamotenému slovu na poslednom riadku. */
	text-wrap: pretty;
}

/* Zrkadlový blok — fotka vpravo, text vľavo. */
.dvaja-pribeh__blok--vpravo { justify-content: flex-start; }
.dvaja-pribeh__blok--vpravo .dvaja-pribeh__foto { left: auto; right: 0; }

/* Jemné oživenie pri nabehnutí do obrazu (JS pridá .je-videny). */
.dvaja-pribeh__text > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .6, .2, 1);
}

.dvaja-pribeh__blok.je-videny .dvaja-pribeh__text > * { opacity: 1; transform: none; }
.dvaja-pribeh__blok.je-videny .dvaja-pribeh__nadpis { transition-delay: .08s; }
.dvaja-pribeh__blok.je-videny .dvaja-pribeh__odsek { transition-delay: .16s; }

/* Mobil — fotka cez celú plochu, text na nej. */
@media (max-width: 767px) {
	/**
	 * Na telefóne text NELEŽÍ na fotke, ale pod ňou. Prekrytie je vždy kompromis
	 * — buď je fotka zastretá, alebo text nečitateľný; pod fotkou ten kompromis
	 * zmizne a fotka je vidieť celá.
	 *
	 * Blok = jedna obrazovka. Zámerne `svh`, nie `vh`: na iOS je `100vh` výška
	 * okna BEZ panelov prehliadača, takže spodok bloku by sa schoval za ne.
	 * A zámerne nie `dvh` — tá sa pri rolovaní mení, čo by rozloženie preskakovalo.
	 */
	.dvaja-pribeh__blok {
		display: flex;
		flex-direction: column;
		/* Výška bloku vychádza z obsahu. Naviazanie na výšku okna (`svh`) sa
		   neosvedčilo: blok si vypýtal 540 px pre fotku, ktorá chcela 239 —
		   a keďže sa nevyplnila (viď nižšie), ostal pod ňou biely pás. */
		min-height: 0;
		justify-content: flex-start;
	}

	.dvaja-pribeh__blok::after { display: none; }

	/* Zdrojové vizualizácie sú 3:2 na šírku, takže na 375 px telefóne majú
	   prirodzene ~250 px. 4:3 je mierny orez: fotke pridá výšku a pritom nechá
	   pohľad na ulicu aj záhradu čitateľný. Pevný pomer zároveň znamená, že
	   všetky bloky sú rovnako vysoké — pri `flex: 1` sa líšili podľa dĺžky textu. */
	.dvaja-pribeh__foto,
	.dvaja-pribeh__blok--vpravo .dvaja-pribeh__foto {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 4 / 3;
		flex: none;
	}

	/**
	 * Obrázok musí schránku vyplniť bez ohľadu na to, ako je vysoká.
	 * `height: 100%` sa v pružnom prvku bez pevnej výšky nemá o čo oprieť —
	 * spadne na `auto`, obrázok sa vykreslí vo svojom pomere a `object-fit`
	 * nemá čo orezávať. Presne tak vznikol biely pás 234–300 px pod fotkou.
	 * Absolútne umiestnenie to rieši natrvalo, nielen pre tento pomer.
	 */
	.dvaja-pribeh__foto img {
		position: absolute;
		inset: 0;
	}

	.dvaja-pribeh__panel {
		position: relative;
		width: 100%;
		flex: 0 0 auto;
		align-items: flex-start;
		padding: 30px 20px 40px;
		background: var(--dvaja-teal);
	}

	/* Prekrytie fotky už netreba. Ostáva len krátky prechod nad panelom, aby
	   hrana fotky netvorila ostrý šev — rovnaký dôvod ako pri desktopovom páse.
	   Na 281 px fotke by 72 px zabralo štvrtinu záberu, preto 44. */
	.dvaja-pribeh__panel::before,
	.dvaja-pribeh__blok--vpravo .dvaja-pribeh__panel::before {
		inset: auto 0 100% 0;
		height: 44px;
		background: linear-gradient(to top, var(--dvaja-teal), rgba(26, 99, 103, 0));
	}
}

@media (prefers-reduced-motion: reduce) {
	.dvaja-pribeh__text > * { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------------
 * Video zo stavby ([dvaja_stavba])
 *
 * Záznam je z telefónu na výšku (9:16), takže dostane telefónny formát a nie
 * široký pás — natiahnuté na šírku by sa muselo orezať cez tvár.
 * ---------------------------------------------------------------------- */

.dvaja-stavba {
	--dvaja-teal: #1a6367;
	--dvaja-oranzova: #f36e3e;

	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--dvaja-teal);
	color: #fff;
	padding: clamp(40px, 5vw, 76px) 20px;
}

.dvaja-stavba__obal {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 60px);
	align-items: center;
}

.dvaja-stavba__video video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
	background: #0b2b2d;
	border-radius: 6px;
}

.dvaja-stavba__eyebrow {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

.dvaja-stavba__nadpis {
	margin: 0 0 14px;
	color: #fff;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.015em;
	text-wrap: balance;
}

.dvaja-stavba__odsek {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, .9);
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.6;
	max-width: 34em;
	text-wrap: pretty;
}

/* Štítok s lokalitou a dátumom — bez neho by úvod opäť hovoril len o BK. */
.dvaja-stavba__stitok {
	display: inline-block;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .92);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 100px;
	padding: 6px 14px;
}

.dvaja-stavba .dvaja-stavba__tlacidlo {
	/* Vlastný riadok — štítok je údaj, tlačidlo je akcia; vedľa seba sa lepili. */
	display: block;
	width: fit-content;
	margin-top: 20px;
	background: var(--dvaja-oranzova);
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 13px 28px;
	border-radius: 3px;
	transition: background-color .15s ease, scale .12s ease;
}

.dvaja-stavba .dvaja-stavba__tlacidlo:hover { background: #d45223; color: #fff; }
.dvaja-stavba .dvaja-stavba__tlacidlo:active { scale: .96; }
.dvaja-stavba .dvaja-stavba__tlacidlo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 767px) {
	.dvaja-stavba__obal {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.dvaja-stavba__video { width: min(280px, 80%); }
	.dvaja-stavba__odsek { margin-inline: auto; }
	/* `width: fit-content` by tlačidlo inak pritislo doľava, kým zvyšok je na stred. */
	.dvaja-stavba .dvaja-stavba__tlacidlo { margin-inline: auto; }
}

/* -------------------------------------------------------------------------
 * Výber lokality — úvod webu ([dvaja_vyber])
 *
 * Značková veta a pod ňou dve klikateľné polovice. Pôvodne tu bol jeden hero
 * s bielym textom a tieňom priamo na fotke (nečitateľný podnadpis) a pod ním
 * ešte rozcestník s kartami — výber sa teda na stránke robil dvakrát. Teraz ho
 * robí rovno prvá obrazovka a obe lokality dostanú rovnaký priestor.
 * ---------------------------------------------------------------------- */

.dvaja-vyber {
	--dvaja-teal: #1a6367;
	--dvaja-teal-tmava: #12474a;
	--dvaja-oranzova: #f36e3e;

	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	color: #fff;
}

.dvaja-vyber__uvod {
	background: var(--dvaja-teal);
	text-align: center;
	padding: clamp(26px, 3.4vw, 48px) 20px;
}

.dvaja-vyber__nadpis {
	margin: 0 0 8px;
	color: #fff;
	font-size: clamp(28px, 3.4vw, 46px);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.015em;
	text-wrap: balance;
}

.dvaja-vyber__podnadpis {
	margin: 0;
	color: rgba(255, 255, 255, .88);
	font-size: clamp(15px, 1.3vw, 19px);
	line-height: 1.5;
	text-wrap: pretty;
}

.dvaja-vyber__polovice {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.dvaja-vyber__polovica {
	position: relative;
	display: flex;
	align-items: flex-end;
	/* Zámerne nižšie než pomer strán fotiek (1,35–1,52). Kým bola dlaždica
	   vyššia, `cover` zobrazoval celú výšku vizualizácie — teda hlavne oblohu.
	   Takto sa orez chytí a `object-position` môže držať záber na domoch. */
	min-height: min(56vh, 520px);
	overflow: hidden;
	text-decoration: none;
	color: #fff;
}

.dvaja-vyber__foto {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.dvaja-vyber__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Vizualizácie sú širokouhlé pohľady na ulicu — domy sú v strednom páse,
	   nad nimi veľa oblohy. Ak dôjde k zvislému orezu, drž sa domov. */
	object-position: center 55%;
	transition: transform 700ms cubic-bezier(.2, .6, .2, 1);
}

/* Trvalé stmavenie zdola — panel tak na fotku nadviaže, nie na ňu skočí. */
.dvaja-vyber__foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(11, 43, 45, .5) 0%, rgba(11, 43, 45, .08) 45%, transparent 72%);
}

/* Stmavenie tej polovice, na ktorej práve nie ste — aby bolo jasné, čo si vyberáte. */
.dvaja-vyber__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(11, 43, 45, .38);
	opacity: 0;
	transition: opacity .2s ease;
}

.dvaja-vyber__polovice:hover .dvaja-vyber__polovica .dvaja-vyber__foto::after { opacity: 1; }
.dvaja-vyber__polovice .dvaja-vyber__polovica:hover .dvaja-vyber__foto::after { opacity: 0; }
.dvaja-vyber__polovica:hover .dvaja-vyber__foto img { transform: scale(1.04); }

/* Odozva na stlačenie. Dlaždica je hlavný ovládací prvok celého úvodu a na
   dotyku neexistuje hover — bez tohto teda ťuknutie nedá žiadnu spätnú väzbu
   a stránka pôsobí, že sa zasekla. Selektor je o triedu dlhší než hover
   pravidlá zámerne: pri stlačení myšou platia obe naraz a mobilné prehliadače
   pri ťuknutí navyše nasadia aj `:hover`, takže sa nedá spoliehať na poradie. */
.dvaja-vyber .dvaja-vyber__polovice .dvaja-vyber__polovica:active .dvaja-vyber__foto::after {
	opacity: .6;
	transition-duration: .06s;
}

.dvaja-vyber__panel {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
	background: rgba(26, 99, 103, .92);
	padding: clamp(18px, 1.7vw, 24px) clamp(22px, 2.6vw, 40px);

	/* Dva riadky namiesto štyroch — drobné údaje idú napravo od veľkých.
	   `baseline` je tu podstatné: 12px verzálky vedľa 32px nadpisu by pri
	   zarovnaní na stred opticky plávali. */
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: 18px;
	row-gap: 6px;
}

.dvaja-vyber__nazov   { grid-column: 1; grid-row: 1; }
.dvaja-vyber__eyebrow { grid-column: 2; grid-row: 1; text-align: right; }
.dvaja-vyber__cena    { grid-column: 1; grid-row: 2; }
.dvaja-vyber__odkaz   { grid-column: 2; grid-row: 2; text-align: right; }

.dvaja-vyber__eyebrow,
.dvaja-vyber__nazov,
.dvaja-vyber__cena,
.dvaja-vyber__popis,
.dvaja-vyber__odkaz { display: block; }

.dvaja-vyber__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

.dvaja-vyber__nazov {
	font-size: clamp(23px, 2.1vw, 32px);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -.015em;
}

.dvaja-vyber__cena {
	font-size: clamp(16px, 1.4vw, 21px);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin-bottom: 0;
}

.dvaja-vyber__popis {
	font-size: clamp(13px, 1.05vw, 15px);
	color: rgba(255, 255, 255, .84);
	line-height: 1.5;
	text-wrap: pretty;
}

.dvaja-vyber__odkaz {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--dvaja-oranzova);
}

.dvaja-vyber__polovica:hover .dvaja-vyber__odkaz { color: #fff; }

.dvaja-vyber__polovica:focus-visible {
	outline: 3px solid var(--dvaja-oranzova);
	outline-offset: -3px;
}

/* Panel sa nezalamuje podľa okna, ale podľa šírky DLAŽDICE — a tá je polovica
   okna. Dve dlaždice vedľa seba pri 768 px majú 384 px, čo je rovnako málo ako
   telefón: „Križovany nad Dudváhom" a štítok etapy sa vedľa seba nezmestia.
   Preto má panel vlastnú hranicu, vyššiu než majú dlaždice. */
@media (max-width: 1100px) {
	.dvaja-vyber__panel { grid-template-columns: 1fr; row-gap: 4px; }
	.dvaja-vyber__nazov,
	.dvaja-vyber__eyebrow,
	.dvaja-vyber__cena,
	.dvaja-vyber__odkaz { grid-column: 1; grid-row: auto; text-align: left; }
	.dvaja-vyber__odkaz { margin-top: 8px; }
}

/**
 * Mobil — panel prestáva ležať na fotke.
 *
 * Rovnaká úprava ako v hero a v príbehových blokoch: dlaždica je stĺpec, fotka
 * hore v pomere 4:3, text pod ňou na plnej petrolejovej. Prekrytie na 92 %
 * zaberalo spodných ~40 % fotky a z vizualizácie ostal pruh.
 */
@media (max-width: 767px) {
	.dvaja-vyber__polovice { grid-template-columns: 1fr; }

	.dvaja-vyber__polovica {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.dvaja-vyber__foto {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 4 / 3;
		flex: none;
	}

	/* `height: 100%` sa v pružnom prvku nemá o čo oprieť — tá istá pasca, ktorá
	   pod fotkami v blokoch nechávala biely pás. */
	.dvaja-vyber__foto img {
		position: absolute;
		inset: 0;
	}

	/* Trvalé stmavenie zdola už netreba (slúžilo panelu na fotke); ostáva z neho
	   krátky prechod do petrolejovej, aby hrana fotky netvorila ostrý šev. */
	.dvaja-vyber__foto::before {
		top: auto;
		height: 44px;
		background: linear-gradient(to top, var(--dvaja-teal), rgba(26, 99, 103, 0));
	}

	.dvaja-vyber__panel {
		flex: none;
		background: var(--dvaja-teal);
	}

	/* Zväčšenie fotky pri prejdení myšou na dotyku nedáva zmysel a v stĺpci by
	   navyše vytŕčalo z rámu. */
	.dvaja-vyber__polovica:hover .dvaja-vyber__foto img { transform: none; }

	/* Na dotyku nie je „na čom stojím", takže stmavovanie druhej polovice nedáva
	   zmysel. Vrstvu ale nevypínam cez `display: none` — tu je jediným nosičom
	   odozvy na stlačenie, ktorá je práve na dotyku najpotrebnejšia. */
	.dvaja-vyber__polovice:hover .dvaja-vyber__polovica .dvaja-vyber__foto::after { opacity: 0; }
}

/* -------------------------------------------------------------------------
 * Úvodný pás ([dvaja_hero])
 *
 * Text NIE je na holej fotke — leží na farebnom paneli v ľavom dolnom rohu.
 * Predtým bol biely nadpis priamo na vizualizácii (biela fasáda, bledá obloha)
 * a jednoducho zanikol. Panel drží kontrast bez ohľadu na fotku; navyše je to
 * ten istý jazyk ako príbehové bloky nižšie, takže hero k nim patrí.
 *
 * Písmo sa dá vymeniť jedným miestom — premennou --dvaja-hero-pismo.
 * ---------------------------------------------------------------------- */

.dvaja-hero {
	--dvaja-teal: #1a6367;
	--dvaja-oranzova: #f36e3e;
	--dvaja-hero-pismo: inherit;

	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	display: flex;
	align-items: flex-start;   /* panel vľavo hore */
	min-height: min(68vh, 760px);
	overflow: hidden;
	color: #fff;
}

.dvaja-hero__foto {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.dvaja-hero__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Jemné stmavenie zhora — na tej strane, kde sedí panel, aby na fotke nepôsobil
   ako nalepená nálepka. */
.dvaja-hero__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(11, 43, 45, .55) 0%, rgba(11, 43, 45, .12) 42%, transparent 70%);
}

/* Panel sa šírkou prispôsobí obsahu (`fit-content`), nie naopak — inak by na
   dlhom názve („Križovany nad Dudváhom") zaberal pol fotky. Šírku určuje
   nadpis; podnadpis je užší, aby ho neroztiahol. */
.dvaja-hero__panel {
	position: relative;
	z-index: 1;
	width: fit-content;
	max-width: min(54rem, 94%);
	background: rgba(26, 99, 103, .92);
	padding: clamp(18px, 1.9vw, 26px) clamp(22px, 2.8vw, 46px);
}

.dvaja-hero__eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

.dvaja-hero__nadpis {
	font-family: var(--dvaja-hero-pismo);
	margin: 0 0 8px;
	color: #fff;
	font-size: clamp(30px, 3.6vw, 52px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.015em;
}

.dvaja-hero__text {
	margin: 0;
	color: rgba(255, 255, 255, .92);
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.55;
	max-width: 30em;
	/* Šírku panela určuje nadpis, takže podnadpis sa občas zlomí — bez tohto
	   ostane na druhom riadku visieť samotné „€.". */
	text-wrap: balance;
}

.dvaja-hero .dvaja-hero__tlacidlo {
	display: inline-block;
	margin-top: 14px;
	background: var(--dvaja-oranzova);
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 13px 28px;
	border-radius: 3px;
	transition: background-color .15s ease, scale .12s ease;
}

.dvaja-hero .dvaja-hero__tlacidlo:hover { background: #d45223; color: #fff; }
.dvaja-hero .dvaja-hero__tlacidlo:active { scale: .96; }
.dvaja-hero .dvaja-hero__tlacidlo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/**
 * Mobil — panel prestáva ležať na fotke.
 *
 * Prekrýval ju na 56 % a keďže sedí hore, zakrýval práve to zaujímavé — domy
 * a oblohu — a z fotky ostával spodok, teda asfalt. Rovnaké riešenie ako
 * v príbehových blokoch: fotka a text spolu nesúperia. Hero sa tým zaradí aj
 * do rovnakého rytmu — fotka, text, fotka, text.
 */
@media (max-width: 767px) {
	.dvaja-hero {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	/* Zdrojová vizualizácia je 1725 × 1334, teda takmer presne 4:3 — orez je
	   zanedbateľný a pomer sedí s príbehovými blokmi. */
	.dvaja-hero__foto {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 4 / 3;
		flex: none;
	}

	/* `height: 100%` sa v pružnom prvku nemá o čo oprieť — rovnaká pasca, ktorá
	   pod fotkami v blokoch nechávala biely pás. */
	.dvaja-hero__foto img {
		position: absolute;
		inset: 0;
	}

	/* Stmavenie zhora existovalo kvôli panelu na fotke; ten už na nej nie je. */
	.dvaja-hero__foto::after { display: none; }

	.dvaja-hero__panel {
		width: 100%;
		max-width: 100%;
		flex: none;
		background: var(--dvaja-teal);
		padding: 28px 20px 32px;
	}

	/* Krátky prechod nad panelom, aby hrana fotky netvorila ostrý šev. */
	.dvaja-hero__panel::before {
		content: "";
		position: absolute;
		inset: auto 0 100% 0;
		height: 44px;
		background: linear-gradient(to top, var(--dvaja-teal), rgba(26, 99, 103, 0));
		pointer-events: none;
	}
}

/* -------------------------------------------------------------------------
 * Záverečný pás — pozvánka na druhú lokalitu ([dvaja_cta])
 *
 * Fotka cez celú šírku s petrolejovým prekrytím a textom na stred. Fotka je tu
 * dôležitá aj funkčne: pás sedí tesne nad pätičkou, ktorá je tiež petrolejová —
 * bez obrázka by sa oba bloky zliali do jednej plochy.
 * ---------------------------------------------------------------------- */

.dvaja-cta {
	--dvaja-teal: #1a6367;
	--dvaja-oranzova: #f36e3e;

	position: relative;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: min(58vh, 460px);
	overflow: hidden;
	text-align: center;
	color: #fff;
}

.dvaja-cta__foto {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.dvaja-cta__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Prekrytie — dolu hustejšie, aby pás k pätičke plynule stmavol. */
.dvaja-cta__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(26, 99, 103, .72), rgba(18, 71, 74, .92));
}

.dvaja-cta__obsah {
	position: relative;
	z-index: 1;
	max-width: 40em;
	padding: clamp(48px, 6vw, 90px) 20px;
}

.dvaja-cta__nadpis {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
}

.dvaja-cta__text {
	margin: 0 0 26px;
	color: rgba(255, 255, 255, .9);
	font-size: clamp(15px, 1.2vw, 18px);
	line-height: 1.6;
	/* Zabráni osamotenému slovu na poslednom riadku. */
	text-wrap: pretty;
}

.dvaja-cta .dvaja-cta__tlacidlo {
	display: inline-block;
	background: var(--dvaja-oranzova);
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 15px 32px;
	border-radius: 3px;
	transition: background-color .15s ease, scale .12s ease;
}

.dvaja-cta .dvaja-cta__tlacidlo:hover { background: #d45223; color: #fff; }
.dvaja-cta .dvaja-cta__tlacidlo:active { scale: .96; }
.dvaja-cta .dvaja-cta__tlacidlo:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* -------------------------------------------------------------------------
 * Pôdorys s pozemkom — spoločný pre kartu (malý teaser) aj podstránku (veľký).
 * Vybraná jednotka ostáva plná; stlmenie leží nad susednou polovicou; štítok
 * je nad vybranou. Deliaca čiara je % šírky obrázka (poloha steny z výkresu).
 * ---------------------------------------------------------------------- */

.dvaja-podorys {
	position: relative;
	width: 100%;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	line-height: 0;
}

.dvaja-podorys img {
	display: block;
	width: 100%;
	height: auto;
}

.dvaja-podorys__stlm {
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba(255, 255, 255, .6);
	pointer-events: none;
}

.dvaja-podorys__stitok {
	position: absolute;
	top: 5%;
	line-height: 1;
	background: var(--dvaja-teal);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 6px 11px;
	border-radius: 5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.dvaja-podorys--vlavo .dvaja-podorys__stitok { left: 4%; }
.dvaja-podorys--vpravo .dvaja-podorys__stitok { right: 4%; }

/* Teaser v karte — pôdorys je vysoký (na výšku), preto orežeme na pás s domom
   (object-position mieri do stredu-hora, kde sú miestnosti). Stlmenie aj štítok
   sa polohujú v % šírky, takže orez výšky ich nerozhodí. */
.dvaja-mapa__karta .dvaja-podorys {
	margin-bottom: 12px;
	max-height: 210px;
	/* Obrys obrázka musí byť čistá čierna, nie tónovaná neutrálna — tónovaný
	   obrys chytí farbu podkladu a na hrane pôsobí ako špina. */
	border: 1px solid rgba(0, 0, 0, .10);
}

.dvaja-mapa__karta .dvaja-podorys img {
	height: 210px;
	object-fit: cover;
	object-position: center 40%;
}

.dvaja-mapa__karta .dvaja-podorys__stitok { font-size: 12px; padding: 5px 9px; }

/* „Zobraziť dom" — vedie hlbšie na podstránku, preto petrolejová (výzva
   „Mám záujem" ostáva oranžová). */
.dvaja-mapa .dvaja-mapa__tlacidlo--plan { background: var(--dvaja-teal); }
.dvaja-mapa .dvaja-mapa__tlacidlo--plan:hover { background: var(--dvaja-teal-tmava); color: #fff; }

/* -------------------------------------------------------------------------
 * Podstránka jednotky
 * ---------------------------------------------------------------------- */

.dvaja-jednotka__wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(20px, 4vw, 48px) 20px;
}

.dvaja-jednotka__spat {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--dvaja-teal);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	/* Jediná cesta späť na mapu; meral 105 × 25 px. Odsadenie ho zdvihne nad
	   44 px bez zmeny vzhľadu textu — záporný ľavý okraj vráti optické
	   zarovnanie k ľavej hrane obsahu. */
	padding: 10px 12px;
	margin-left: -12px;
	margin-bottom: 12px;
}

.dvaja-jednotka__spat:hover { color: var(--dvaja-teal-tmava); }

.dvaja-jednotka__mriezka {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr);
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

@media (max-width: 767px) {
	.dvaja-jednotka__mriezka { grid-template-columns: 1fr; }
}

.dvaja-jednotka__plan .dvaja-podorys { border: 1px solid rgba(0, 0, 0, .10); }

.dvaja-jednotka__plan-popis {
	margin: 12px 2px 0;
	font-size: 13px;
	color: var(--dvaja-popis);
	line-height: 1.5;
}

.dvaja-jednotka__foto { width: 100%; height: auto; border-radius: 8px; }

.dvaja-jednotka__panel { position: sticky; top: 20px; }

@media (max-width: 767px) {
	.dvaja-jednotka__panel { position: static; }
}

.dvaja-jednotka__lok {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 12px;
	font-weight: 600;
	color: var(--dvaja-teal);
	margin: 0 0 6px;
}

.dvaja-jednotka__nadpis {
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.05;
	margin: 0 0 12px;
	color: var(--dvaja-atrament);
}

.dvaja-jednotka__popis {
	font-size: 15px;
	line-height: 1.6;
	color: var(--dvaja-atrament);
	margin: 14px 0 4px;
	/* Zabráni osamotenému slovu na poslednom riadku. */
	text-wrap: pretty;
}

.dvaja-jednotka__popis p { margin: 0 0 10px; }
.dvaja-jednotka__popis p:last-child { margin-bottom: 0; }

.dvaja-jednotka__udaje { margin: 18px 0 0; }

.dvaja-jednotka__riadok {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--dvaja-linka);
	font-size: 15px;
}

.dvaja-jednotka__riadok dt { margin: 0; color: var(--dvaja-popis); }
.dvaja-jednotka__riadok dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.dvaja-jednotka .dvaja-mapa__tlacidlo { margin-top: 22px; }

.dvaja-mapa .dvaja-mapa__tlacidlo[aria-disabled="true"] {
	background: var(--dvaja-siva);
	cursor: not-allowed;
}