/**
 * Martyn SVJ – styly pro zobrazení na webu.
 */

.svj-app {
	--svj-text: #1f2933;
	--svj-text-tlumeny: #6b7684;
	--svj-pozadi: #ffffff;
	--svj-plocha: #f4f6f8;
	--svj-ramecek: #dbe1e8;
	--svj-akcent: #2f6f4e;
	--svj-akcent-svetly: #e6f2ec;
	--svj-okno: #eaf1f7;
	--svj-okno-ramecek: #c6d4e0;
	/* Fasáda podle skutečného domu (foto IMG_20250505_180014.JPG):
	   teple bílé zateplení, terakotový pás po okrajích a přes prostřední
	   sekci se vchodem. Beton zůstává pro střechu a závětří. */
	--svj-fasada: #ebe8e2;
	--svj-fasada-stin: #ddd8cf;
	--svj-pas: #e08a55;
	--svj-pas-tmavy: #c4703c;
	--svj-beton: #e2e6ea;
	--svj-beton-tmavy: #cfd5db;
	--svj-vlastnik-plocha: #fbf0cd;
	--svj-vlastnik-ramecek: #e8d69a;
	--svj-vlastnik-text: #6a5314;
	--svj-najemnik-plocha: #dbe8fa;
	--svj-najemnik-ramecek: #b3cdea;
	--svj-najemnik-text: #1b446f;
	--svj-stin: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .08);
	--svj-radius: 10px;

	color: var(--svj-text);
	font-size: 16px;
	line-height: 1.5;
	container-type: inline-size;
}

/* Tmavý režim se záměrně nepoužívá.
 *
 * Web kolem (šablona utb-ft / martyn-modry) je jen světlý, takže při zapnutém
 * tmavém režimu prohlížeče vznikal tmavý ostrůvek uvnitř světlé stránky a text
 * na něm byl špatně čitelný. V administraci k tomu nikdy nedošlo, protože
 * svj-admin.css paletu přepisoval zpátky na světlou – proto tam vizualizace
 * vypadala lépe. Sjednoceno 4. 8. 2026: světlá paleta platí všude.
 */

.svj-app *,
.svj-app *::before,
.svj-app *::after {
	box-sizing: border-box;
}

/* ---------- Hláška ---------- */

.svj-hlaska {
	padding: 24px;
	border: 1px solid #dbe1e8;
	border-radius: 10px;
	background: #f4f6f8;
	text-align: center;
	color: #1f2933;
}


.svj-hlaska p {
	margin: 0 0 12px;
}

.svj-hlaska p:last-child {
	margin-bottom: 0;
}

.svj-tlacitko {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 8px;
	background: #2f6f4e;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

.svj-tlacitko:hover,
.svj-tlacitko:focus {
	background: #255840;
	color: #fff;
}

/* ---------- Vyhledávání ---------- */

.svj-hledani {
	margin-bottom: 28px;
}

.svj-hledani__pole {
	position: relative;
	display: flex;
	align-items: center;
}

.svj-hledani__ikona {
	position: absolute;
	left: 14px;
	width: 20px;
	height: 20px;
	fill: var(--svj-text-tlumeny);
	pointer-events: none;
}

.svj-hledani__input {
	width: 100%;
	padding: 13px 44px 13px 44px;
	border: 1px solid var(--svj-ramecek);
	border-radius: var(--svj-radius);
	background: var(--svj-pozadi);
	color: var(--svj-text);
	font-size: 16px;
	font-family: inherit;
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}

.svj-hledani__input:focus {
	outline: none;
	border-color: var(--svj-akcent);
	box-shadow: 0 0 0 3px var(--svj-akcent-svetly);
}

.svj-hledani__input::-webkit-search-cancel-button {
	display: none;
}

.svj-hledani__zrusit {
	position: absolute;
	right: 10px;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: var(--svj-plocha);
	color: var(--svj-text-tlumeny);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.svj-hledani__zrusit:hover {
	background: var(--svj-ramecek);
	color: var(--svj-text);
}

.svj-hledani__stav {
	margin: 10px 2px 0;
	font-size: 14px;
	color: var(--svj-text-tlumeny);
}

/* ---------- Výsledky hledání ---------- */

.svj-vysledky {
	margin-top: 14px;
	border: 1px solid var(--svj-ramecek);
	border-radius: var(--svj-radius);
	background: var(--svj-pozadi);
	box-shadow: var(--svj-stin);
	overflow: hidden;
	max-height: 340px;
	overflow-y: auto;
}

.svj-vysledek {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 11px 16px;
	border: 0;
	border-bottom: 1px solid var(--svj-ramecek);
	background: transparent;
	color: var(--svj-text);
	font-family: inherit;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
}

.svj-vysledek:last-child {
	border-bottom: 0;
}

.svj-vysledek:hover,
.svj-vysledek:focus {
	background: var(--svj-akcent-svetly);
	outline: none;
}

.svj-vysledek__cislo {
	flex: 0 0 auto;
	min-width: 46px;
	padding: 3px 8px;
	border-radius: 6px;
	background: var(--svj-akcent);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.svj-vysledek__jmeno {
	font-weight: 600;
}

.svj-vysledek__detail {
	margin-left: auto;
	font-size: 13px;
	color: var(--svj-text-tlumeny);
	white-space: nowrap;
}

.svj-vysledky__prazdno {
	padding: 20px;
	text-align: center;
	color: var(--svj-text-tlumeny);
}

/* ---------- Paneláky ---------- */

.svj-domy {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: center;
	align-items: flex-start;
}

.svj-dum {
	flex: 1 1 320px;
	max-width: 460px;
	min-width: 280px;

	/* Rozměry, ze kterých se počítá poloha svislého pásu na fasádě.
	   Musí odpovídat skutečnému rozvržení podlaží:
	   [odsazení][štítek patra][mezera][byt][mezera][byt][mezera][byt][odsazení] */
	--svj-pad: 10px;
	--svj-stitek: 20px;
	--svj-mezera: 8px;
	--svj-sloupec: calc((100% - 2 * var(--svj-pad) - var(--svj-stitek) - 3 * var(--svj-mezera)) / 3);
	/* Pás vede přes prostřední byt, tedy za první sloupec a mezeru. */
	--svj-pas-od: calc(var(--svj-pad) + var(--svj-stitek) + var(--svj-mezera) + var(--svj-sloupec) + var(--svj-mezera));
	--svj-pas-okraj: 9px;
}

.svj-dum__hlavicka {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 10px;
	padding-left: 4px;
}

.svj-dum__cislo {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.svj-dum__popis {
	font-size: 14px;
	color: var(--svj-text-tlumeny);
}

/* Atika nad posledním patrem je celá v barvě pásu – jako na skutečném domě,
   kde barevný pruh obíhá dům i pod střechou. Spodní odstín je shodný se
   svislými pásy níž, aby na sebe bez švu navázaly. */
.svj-dum__strecha {
	height: 14px;
	border-radius: 8px 8px 0 0;
	background: linear-gradient(180deg, var(--svj-pas-tmavy), var(--svj-pas));
	border: 1px solid var(--svj-pas-tmavy);
	border-bottom: 0;
}

.svj-dum__telo {
	position: relative;
	z-index: 0;
	border: 1px solid var(--svj-ramecek);
	border-top: 0;
	border-bottom: 0;
	background: var(--svj-fasada);
	padding: var(--svj-pad);
	display: flex;
	flex-direction: column;
	gap: var(--svj-mezera);
}

.svj-dum__vchod {
	position: relative;
	z-index: 0;
	height: 30px;
	overflow: hidden;
	border: 1px solid var(--svj-ramecek);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	background: linear-gradient(180deg, var(--svj-fasada), var(--svj-fasada-stin));
	display: flex;
	align-items: flex-start;
	/* Dveře se zarovnají doprostřed pásu, ne doprostřed domu. */
	justify-content: flex-start;
	padding-left: calc(var(--svj-pas-od) + (var(--svj-sloupec) - 46px) / 2);
}

/* Svislé pásy fasády – po obou okrajích a přes prostřední byty. Navazují
   nahoře na celobarevnou atiku a dole procházejí až přes závětří, takže
   stavbu uzavírají dokola.
   z-index: -1 je drží nad podkladem domu, ale pod dlaždicemi bytů
   i pod čísly podlaží. Rodič má proto z-index: 0, aby vznikl
   stavěcí kontext a pás nezmizel za vlastním pozadím. */
.svj-dum__telo::before,
.svj-dum__vchod::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(90deg, var(--svj-pas) 0 var(--svj-pas-okraj), transparent var(--svj-pas-okraj)),
		linear-gradient(270deg, var(--svj-pas) 0 var(--svj-pas-okraj), transparent var(--svj-pas-okraj)),
		linear-gradient(90deg,
			transparent 0 var(--svj-pas-od),
			var(--svj-pas) var(--svj-pas-od) calc(var(--svj-pas-od) + var(--svj-sloupec)),
			transparent calc(var(--svj-pas-od) + var(--svj-sloupec)));
}

.svj-dum__dvere {
	width: 46px;
	height: 22px;
	border-radius: 4px 4px 0 0;
	background: var(--svj-pas-tmavy);
	border: 1px solid rgba(0, 0, 0, .12);
	border-bottom: 0;
}

/* ---------- Podlaží ---------- */

/* Rozměry níž vycházejí z proměnných na .svj-dum – podle nich se počítá
   poloha svislého pásu na fasádě. Neměnit je na pevné hodnoty. */
.svj-podlazi {
	display: flex;
	align-items: stretch;
	gap: var(--svj-mezera);
}

.svj-podlazi__stitek {
	flex: 0 0 var(--svj-stitek);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--svj-text-tlumeny);
	font-variant-numeric: tabular-nums;
}

.svj-podlazi__byty {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--svj-mezera);
}

/* Prostřední byt stojí v barevném pásu – teplejší rámeček to propojí. */
.svj-podlazi__byty > .svj-byt:nth-child(2) {
	border-color: var(--svj-pas-tmavy);
}

/* ---------- Byt ---------- */

.svj-byt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Obsah začíná nahoře, ne na středu – dlaždice v jednom podlaží mají kvůli
	   různě dlouhým jménům různou výšku a na střed by se rozjelo zarovnání
	   čísel bytů i štítků vedle sebe. */
	justify-content: flex-start;
	gap: 2px;
	min-height: 62px;
	padding: 8px 9px;
	border: 1px solid var(--svj-okno-ramecek);
	border-radius: 6px;
	background: var(--svj-okno);
	color: var(--svj-text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
}

.svj-byt:hover,
.svj-byt:focus-visible {
	transform: translateY(-2px);
	border-color: var(--svj-akcent);
	box-shadow: var(--svj-stin);
	outline: none;
	z-index: 1;
}

.svj-byt__cislo {
	font-size: 12px;
	font-weight: 700;
	color: var(--svj-akcent);
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}

.svj-byt__jmeno {
	font-size: 12px;
	line-height: 1.25;
	color: var(--svj-text);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: break-word;
	hyphens: auto;
}

/* Jméno převzaté ze sloupce Zvonky zvýrazníme. */
.svj-byt__jmeno.je-zvonek {
	font-weight: 600;
}

/* Jména pod zvonkem – vlastník žlutě, nájemník modře.
   Celé jméno se na šířku dlaždice nevejde, proto se zalamuje. */
.svj-byt__osoba {
	max-width: 100%;
	padding: 1px 5px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-size: 11px;
	line-height: 1.3;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.svj-byt__osoba--vlastnik {
	background: var(--svj-vlastnik-plocha);
	border-color: var(--svj-vlastnik-ramecek);
	color: var(--svj-vlastnik-text);
}

.svj-byt__osoba--najemnik {
	background: var(--svj-najemnik-plocha);
	border-color: var(--svj-najemnik-ramecek);
	color: var(--svj-najemnik-text);
}

.svj-byt__osoby {
	position: absolute;
	top: 5px;
	right: 6px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--svj-akcent-svetly);
	color: var(--svj-akcent);
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Stavy při vyhledávání */
.svj-byt.je-zhasly {
	opacity: .28;
	filter: grayscale(1);
}

.svj-byt.je-nalezeny {
	border-color: var(--svj-akcent);
	background: var(--svj-akcent-svetly);
	box-shadow: 0 0 0 2px var(--svj-akcent);
}

/* ---------- Modal ---------- */

.svj-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.svj-modal[hidden] {
	display: none;
}

.svj-modal__pozadi {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, .55);
	backdrop-filter: blur(2px);
	animation: svj-fade .15s ease;
}

.svj-modal__okno {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 86vh;
	overflow-y: auto;
	border-radius: 14px;
	background: var(--svj-pozadi, #fff);
	color: var(--svj-text, #1f2933);
	box-shadow: 0 20px 60px rgba(16, 24, 40, .3);
	animation: svj-vyjed .18s ease;
}


@keyframes svj-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes svj-vyjed {
	from { opacity: 0; transform: translateY(12px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

.svj-modal__zavrit {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(127, 140, 155, .14);
	color: inherit;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.svj-modal__zavrit:hover {
	background: rgba(127, 140, 155, .28);
}

.svj-modal__obsah {
	padding: 26px 28px 28px;
}

/* Obsah modalu */

.svj-detail__hlavicka {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	padding-right: 40px;
}

.svj-detail__cislo {
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
	border-radius: 12px;
	background: var(--svj-akcent, #2f6f4e);
	color: #fff;
	font-size: 21px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}

.svj-detail__nadpis {
	margin: 0 0 3px;
	font-size: 20px;
	line-height: 1.25;
	font-weight: 700;
}

.svj-detail__umisteni {
	margin: 0;
	font-size: 14px;
	color: var(--svj-text-tlumeny, #6b7684);
}

.svj-sekce {
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--svj-ramecek, #dbe1e8);
}

.svj-sekce:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.svj-sekce__nadpis {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--svj-text-tlumeny, #6b7684);
}

/* Zvýrazněný blok se zvonky – hlavní požadovaná informace. */
.svj-zvonky {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.svj-zvonek {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--svj-akcent, #2f6f4e);
	border-radius: 999px;
	background: var(--svj-akcent-svetly, #e6f2ec);
	color: var(--svj-akcent, #2f6f4e);
	font-weight: 600;
	font-size: 15px;
}

.svj-zvonek::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.svj-zvonky__chybi {
	margin: 0;
	font-size: 14px;
	font-style: italic;
	color: var(--svj-text-tlumeny, #6b7684);
}

.svj-radky {
	display: grid;
	gap: 9px;
}

.svj-radek {
	display: grid;
	grid-template-columns: 108px 1fr;
	gap: 12px;
	align-items: baseline;
	font-size: 15px;
}

.svj-radek__popisek {
	color: var(--svj-text-tlumeny, #6b7684);
	font-size: 13px;
}

.svj-radek__hodnota {
	word-break: break-word;
}

.svj-radek__hodnota a {
	color: var(--svj-akcent, #2f6f4e);
	text-decoration: none;
	font-weight: 600;
}

.svj-radek__hodnota a:hover {
	text-decoration: underline;
}

.svj-radek__hodnota.je-prazdny {
	color: var(--svj-text-tlumeny, #6b7684);
	font-style: italic;
}

.svj-poznamka {
	margin: 0;
	padding: 13px 15px;
	border-left: 3px solid #d9a441;
	border-radius: 0 8px 8px 0;
	background: rgba(217, 164, 65, .1);
	font-size: 14px;
	line-height: 1.55;
	white-space: pre-line;
}

/* ---------- Responzivita ---------- */

@container (max-width: 700px) {
	.svj-domy {
		gap: 24px;
	}
}

@media (max-width: 640px) {
	.svj-domy {
		flex-direction: column;
		align-items: stretch;
		gap: 26px;
	}

	.svj-dum {
		max-width: none;
	}

	.svj-byt {
		min-height: 56px;
	}

	.svj-modal {
		padding: 0;
		align-items: flex-end;
	}

	.svj-modal__okno {
		max-width: none;
		max-height: 92vh;
		border-radius: 16px 16px 0 0;
	}

	.svj-modal__obsah {
		padding: 22px 20px 26px;
	}

	.svj-radek {
		grid-template-columns: 92px 1fr;
		gap: 10px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.svj-app *,
	.svj-modal * {
		animation: none !important;
		transition: none !important;
	}
}