/* ============================================================
   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);
}

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);
}
.spec-table tr:last-child td { border-bottom: none; }
.spec-table .is-num { text-align: right; 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 { color: var(--green); white-space: nowrap; }
.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__actions { color: var(--border-strong); }

/* ---------- 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 band (the .schuzka that carries the contact form) ----------
   The contact section reuses .schuzka but felt cramped/over-centered: the brokers
   column and the form well were squeezed into a 1fr/1.05fr split. Give the form
   more room and the brokers a comfortable minimum so the two columns read as a
   balanced 2-col layout on desktop. The inline max-width:1200px on the section
   stays; this only rebalances the inner grid. Stacks single-col on mobile via the
   existing `.schuzka { grid-template-columns: 1fr }` rule at <=960px. */
.schuzka:has(.contact-panel) {
	grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
	gap: var(--sp-5);
	align-items: start;
}

/* ---------- 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 .field__checkbox {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--green);
}
.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(--status-volny-bg);
	color: var(--status-volny);
}
.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__img {
	width: 100%;
	height: 460px;
	object-fit: cover;
	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);
}
.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;
}
.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) ---------- */

.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). */
.site-header__nav .wp-block-navigation a {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--ink);
}
.site-header__nav .wp-block-navigation a:hover,
.site-header__nav .wp-block-navigation a[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;
}
.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);
		background: var(--cream);
		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; }
	.site-header__nav .wp-block-navigation a { font-size: var(--fs-lead); }
	/* 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);
}

/* ============================================================
   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); }
	.schuzka:has(.contact-panel) { 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); }
}

@media (max-width: 640px) {
	.hero { padding: var(--sp-4) 20px; }
	.hero__img { height: auto; aspect-ratio: 16 / 11; }
	.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; }
}

/* 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;
	/* Break out of the constrained content wrapper on large screens so the floor
	   plans + table have real room (the page was "compressed to the middle").
	   Expand symmetrically up to 1480px or ~94vw, whichever is smaller. The
	   margin-inline below is WRAPPER-relative (50% resolves against the
	   align:wide constrained wrapper, not the viewport), so symmetric centering
	   relies on that wrapper already being centered; the equal left/right margins
	   keep the section centred within it. On narrow viewports the negative margin
	   resolves to ~0 and is a no-op. */
	width: min(1480px, 94vw);
	max-width: 94vw;
	margin-inline: calc(50% - min(740px, 47vw));
}
.byty-selector__title { font-size: var(--fs-h2); }
.byty-selector__empty { color: var(--ink-soft); }

/* ---------- Building floor-picker (street render + clickable bands) ---------- */
.byty-selector__picker {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}
.byty-selector__picker-meta {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-wrap: wrap;
}
.byty-selector__picker-note {
	margin: 0;
	color: var(--ink-soft);
}

/* ---------- 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); }
/* Wide two-pane floor view: the real apartment plans take the larger pane on the
   left, the canonical unit table the right. Stacks below 960px. */
.byty-floor-view__grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: var(--sp-4);
	align-items: start;
}

/* ---------- Real apartment-plan gallery (one card per unit) ---------- */
.byty-plan-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--sp-3);
}
.byty-plan-grid__empty {
	grid-column: 1 / -1;
	color: var(--ink-soft);
}
.byty-plan-card { display: flex; }
.byty-plan-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: var(--sp-2);
	padding: var(--sp-2);
	background: var(--cream);
	border: 1.5px solid var(--border);
	border-radius: var(--r-md);
	text-decoration: none;
	color: var(--ink);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.byty-plan-card__link:hover,
.byty-plan-card__link:focus-visible,
.byty-plan-card__link.apt--highlighted {
	border-color: var(--green);
	box-shadow: var(--shadow-1);
	transform: translateY(-2px);
}
/* Specificity (0,2,0) so it beats the legacy `.apt { cursor }` family without
   the deleted `.apt:focus-visible { outline:none }` rule re-suppressing it. */
.byty-plan-card__link.apt:focus-visible {
	outline: 3px solid var(--green-ring);
	outline-offset: 2px;
}
.byty-plan-card__figure {
	position: relative;
	display: block;
	background: var(--white);
	border-radius: var(--r-sm);
	border: 1px solid var(--border);
	/* The plan SVGs carry an --apt-fg accent strip via the card's status border. */
	border-inline-start: 4px solid var(--apt-fg, var(--border));
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.byty-plan-card__plan {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
}
.byty-plan-card__missing {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: var(--sp-2);
	color: var(--warm-grey);
	font-size: var(--fs-caption);
	font-style: italic;
	text-align: center;
}
.byty-plan-card__status {
	position: absolute;
	top: 6px;
	right: 6px;
}
.byty-plan-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px var(--sp-2);
}
.byty-plan-card__id {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--ink);
}
.byty-plan-card__disp,
.byty-plan-card__area {
	font-size: var(--fs-small);
	color: var(--ink-soft);
}

/* ============================================================
   BUILDING FLOOR-PICKER – the street render with 4 clickable
   horizontal floor bands + a Parkování control. Shared by the
   /byty selector and the homepage Komfortní bydlení teaser
   (inc/building-floors.php). Token-only.
   ============================================================ */
.building-floors {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}
.building-floors__svg {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	font-family: var(--font-display);
}
.building-floors__band,
.byty-parking__stall { cursor: pointer; }
/* Floor bands and parking bays share one interactive-shape system: a faint
   --green wash at rest, a stronger --green fill on hover/active/focus. The two
   interactive maps must feel like one component, so their shape states are
   authored as shared selector lists rather than duplicated per map. */
.building-floors__band-shape,
.byty-parking__stall-shape {
	/* Resting affordance: a QUIET hint only – a barely-there green wash + a thin
	   green hairline so storeys read as selectable on touch + desktop, without the
	   heavy persistent border that made every band look pre-selected. The stronger
	   fill + stroke is revealed only on :hover / :focus-visible / .is-active below. */
	fill: color-mix(in srgb, var(--green) 8%, transparent);
	stroke: color-mix(in srgb, var(--green) 30%, transparent);
	stroke-width: 1;
	transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
}
.building-floors__band-label {
	fill: var(--white);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.02em;
	/* Visible at rest (not 0) so every floor reads as labelled and clickable. */
	opacity: 0.72;
	transition: opacity var(--dur) var(--ease);
	paint-order: stroke;
	stroke: color-mix(in srgb, var(--ink) 70%, transparent);
	stroke-width: 3;
}
.building-floors__band:hover .building-floors__band-shape,
.building-floors__band.is-active .building-floors__band-shape,
.byty-parking__stall:hover .byty-parking__stall-shape,
.byty-parking__stall.is-active .byty-parking__stall-shape {
	fill: color-mix(in srgb, var(--green) 55%, transparent);
	stroke: var(--white);
	stroke-width: 2;
}
.building-floors__band:hover .building-floors__band-label,
.building-floors__band.is-active .building-floors__band-label {
	opacity: 1;
}
/* Touch first-tap preview: a clearly-visible intermediate wash – stronger than
   the :hover hint, lighter than the committed .is-active fill. Shared by the
   floor bands and the parking stalls so the two interactive maps preview alike. */
.building-floors__band.is-previewing .building-floors__band-shape,
.byty-parking__stall.is-previewing .byty-parking__stall-shape {
	fill: color-mix(in srgb, var(--green) 30%, transparent);
	stroke: var(--green);
	stroke-width: 1.5;
}
/* Keyboard focus ring on the polygon at 0ms (SVG default outline fails WCAG 2.2). */
.building-floors__band:focus-visible,
.byty-parking__stall:focus-visible { outline: none; }
.building-floors__band:focus-visible .building-floors__band-shape,
.byty-parking__stall:focus-visible .byty-parking__stall-shape {
	fill: color-mix(in srgb, var(--green) 45%, transparent);
	stroke: var(--green-ring);
	stroke-width: 4;
	transition: none;
}
.building-floors__band:focus-visible .building-floors__band-label { opacity: 1; }
.building-floors__hint {
	margin: 0;
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--ink-soft);
}
.building-floors__parking {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: var(--r-pill);
	border: 1.5px solid var(--border-strong);
	background: var(--cream-deep);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.building-floors__parking:hover { border-color: var(--green); }
.building-floors__parking.is-active {
	background: var(--green);
	color: var(--white);
	border-color: var(--green);
}
.building-floors__parking:focus-visible {
	outline: 3px solid var(--green-ring);
	outline-offset: 2px;
}

/* ---------- Shared schematic-SVG primitives (reused by the parking plan) ----------
   The unit floor plans now render as HTML cards; these SVG paint rules survive
   because the Parkování schematic (patterns/byty-selector.php) reuses them for
   the dům wall and the severka (north arrow). */
.byty-floorplan__wall {
	fill: var(--cream);
	stroke: var(--ink);
	stroke-width: 2;
}
.byty-floorplan__severka-arrow {
	fill: var(--ink);
	stroke: var(--ink);
	stroke-width: 1;
}
.byty-floorplan__severka-label {
	fill: var(--ink);
	font-size: 11px;
	font-weight: 700;
}

/* Muted helper hint below the plan grid (HTML <p>, not SVG – uses `color`, not
   `fill`; keeps the readable .small body size). */
.byty-selector__hint {
	margin-top: var(--sp-2);
	color: var(--warm-grey);
}

/* ---------- Clickable unit cards (consume --apt-* from .apt--*) ----------
   The plan units render as HTML cards (.byty-plan-card__link.apt), not SVG
   polygons; the `.apt` class only carries the pointer cursor + the card's
   focus/highlight rules above. The legacy `.apt__shape/__id/__disp` polygon
   rules (and `.apt:focus-visible { outline:none }`) were removed with the
   schematic SVG so they no longer suppress the card's focus outline. */
.apt { cursor: pointer; }

/* Table-side highlight echo when a plan card is hovered/focused. */
.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;
	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; }

/* ---------- 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 (CAD-derived covered carport) ----------
   The CAD shows one long covered carport in the courtyard: a single row of
   head-in stalls under a continuous green roof (zelená střecha) on steel HEA
   columns, the dům behind and a masonry fence in front. Each focusable bay is an
   <a class="byty-parking__stall"> wrapping a painted
   <polygon class="byty-parking__stall-shape">; interaction state lives on the
   parent <a>, the fill on the child shape. The resting + hover/focus/active shape
   states are SHARED with the building floor bands (see the
   .building-floors__band-shape selector lists above) so the two interactive maps
   feel like one system. Only the parking-specific zones are authored here. */
/* Accessible (VS_7) bay: keep the green-tint identity at rest, brand-green stroke. */
.byty-parking__stall--handicap .byty-parking__stall-shape {
	fill: var(--green-tint);
	stroke: var(--green);
}
/* Zelená střecha – the continuous green-roof canopy over the stalls. */
.byty-parking__pergola {
	fill: color-mix(in srgb, var(--green) 12%, var(--cream));
	stroke: var(--green);
	stroke-width: 1.5;
}
/* Drive aisle in front of the stalls: neutral band, never interactive. */
.byty-parking__aisle {
	fill: var(--cream-deep);
	stroke: var(--border);
	stroke-width: 1;
}
/* Steel HEA 100 columns at the stall dividers. */
.byty-parking__column {
	fill: var(--ink);
	opacity: 0.55;
}
/* Masonry fence (oplocení) along the outer/front edge. */
.byty-parking__fence {
	fill: var(--warm-grey);
	opacity: 0.5;
}
.byty-parking__wheelchair {
	stroke: var(--green-hover);
	stroke-width: 1.4;
	fill: var(--green-hover);
}
.byty-parking__label {
	fill: var(--ink);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
}
.byty-parking__label--code { font-size: 13px; }
.byty-parking__label--roof {
	fill: var(--green-hover);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 10px;
}
.byty-parking__label--muted {
	fill: var(--warm-grey);
	font-weight: 500;
	font-size: 10px;
}
/* Parking legend keys. */
.byty-parking__keys {
	list-style: none;
	margin: var(--sp-3) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-3);
}
.byty-parking__key {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-small);
	color: var(--ink-soft);
}
.byty-parking__key-swatch {
	width: 16px;
	height: 16px;
	border-radius: var(--r-sm);
	border: 1.5px solid var(--green);
}
.byty-parking__key--roof .byty-parking__key-swatch {
	background: color-mix(in srgb, var(--green) 12%, var(--cream));
}
.byty-parking__key--handicap .byty-parking__key-swatch {
	background: var(--green-tint);
}

@media (max-width: 960px) {
	.byty-floor-view__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	/* Touch viewports have no :hover, so keep the band labels legible at rest. */
	.building-floors__band-label { opacity: 1; }
}

/* 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; }
	.building-floors__band-label { font-size: 15px; }
	.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%;
}

/* per-unit broker pulled from the karta json */
.karta-detail__broker {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--border);
}
.karta-detail__broker-eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--warm-grey);
}
.karta-detail__broker-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--fs-lead);
	color: var(--ink);
}
.karta-detail__broker-role {
	font-size: var(--fs-small);
	color: var(--warm-grey);
}
.karta-detail__broker-lines {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) var(--sp-3);
	margin-top: var(--sp-1);
}
.karta-detail__broker-link {
	font-size: var(--fs-small);
	font-variant-numeric: tabular-nums;
}

.unit-detail__karta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}
.unit-detail__karta-soon { color: var(--warm-grey); }

/* ---------- 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); }
}