/* ============================================================
   KŠÍROVA lofts – Theme front-end CSS (tokens + components)
   ------------------------------------------------------------
   M3-A theme port of the M1 design system:
     src/theme/style.css      -> tokens + base elements
     src/theme/components.css -> component classes
   Token-only: every COLOUR is a var(--token); no raw hex in
   component selectors. Self-hosted woff2 (latin-ext, full Czech
   diacritics) – NO CDN. @font-face url() paths are theme-relative
   to this file (assets/css/front.css -> ../fonts/).
   Loaded on the front end by functions.php; the block editor loads
   the slimmer editor.css instead.
   ============================================================ */

/* ---------- SELF-HOSTED FONTS (latin-ext subset; see assets/fonts/MANIFEST in repo) ---------- */

@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/poppins-400-latinext.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+02C6-02DC, U+2013, U+2018-2019, U+201C-201D, U+2026, U+20AC, U+2212;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/poppins-500-latinext.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+02C6-02DC, U+2013, U+2018-2019, U+201C-201D, U+2026, U+20AC, U+2212;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins-600-latinext.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+02C6-02DC, U+2013, U+2018-2019, U+201C-201D, U+2026, U+20AC, U+2212;
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/poppins-700-latinext.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+02C6-02DC, U+2013, U+2018-2019, U+201C-201D, U+2026, U+20AC, U+2212;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400-latinext.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+02C6-02DC, U+2013, U+2018-2019, U+201C-201D, U+2026, U+20AC, U+2212;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-500-latinext.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+02C6-02DC, U+2013, U+2018-2019, U+201C-201D, U+2026, U+20AC, U+2212;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-600-latinext.woff2") format("woff2");
	unicode-range: U+0020-007E, U+00A0-00FF, U+0100-017F, U+02C6-02DC, U+2013, U+2018-2019, U+201C-201D, U+2026, U+20AC, U+2212;
}

/* ============================================================
   TOKENS – 1:1 mirror of theme.json
   ============================================================ */

:root {
	/* ---------- BRAND COLOURS (from the renders) ---------- */
	--cream:            #F1EBE1;  /* facade – primary page surface */
	--cream-raised:     #F8F4EC;  /* lifted card surface on cream */
	--cream-deep:       #E7DECF;  /* recessed / hover wells, tints */
	--ink:              #3A3A3C;  /* charcoal roof & frames – headings + primary text */
	--ink-soft:         #57555A;  /* secondary body text */
	--warm-grey:        #655E54;  /* muted text, captions (AA >=4.5 on cream surfaces) */
	--border:           #DCD4C7;  /* hairline dividers, card borders */
	--border-strong:    #C7BDAC;  /* input borders, stronger rules */
	--white:            #FFFFFF;  /* label/text on accent (green) or charcoal – never a page surface */

	/* ---------- ACCENT (planter green – the ONLY brand accent) ---------- */
	--green:            #4F7042;  /* buttons, links, active, focus, PENB badge (AA: white-on >=4.5, on-cream >=4.5) */
	--green-hover:      #3E5A33;  /* hover / pressed / deep */
	--green-tint:       #E6EDE0;  /* soft green panel fill */
	--green-ring:       var(--green);  /* focus ring: solid brand green, AA non-text >=3:1 on all surfaces (WCAG 2.4.11) */

	/* ---------- SEMANTIC – apartment status (C.6 / C.7) ---------- */
	--status-volny:           #36761C;  /* Volný: available, leaf-green (AA >=4.5 on -bg) */
	--status-volny-bg:        #E4F0DD;
	--status-rezervovano:     #8A5E1A;  /* Rezervováno: amber (AA >=4.5 on -bg) */
	--status-rezervovano-raw: #E0A458;  /* amber swatch / dot fill (decorative) */
	--status-rezervovano-bg:  #F6E8D2;
	--status-prodano:         #5C6166;  /* Prodáno: neutral grey (AA >=4.5 on -bg) */
	--status-prodano-bg:      #E9E4DB;

	/* ---------- INFO (sky blue – sparing, links/info only) ---------- */
	--info:             #5E89A6;  /* text-safe sky blue */
	--info-raw:         #86B0CE;  /* sky swatch */

	/* ---------- PARTNER (N.K. REAL – logo lockups only, never UI) ---------- */
	--nkreal-orange:    #ED7601;

	/* ---------- TYPE FAMILIES ---------- */
	--font-display: "Poppins", system-ui, sans-serif;  /* headlines 500–700 */
	--font-body:    "Inter", system-ui, sans-serif;    /* body 400–500 */

	/* ---------- TYPE SCALE (8 steps; large steps are fluid so they shrink on phones) ---------- */
	--fs-display: clamp(2.5rem, 6vw, 4rem);      /* 40 -> 64px */
	--fs-h1:      clamp(2rem, 4.5vw, 2.75rem);   /* 32 -> 44px */
	--fs-h2:      clamp(1.6rem, 3.2vw, 2rem);    /* 25.6 -> 32px */
	--fs-h3:      24px;
	--fs-lead:    20px;  /* intro / lead paragraph */
	--fs-body:    16px;
	--fs-small:   14px;
	--fs-caption: 12px;  /* labels, table eyebrows */

	--lh-tight:   1.12;  /* display / headings */
	--lh-snug:    1.3;
	--lh-body:    1.6;   /* paragraphs */

	/* ---------- SPACING (8px rhythm) ---------- */
	--sp-1: 8px;
	--sp-2: 16px;
	--sp-3: 24px;
	--sp-4: 40px;
	--sp-5: 64px;   /* section padding */
	--sp-6: 96px;   /* section separation */

	/* ---------- RADII (soft, generous – pill buttons) ---------- */
	--r-sm:   8px;
	--r-md:   14px;   /* cards */
	--r-lg:   22px;   /* large panels */
	--r-pill: 999px;  /* buttons, status chips */

	/* ---------- ELEVATION (2 steps – soft, warm-tinted) ---------- */
	--shadow-1: 0 2px 8px rgba(58, 58, 60, 0.06), 0 1px 2px rgba(58, 58, 60, 0.05);
	--shadow-2: 0 14px 36px rgba(58, 58, 60, 0.10), 0 4px 10px rgba(58, 58, 60, 0.06);

	/* ---------- MOTION ---------- */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dur:  160ms;   /* micro-transitions stay < 200ms */
}

/* ============================================================
   STATUS CONTEXT CLASSES (C.7) – set contextual props consumed
   by .status-badge, table rows, and (later) byty SVG polygons.
   ============================================================ */

.apt--volny {
	--apt-fg: var(--status-volny);
	--apt-bg: var(--status-volny-bg);
	--apt-dot: var(--status-volny);
}
.apt--rezervovano {
	--apt-fg: var(--status-rezervovano);
	--apt-bg: var(--status-rezervovano-bg);
	--apt-dot: var(--status-rezervovano-raw);
}
.apt--prodano {
	--apt-fg: var(--status-prodano);
	--apt-bg: var(--status-prodano-bg);
	--apt-dot: var(--status-prodano);
}

/* ============================================================
   SEMANTIC BASE ELEMENTS
   ============================================================ */

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

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--ink);
	line-height: var(--lh-tight);
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); font-weight: 500; }

.display {
	font-family: var(--font-display);
	font-size: var(--fs-display);
	font-weight: 600;
	line-height: var(--lh-tight);
	letter-spacing: -0.025em;
	color: var(--ink);
}

/* "lofts" wordmark sub-weight (lighter than the KŠÍROVA mark) – shared by the
   hero display heading and the footer wordmark. */
.wordmark-sub { font-weight: 400; }

.lead {
	font-size: var(--fs-lead);
	line-height: var(--lh-snug);
	color: var(--ink-soft);
}

p {
	margin: 0 0 var(--sp-2);
	color: var(--ink-soft);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

small, .small { font-size: var(--fs-small); }

.eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--warm-grey);
}
/* Map link inside an eyebrow (hero address): keeps the muted caption colour,
   underlined to signal it opens Google Maps; accents green on hover/focus. */
.eyebrow a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
.eyebrow a:hover,
.eyebrow a:focus-visible {
	color: var(--green);
}

a {
	color: var(--green);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
a:hover { color: var(--green-hover); }

/* Links embedded in running text carry a non-colour affordance (WCAG 1.4.1 Use of Color). */
p a,
label a,
.lead a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Every interactive element gets a visible focus outline (non-negotiable a11y). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--green-ring);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

/* Visually-hidden helper (WP convention): off-screen until focused. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* SVG <text> ignores the HTML clip/position sr-text technique above and would
   paint at the SVG origin (0,0). Any sr-text node still inside an SVG (e.g. the
   a.apt unit names) is kept off-canvas visually here. */
svg text.screen-reader-text {
	opacity: 0;
	pointer-events: none;
}

/* Keyboard skip link: hidden until focused, then pinned top-left in brand green. */
.skip-link {
	left: var(--sp-1);
	top: var(--sp-1);
}
.skip-link:focus,
.skip-link:focus-visible {
	position: fixed;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: var(--green);
	color: var(--white);
	font-family: var(--font-body);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--r-sm);
	outline: 3px solid var(--green-ring);
	outline-offset: 2px;
}

/* Honour the user's reduced-motion preference (WCAG 2.3.3); kill the micro-transitions. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- JUSTIFIED PROSE (wide single-column reading copy only) ----------
   Czech-safe justification: enable hyphenation so the spaced word gaps stay
   tight (lang="cs" is emitted at runtime via WPLANG=cs_CZ, so hyphens:auto
   resolves Czech break points). Restricted to WIDE prose blocks – never tables,
   SVG <text>, code/price chips, broker lines, eyebrows, buttons, the spec list,
   or narrow (<360px) columns (see the @media guard at the foot of this file). */
.lead,
.standard-grid__lead,
.home-section__inner--prose p,
.home-lokalita__text p,
.home-parkovani__text p {
	text-align: justify;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* ============================================================
   COMPONENTS (token-only; consumes the tokens above)
   ============================================================ */

/* ---------- ICON (inline SVG, stroke=currentColor) ---------- */

.icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	flex: none;
}
.icon--green { color: var(--green); }
.icon--muted { color: var(--warm-grey); }
.icon--sm { width: 15px; height: 15px; }
.icon--btn { width: 18px; height: 18px; }
.icon--lg { width: 22px; height: 22px; }
.icon--xl { width: 40px; height: 40px; }

/* ---------- BUTTON (pill; primary / secondary / ghost) ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 14px 30px;
	border: 1.5px solid transparent;
	border-radius: var(--r-pill);
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--full { width: 100%; }

.btn--primary {
	background: var(--green);
	color: var(--white);
	border-color: var(--green);
}
.btn--primary:hover {
	background: var(--green-hover);
	border-color: var(--green-hover);
	/* The generic `a:hover { color: var(--green-hover) }` would otherwise repaint
	   this label dark-green on a dark-green fill (invisible); pin it back to white. */
	color: var(--white);
}

.btn--secondary {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
.btn--secondary:hover {
	background: var(--ink);
	color: var(--cream);
}

.btn--ghost {
	background: transparent;
	color: var(--green);
	border-color: transparent;
	text-transform: none;
	letter-spacing: 0;
	padding: 10px 4px;
}
.btn--ghost:hover { color: var(--green-hover); }

/* ---------- STATUS BADGE (consumes --apt-* set by .apt--* above) ---------- */

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 28px;
	padding: 0 14px;
	border-radius: var(--r-pill);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	background: var(--apt-bg, var(--cream-deep));
	color: var(--apt-fg, var(--ink));
}
.status-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--r-pill);
	background: var(--apt-dot, var(--warm-grey));
}

/* ---------- PENB ENERGY BADGE (brand graphic – green arrow-tail) ---------- */

.penb-badge {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 16px;
	background: var(--green);
	color: var(--white);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
}
.penb-badge__label {
	margin-right: 8px;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: color-mix(in srgb, var(--white) 85%, var(--green));
}
.penb-badge__class { font-size: 16px; }

/* ---------- CARD ---------- */

.card {
	background: var(--cream-raised);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-1);
	transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover {
	box-shadow: var(--shadow-2);
	border-color: var(--border-strong);
}

/* ---------- SPEC TABLE (Byt · Podlaží · Dispozice · Balkon · Plocha · Cena · Stav) ---------- */

.spec-table__wrap {
	background: var(--cream-raised);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--shadow-1);
}
.spec-table {
	width: 100%;
	border-collapse: collapse;
}
.spec-table th {
	text-align: left;
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--warm-grey);
	padding: 10px 14px;
	border-bottom: 1.5px solid var(--border-strong);
}
.spec-table td {
	padding: 16px 14px;
	border-bottom: 1px solid var(--border);
	font-size: 15px;
	color: var(--ink-soft);
	vertical-align: middle;
}
.spec-table tr:last-child td { border-bottom: none; }
/* Plocha values stay LEFT-aligned like every other column + its header (was the
   lone right-aligned column, so the header and the m² values did not line up).
   tabular-nums keeps the digits evenly spaced. */
.spec-table .is-num { font-variant-numeric: tabular-nums; }
.spec-table__id {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--ink);
	/* WCAG 2.5.8 target size: the id link is the row's tap target, so give it a
	   >=24x24px hit area (the raw glyph box is ~16px). */
	display: inline-block;
	min-width: 24px;
	min-height: 24px;
	padding: 6px 4px;
}
.spec-table__price { font-weight: 600; color: var(--ink); }
.spec-table__actions-col,
.spec-table__actions { text-align: right; white-space: nowrap; }
.spec-table__action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--r-sm);
	color: var(--green);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.spec-table__action + .spec-table__action { margin-left: 2px; }
.spec-table__action:hover,
.spec-table__action:focus-visible { background: var(--green-tint); color: var(--green-hover); }
.spec-table__action .icon { width: 20px; height: 20px; }
.spec-table tbody tr { transition: background var(--dur) var(--ease); }
.spec-table tbody tr:hover { background: var(--cream-deep); }

/* Sold rows: muted, non-interactive emphasis */
.spec-table tr.is-sold,
.spec-table tr.is-sold .spec-table__id,
.spec-table tr.is-sold .spec-table__price { color: var(--warm-grey); }
.spec-table tr.is-sold .spec-table__action { color: var(--warm-grey); }

/* ---------- BROKER (photo + text row, no box) ---------- */

.broker-card {
	display: flex;
	gap: var(--sp-3);
	align-items: center;
}
.broker-card__avatar {
	flex: none;
	width: 112px;
	height: 140px;
	border-radius: var(--r-md);
	overflow: hidden;
}
.broker-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
}
.broker-card__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--ink);
}
.broker-card__role {
	font-size: 13px;
	color: var(--warm-grey);
}
.broker-card__contact {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: var(--fs-small);
}

/* ---------- CONTACT PANEL (pale-green form well) ---------- */

.contact-panel {
	background: var(--green-tint);
	border-radius: var(--r-lg);
	padding: 36px 36px 40px;
}

/* ---------- SCHŮZKA (meeting CTA band) ---------- */

.schuzka {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--sp-5) 32px;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: var(--sp-5);
	align-items: center;
}
.schuzka__media {
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.schuzka__media img {
	display: block;
	width: 100%;
	height: auto;
}
.schuzka__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
}
.schuzka__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
	color: var(--ink);
}
.schuzka__title em {
	color: var(--green);
	font-style: normal;
}

/* ============================================================
   /KONTAKT PAGE
   Dedicated full-width layout – page-kontakt.html omits the green hero
   strip, so this section self-constrains to the 1200px site content box and
   lines up with the header. A page header (eyebrow + H1 + intro) sits above a
   brokers | form grid; the form column is the wider of the two and its fields
   are enlarged for comfort. Stacks single-column on mobile. (The homepage
   meeting CTA keeps the separate .schuzka block.)
   ============================================================ */
.kontakt__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--sp-4) 32px var(--sp-5);
}
.kontakt__head {
	max-width: 640px;
	margin-bottom: var(--sp-4);
}
.kontakt__title { margin: var(--sp-1) 0 var(--sp-2); }
.kontakt__lead {
	font-size: var(--fs-lead);
	line-height: var(--lh-snug);
	color: var(--ink-soft);
}
.kontakt__grid {
	display: grid;
	grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
	gap: var(--sp-5);
	align-items: start;
}
.kontakt__brokers {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}
/* The form well: more room than the homepage CTA panel + larger fields. */
.kontakt__form { padding: var(--sp-4); }
.kontakt__form .field { gap: 9px; }
.kontakt__form .field__label { font-size: 14px; }
.kontakt__form .field__input,
.kontakt__form .field__textarea {
	font-size: 16px;
	padding: 14px 16px;
}
.kontakt__form .field__textarea { min-height: 150px; }

/* ---------- FIELD (label + input/textarea) ---------- */

.field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.field__label {
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
}
.field__req { color: var(--green); margin-left: 3px; }

/* Consent checkbox: lay the box beside its label text (the base .field__label
   is flex-column, which would otherwise stack the box above the text). */
.field--checkbox .field__label {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}
.field--checkbox { margin-top: var(--sp-2); }
.field--checkbox .field__checkbox {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 1.5px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--cream-raised);
	cursor: pointer;
	display: grid;
	place-content: center;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.field--checkbox .field__checkbox::after {
	content: "";
	width: 5px;
	height: 9px;
	margin-bottom: 2px;
	border: solid var(--white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform var(--dur) var(--ease);
}
.field--checkbox .field__checkbox:checked {
	background: var(--green);
	border-color: var(--green);
}
.field--checkbox .field__checkbox:checked::after { transform: rotate(45deg) scale(1); }
.field--checkbox .field__checkbox:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.field__input,
.field__textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink);
	padding: 12px 14px;
	border-radius: var(--r-sm);
	background: var(--cream-raised);
	border: 1.5px solid var(--border-strong);
	transition: border-color var(--dur) var(--ease);
}
.field__textarea { resize: vertical; min-height: 96px; }
.field__input:focus,
.field__textarea:focus { border-color: var(--green); }
.field__input::placeholder,
.field__textarea::placeholder { color: var(--warm-grey); }

/* Inline form messaging (success / error) for the contact form. */
.form-message {
	border-radius: var(--r-sm);
	padding: 12px 14px;
	font-size: var(--fs-small);
	margin-bottom: var(--sp-2);
}
.form-message--ok {
	background: var(--cream-raised);
	border-left: 3px solid var(--green);
	color: var(--green-hover);
}
.form-message--error {
	background: var(--status-rezervovano-bg);
	color: var(--status-rezervovano);
}

/* ---------- HERO + VALUE STRIP ---------- */

.hero {
	max-width: 1200px;
	margin: 0 auto;
	padding: 72px 32px 40px;
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 56px;
	align-items: center;
}
.hero__content {
	display: flex;
	flex-direction: column;
	gap: 26px;
}
.hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.hero__media { position: relative; }
.hero__media .building-floors { gap: 0; }
.hero__media .building-image {
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-2);
}
.hero__penb {
	position: absolute;
	left: 22px;
	bottom: 22px;
}

.value-strip {
	background: var(--green-tint);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.value-strip__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 32px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}
.value-item { display: flex; gap: 16px; }
.value-item__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--r-md);
	background: var(--cream-raised);
	border: 1px solid var(--border);
	display: grid;
	place-items: center;
	color: var(--green);
}
.value-item__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--ink);
	margin-bottom: 4px;
}
.value-item__note {
	margin: 0;
	font-size: var(--fs-small);
	line-height: var(--lh-snug);
	color: var(--warm-grey);
}

/* ---------- HOME PROSE SECTION (constrained verbatim text) ---------- */

.home-section__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--sp-5) 32px;
}
.home-section__inner--prose { max-width: 860px; }
.home-section__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
	color: var(--ink);
}

/* ---------- LOKALITA + PARKOVÁNÍ (shared 2-col media + text homepage band) ----------
   Both home bands share one grid/media/text skeleton; only Lokalita adds the
   --dark cadence variant below. Parking reuses the same shell with the dvůr render. */

.home-lokalita,
.home-parkovani {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--sp-5) 32px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-5);
	align-items: center;
}
.home-lokalita__media,
.home-parkovani__media {
	margin: 0;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-1);
}
/* Zigzag: the Parkování image sits on the RIGHT (text left), alternating with
   the image-left Lokalita band above it. */
.home-parkovani__media { order: 1; }
.home-lokalita__media img,
.home-parkovani__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-lokalita__text,
.home-parkovani__text {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

/* Dark cadence variant: one full-bleed charcoal band to break the cream rhythm.
   The grid stays at the 1200px max-width; a ::before pseudo-element paints --ink
   edge-to-edge across the viewport (100vw) behind the content. A small top margin
   keeps the cream key-facts strip above from butting against the dark edge.
   Text + headings flip to --cream; hairlines adapt to a translucent cream rule. */
.home-lokalita--dark {
	position: relative;
	margin-block-start: var(--sp-3);
	padding-block: var(--sp-6);
}
.home-lokalita--dark::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--ink);
	z-index: 0;
}
.home-lokalita--dark > * {
	position: relative;
	z-index: 1;
}
.home-lokalita--dark .home-lokalita__text,
.home-lokalita--dark .home-section__title,
.home-lokalita--dark h2,
.home-lokalita--dark h3 {
	color: var(--cream);
}
.home-lokalita--dark .home-lokalita__text p,
.home-lokalita--dark .lead {
	color: color-mix(in srgb, var(--cream) 88%, transparent);
}
.home-lokalita--dark .eyebrow {
	color: color-mix(in srgb, var(--cream) 70%, transparent);
}
.home-lokalita--dark .home-lokalita__media {
	box-shadow: none;
	border: 1px solid color-mix(in srgb, var(--cream) 16%, transparent);
}

/* ---------- KOMFORTNÍ BYDLENÍ – text + floor selector ----------
   Two columns: LEFT = heading + verbatim paragraph + "Vyberte si byt" button;
   RIGHT = the shared building floor-picker. Stacks to one column on mobile. */

.home-komfort__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-5);
	align-items: center;
}
.home-komfort__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-3);
}
.home-komfort__text .standard-grid__title {
	margin: 0;
}
.home-komfort__text .standard-grid__lead {
	margin: 0;
}
.home-komfort__cta-btn {
	margin-top: var(--sp-1);
}
.home-komfort__render {
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	order: -1; /* zigzag: building image on the LEFT, text on the right */
}
.home-komfort__render .building-floors { flex: 1; }

/* ---------- HARMONOGRAM VÝSTAVBY (construction timeline) ----------
   Desktop: horizontal rail – 5 evenly-spaced steps on a hairline behind the
   dots. Mobile: the rail rotates to a vertical line on the left with dots and
   date+label to the right. Done milestones get a filled green dot; upcoming
   ones an outlined cream dot with a green ring. */

.harmonogram__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--sp-5) 32px;
}
.harmonogram__title {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
	color: var(--ink);
}
.harmonogram__track {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
}
/* The connecting rail sits behind the dots, level with their centres. */
.harmonogram__track::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--border);
}
.harmonogram__step {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sp-1);
}
.harmonogram__dot {
	width: 16px;
	height: 16px;
	border-radius: var(--r-pill);
	background: var(--cream);
	border: 2px solid var(--green);
	box-sizing: border-box;
}
.harmonogram__step.is-done .harmonogram__dot {
	background: var(--green);
}
.harmonogram__date {
	margin-top: var(--sp-1);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-body);
	color: var(--ink);
}
.harmonogram__label {
	font-size: var(--fs-small);
	line-height: var(--lh-snug);
	color: var(--warm-grey);
}
/* Mobile: rotate the rail to a vertical line on the left, dots on it, with the
   date + label stacked to the right of each dot. The rail runs through x = 7px;
   each step pads its content past the dot column. */
@media (max-width: 760px) {
	.harmonogram__track {
		flex-direction: column;
		justify-content: flex-start;
		gap: var(--sp-4);
	}
	.harmonogram__track::before {
		top: 7px;
		bottom: 7px;
		left: 7px;
		right: auto;
		width: 2px;
		height: auto;
	}
	.harmonogram__step {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		padding-left: var(--sp-4);
	}
	.harmonogram__dot {
		position: absolute;
		left: 0;
		top: 2px;
	}
	.harmonogram__date {
		margin-top: 0;
	}
}

/* ---------- GALERIE TABS (Interiér / Exteriér / Výstavba) ---------- */

.galerie-tabs {
	background: var(--cream-raised);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.galerie-tabs__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--sp-5) 32px;
}
.galerie-tabs__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
	color: var(--ink);
}
.galerie-tabs__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin-bottom: var(--sp-4);
	border-bottom: 1px solid var(--border);
}
.galerie-tabs__tab {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 10px 18px;
	margin-bottom: -1px;
	color: var(--ink-soft);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.galerie-tabs__tab:hover { color: var(--green); }
.galerie-tabs__tab.is-active,
.galerie-tabs__tab[aria-selected="true"] {
	color: var(--green);
	border-bottom-color: var(--green);
}
.galerie-tabs__panel[hidden] { display: none; }
.galerie-tabs__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-3);
}
.galerie-tabs__item {
	margin: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--shadow-1);
}
.galerie-tabs__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.galerie-tabs__soon {
	margin: 0;
	padding: var(--sp-4);
	background: var(--cream-deep);
	border-radius: var(--r-md);
	color: var(--warm-grey);
	font-style: italic;
}

/* ---------- SITE HEADER (sticky; logo + nav + mobile toggle) ---------- */

/* The header template-part renders inside a plain <div class="wp-block-template-part">
   that is only as tall as the header, which traps position:sticky in that short
   wrapper (so it scrolls away). Collapse the top-level template-part wrappers so the
   sticky header's containing block is the full-height .wp-site-blocks and it sticks
   across the whole page scroll. */
.wp-site-blocks > .wp-block-template-part { display: contents; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--cream) 92%, transparent);
	border-bottom: 1px solid var(--border);
	backdrop-filter: saturate(140%) blur(8px);
	transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-scrolled {
	box-shadow: var(--shadow-1);
	background: var(--cream);
}
.site-header__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
}

/* Wordmark brand: KŠÍROVA 600 + "lofts" 400 (no address line). */
.site-header__brand {
	display: inline-flex;
	align-items: baseline;
	text-decoration: none;
}
.site-header__wordmark {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: 0.03em;
	color: var(--ink);
}
.site-header__wordmark-sub { font-weight: 400; }
.site-header__brand:hover .site-header__wordmark { color: var(--green); }

.site-header__nav {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}
/* The nav-primary template part wraps the links + CTA + partner logo in a
   .wp-block-template-part div (display:block by default); make it the flex row
   so the whole right cluster is one vertically-centered line. */
.site-header__nav .wp-block-template-part {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}
/* Navigation links only (not the CTA button / partner logo).
   Qualified with .wp-block-navigation-item__content so these rules reach
   specificity (0,3,1) and beat WP core's
   `.wp-block-navigation .item__content.item__content { color: inherit }` (0,3,0).
   Without the class our (0,2,1) rule silently loses and the link colour falls
   back to the inherited --ink — which only looks correct on the cream desktop
   header and went invisible on the dark mobile overlay. */
.site-header__nav .wp-block-navigation a.wp-block-navigation-item__content {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--ink);
}
.site-header__nav .wp-block-navigation a.wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation a.wp-block-navigation-item__content[aria-current="page"] { color: var(--green); }

/* Partner lockup: NK Real logo far right, with a left-border separator.
   The logo links to nkreal.cz; the <a> is a plain inline-flex wrapper. */
.site-header__partner {
	display: inline-flex;
	align-items: center;
	padding-left: var(--sp-2);
	margin-left: var(--sp-1);
	border-left: 1px solid var(--border-strong);
}
.site-header__partner a {
	display: inline-flex;
	align-items: center;
}
.site-header__partner img {
	display: block;
	height: 22px;
	width: auto;
}

/* Mobile nav toggle (hamburger) – hidden on desktop. */
.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--cream-raised);
	color: var(--ink);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	position: relative;
	transition: transform var(--dur) var(--ease), top var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-toggle__bar::before { position: absolute; top: -6px; }
.nav-toggle__bar::after { position: absolute; top: 6px; }

@media (max-width: 860px) {
	.nav-toggle { display: inline-flex; }
	.site-header__nav {
		position: fixed;
		inset: 0;
		flex-direction: column;
		justify-content: center;
		gap: var(--sp-4);
		/* Dark overlay – the page stays only faintly visible behind, like bdokruzni
		   (rgba, not color-mix(...transparent), which rendered too light). --ink #3A3A3C. */
		background: rgba(58, 58, 60, 0.95);
		height: 100vh;
		height: 100dvh;
		transform: translateY(-100%);
		transition: transform var(--dur) var(--ease);
		z-index: 110;
	}
	/* In the full-screen overlay the inner cluster stacks vertically too. */
	.site-header__nav .wp-block-template-part {
		flex-direction: column;
		align-items: center;
		gap: var(--sp-4);
	}
	/* The navigation links list also stacks + centers in the overlay. */
	.site-header__nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: center;
		gap: var(--sp-3);
	}
	body.nav-open .site-header__nav { transform: translateY(0); }
	body.nav-open { overflow: hidden; }
	/* Light links on the dark scrim (same (0,3,1) qualification as the base rule). */
	.site-header__nav .wp-block-navigation a.wp-block-navigation-item__content { font-size: var(--fs-lead); color: var(--cream); }
	.site-header__nav .wp-block-navigation a.wp-block-navigation-item__content:hover,
	.site-header__nav .wp-block-navigation a.wp-block-navigation-item__content[aria-current="page"] { color: color-mix(in srgb, var(--green) 30%, var(--cream)); }
	/* Hamburger morphs to a cream X and rises above the scrim so it stays the tappable close button. */
	body.nav-open .nav-toggle { z-index: 120; background: transparent; border-color: transparent; color: var(--cream); }
	body.nav-open .nav-toggle__bar { background: transparent; }
	body.nav-open .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
	body.nav-open .nav-toggle__bar::after { top: 0; transform: rotate(-45deg); }
	/* In the full-screen overlay the partner lockup separator reads oddly; drop it. */
	.site-header__partner { display: none; }
}

/* ---------- SITE FOOTER (charcoal, 4-col: wordmark + 3 entities) ---------- */

.site-footer {
	background: var(--ink);
	color: var(--cream);
}
.site-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 64px 32px 40px;
}
.site-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
}
.site-footer__wordmark {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 28px;
	letter-spacing: 0.03em;
	color: var(--white);
}
.site-footer__col-title {
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--cream) 70%, var(--ink));
	margin-bottom: 10px;
}
.site-footer__line {
	font-size: var(--fs-small);
	line-height: var(--lh-body);
	color: color-mix(in srgb, var(--cream) 80%, var(--ink));
}
.site-footer__legal {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid color-mix(in srgb, var(--cream) 16%, transparent);
	font-size: var(--fs-caption);
	color: color-mix(in srgb, var(--cream) 65%, var(--ink));
}
.site-footer__legal a { color: color-mix(in srgb, var(--cream) 80%, var(--ink)); }
.site-footer__legal a:hover { color: var(--white); }

/* ============================================================
   CONTENT PATTERNS (prose, standards, parking, legal, placeholders)
   – all colours via tokens, no raw hex.
   ============================================================ */

/* ---------- PROSE / LEGAL (constrained text sections) ---------- */

.legal-prose {
	max-width: var(--wp--style--global--content-size, 760px);
}
.legal-prose > * + * {
	margin-top: var(--sp-3);
}
.legal-prose h3 {
	margin-top: var(--sp-4);
}

/* Visible "TODO: doplní zákazník" placeholders – clearly provisional, never mistaken for final copy. */
.is-placeholder {
	display: inline-block;
	padding: 6px 12px;
	border: 1px dashed var(--border-strong);
	border-radius: var(--r-sm);
	background: var(--cream-deep);
	color: var(--warm-grey);
	font-style: italic;
}

/* ---------- STANDARD GRID (Standardy provedení) ---------- */

.standard-grid {
	background: var(--cream-raised);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.standard-grid__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--sp-5) 32px;
}
.standard-grid__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
	color: var(--ink);
}
.standard-grid__lead {
	max-width: 760px;
	font-size: var(--fs-lead);
	line-height: var(--lh-snug);
	color: var(--ink-soft);
}
.standard-grid__lead + .standard-grid__lead {
	margin-top: var(--sp-2);
}
.standard-grid__layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-5);
	align-items: center;
}
.standard-grid__text {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}
.standard-grid__text .standard-grid__title,
.standard-grid__text .standard-grid__lead {
	margin: 0;
}
.standard-grid__image {
	margin: 0;
}
.standard-grid__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--r-md);
}

/* ============================================================
   RESPONSIVE (component-level)
   ============================================================ */

@media (max-width: 960px) {
	.hero { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-5) 32px var(--sp-4); }
	.schuzka { grid-template-columns: 1fr; gap: var(--sp-4); }
	.kontakt__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
	.home-lokalita,
	.home-parkovani { grid-template-columns: 1fr; gap: var(--sp-4); }
	.home-komfort__layout { grid-template-columns: 1fr; gap: var(--sp-4); }
	.standard-grid__layout { grid-template-columns: 1fr; gap: var(--sp-4); }
}

@media (max-width: 640px) {
	.hero { padding: var(--sp-4) 20px; }
	.value-strip__inner { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-4) 20px; }
	.galerie-tabs__inner { padding: var(--sp-4) 20px; }
	.galerie-tabs__grid { grid-template-columns: 1fr; gap: var(--sp-2); }
	.home-section__inner { padding: var(--sp-4) 20px; }
	.site-header__inner { padding: 12px 20px; }
	.site-footer__inner { padding: var(--sp-4) 20px var(--sp-3); }
	.site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
	/* Spec table: horizontal overflow on phones instead of squishing. */
	.spec-table__wrap { overflow-x: auto; }
	.spec-table { min-width: 560px; }
	.broker-card__avatar { width: 96px; height: 120px; }
	.schuzka__media img { max-width: 360px; margin-inline: auto; }
	.standard-grid__inner,
	.home-lokalita,
	.home-parkovani { padding-inline: 20px; }
	.kontakt__inner { padding-inline: 20px; }
	.kontakt__form { padding: var(--sp-3); }
}

/* Czech-safe justification only reads well on WIDE prose. On narrow columns
   (<=360px) the spaced word gaps get ragged, so fall back to a normal left edge
   for every justified block. */
@media (max-width: 360px) {
	.lead,
	.standard-grid__lead,
	.home-section__inner--prose p,
	.home-lokalita__text p,
	.home-parkovani__text p {
		text-align: left;
	}
}

@media (max-width: 420px) {
	.site-footer__cols { grid-template-columns: 1fr; }
}

/* ============================================================
   BYTY SELECTOR – floor-plan-first interactive apartment map.
   Reuses .apt--* (status context), .floor-stack/.floor-pill,
   .spec-table, .status-badge, .penb-badge. Token-only; the
   schematic SVG plans are a replaceable orientation placeholder.
   ============================================================ */

.byty-selector {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	/* Containing block for the JS-built .byty-popover (position:absolute);
	   placePopover() computes offsets against this root's box. */
	position: relative;
	/* Self-constrain to the SAME content box as the header + home sections
	   (1200px centred + 32px inline padding) so /byty lines up with the nav.
	   The page-byty wrapper is full-width (not align:wide-constrained), so this
	   max-width is what sets the page width. */
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 32px;
}
.byty-selector__title { font-size: var(--fs-h2); }
.byty-selector__empty { color: var(--ink-soft); }

/* ---------- Top: intro column + centered horizontal floor selector ----------
   The bdokruzni.cz "Výběr bytů" head: a left-aligned intro (title + two leads +
   PENB badge) and, centered below it, a row of floor tabs (1 2 3 4 Parkování).
   The active floor's whole-floor plan + table render in .byty-selector__views. */
.byty-selector__top {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}
.byty-selector__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-5);
	align-items: center;
}
/* Stack the intro above the building render on tablet/mobile. This override must
   sit AFTER the base rule above (the global responsive block earlier in the file
   can't win on equal specificity), so the byty component carries its own. */
@media (max-width: 960px) {
	.byty-selector__head {
		grid-template-columns: 1fr;
		gap: var(--sp-4);
	}
}
.byty-selector__building {
	min-width: 0;
}
.byty-selector__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-2);
	max-width: 62ch;
}
.byty-selector__lead {
	margin: 0;
	font-size: var(--fs-lead);
	color: var(--ink-soft);
}
.byty-selector__lead--strong { color: var(--ink); }

.byty-selector__views {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	min-width: 0;
}

/* ---------- Centered horizontal floor selector (1 2 3 4 Parkování) ---------- */
.floor-tabs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
}
.floor-tabs__label {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--warm-grey);
}
.floor-tabs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-1);
}
.floor-tabs__item { display: flex; }
/* One floor tab: a square-ish pill button. Resting = cream-raised with a hairline
   border; hover/focus lifts the border to green; .is-active fills it green. */
.floor-tabs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
	padding: 0 var(--sp-2);
	background: var(--cream-raised);
	border: 1.5px solid var(--border-strong);
	border-radius: var(--r-sm);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-lead);
	line-height: 1;
	color: var(--ink);
	text-decoration: none;
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.floor-tabs__btn--parking {
	min-width: auto;
	padding: 0 var(--sp-3);
	font-size: var(--fs-body);
}
.floor-tabs__btn:hover {
	border-color: var(--green);
	box-shadow: var(--shadow-1);
	transform: translateY(-1px);
}
.floor-tabs__btn.is-active {
	background: var(--green);
	border-color: var(--green);
	color: var(--white);
}
.floor-tabs__btn:focus-visible {
	outline: 3px solid var(--green-ring);
	outline-offset: 2px;
}

/* ---------- Selected view (a floor's plan + table, or the parking view) ---------- */
.byty-selector__view[hidden] { display: none; }
.byty-floor-view {
	background: var(--cream-raised);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--sp-3);
	box-shadow: var(--shadow-1);
	position: relative;
}
.byty-floor-view__title { font-size: var(--fs-h3); margin-bottom: var(--sp-3); }
/* Floor view: the whole-floor plan on top, the canonical apartment LIST directly
   below it (grand-review spec item 4 "apartment list below plan", matching the
   bdokruzni.cz /byty layout). Single column at every width so the table always
   sits beneath the plan rather than beside it. */
.byty-floor-view__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-4);
	align-items: start;
}

/* ---------- Whole-floor clickable plan (one inline SVG per floor) ----------
   The centrepiece: ONE architectural plan per floor (cream rooms + crisp wall /
   window / furniture linework) with every apartment a clickable status-coloured
   <a class="floor-apt floor-apt--STATUS">. Geometry is real DWG world-coord SVG
   (inc/building-floors.php → bdks_render_floor_plan()); colours stay tokenised. */
.floor-plan {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	min-width: 0;
}
.floor-plan__svg {
	display: block;
	width: 100%;
	max-width: 440px;
	align-self: center;
	height: auto;
	background: var(--cream-raised);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	padding: var(--sp-2);
}
/* Page background + neutral cream room fills, drawn once beneath the units. */
.floor-plan__bg { fill: var(--cream-raised); }
.floor-plan__room { fill: var(--cream); }
/* Wall / window / stair / furniture linework keeps the DWG's own colours, so the
   detail group only needs pointer-events off (it sits above the clickable units). */
.floor-plan__detail { pointer-events: none; }

/* One apartment footprint: filled with its status colour (a soft wash so the
   room linework above stays legible). The whole <a> is the click target; hover /
   focus deepen the wash. tabindex="-1" (the table below is the keyboard path), so
   no focus ring is needed here. */
.floor-apt { cursor: pointer; }
.floor-apt__shape {
	fill: var(--apt-bg, var(--cream-deep));
	stroke: var(--apt-fg, var(--green));
	stroke-width: 60;
	stroke-linejoin: round;
	fill-opacity: 0.7;
	transition: fill-opacity var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
}
.floor-apt:hover .floor-apt__shape,
.floor-apt:focus .floor-apt__shape,
.floor-apt.apt--highlighted .floor-apt__shape {
	fill: var(--apt-fg);
	fill-opacity: 0.9;
	stroke-width: 160;
}
/* Status context for the plan footprints: --apt-bg fills the room, --apt-fg the
   outline. volný = planter-green wash, rezervováno = amber, prodáno = muted grey
   (the .apt--* tokens in the STATUS CONTEXT block). */
.floor-apt--volny {
	--apt-fg: var(--green);
	--apt-bg: var(--status-volny-bg);
}
.floor-apt--rezervovano {
	--apt-fg: var(--status-rezervovano);
	--apt-bg: var(--status-rezervovano-bg);
}
.floor-apt--prodano {
	--apt-fg: var(--status-prodano);
	--apt-bg: var(--status-prodano-bg);
}

/* ============================================================
   BUILDING FLOOR-PICKER – the dum-ulice.jpg street render with a
   clickable SVG <polygon> floor zone over each storey (4.NP at the
   top down to 1.NP at the bottom), the way bdokruzni.cz layers its
   Image Map Pro polygons over the building photo. Shared by the
   /byty selector and the homepage Komfortní
   bydlení teaser (inc/building-floors.php). Polygon coords come from
   dum-ulice.jpg (see inc/building-floors.php bdks_floor_zones()).
   Token-only; no hex literals.
   ============================================================ */
.building-floors {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

/* Interactive street render: the dum-ulice.jpg image as an SVG <image> with one
   clickable <a><polygon> per storey. The figure keeps the render's 16:9 box; the
   SVG fills it so the polygons stay registered to the building at every width. */
.building-image {
	margin: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1.5px solid var(--border);
	box-shadow: var(--shadow-1);
}
.building-image__svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
/* One floor zone: fully transparent at rest (no visible border, no stroke) so the
   render stays clean; hover / focus / active wash it brand green with a green
   outline. */
.floor-zone {
	fill: transparent;
	stroke: transparent;
	stroke-width: 0;
	stroke-linejoin: round;
	cursor: pointer;
	transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
}
.floor-zone-link:hover .floor-zone,
.floor-zone-link:focus-visible .floor-zone,
.floor-zone-link.is-active .floor-zone {
	fill: color-mix(in srgb, var(--green) 42%, transparent);
	stroke: var(--green);
	stroke-width: 3;
}
.floor-zone-link { cursor: pointer; }
/* No focus ring on the zone links: they are tabindex="-1" (the floor-card stack is
   the keyboard path), and a rectangular outline on an SVG <a> paints a wrong-shaped
   box that the global a:focus-visible rule otherwise keeps on screen after a click
   (the click focuses the <a>; preventDefault keeps you on the page, so it never
   blurs). The green polygon wash above is the only active/hover/click cue, so a
   click looks identical to a hover. Both :focus and :focus-visible are reset. */
.floor-zone-link:focus,
.floor-zone-link:focus-visible {
	outline: none;
}
/* Per-zone floor label (e.g. "2.NP") drawn at the zone centroid; hidden at rest,
   revealed on hover / focus / active so the render stays clean until interacted. */
.floor-zone__label {
	fill: var(--white);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 34px;
	opacity: 0;
	pointer-events: none;
	paint-order: stroke;
	stroke: color-mix(in srgb, var(--green-hover) 75%, transparent);
	stroke-width: 5;
	transition: opacity var(--dur) var(--ease);
}
.floor-zone-link:hover .floor-zone__label,
.floor-zone-link:focus-visible .floor-zone__label,
.floor-zone-link.is-active .floor-zone__label {
	opacity: 1;
}
.building-floors__hint {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--ink-soft);
}

/* Parking bays are an SVG interactive map (the clean courtyard schematic). Each
   bay is an <a class="byty-parking__stall"> wrapping a painted
   <polygon class="byty-parking__stall-shape">; hover/focus reveals the JS popover
   (bay code · status · price). VS_1–VS_3 carry --covered (under the zelená střecha). */
.byty-parking__stall { cursor: pointer; }
/* Status context per bay (volný / rezervováno / prodáno) – the SAME tokens as the
   apartments. Green-roof coverage is shown by the pergola box, not the bay colour. */
.byty-parking__stall--volny { --apt-fg: var(--status-volny); --apt-bg: var(--status-volny-bg); }
.byty-parking__stall--rezervovano { --apt-fg: var(--status-rezervovano); --apt-bg: var(--status-rezervovano-bg); }
.byty-parking__stall--prodano { --apt-fg: var(--status-prodano); --apt-bg: var(--status-prodano-bg); }
.byty-parking__stall-shape {
	fill: var(--apt-bg, color-mix(in srgb, var(--green) 10%, var(--cream)));
	stroke: var(--apt-fg, color-mix(in srgb, var(--green) 40%, transparent));
	stroke-width: 1.5;
	transition: fill var(--dur) var(--ease), fill-opacity var(--dur) var(--ease), stroke var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
}
/* VS_7 bezbariérové: the official International Symbol of Access (vozíčkář),
   filled in design-system green – no blue tile, just the icon. pointer-events
   off so the parent <a> stays the hit target. */
.byty-parking__access {
	fill: var(--green-hover);
	pointer-events: none;
}
.byty-parking__stall:hover .byty-parking__stall-shape {
	fill: var(--apt-fg);
	fill-opacity: 0.6;
	stroke: var(--apt-fg);
	stroke-width: 2.5;
}
/* Keyboard focus ring on the polygon at 0ms (SVG default outline fails WCAG 2.2). */
.byty-parking__stall:focus-visible { outline: none; }
.byty-parking__stall:focus-visible .byty-parking__stall-shape {
	fill: var(--apt-fg);
	fill-opacity: 0.6;
	stroke: var(--green-ring);
	stroke-width: 3;
	transition: none;
}
/* Table-side highlight echo when a plan apartment is hovered/focused (the JS
   cross-highlight toggles .apt--highlighted on both the <a class="floor-apt"> and
   the matching table <tr> by data-unit). */
.spec-table tr.apt--highlighted { background: var(--cream-deep); }

/* ---------- Legend ---------- */
.byty-selector__legend {
	list-style: none;
	margin: var(--sp-3) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2) var(--sp-3);
}
.byty-selector__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-small);
	color: var(--ink-soft);
}
.byty-selector__legend-swatch {
	width: 16px;
	height: 16px;
	border-radius: var(--r-sm);
	background: var(--apt-bg, var(--cream-deep));
	border: 1.5px solid var(--apt-fg, var(--ink));
}

/* ---------- Popover (sighted enhancement; JS-built) ---------- */
.byty-popover {
	position: absolute;
	transform: translate(-50%, -110%);
	z-index: 5;
	max-width: 220px;
	padding: 8px 12px;
	background: var(--ink);
	color: var(--white);
	border-radius: var(--r-sm);
	font-size: var(--fs-small);
	font-weight: 500;
	box-shadow: var(--shadow-2);
	pointer-events: auto;
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}
.byty-popover.is-visible { opacity: 1; }
/* The parking popover stacks three lines: the bay code (emphasised) then status
   and price. Each line is its own <span> so it does not depend on CSS
   white-space handling. */
.byty-popover__code,
.byty-popover__line { display: block; }
.byty-popover__code {
	font-family: var(--font-display);
	font-weight: 600;
}
.byty-popover__line {
	font-size: var(--fs-caption);
	color: color-mix(in srgb, var(--white) 88%, transparent);
}
/* Status word in its own colour, lightened to read on the dark popover. */
.byty-popover__status { font-weight: 600; }
.byty-popover__status--volny { color: color-mix(in srgb, var(--status-volny) 45%, white); }
.byty-popover__status--rezervovano { color: var(--status-rezervovano-raw); }
.byty-popover__status--prodano { color: color-mix(in srgb, var(--status-prodano) 35%, white); }
/* Price: a bold display line, omitted entirely for a sold unit (prodany.png). */
.byty-popover__price {
	display: block;
	margin-top: 3px;
	font-family: var(--font-display);
	font-weight: 700;
}

/* ---------- Parking sub-selector ---------- */
.byty-parking {
	background: var(--cream-raised);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--sp-3);
	box-shadow: var(--shadow-1);
}
.byty-parking__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.byty-parking__intro {
	margin: 0 0 var(--sp-3);
	max-width: 60ch;
	color: var(--ink-soft);
}
.byty-parking__svg {
	width: 100%;
	height: auto;
	display: block;
	font-family: var(--font-body);
}
.byty-parking__note {
	margin: var(--sp-3) 0 0;
	padding: 12px 16px;
	background: var(--green-tint);
	border-radius: var(--r-sm);
	color: var(--ink);
	font-weight: 600;
}

/* ---------- /byty parking schematic (clean courtyard row) ----------
   A minimal plan of 7 head-in stalls in the vnitroblok (parkovani2.png): VS_1–VS_3
   under the continuous zelená střecha (green roof), VS_4–VS_7 open, the dům wall
   behind and the příjezd (access drive) in front. No north arrow, no dimensions.
   Each bay is an <a class="byty-parking__stall"> wrapping a painted
   <polygon class="byty-parking__stall-shape"> (resting + hover/focus states are
   authored in the floor-picker section above). Only the supporting zones (canopy,
   aisle) and the labels live here. */
/* Zelená střecha – the green-roof canopy over VS_1–VS_3, with its label. */
.byty-parking__pergola {
	fill: color-mix(in srgb, var(--green) 20%, var(--cream));
	stroke: var(--green);
	stroke-width: 1.5;
}
.byty-parking__roof-label {
	fill: var(--green-hover);
	font-size: 13px;
	font-weight: 600;
	font-family: var(--font-body);
	letter-spacing: 0.02em;
}

/* Small-phone tuning (390-420px): tighten the floor-view, plan and parking
   padding, and let the legend / parking note stay readable at 390px. */
@media (max-width: 420px) {
	.byty-floor-view { padding: var(--sp-2); }
	.byty-selector__legend { gap: var(--sp-1) var(--sp-2); }
	.byty-selector__legend-item { font-size: var(--fs-caption); }
	.byty-parking { padding: var(--sp-2); }
	.byty-parking__note { padding: 10px 12px; }
	.floor-tabs__btn { min-width: 42px; min-height: 42px; font-size: var(--fs-body); }
	.spec-table__id { padding: 8px 6px; }
}

/* ============================================================
   UNIT DETAIL (/byty/<slug>/) – header + key-facts grid +
   karta-bytu illustrative náhled + contact CTA. Token-only,
   reuses .status-badge / .penb-badge / .card / .btn / .small.
   ============================================================ */

.unit-detail {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.unit-detail__empty {
	padding: var(--sp-4);
	text-align: center;
	color: var(--warm-grey);
}

/* ---------- header: title block + badges ---------- */

.unit-detail__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-3);
}
.unit-detail__heading { min-width: 0; }
.unit-detail__title { margin: 0; }
.unit-detail__subtitle {
	margin: var(--sp-1) 0 0;
	font-size: var(--fs-lead);
	color: var(--ink-soft);
}
.unit-detail__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
}

/* ---------- key-facts grid ---------- */

.unit-detail__facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--border);
}
.unit-detail__fact {
	padding: var(--sp-3);
	background: var(--cream-raised);
}
.unit-detail__fact dt {
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--warm-grey);
	margin: 0 0 var(--sp-1);
}
.unit-detail__fact dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 500;
	color: var(--ink);
}
.unit-detail__fact-note {
	display: block;
	margin-top: 4px;
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: 400;
	color: var(--warm-grey);
}

/* ---------- karta bytu (real per-unit content from assets/karty/) ---------- */

.unit-detail__karta {
	padding: var(--sp-4);
}
.unit-detail__karta-title { margin: 0 0 var(--sp-3); }

.karta-detail__pending {
	margin: 0;
	color: var(--warm-grey);
}

/* two columns: apartment plan on the left, legend + areas + orient on the right */
.karta-detail__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--sp-4);
	align-items: start;
}

.karta-detail__plan {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}
.karta-detail__cap {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--warm-grey);
}
.karta-detail__plan-img {
	background: var(--cream-raised);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	padding: var(--sp-2);
	display: flex;
	justify-content: center;
}
.karta-detail__plan-img svg {
	display: block;
	width: 100%;
	height: auto;
}

.karta-detail__info {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	min-width: 0;
}

/* room legend: č. / místnost / plocha */
.karta-detail__legend {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
}
.karta-detail__legend thead th {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-caption);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--warm-grey);
	text-align: left;
	padding: 0 0 var(--sp-1);
	border-bottom: 1px solid var(--border);
}
.karta-detail__legend th.num,
.karta-detail__legend td.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.karta-detail__legend tbody td {
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
	vertical-align: baseline;
	color: var(--ink-soft);
}
.karta-detail__legend td.code {
	color: var(--warm-grey);
	width: 14mm;
	font-variant-numeric: tabular-nums;
}

/* area totals: užitná + podlahová emphasised, outdoor muted below a dashed rule */
.karta-detail__areas {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}
.karta-detail__area {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--sp-2);
	font-size: var(--fs-body);
}
.karta-detail__area--primary {
	font-family: var(--font-display);
	font-weight: 600;
	padding: 10px var(--sp-2);
	background: var(--cream-deep);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
}
.karta-detail__area--primary .karta-detail__area-val { color: var(--ink); }
.karta-detail__area--outdoor {
	color: var(--warm-grey);
	border-top: 1px dashed var(--border);
	padding-top: 10px;
	margin-top: 2px;
}
.karta-detail__area-val { font-variant-numeric: tabular-nums; }

/* PENB badge + severka, sharing one row */
.karta-detail__orient {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}
.karta-detail__severka {
	display: block;
	width: 56px;
	height: 56px;
	flex: none;
}
.karta-detail__severka svg {
	display: block;
	width: 100%;
	height: 100%;
}

.unit-detail__karta-soon { color: var(--warm-grey); }

/* Karta action buttons row (emitted by the KARTA agent's unit-detail pattern):
   "Mám zájem" + the PDF link. --centered horizontally centres the row. */
.unit-detail__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}
.unit-detail__actions--centered { justify-content: center; }

/* ---------- contact CTA ---------- */

.unit-detail__cta {
	padding: var(--sp-4);
	text-align: center;
}
.unit-detail__cta-title { margin: 0 0 var(--sp-1); }
.unit-detail__cta-text { margin: 0 0 var(--sp-3); }

.unit-detail__back { margin: 0; }

@media (max-width: 760px) {
	.unit-detail__facts { grid-template-columns: repeat(2, 1fr); }
	.karta-detail__grid { grid-template-columns: 1fr; }
	.unit-detail__karta { padding: var(--sp-3); }
}

@media (max-width: 420px) {
	.unit-detail__facts { grid-template-columns: 1fr; }
	.unit-detail__fact { padding: var(--sp-2); }
}