/**
 * Interaktivní model + ceníková tabulka.
 *
 * Barvy se ladí přes CSS proměnné níže — zbytek souboru se řídí jimi.
 * Image Map Pro píše styly objektů do <style> přes [data-object-id]; pravidla
 * modelu mají vyšší specificitu (kontejner mapy + .imp-objects + třída),
 * takže se obejdou bez !important.
 */

:root {
	/* Barvy designu — globální proměnné Bricks mají přednost, hex je záloha */
	--model-darkest: var(--darkest, #2e2a24);
	--model-creamy: var(--creamy, #e8dfd3);
	--model-creamy2: var(--creamy2, #bbaf9f);
	--model-creamy-very-light: #f9f7f6;
	--model-accent: var(--accent-color, #e2b162);
	--model-beige-400: #9e968b;
	--model-taupe-400: #92887b;
	--model-taupe-500: #6d665b;
	--model-taupe-essential: #4c453b;

	/* Stavy bytů — legenda v designu */
	--model-status-available: #c5e6b9;
	--model-status-reserved: #edd4b2;
	--model-status-sold: #f4baac;
	--model-status-unavailable: #dad5d3;

	/* Text stavu v tooltipu bytu: volný z designu, ostatní ztmavené barvy legendy */
	--model-status-available-text: #86b573;
	--model-status-reserved-text: #c29a63;
	--model-status-sold-text: #d0806d;
	--model-status-unavailable-text: #9e968b;
}

/* ==================================================
   MODEL — SPOLEČNÉ (Image Map Pro)
   ================================================== */

/* Ovládací prvky IMP (zoom, přepínač artboardů) design nemá */
[data-model-facade] .imp-ui,
[data-unit-plan] .imp-ui {
	display: none;
}

[data-model-facade] [data-image-map-name],
[data-unit-plan] [data-image-map-name] {
	width: 100%;
}

/* IMP dává vrstvě objektů z-index — izolovaná skupina, ve které by se mix-blend-mode nemíchal s obrázkem */
[data-model-facade] .imp-objects,
[data-unit-plan] .imp-objects {
	z-index: auto;
}

[data-model-facade] .imp-image-backgrounds,
[data-unit-plan] .imp-image-backgrounds {
	z-index: auto;
	pointer-events: none;
}

/* Po přepnutí artboardu IMP vloží obrázek za objekty — neprůhledný podklad by je překryl */
[data-model-facade] .imp-image,
[data-unit-plan] .imp-image {
	z-index: -1;
}

/* Výchozí styl objektů z editoru IMP se nepoužívá — vzhled řídí třídy z model.js */
[data-model-facade] .imp-objects .imp-object,
[data-unit-plan] .imp-objects .imp-object,
[data-unit-plan] .imp-objects .imp-object-poly {
	background: transparent;
	border: 0;
	border-radius: 0;
	opacity: 1;
	filter: none;
	fill: transparent;
	stroke: transparent;
	cursor: default;
}

/* ==================================================
   MODEL — FASÁDA V HERO (c_model_facade_html)
   ================================================== */

/* Bricks obalí výstup Code elementu do .brxe-code — obal nesmí být containing block mapy */
.brxe-section.cenik-hero > :has(> .cenik-hero__map) {
	position: static;
}

/* Mapa drží poměr fotky a sedí na spodní hraně — nižší hero ořízne jen nebe nahoře */
.brxe-section.cenik-hero .cenik-hero__map {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}

/* Přechod z hero leží nad fotkou, ale pod pruhy pater */
.cenik-hero__map .imp-objects::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(206.93deg, rgba(0, 0, 0, 0) 48.66%, rgba(0, 0, 0, 0.39) 87.84%);
	pointer-events: none;
}

[data-model-facade] .imp-objects .imp-object.model-strip {
	cursor: pointer;
}

/* Popisky sekcí nad fasádou (Figma: Nudista Medium 26 / 1366, y 324, šedé 30 %, sekce pod myší bílá) */
.cenik-hero__sections {
	position: absolute;
	inset: 0;
	z-index: 2;
	container-type: inline-size;
	pointer-events: none;
}

.cenik-hero__section {
	position: absolute;
	top: 41.54%;
	color: #ffffff;
	font-family: "nudista-web", sans-serif;
	font-size: calc(100cqw * 26 / 1366);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	opacity: 0.3;
	transition: opacity 0.3s ease;
}

.cenik-hero__section[data-model-section="1"] {
	left: calc(100% * 49 / 1366);
}

.cenik-hero__section[data-model-section="2"] {
	left: calc(100% * 503 / 1366);
}

.cenik-hero__section[data-model-section="3"] {
	left: calc(100% * 864 / 1366);
}

.cenik-hero__section.is-active {
	opacity: 1;
}

/*
 * Patro pod myší — vrstvy jako ve Figmě: prodejná budova = zlatá multiply (::before)
 * + zlatá 27 % s čárkovaným obrysem (::after); neprodejná šedě s bílými čárkami.
 */
[data-model-facade] .imp-objects .imp-object.is-floor-active.is-sellable::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--model-accent);
	mix-blend-mode: multiply;
	pointer-events: none;
}

[data-model-facade] .imp-objects .imp-object.is-floor-active:not(.is-sellable) {
	background-color: rgba(225, 224, 224, 0.5);
}

[data-model-facade] .imp-objects .imp-object.is-floor-active::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	pointer-events: none;
}

[data-model-facade] .imp-objects .imp-object.is-floor-active.is-sellable::after {
	background-color: rgba(226, 177, 98, 0.27);
	background-image:
		repeating-linear-gradient(90deg, var(--model-accent) 0 0.6rem, transparent 0.6rem 1.2rem),
		repeating-linear-gradient(90deg, var(--model-accent) 0 0.6rem, transparent 0.6rem 1.2rem),
		repeating-linear-gradient(180deg, var(--model-accent) 0 0.6rem, transparent 0.6rem 1.2rem),
		repeating-linear-gradient(180deg, var(--model-accent) 0 0.6rem, transparent 0.6rem 1.2rem);
	background-position: top, bottom, left, right;
	background-size: 100% 0.2rem, 100% 0.2rem, 0.2rem 100%, 0.2rem 100%;
}

[data-model-facade] .imp-objects .imp-object.is-floor-active:not(.is-sellable)::after {
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.77) 0 0.6rem, transparent 0.6rem 1.2rem),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.77) 0 0.6rem, transparent 0.6rem 1.2rem);
	background-position: top, bottom;
	background-size: 100% 0.2rem, 100% 0.2rem;
}

/* ==================================================
   MODEL — KARTA PŮDORYSU (c_model_plan_html)
   ================================================== */

/*
 * Karta 1243 × 502 z designu; podklady artboardů mají stejný poměr (2486 × 1004).
 * Popisky na kartě se škálují s její šířkou: --plan-px = 1 px Figmy (rem je pod 1366 px pevný).
 */
.unit-plan {
	--plan-px: calc(100cqw / 1243);
	position: relative;
	width: 100%;
	aspect-ratio: 1243 / 502;
	margin-bottom: 6rem;
	overflow: hidden;
	background-color: #ffffff;
	border-radius: 0.4rem;
	container-type: inline-size;
	/* visibility přepne na hidden až na konci přechodu, na visible hned na začátku */
	transition: opacity 0.3s ease, visibility 0.3s;
}

/*
 * Při „Všechna“ podlaží je karta sbalená (výchozí stav i po resetu). Výšku při rozbalení
 * a sbalení animuje model.js, CSS drží jen koncový stav — bez JS zůstane sbalená.
 */
.unit-plan.is-collapsed {
	height: 0;
	aspect-ratio: auto;
	margin-bottom: 0;
	opacity: 0;
	visibility: hidden;
}

.unit-plan__map {
	position: absolute;
	inset: 0;
}

.unit-plan.is-empty .unit-plan__map {
	visibility: hidden;
}

/*
 * Podklad oříznutý natěsno (4000 × 1575, kresba až k okrajům) — celá vrstva mapy (obrázek i byty)
 * se zmenší a posune tak, aby kresba seděla jako ve formátu karty (2486 × 1004, patro 3).
 * Formát pozná model.js podle poměru stran obrázku (data-plan-format). Transformuje se obal
 * .imp-canvas-wrap — vnitřním vrstvám IMP při přepnutí artboardu zapisuje vlastní inline transform.
 */
.unit-plan[data-plan-format="tight"] .imp-canvas-wrap {
	transform: translate(2.564%, 2.773%) scale(0.9575);
	transform-origin: 0 0;
}

/* Legenda a kompas: 30 px shora, 50 px zprava, mezi legendou a kompasem 94 px */
.unit-plan__head {
	position: absolute;
	top: 6.024%;
	right: 4.023%;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: calc(var(--plan-px) * 94);
	pointer-events: none;
}

.unit-plan__legend {
	display: flex;
	align-items: center;
	gap: max(1.2rem, var(--plan-px) * 24);
	margin: 0;
	padding: 0;
	list-style: none;
}

.unit-plan__legend-item {
	display: flex;
	align-items: center;
	gap: max(0.5rem, var(--plan-px) * 6);
	margin: 0;
	color: var(--model-taupe-500);
	font-family: Arial, sans-serif;
	font-size: max(1rem, var(--plan-px) * 12);
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
}

.unit-plan__dot {
	flex: 0 0 auto;
	width: max(0.8rem, var(--plan-px) * 10);
	height: max(0.8rem, var(--plan-px) * 10);
	border-radius: 50%;
}

.unit-plan__dot--available {
	background-color: var(--model-status-available);
}

.unit-plan__dot--reserved {
	background-color: var(--model-status-reserved);
}

.unit-plan__dot--sold {
	background-color: var(--model-status-sold);
}

.unit-plan__dot--unavailable {
	background-color: var(--model-status-unavailable);
}

.unit-plan__compass {
	flex: 0 0 auto;
	width: max(3.2rem, var(--plan-px) * 48);
	height: max(3.2rem, var(--plan-px) * 48);
}

/* Popisek ulice čtený zdola nahoru, levý okraj karty, svisle na středu */
.unit-plan__street {
	position: absolute;
	top: 50%;
	left: 2.253%;
	z-index: 1;
	color: var(--model-taupe-500);
	font-family: Arial, sans-serif;
	font-size: max(1rem, var(--plan-px) * 12);
	line-height: 0.75;
	text-transform: uppercase;
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: translateY(-50%) rotate(180deg);
	pointer-events: none;
}

/* Užší karta (menší notebook, tablet): legenda by nad půdorysem přetekla — dva sloupce */
@container (max-width: 1035px) {
	.unit-plan__head {
		gap: 2.4rem;
	}

	.unit-plan__legend {
		display: grid;
		grid-template-columns: repeat(2, auto);
		gap: 0.6rem 1.6rem;
	}
}

.unit-plan__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	color: var(--model-taupe-500);
	font-size: 1.8rem;
}

.unit-plan__empty[hidden] {
	display: none;
}

/* Byty: barva legendy na 50 % krytí, pod myší plná */
[data-unit-plan] .imp-objects .model-unit.is-available {
	background-color: color-mix(in srgb, var(--model-status-available) 50%, transparent);
	fill: color-mix(in srgb, var(--model-status-available) 50%, transparent);
}

[data-unit-plan] .imp-objects .model-unit.is-reserved {
	background-color: color-mix(in srgb, var(--model-status-reserved) 50%, transparent);
	fill: color-mix(in srgb, var(--model-status-reserved) 50%, transparent);
}

[data-unit-plan] .imp-objects .model-unit.is-sold {
	background-color: color-mix(in srgb, var(--model-status-sold) 50%, transparent);
	fill: color-mix(in srgb, var(--model-status-sold) 50%, transparent);
}

[data-unit-plan] .imp-objects .model-unit.is-unavailable {
	background-color: color-mix(in srgb, var(--model-status-unavailable) 50%, transparent);
	fill: color-mix(in srgb, var(--model-status-unavailable) 50%, transparent);
}

[data-unit-plan] .imp-objects .model-unit.is-available.is-hovered {
	background-color: var(--model-status-available);
	fill: var(--model-status-available);
}

[data-unit-plan] .imp-objects .model-unit.is-reserved.is-hovered {
	background-color: var(--model-status-reserved);
	fill: var(--model-status-reserved);
}

[data-unit-plan] .imp-objects .model-unit.is-sold.is-hovered {
	background-color: var(--model-status-sold);
	fill: var(--model-status-sold);
}

[data-unit-plan] .imp-objects .model-unit.is-unavailable.is-hovered {
	background-color: var(--model-status-unavailable);
	fill: var(--model-status-unavailable);
}

[data-unit-plan] .imp-objects .model-unit.is-link {
	cursor: pointer;
}

/* Poly vykresluje IMP jako <svg> velké jako obálka tvaru — barvu nese jen fill polygonu, pozadí obálky ne */
[data-unit-plan] .imp-objects .imp-object-poly.model-unit[data-title] {
	background-color: transparent;
}

/* Barva se násobí s podkladem: přes bílou vypadá stejně, zdi a čísla bytů zůstanou tmavé */
[data-unit-plan] .imp-objects .model-unit {
	mix-blend-mode: multiply;
	transition: fill 0.25s ease, background-color 0.25s ease;
}

/* ==================================================
   MODEL — TOOLTIP (patro i byt)
   ================================================== */

/*
 * Pozici (špičku šipky) nastavuje model.js přes left/top ve viewportu.
 * Rozměry z Figmy: šířka 166, padding 18/16, nadpis v boxu 30,34, pod ním 5, řádky 9 vysoké po 8.
 * Figma ořezává text na výšku verzálek (text-box-trim) — line-height = výška verzálek
 * to napodobí i bez podpory text-box-trim (Nudista cap 0,70 em, Arial cap 0,716 em).
 */
.model-tooltip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	box-sizing: border-box;
	width: max-content;
	min-width: 16.6rem;
	max-width: calc(100vw - 1.6rem);
	padding: 1.8rem 1.6rem;
	color: var(--model-darkest);
	font-family: Arial, sans-serif;
	background-color: #ffffff;
	border-radius: 0.4rem;
	/* drop-shadow místo box-shadow: obrys dostane i šipka, takže je vidět i nad bílým půdorysem */
	filter: drop-shadow(0 0 0.1rem rgba(46, 42, 36, 0.25)) drop-shadow(0 1rem 1.5rem rgba(46, 42, 36, 0.12));
	transform: translate(-50%, calc(-100% - 1rem));
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.model-tooltip.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.18s ease;
}

.model-tooltip[hidden] {
	display: none;
}

/*
 * Šipka zasahuje 1px do boxu — na Retině / se zoomem jinak mezi boxem a šipkou
 * prosvítala vlasová mezera. Trojúhelník z borderu místo clip-path (Safari).
 */
.model-tooltip::after {
	content: "";
	position: absolute;
	bottom: -1rem;
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: calc(1rem + 1px) 1rem 0;
	border-color: #ffffff transparent transparent;
	transform: translateX(-50%);
}

/* Nadpis: verzálky 18,2 px + zbytek boxu 30,34 z Figmy */
.model-tooltip__title {
	display: block;
	margin-bottom: 1.214rem;
	color: var(--model-accent);
	font-family: "nudista-web", sans-serif;
	font-size: 2.6rem;
	font-weight: 500;
	line-height: 1.82rem;
	white-space: nowrap;
}

.model-tooltip__rows {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.model-tooltip__line,
.model-tooltip__row {
	display: block;
	font-size: 1.2rem;
	line-height: 0.9rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.model-tooltip__row {
	display: flex;
	justify-content: space-between;
	gap: 1.6rem;
}

.model-tooltip__line--free {
	text-decoration: underline;
}

.model-tooltip__line--total {
	color: var(--model-beige-400);
}

.model-tooltip__label {
	color: var(--model-taupe-500);
}

.model-tooltip__value[data-status="available"] {
	color: var(--model-status-available-text);
}

.model-tooltip__value[data-status="reserved"] {
	color: var(--model-status-reserved-text);
}

.model-tooltip__value[data-status="sold"] {
	color: var(--model-status-sold-text);
}

.model-tooltip__value[data-status="unavailable"] {
	color: var(--model-status-unavailable-text);
}

/* ==================================================
   FILTRY CENÍKU
   ================================================== */

/* Skupiny prvního řádku roztažené od kraje ke kraji kontejneru */
.unit-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 3rem 7rem;
}

.unit-filters__group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

/* Orientace je v designu sama na druhém řádku */
.unit-filters__group--orientation {
	flex-basis: 100%;
}

/*
 * Desktop: první řádek Podlaží · Dispozice · Dostupnost od kraje ke kraji (se Sekcí by se
 * do šířky kontejneru nevešly), druhý řádek Sekce + Orientace zarovnané vlevo — auto margin
 * spotřebuje volné místo dřív než space-between.
 */
@media screen and (min-width: 768px) {
	.unit-filters {
		column-gap: 4rem;
	}

	.unit-filters__group--building {
		order: 1;
	}

	.unit-filters__group--orientation {
		flex-basis: auto;
		order: 2;
		margin-right: auto;
	}
}

.unit-filters__label {
	color: var(--model-darkest);
	font-size: 1.4rem;
	line-height: 1.3;
}

.unit-filters__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	padding: 0.4rem;
	background-color: var(--model-creamy2);
	border-radius: 0.4rem;
}

.unit-filters__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.8rem 1.6rem;
	border: 0;
	border-radius: 0.4rem;
	background-color: transparent;
	color: var(--model-darkest);
	font-family: inherit;
	font-size: 1.4rem;
	line-height: 1.3;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Jen u myši — na dotykovém displeji hover po klepnutí „ulpí“ a odznačená volba vypadá dál vybraná */
@media (hover: hover) {
	.unit-filters__option:hover {
		background-color: color-mix(in srgb, var(--model-creamy) 55%, transparent);
	}
}

.unit-filters__option[aria-pressed="true"] {
	background-color: var(--model-creamy);
}

/* Volba, která by v kombinaci s ostatními filtry nic nenašla */
.unit-filters__option.is-muted {
	color: var(--model-taupe-500);
}

.unit-filters__option:focus-visible,
.unit-reset:focus-visible {
	outline: 2px solid var(--model-darkest);
	outline-offset: 2px;
}

.unit-filters__group--floor .unit-filters__option,
.unit-filters__group--building .unit-filters__option {
	width: 4.6rem;
	padding-inline: 0;
}

/* „Všechna“ má text, ne číslo patra — šířka podle obsahu */
.unit-filters__group--floor .unit-filters__option[data-value=""] {
	width: auto;
	padding-inline: 1.2rem;
}

.unit-filters__group--disposition .unit-filters__option {
	min-width: 7.9rem;
}

/* Na desktopu je reset v liště tabulky, u filtrů jen na mobilu */
.unit-filters .unit-filters__reset {
	display: none;
}

.unit-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.8rem;
	margin: 0;
	padding: 0.8rem 1.6rem;
	border: 1px solid var(--model-darkest);
	border-radius: 0.4rem;
	background-color: transparent;
	color: var(--model-darkest);
	font-family: inherit;
	font-size: 1.2rem;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

@media (hover: hover) {
	.unit-reset:hover {
		background-color: var(--model-creamy);
	}
}

.unit-reset__icon {
	flex-shrink: 0;
	width: 1.6rem;
	height: 1.6rem;
	overflow: visible;
}

/* ==================================================
   TABULKA
   ================================================== */

.unit-table {
	width: 100%;
	margin-top: 6rem;
}

/* Reset úplně vlevo, počet bytů hned vpravo od něj */
.unit-table__toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 2.4rem;
}

.unit-table__toolbar .unit-table__reset {
	order: -1;
}

.unit-table__toolbar--top {
	margin-bottom: 3rem;
}

.unit-table__toolbar--bottom {
	margin-top: 2.4rem;
}

.unit-table__info {
	margin: 0;
	color: var(--model-darkest);
	font-size: 1.2rem;
	line-height: 1.3;
	text-transform: uppercase;
}

.unit-table__scroll {
	overflow-x: auto;
}

/* ID + .dataTable přebije výchozí styly DataTables bez !important */
#unit-table.dataTable {
	width: 100%;
	min-width: 100rem;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background-color: #ffffff;
	border-radius: 0.4rem;
}

#unit-table.dataTable > thead > tr > th {
	box-sizing: border-box;
	height: 5.2rem;
	padding: 0;
	background-color: var(--model-creamy2);
	border-bottom: 1.5px solid var(--model-taupe-400);
	color: var(--model-taupe-essential);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

#unit-table.dataTable > thead > tr > th:first-child {
	border-top-left-radius: 0.4rem;
}

#unit-table.dataTable > thead > tr > th:last-child {
	border-top-right-radius: 0.4rem;
}

#unit-table .dt-column-order {
	display: none;
}

#unit-table .unit-table__unit {
	font-weight: 400;
}

#unit-table.dataTable > tbody > tr > td {
	box-sizing: border-box;
	padding: 1.1rem 0;
	background-color: var(--model-creamy-very-light);
	border-top: 0;
	border-bottom: 1px solid var(--model-taupe-400);
	color: var(--model-darkest);
	font-size: 1.4rem;
	line-height: 1.3;
	text-align: left;
	text-transform: uppercase;
	vertical-align: middle;
	transition: background-color 0.2s ease;
}

#unit-table.dataTable > thead > tr > th:first-child,
#unit-table.dataTable > tbody > tr > td:first-child {
	padding-left: 2.4rem;
}

#unit-table.dataTable > thead > tr > th:last-child,
#unit-table.dataTable > tbody > tr > td:last-child {
	padding-right: 2.4rem;
}

/* Šířky sloupců na desktopu dopočítává table.js (equalizeColumns): obsah + stejná mezera. */
#unit-table.dataTable.is-measuring {
	width: auto;
	min-width: 0;
	table-layout: auto;
}

#unit-table.dataTable.is-measuring > thead > tr > th,
#unit-table.dataTable.is-measuring > tbody > tr > td {
	white-space: nowrap;
}

/*
 * Stav a detail zarovnané doleva jako ostatní sloupce: text štítku začíná na hraně
 * sloupce pod nadpisem, podklad štítku (hover) přesahuje o odsazení doleva do mezery.
 */
#unit-table.dataTable > thead > tr > th.unit-table__cell--status,
#unit-table.dataTable > tbody > tr > td.unit-table__cell--status,
#unit-table.dataTable > thead > tr > th.unit-table__cell--cta,
#unit-table.dataTable > tbody > tr > td.unit-table__cell--cta {
	text-align: left;
}

#unit-table.dataTable > tbody > tr > td.dt-empty {
	text-align: center;
	text-transform: none;
}

#unit-table.dataTable > tbody > tr:last-child > td {
	border-bottom: 0;
}

#unit-table.dataTable > tbody > tr:last-child > td:first-child {
	border-bottom-left-radius: 0.4rem;
}

#unit-table.dataTable > tbody > tr:last-child > td:last-child {
	border-bottom-right-radius: 0.4rem;
}

/* Klikací jsou jen řádky s detailem (volné a rezervované) */
#unit-table.dataTable > tbody > tr.is-clickable {
	cursor: pointer;
}

#unit-table.dataTable > tbody > tr.is-clickable:hover > td {
	background-color: #ffffff;
}

#unit-table .unit-table__status,
#unit-table .unit-table__cta {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	height: 2.8rem;
	margin-left: -2rem;
	padding: 0 2rem;
	border-radius: 10rem;
	color: var(--model-darkest);
	font-size: 1.2rem;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

#unit-table .unit-table__cta {
	font-weight: 700;
	text-decoration: none;
}

#unit-table > tbody > tr.is-clickable:hover .unit-table__status[data-status="available"] {
	background-color: var(--model-status-available);
}

#unit-table > tbody > tr.is-clickable:hover .unit-table__status[data-status="reserved"] {
	background-color: var(--model-status-reserved);
}

#unit-table > tbody > tr.is-clickable:hover .unit-table__status[data-status="sold"] {
	background-color: var(--model-status-sold);
}

#unit-table > tbody > tr.is-clickable:hover .unit-table__status[data-status="unavailable"] {
	background-color: var(--model-status-unavailable);
}

#unit-table > tbody > tr.is-clickable:hover .unit-table__cta,
#unit-table .unit-table__cta:focus-visible {
	background-color: var(--model-creamy);
}

#unit-table .unit-table__cta:focus-visible {
	outline: 2px solid var(--model-darkest);
	outline-offset: 2px;
}

/* Utility — schovávání sekcí modelu */
.none {
	display: none !important;
}

@media screen and (max-width: 767px) {
	.unit-filters {
		flex-direction: column;
		gap: 2rem;
	}

	/* Voleb je v datech víc než v designu — skupina zůstane v jednom řádku a posouvá se do strany */
	.unit-filters__group,
	.unit-filters__options {
		max-width: 100%;
	}

	.unit-filters__options {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.unit-filters__options::-webkit-scrollbar {
		display: none;
	}

	.unit-filters__option {
		flex-shrink: 0;
	}

	/*
	 * Patra a orientace přes celou šířku: volby si ji rovnoměrně rozdělí a na užším
	 * telefonu (360 px) se zúží, místo aby krajní přetekly za okraj.
	 */
	.unit-filters__group--floor,
	.unit-filters__group--orientation,
	.unit-filters__group--floor .unit-filters__options,
	.unit-filters__group--orientation .unit-filters__options {
		align-self: stretch;
	}

	.unit-filters__group--floor .unit-filters__option,
	.unit-filters__group--orientation .unit-filters__option {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		padding-inline: 0.4rem;
	}

	.unit-filters__group--floor .unit-filters__option[data-value=""] {
		flex: 0 0 auto;
		padding-inline: 1.2rem;
	}

	.unit-filters__group--disposition .unit-filters__option {
		min-width: 0;
	}

	.unit-filters .unit-filters__reset {
		display: inline-flex;
		height: 3.2rem;
		margin-top: 0.4rem;
		border-radius: 0.8rem;
	}

	/* Filtry → reset → „Filtrováno…“ → tabulka: všude 2,4rem */
	.unit-table {
		margin-top: 2.4rem;
	}

	.unit-table__toolbar {
		justify-content: flex-start;
	}

	.unit-table__toolbar--top {
		margin-bottom: 1rem;
	}

	.unit-table__toolbar--bottom,
	.unit-table__reset {
		display: none;
	}

	/* Tabulka na mobilu jede od kraje ke kraji a posouvá se do strany */
	.unit-table__scroll {
		margin-inline: calc(var(--gutter, 2rem) * -1);
		padding-bottom: 2rem;
		scrollbar-color: var(--model-taupe-500) var(--model-creamy2);
		scrollbar-width: thin;
	}

	.unit-table__scroll::-webkit-scrollbar {
		height: 0.4rem;
	}

	.unit-table__scroll::-webkit-scrollbar-track {
		margin-inline: var(--gutter, 2rem);
		background-color: var(--model-creamy2);
		border-radius: 0.2rem;
	}

	.unit-table__scroll::-webkit-scrollbar-thumb {
		background-color: var(--model-taupe-500);
		border-radius: 0.2rem;
	}

	/*
	 * Šířka sloupce = nejširší nadpis/obsah + 4rem mezera (u krajních i odsazení řádku 2,4rem).
	 * Předpona .unit-table__scroll dorovná specificitu pravidla :nth-child(n + 2):nth-child(-n + 7).
	 */
	#unit-table.dataTable {
		width: 93rem;
		min-width: 93rem;
	}

	.unit-table__scroll #unit-table.dataTable > thead > tr > th:nth-child(1) {
		width: 10.3rem;
	}

	.unit-table__scroll #unit-table.dataTable > thead > tr > th:nth-child(2) {
		width: 8.3rem;
	}

	.unit-table__scroll #unit-table.dataTable > thead > tr > th:nth-child(3) {
		width: 9.7rem;
	}

	.unit-table__scroll #unit-table.dataTable > thead > tr > th:nth-child(4) {
		width: 10.6rem;
	}

	.unit-table__scroll #unit-table.dataTable > thead > tr > th:nth-child(5) {
		width: 15.1rem;
	}

	.unit-table__scroll #unit-table.dataTable > thead > tr > th:nth-child(6) {
		width: 9.6rem;
	}

	.unit-table__scroll #unit-table.dataTable > thead > tr > th:nth-child(7) {
		width: 13.5rem;
	}

	.unit-table__scroll #unit-table.dataTable > thead > tr > th:nth-child(8) {
		width: 15.9rem;
	}

	#unit-table.dataTable > tbody > tr > td {
		padding-block: 2rem;
	}

	/* Bez štítků (hover na dotyku není) */
	#unit-table .unit-table__status,
	#unit-table .unit-table__cta,
	#unit-table > tbody > tr.is-clickable:hover .unit-table__status[data-status],
	#unit-table > tbody > tr.is-clickable:hover .unit-table__cta {
		height: auto;
		margin-left: 0;
		padding: 0;
		background-color: transparent;
	}
}

/* ==================================================
   HERO CENÍKU (Bricks: sekce .cenik-hero, obrázek pozadí nastavit v Bricks)
   ================================================== */

.brxe-section.cenik-hero {
	position: relative;
	justify-content: flex-end;
	height: 100vh;
	height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	min-height: 56rem;
	padding-top: 0;
	padding-bottom: 3.6rem;
	overflow: hidden;
	background-color: var(--darkest, #2e2a24);
	background-position: center;
	background-size: cover;
}

.brxe-section.cenik-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(206.93deg, rgba(0, 0, 0, 0) 48.66%, rgba(0, 0, 0, 0.39) 87.84%);
	pointer-events: none;
}

.brxe-section.cenik-hero > * {
	position: relative;
	z-index: 1;
}

/* S modelem hero drží poměr fotky (pruhy pater sedí na fasádu), ale nejvýš na výšku okna */
@media screen and (min-width: 768px) {
	.brxe-section.cenik-hero:has(.cenik-hero__map) {
		height: auto;
		min-height: 0;
		max-height: 100vh;
		max-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
		aspect-ratio: 4096 / 2303;
	}

	/*
	 * Přechod přebírá model až po vykreslení (je pod pruhy pater) — do té doby
	 * zůstává na hero, ať při načtení stránky fotka neztmavne skokem.
	 */
	.brxe-section.cenik-hero:has(.cenik-hero__map .imp-object)::before {
		content: none;
	}

	.brxe-section.cenik-hero:has(.cenik-hero__map) > :not(.cenik-hero__map, .brxe-code) {
		pointer-events: none;
	}

	.brxe-section.cenik-hero:has(.cenik-hero__map) :is(a, button) {
		pointer-events: auto;
	}
}

/* ==================================================
   NADPISY CENÍKU
   ================================================== */

.brxe-heading.cenik-hero__title,
.brxe-heading.cenik-offer__title {
	margin: 0;
	font-family: "nudista-web", sans-serif;
	font-size: 7.2rem;
	font-weight: 500;
	line-height: 7.2rem;
	letter-spacing: -0.144rem;
	white-space: nowrap;
}

.brxe-heading.cenik-hero__title {
	color: #ffffff;
}

/*
 * GSAP obalí každý řádek nadpisu do divu s overflow: hidden. Při line-height = velikost písma
 * by ořízl háčky nahoře a ocásky (y, j) dole — obal dostane vnitřní přesah, rozestupy řádků zůstanou.
 */
.brxe-heading.cenik-hero__title > div,
.brxe-heading.cenik-offer__title > div {
	padding-block: 0.12em 0.26em;
	margin-block: -0.12em -0.26em;
}

.brxe-heading.cenik-offer__title {
	color: var(--darkest, #2e2a24);
}

.cenik-accent {
	color: var(--accent-color, #e2b162);
}

/* Druhý řádek nadpisu s odsazením podle designu */
.cenik-line {
	display: block;
}

.cenik-hero__title .cenik-line {
	padding-left: 12.3rem;
}

.cenik-offer__title .cenik-line {
	margin-top: 0.8rem;
	padding-left: 7.7rem;
}

/* ==================================================
   ÚVOD NABÍDKY (Bricks: sekce .cenik-offer)
   ================================================== */

.brxe-section.cenik-offer {
	position: relative;
	padding-top: 16rem;
	padding-bottom: 8.1rem;
	overflow: hidden;
	background-color: #f1ece5;
}

.brxe-section.cenik-offer > .brxe-container {
	position: relative;
	z-index: 1;
}

.brxe-block.cenik-offer__intro {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 4rem;
	width: 100%;
	margin-bottom: 8.2rem;
}

.brxe-text-basic.cenik-offer__text {
	flex: 0 1 49.5rem;
	max-width: 49.5rem;
	margin: 0;
	color: var(--darkest, #2e2a24);
	font-size: 1.8rem;
	line-height: 1.55;
}

/* Dekorativní čára a lístek — Code elementy přímo v sekci, ne v kontejneru */
.cenik-deco {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}

.cenik-deco svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/*
 * SVG jsou exportovaná z Figmy už otočená (výřez obálky vrstvy, žádná CSS rotace).
 * Pozice = počátek exportu vůči sekci: čára 1358 × 479 od (0; 38,47),
 * lístek 162 × 162 od (508,55; 45,52). Část čáry mimo sekci ořízne overflow.
 */
.cenik-deco--line {
	top: 3.847rem;
	left: 0;
	width: 135.8rem;
	height: 47.9rem;
}

.cenik-deco--leaf {
	top: 4.552rem;
	left: 50.855rem;
	width: 16.2rem;
	height: 16.2rem;
}

/* ==================================================
   PŘEPÍNÁNÍ DESKTOP / MOBIL (jiné texty nadpisů)
   ================================================== */

.cenik-show-mobile.cenik-show-mobile {
	display: none;
}

@media screen and (max-width: 767px) {
	.cenik-show-desktop.cenik-show-desktop {
		display: none;
	}

	.cenik-show-mobile.cenik-show-mobile {
		display: block;
	}

	.brxe-section.cenik-hero {
		height: auto;
		min-height: 62rem;
		padding-bottom: 3.3rem;
		background-position: 79.7% center;
	}

	.brxe-section.cenik-hero::before {
		background-image: none;
		background-color: rgba(0, 0, 0, 0.2);
	}

	.cenik-hero__title .cenik-line {
		margin-top: -0.6rem;
		padding-left: 17.4rem;
	}

	.brxe-section.cenik-offer {
		padding-top: 11.2rem;
		padding-bottom: 11.2rem;
	}

	.brxe-block.cenik-offer__intro {
		flex-direction: column;
		align-items: stretch;
		gap: 6.4rem;
		margin-bottom: 8rem;
	}

	.brxe-heading.cenik-offer__title {
		font-size: 6.4rem;
		line-height: 7.2rem;
		letter-spacing: -0.128rem;
	}

	.cenik-offer__title .cenik-line {
		margin-top: 0;
		padding-left: 0;
		text-align: right;
	}

	.brxe-text-basic.cenik-offer__text {
		flex-basis: auto;
		max-width: none;
	}

	.cenik-deco--line {
		display: none;
	}

	.brxe-section.cenik-hero .cenik-hero__map,
	.unit-plan {
		display: none;
	}

	/* Mobilní lístek (Code element s .cenik-show-mobile): export 120 × 121 od (−0,5; −2,21) */
	.cenik-deco--leaf-mobile {
		top: -0.221rem;
		left: -0.05rem;
		width: 12rem;
		height: 12.1rem;
	}
}

/* ==================================================
   SEKCE „VYBERTE SI NOVÝ DOMOV" ([esens_cta_cenik]) — Figma 1366 × 650 / mobil 375 × 384
   ================================================== */

.cta-cenik {
	position: relative;
	width: 100%;
	aspect-ratio: 1366 / 650;
	overflow: hidden;
	background-color: var(--darkest, #2e2a24);
	container-type: inline-size;
}

/* Fasáda z ceníku drží poměr fotky a sedí na spodní hraně — sekce ořízne jen nebe nahoře */
.cta-cenik__map {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}

.cta-cenik__map .imp-objects::before {
	background-image: linear-gradient(203.28deg, rgba(0, 0, 0, 0) 48.66%, rgba(0, 0, 0, 0.45) 87.84%);
}

/* Popisky sekcí dole u ulice (Figma y 573 / 650 → v mapě 768 px vysoké) */
.cta-cenik .cenik-hero__section {
	top: 89.26%;
}

.cta-cenik__content {
	position: absolute;
	top: calc(100cqw * 78 / 1366);
	right: calc(100cqw * 64 / 1366);
	left: calc(100cqw * 60 / 1366);
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	pointer-events: none;
}

.cta-cenik__title {
	margin: 0;
	color: #ffffff;
	font-family: "nudista-web", sans-serif;
	font-size: calc(100cqw * 72 / 1366);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
}

.cta-cenik__line2 {
	display: block;
	padding-left: calc(100cqw * 202 / 1366);
}

.cta-cenik__accent {
	color: var(--accent-color, #e2b162);
}

.cta-cenik__button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	margin-top: calc(100cqw * 18.46 / 1366);
	padding: 1.8rem 3rem;
	border-radius: 5.4rem;
	background-color: #ffffff;
	color: var(--darkest, #2e2a24);
	font-family: Arial, sans-serif;
	font-size: 1.2rem;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: auto;
	transition: background-color 0.3s ease;
}

.cta-cenik__button:hover,
.cta-cenik__button:focus-visible {
	background-color: var(--creamy, #e8dfd3);
}

.cta-cenik__mobile-bg,
.cta-cenik__line {
	display: none;
}

@media (max-width: 767px) {
	.cta-cenik {
		aspect-ratio: 375 / 384;
	}

	.cta-cenik__map {
		display: none;
	}

	.cta-cenik__mobile-bg {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center bottom;
	}

	/* Zesvětlení nebe (Figma: lighten 20 % → 0) */
	.cta-cenik::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background-image: linear-gradient(180.15deg, rgba(255, 255, 255, 0.2) 9.02%, rgba(255, 255, 255, 0) 61.78%);
		mix-blend-mode: lighten;
		pointer-events: none;
	}

	.cta-cenik__line {
		position: absolute;
		top: calc(100cqw * 103.9 / 375);
		left: calc(100cqw * -261.1 / 375);
		z-index: 1;
		display: block;
		width: calc(100cqw * 763 / 375);
		height: auto;
		aspect-ratio: 763 / 365;
		transform: rotate(-51.72deg);
		pointer-events: none;
	}

	.cta-cenik__content {
		top: calc(100cqw * 69 / 375);
		right: calc(100cqw * 20 / 375);
		left: calc(100cqw * 22 / 375);
		flex-direction: column;
		align-items: center;
		gap: calc(100cqw * 32 / 375);
	}

	.cta-cenik__title {
		align-self: stretch;
		font-size: calc(100cqw * 36 / 375);
		line-height: calc(46 / 36);
		letter-spacing: 0;
	}

	.cta-cenik__line2 {
		padding-left: 0;
		text-align: right;
	}

	.cta-cenik__button {
		margin-top: 0;
	}
}