/* ============================================================
   Novostavba Zálesie — predajná stránka
   Bez externých závislostí. Žiadne CDN, žiadne webfonty.
   ============================================================ */

:root {
  --ink:        #17191c;
  --ink-soft:   #4a4f57;
  /* #878d96 dávalo 3,34:1 na bielej a 3,15:1 na --sand, teda pod AA (4,5:1)
     vo všetkých deviatich roliach, v ktorých je použitá — popisky ceny,
     popisky všetkých parametrov, časy dojazdu, 24 popiskov pod fotkami.
     #6a7078 dáva 5,00 / 4,71 a medzi --ink-soft a papier vizuálne sadne. */
  --ink-faint:  #6a7078;
  --line:       #e3ded6;
  --line-soft:  #efebe4;
  --paper:      #ffffff;
  --sand:       #faf8f4;
  --sand-deep:  #f2ede5;

  /* Zálesie = „za lesom“ — tlmená lesná zelená ako akcent */
  --accent:       #35513f;
  --accent-hover: #2a4133;
  --accent-tint:  #eaf0ea;

  --radius: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(23, 25, 28, .06), 0 2px 8px rgba(23, 25, 28, .04);
  --shadow-md: 0 4px 16px rgba(23, 25, 28, .08), 0 12px 32px rgba(23, 25, 28, .06);

  --wrap: 1180px;
  --gap: clamp(3.5rem, 7vw, 7rem);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
}

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

/* scroll-padding-top: skok na kotvu inak pristane tesne pod lepivú hlavičku
   a vrch štítku sekcie ostane za ňou (namerané ~7 px pri 390 px). */
html { scroll-behavior: smooth; scroll-padding-top: 74px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* `height: auto` tu NIE JE kozmetika. Atribúty width/height na <img> sú
   prezentačné pokyny, ktoré sa mapujú na CSS `width`/`height`. Keď autorské
   pravidlo prepíše len šírku, výška zostane na hodnote atribútu (napr. 1600px),
   obe osi sú definitívne a `aspect-ratio` sa ZAHODÍ. Presne to sa stalo
   fotkám zo stavby: vykresľovali sa 1600 px vysoké a orezané na zvislý pás. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }

h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0; font-weight: 600; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.12rem; letter-spacing: -.01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--gap); }
.section--sand { background: var(--sand); }
.section--ink { background: var(--ink); color: #f3f1ee; }

/* Nadpis sekcie s malým štítkom nad ním */
.eyebrow {
  font-size: .74rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .9rem;
}
.section--ink .eyebrow { color: #9dbca8; }
.lede { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--ink-soft); max-width: 62ch; }
.section-head { max-width: 68ch; margin-bottom: 3rem; }

/* ---------- Hlavička ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 62px; }

.brand { font-weight: 600; letter-spacing: -.01em; text-decoration: none; color: var(--ink); }
.brand span { color: var(--ink-faint); font-weight: 400; }

.nav { margin-left: auto; display: flex; gap: 1.6rem; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .93rem;
  padding-block: .35rem; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a.is-active { color: var(--ink); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: .45rem .7rem; font: inherit; font-size: .9rem;
  cursor: pointer; color: var(--ink);
}

@media (max-width: 860px) {
  .nav {
    position: fixed; inset: 62px 0 auto; flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.25rem; box-shadow: var(--shadow-md);
    transform: translateY(-130%); margin-left: 0;
    /* Na ležato (výška okna 375 px) je panel vyšší než obrazovka a posledné
       položky vrátane „Kontakt“ sa nedali dosiahnuť — nebolo kam rolovať. */
    max-height: calc(100vh - 62px); overflow-y: auto; overscroll-behavior: contain;
    /* `visibility` zavreté menu vyradí z tabulátora aj z odčítača obrazovky.
       Bez nej tam ostávalo 7 neviditeľných zastávok tabulátora nad obrazovkou.
       Prepína sa až po dobehnutí posunu, aby bol zásuv stále vidieť. */
    visibility: hidden; transition: transform .25s ease, visibility 0s .25s;
  }
  .nav.is-open {
    transform: none; visibility: visible;
    transition: transform .25s ease, visibility 0s;
  }
  .nav a { padding-block: .8rem; border-bottom: 1px solid var(--line-soft); }
  .nav-toggle { display: block; }
}

/* ---------- Hero ----------
   Obrázok a text ležia v JEDNEJ bunke mriežky, takže sa prekrývajú — ale
   výšku riadka určuje ten vyšší z nich.
   PREČO to nie je `position: absolute` (bola to chyba): text bol vyňatý
   z toku, rám mal výšku z `min-height: 380px` a obsah (na telefóne 593 px)
   z neho rástol NAHOR — 150 px vrátane celého <h1> a štítku „Vo výstavbe“
   skončilo nad začiatkom dokumentu, kam sa nedá odrolovať. Namerané na
   každej šírke do 414 px a čiastočne až do 1366 px.
   Pomer strán a `max-height` preto nesie rozmerová vzpera (::before), nie
   samotný rám: vzpera dá rámu MINIMÁLNU výšku, text ho môže pretlačiť vyššie. */
.hero { position: relative; background: var(--ink); display: grid; }
.hero-media {
  grid-area: 1 / 1; position: relative; width: 100%; overflow: hidden;
}
/* `width: 100%` na .hero-media NIE JE kozmetika. S `aspect-ratio` a `min-height`
   bez zadanej šírky si prehliadač šírku dopočíta z najmenšej výšky:
   380 × 16/9 = 676 px. Tá sa potom stane šírkou celého dokumentu, takže na
   telefóne (390 px) pretekala stránka o 286 px. Preto je vzpera samostatná
   a šírku berie z rodiča. */
.hero-media::before {
  content: ''; display: block;
  aspect-ratio: 16 / 9; min-height: 380px; max-height: 78vh;
}
.hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; opacity: .92;
}
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,12,14,.5) 0%, rgba(10,12,14,.22) 32%, rgba(10,12,14,.86) 100%);
}
.hero-body {
  grid-area: 1 / 1; position: relative; align-self: end; z-index: 2;
  /* Hore: lepivá hlavička má 62 px a hero začína pod ňou — bez odsadenia by
     štítok „Vo výstavbe“ na telefóne skončil za ňou.
     Dole: cenový panel sa vyťahuje o −3.5rem, takže tlačidlá musia mať aspoň
     toľko miesta, inak ich panel preseká (na telefóne bral 28 z 52 px). */
  padding-top: calc(62px + clamp(1rem, 3vw, 2rem));
  padding-bottom: calc(3.5rem + clamp(1.25rem, 2vw, 2rem));
  color: #fff;
}
.hero-status {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
  padding: .3rem .8rem; border-radius: 100px; margin-bottom: 1.1rem;
  backdrop-filter: blur(6px);
}
.hero-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #86e0a3; box-shadow: 0 0 0 3px rgba(134, 224, 163, .28);
}
.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.9rem); font-weight: 600; max-width: 17ch;
  text-shadow: 0 1px 24px rgba(0, 0, 0, .3);
}
.hero-tagline {
  font-size: clamp(1rem, 1.9vw, 1.32rem); color: rgba(255, 255, 255, .9);
  margin-top: .9rem; max-width: 46ch;
}

/* Pás s kľúčovými číslami pod hero */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 0 3.5rem; margin-top: 2rem;
  padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .22);
}
.hero-stats div { padding-block: .35rem; }
.hero-stats b {
  display: block; font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
}
.hero-stats b small { font-size: .5em; font-weight: 500; opacity: .78; margin-left: .2em; }
.hero-stats span { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; opacity: .72; }

/* ---------- Tlačidlá ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .96rem; font-weight: 500; text-decoration: none;
  padding: .78rem 1.5rem; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: background .18s, border-color .18s, color .18s, transform .06s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.42); }
.btn--ghost:hover { background: rgba(255,255,255,.2); }
.btn--outline { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn--outline:hover { border-color: var(--ink-faint); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }

/* ---------- Cenový panel ----------
   Počet stĺpcov je zadaný natvrdo, nie cez `auto-fit`. Dôvod: panel má farbu
   linky ako pozadie a 1px medzery, takže NEDOPLNENÝ posledný riadok svieti
   ako veľký sivý obdĺžnik. `auto-fit` dával pri viewporte 614–805 px tri
   stĺpce na štyri položky, teda ~484 × 139 px sivej plochy hneď vedľa ceny.
   4 položky sa preto delia len na 1, 2 alebo 4 stĺpce. */
.offer {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; margin-top: -3.5rem;
  position: relative; z-index: 5; box-shadow: var(--shadow-md);
}
@media (max-width: 430px) { .offer { grid-template-columns: 1fr; } }
@media (min-width: 820px) { .offer { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.offer > div { background: var(--paper); padding: 1.45rem 1.6rem; }
.offer dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.offer dd { margin: .4rem 0 0; font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; }
.offer dd.is-price { color: var(--accent); font-size: 1.45rem; }
.offer-note { color: var(--ink-soft); font-size: .93rem; margin-top: 1.1rem; }

/* ---------- Text + zoznam predností ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.5rem; }
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.6rem;
}
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------- Parametre ---------- */
/* Tá istá poistka ako pri .offer: 12 položiek sa musí deliť bezo zvyšku.
   `auto-fit` dával od 1044 px päť stĺpcov, teda ~709 × 105 px sivej diery
   v poslednom riadku na väčšine desktopov. 1–4 stĺpce delia 12 bezo zvyšku,
   päť treba zastropovať. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 1040px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts > div { background: var(--sand); padding: 1.35rem 1.5rem; }
.section--sand .facts > div { background: var(--paper); }
.facts dt { font-size: .82rem; color: var(--ink-faint); }
.facts dd { margin: .3rem 0 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; }
.facts dd small { font-size: .62em; font-weight: 500; color: var(--ink-soft); margin-left: .25em; }

/* ---------- Pôdorys ---------- */
.plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 2.5rem; align-items: start; }
@media (max-width: 940px) { .plan-layout { grid-template-columns: 1fr; } }

.plan-stage {
  position: relative;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(.75rem, 2vw, 1.5rem);
}
.plan-stage svg { width: 100%; height: auto; display: block; touch-action: manipulation; }

/* Cesta k čitateľnej verzii musí byť vidieť: kresba je 16,5 m široká, takže na
   telefóne z nej ostane tvar domu, nie mená izieb. Tlačidlo preto leží priamo
   na pôdoryse a je tam na každej šírke, nielen na malej. */
.plan-zoom-open {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .78rem; font: inherit; font-size: .86rem; font-weight: 600;
  color: var(--ink); background: rgba(255, 255, 255, .94);
  border: 1px solid var(--line); border-radius: 100px;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.plan-zoom-open:hover, .plan-zoom-open:focus-visible {
  color: var(--accent); border-color: var(--accent);
}
.plan-zoom-open svg {
  width: 15px; height: 15px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
}

/* Pôdorys cez celú obrazovku. Vlastný dialóg — galériový .lightbox je stavaný
   na <img>, tu sa transformuje SVG. Kresba sedí v rámiku s presným pomerom
   strán, takže okolo nej ostáva pozadie, ktoré sa dá kliknúť (zavretie). */
.planzoom {
  position: fixed; inset: 0; z-index: 110;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: var(--sand); place-items: center;
  touch-action: none;                 /* gestá patria pôdorysu, nie stránke */
}
/* `display` MUSÍ visieť na [open]: zatvorený <dialog> skrýva štýl prehliadača
   pravidlom display: none, a autorský `display: grid` ho prebije — dialóg by
   potom ostal navrchu stránky aj zatvorený. */
.planzoom[open] { display: grid; }
.planzoom::backdrop { background: rgba(12, 14, 16, .6); }
.planzoom-box {
  transform-origin: 50% 50%; will-change: transform;
  background: var(--paper);
  user-select: none; -webkit-user-select: none;
}
.planzoom-box svg { width: 100%; height: 100%; display: block; }
.planzoom-close {
  position: absolute; top: .8rem; right: .8rem; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; line-height: 1;
  font-size: 1.5rem; cursor: pointer; color: var(--ink);
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.planzoom-hint {
  position: absolute; bottom: .7rem; left: 50%; transform: translateX(-50%);
  margin: 0; padding: .3rem .8rem; pointer-events: none; z-index: 3;
  font-size: .8rem; color: var(--ink-soft); text-align: center;
  background: rgba(255, 255, 255, .9); border-radius: 100px;
}
@media (prefers-reduced-motion: no-preference) {
  .planzoom[open] { animation: planzoom-in .16s ease-out; }
  @keyframes planzoom-in { from { opacity: 0; } to { opacity: 1; } }
}

/* PLAN-CSS-START — všetko po značku /PLAN-CSS-END číta aj tools/plan_preview.mjs
   a vkladá to do samostatného náhľadu. Súradnice v SVG sú MILIMETRE, preto sú
   hrúbky čiar a veľkosti písma v stovkách. */
.plan-svg { --pl-wall: #2b2f36; --pl-line: #5c626c; --pl-ins: #cfcac0; }

/* Kliká sa len do miestností. Murivo sa kreslí NAD ich výplňou (obdĺžnik 1.03
   v dátach zasahuje do priečky H5), takže bez tohto by murivo klik pohltilo.
   Výnimka: komín a záhon ležia MIMO miestností, takže im hover s popisom
   nevadí. Otvory zostávajú nekliknuteľné zámerne — oblúky dverí zasahujú do
   miestností a odhryzli by z plochy, na ktorú sa dá kliknúť. */
.plan-outdoor-layer, .plan-chimney-layer, .plan-floor,
.plan-wall-layer, .plan-symbols, .plan-captions, .plan-dims { pointer-events: none; }
.plan-chimney-layer > *, .plan-bed-g { pointer-events: auto; }

/* Vykurovaná podlaha — aby diery po dverách nesvietili farbou papiera. */
.plan-floor { fill: #fbfaf7; }

/* Murivo ako plná hmota; zateplenie svetlejšie, aby sa dalo odlíšiť. */
.plan-masonry { fill: var(--pl-wall); }
.plan-insulation { fill: var(--pl-ins); }

/* Miestnosti: veľmi svetlá výplň, hranicu robí murivo, nie obrys. */
.room { cursor: pointer; }
.room .room-fill { fill: var(--sand-deep); stroke: none; transition: fill .15s; }
.room[data-group="day"]   .room-fill { fill: #f7f1e6; }
.room[data-group="night"] .room-fill { fill: #eff2f7; }
.room[data-group="bath"]  .room-fill { fill: #e9f2f3; }
.room[data-group="tech"]  .room-fill { fill: #f3f2ee; }
.room[data-group="circ"]  .room-fill { fill: #f6f4f0; }
.room:hover .room-fill, .room.is-active .room-fill { fill: var(--accent-tint); }
/* Blink NEKRESLÍ `outline` na kontajnerový SVG prvok (<g>), takže 16 miestností
   bolo tabovateľných úplne bez viditeľného fokusu (pixelový rozdiel 20/255,
   vlasová čiara). Prstenec preto kreslíme na samotný tvar výplne. Hodnoty sú
   v milimetroch výkresu — 110 mm je pri 800 px kresbe ~5 px, z toho polovica
   leží vnútri miestnosti, teda mimo muriva kresleného navrch. */
.room:focus-visible { outline: none; }
.room:focus-visible .room-fill {
  fill: var(--accent-tint); stroke: var(--accent); stroke-width: 110;
}

.room-caption text { text-anchor: middle; pointer-events: none; }
.room-caption .room-num   { fill: var(--ink-faint); font-weight: 600; letter-spacing: 12px; }
.room-caption .room-label { fill: var(--ink); font-weight: 600; }
.room-caption .room-area  { fill: var(--ink-soft); }
.room-caption.is-active .room-label,
.room-caption.is-active .room-num,
.room-caption.is-active .room-area { fill: var(--accent); }

/* Biela aura pod textom — kreslí sa ako prvá kópia toho istého textu.
   V izbách je úzka (stačí prerušiť oblúk dverí), vonku širšia (kryje laty). */
.plan-svg text.halo { stroke: var(--paper); stroke-width: 110; stroke-linejoin: round; fill: none; }
.plan-svg .room-caption text.halo { stroke-width: 62; }

/* Otvory: ostenie, zasklenie, krídlo, oblúk otvárania. */
.plan-reveal { fill: var(--paper); }
.plan-jamb  { stroke: var(--pl-line); stroke-width: 26; fill: none; }
.plan-glass { stroke: var(--pl-wall); stroke-width: 60; fill: none; }
.plan-leaf  { stroke: var(--pl-wall); stroke-width: 56; stroke-linecap: butt; fill: none; }
.plan-swing { stroke: var(--pl-line); stroke-width: 26; fill: none; }
.plan-slide { fill: var(--pl-wall); }
.plan-slide-arrow { stroke: var(--pl-line); stroke-width: 26; }
.plan-track { stroke: var(--pl-line); stroke-width: 16; stroke-dasharray: 60 60; fill: none; }
.plan-lintel { stroke: var(--pl-line); stroke-width: 26; stroke-dasharray: 150 110; fill: none; }
/* Stĺpik 80 × 80 mm v rohu terasovej zostavy č. 13 — jediné murivo vnútri
   otvoru, preto sa kreslí až nad biele ostenie. */
.plan-mullion { fill: var(--pl-wall); }

/* Vonkajšie priestory. Terasa je čiarkovaná, lebo jej obrys je orientačný. */
.plan-outdoor { fill: #eef2ea; stroke: #c0cdbf; stroke-width: 22; stroke-dasharray: 120 80; }
.plan-outdoor--roofed { fill: #e3ebe0; stroke: #9db09b; stroke-dasharray: none; }
.plan-beam { fill: #b9c6b6; }
.plan-slat { fill: #cad5c7; }
.plan-post { fill: #6f7c6d; }
/* Vyvýšený záhon v terase — len obrys, časť z neho je pod prístreškom. */
.plan-bed { fill: none; stroke: #8ea38b; stroke-width: 24; stroke-dasharray: 170 110; }

/* Komín stojí MIMO domu — na terase. Kreslí sa preto výrazne inak než murivo. */
.plan-chimney { fill: #6e7480; stroke: var(--paper); stroke-width: 30; }
.plan-flue-casing { fill: #9aa0aa; }
.plan-flue { fill: var(--paper); }
.plan-leader { stroke: var(--ink-faint); stroke-width: 22; }

/* Kóty a mierka. Ružica severu tu zámerne NIE JE — orientácia domu je neurčená. */
.plan-dim { stroke: var(--ink-soft); stroke-width: 26; fill: none; }
.plan-dim-ext { stroke: var(--ink-faint); stroke-width: 18; stroke-dasharray: 90 90; }
.plan-dim-text { font-size: 200px; fill: var(--ink-soft); text-anchor: middle;
                 font-variant-numeric: tabular-nums; }
.plan-scale-a { fill: var(--ink-soft); }
.plan-scale-b { fill: var(--paper); }
.plan-scale-box { fill: none; stroke: var(--ink-soft); stroke-width: 22; }
.plan-key-box { fill: none; stroke: var(--ink-faint); stroke-width: 18; }

.plan-note { font-size: 196px; fill: #58705a; text-anchor: middle; letter-spacing: 6px; }
.plan-note-sm { font-size: 165px; fill: var(--ink-faint); }
/* CSS prebíja prezentačný atribút text-anchor="…", takže zarovnanie musí byť
   tiež triedou, nie atribútom. Atribút sa aj tak vypisuje — kvôli rastrovačom
   mimo prehliadača, ktoré štýlový blok nemusia vedieť prečítať.
   POZOR: v tomto bloku nesmie byť znak „menšie než“ ani v komentári — blok sa
   vkladá do SVG náhľadu a rozbil by jeho XML. */
.plan-anchor-mid { text-anchor: middle; }
.plan-anchor-start { text-anchor: start; }
.plan-anchor-end { text-anchor: end; }

/* Výkres je 16,5 m široký. Nad 940 px je stage zúžený zoznamom miestností
   (290 px), pod 940 px je layout jednostĺpcový, takže kresba je tam naopak
   širšia. Na telefóne sa kresba UŽ NEPRETEKÁ do strany (bývalo tu
   width: 215 % s vodorovným rolovaním): rolovanie do strany vnútri zvislo
   rolovanej stránky sa zle objavuje, kradne švihnutie prstom a orezaný pôdorys
   pôsobí ako chyba. Pri 324 px (viewport 390) má názov izby aj tak len 5 px,
   takže ani 215 % z pôdorysu čítanku nespraví — celá kresba tu slúži ako
   náhľad tvaru domu, mená a plochy sú v zozname pod ním a čitateľná verzia je
   na jedno ťuknutie („Zväčšiť“). */

/* Dva režimy popisov v jednej kresbe.
 *
 * `planSvgMarkup()` vykreslí OBE vrstvy naraz — plné popisy (.plan-captions:
 * číslo + názov + plocha) aj veľké čísla izieb (.plan-nums) — a prepína medzi
 * nimi CSS. Zámerne: pri otočení telefónu sa tak kresba nemusí stavať znova.
 * Bez tohto pravidla sa kreslili obe naraz a v obývačke vychádzalo
 * „Ob1.16cia izba“.
 *
 * Úzko sa plné popisy nezobrazujú, lebo pri 324 px majú 5 px — sivá šmuha.
 * Zostane číslo izby, ktoré sa prečítať dá; názvy a plochy sú v zozname hneď
 * pod pôdorysom v plnej veľkosti.
 *
 * Prepínač je viazaný na `.plan-stage`, teda len na kresbu V STRÁNKE.
 * Zväčšený pôdorys v dialógu (.planzoom-box) si plné popisy ponechá aj na
 * telefóne — tam je na ne miesto, to je celý zmysel zväčšenia. */
.plan-svg .plan-nums { display: none; }
.plan-svg .plan-nums--on { display: block; }   /* samostatný náhľad, compact */

@media (max-width: 560px) {
  .plan-stage .plan-svg .plan-captions,
  .plan-stage .plan-svg .plan-dims { display: none; }
  .plan-stage .plan-svg .plan-nums { display: block; }
}
/* PLAN-CSS-END */

.plan-side h3 { margin-bottom: .8rem; }
.room-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.room-list li { border-bottom: 1px solid var(--line-soft); }
.room-list button {
  width: 100%; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  background: none; border: 0; font: inherit; text-align: left;
  padding: .62rem .3rem; cursor: pointer; color: var(--ink);
}
.room-list button:hover, .room-list button.is-active { color: var(--accent); }
.room-list .num { color: var(--ink-faint); font-size: .82rem; width: 2.6rem; flex: none; }
.room-list .nm { flex: 1; }
.room-list .ar { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: .92rem; }
.room-list-total {
  display: flex; justify-content: space-between; padding: .9rem .3rem 0;
  font-weight: 600; border-top: 2px solid var(--ink);
}

/* ---------- 3D prehliadka ---------- */
.viewer {
  position: relative; width: 100%; background: linear-gradient(180deg, #dfe6ec 0%, #eef1f3 100%);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16 / 10; min-height: 380px;
  /* width: 100% — bez nej si prehliadač dopočíta šírku z `min-height`
     a `aspect-ratio` (320 × 4/3 = 427 px) a tá pretečie telefón.
     Rovnaká príčina ako pri .hero-media. */
}
@media (max-width: 700px) { .viewer { aspect-ratio: 4 / 3; min-height: 320px; } }
/* touch-action: pan-y — rovnaká úvaha ako pri panoráme (.pano-stage). Pri
   `none` zabralo plátno 90 % šírky telefónu a zvislé potiahnutie prstom
   stránku vôbec neposunulo; voľné ostávali len 20 px pásiky po stranách.
   Vodorovným ťahaním sa model naďalej otáča. */
.viewer canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }

.viewer-bar {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 1rem;
  display: flex; gap: .3rem; padding: .3rem; z-index: 3;
  background: rgba(255, 255, 255, .93); border: 1px solid var(--line);
  border-radius: 100px; box-shadow: var(--shadow-md); backdrop-filter: blur(8px);
  max-width: calc(100% - 2rem); overflow-x: auto;
}
.viewer-bar button {
  font: inherit; font-size: .87rem; white-space: nowrap; border: 0; background: none;
  padding: .5rem 1rem; border-radius: 100px; cursor: pointer; color: var(--ink-soft);
}
.viewer-bar button:hover { background: var(--sand-deep); color: var(--ink); }
.viewer-bar button.is-active { background: var(--accent); color: #fff; }

.viewer-hint {
  position: absolute; top: 1rem; left: 1rem; z-index: 3; max-width: 15rem;
  background: rgba(255, 255, 255, .93); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .8rem; font-size: .83rem;
  color: var(--ink-soft); box-shadow: var(--shadow-sm);
}
.viewer-loading {
  position: absolute; inset: 0; display: grid; place-content: center; gap: .75rem;
  justify-items: center; z-index: 4; background: var(--sand); color: var(--ink-soft); font-size: .93rem;
}
.viewer-loading[hidden] { display: none; }
.spinner {
  width: 26px; height: 26px; border: 2px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.viewer-fallback { padding: 2rem; text-align: center; color: var(--ink-soft); }

/* ---------- 360° prehliadka ---------- */
.pano-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px;
  gap: 2.5rem; align-items: start;
}
@media (max-width: 940px) { .pano-layout { grid-template-columns: 1fr; } }

.pano {
  position: relative; width: 100%; background: #11151a; color: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 16 / 10; min-height: 380px;
  /* width: 100% — bez nej si prehliadač dopočíta šírku z `min-height`
     a `aspect-ratio` (320 × 4/3 = 427 px) a tá pretečie telefón.
     Rovnaká príčina ako pri .hero-media. */
}
@media (max-width: 700px) { .pano { aspect-ratio: 4 / 3; min-height: 320px; } }

/* touch-action: pan-y — zvislým ťahaním sa na telefóne roluje stránka,
   vodorovným sa rozhliadate. Až v režime na celú obrazovku sa gestá
   preberajú úplne (touch-action: none), lebo tam už niet kam rolovať. */
.pano-stage { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; }
.pano-stage canvas { display: block; width: 100%; height: 100%; }
.pano.is-dragging .pano-stage { cursor: grabbing; }
.pano-stage:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.pano.is-expanded {
  position: fixed; inset: 0; z-index: 120;
  border: 0; border-radius: 0; aspect-ratio: auto; max-height: none;
}
.pano.is-expanded .pano-stage { touch-action: none; }
html.has-pano-expanded, html.has-pano-expanded body { overflow: hidden; }

/* Značky na prechod. Pozícia sa počíta každý snímok a zapisuje sa do
   transform — preto tu NESMIE byť transition na transform. */
.pano-hotspots { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.pano-hot {
  position: absolute; top: 0; left: 0; pointer-events: auto;
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font: inherit; font-size: .84rem; color: #fff; cursor: pointer;
  /* .62 ako ostatné panely panorámy — pri .5 klesol biely text nad svetlou
     časťou panorámy na 3,46:1 (namerané), s .62 je najhorší prípad 5,13:1. */
  background: rgba(17, 21, 26, .62); border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 100px; padding: .28rem .85rem .28rem .3rem;
  backdrop-filter: blur(6px);
  transition: background .18s, border-color .18s, opacity .18s;
}
.pano-hot:hover { background: var(--accent); border-color: var(--accent); }
.pano-hot.is-behind { opacity: 0; pointer-events: none; }
.pano-hot-dot {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  border: 2px solid #fff; background: rgba(255, 255, 255, .22);
  display: grid; place-items: center;
}
.pano-hot-dot::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}

.pano-label {
  position: absolute; top: 1rem; left: 1rem; z-index: 4; margin: 0;
  background: rgba(17, 21, 26, .62); border-radius: 100px;
  padding: .36rem .95rem; font-size: .86rem; font-weight: 500;
  backdrop-filter: blur(8px);
}
.pano-hint {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 4; margin: 0; max-width: 17rem;
  background: rgba(17, 21, 26, .62); border-radius: var(--radius);
  padding: .5rem .8rem; font-size: .82rem; backdrop-filter: blur(8px);
}
/* Nápoveda a nástroje sedia obe na `bottom: 1rem`. Vedľa seba sa zmestia až od
   šírky rámu 534 px (16 + 272 + 230 + 16), teda od viewportu ~575 px; pod ňou
   ležali tlačidlá NA texte (namerané 216 × 36 px prekrytia pri 360 px) a bol to
   stav hneď po načítaní — nápoveda sa skrýva až pri prvom ťahaní. */
@media (max-width: 600px) {
  .pano-hint { right: 1rem; bottom: 3.6rem; max-width: none; }
}
.pano-hint[hidden] { display: none; }

.pano-tools { position: absolute; right: 1rem; bottom: 1rem; z-index: 4; display: flex; gap: .35rem; }
.pano-tools button {
  font: inherit; font-size: .85rem; line-height: 1; color: #fff; cursor: pointer;
  background: rgba(17, 21, 26, .62); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 100px; padding: .55rem .9rem; backdrop-filter: blur(8px);
}
.pano-tools button:hover { background: var(--accent); border-color: var(--accent); }
.pano-tools .is-icon { width: 2.4rem; padding-inline: 0; font-size: 1.05rem; }

.pano-loading {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center;
  gap: .75rem; justify-items: center;
  background: rgba(17, 21, 26, .78); font-size: .93rem;
}
.pano-loading[hidden] { display: none; }
.pano-loading .spinner { border-color: rgba(255, 255, 255, .28); border-top-color: #fff; }

/* Bez WebGL: rovnaký záber ako statický obrázok, nie prázdny rám. */
.pano.is-fallback {
  background: var(--sand); color: var(--ink-soft);
  aspect-ratio: auto; min-height: 0;
}
.pano.is-fallback .pano-stage { position: static; cursor: auto; touch-action: auto; }
/* Ten istý obrázok slúži dvakrát: v <noscript> vnútri rámu 16:10 (vtedy sa
   vloží do plochy) aj v núdzovom režime, kde rám stráca pomer strán. */
.pano-flat { width: 100%; height: 100%; object-fit: contain; }
.pano.is-fallback .pano-flat { height: auto; }
.pano-flat-note { margin: 0; padding: .9rem 1.15rem; font-size: .87rem; }

.pano-side h3 { margin-bottom: .8rem; }
.pano-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pano-list li { border-bottom: 1px solid var(--line-soft); }
.pano-list button {
  width: 100%; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  background: none; border: 0; font: inherit; text-align: left;
  padding: .62rem .3rem; cursor: pointer; color: var(--ink);
}
.pano-list button:hover { color: var(--accent); }
.pano-list button[aria-current] { color: var(--accent); font-weight: 600; }
.pano-list button:disabled { color: var(--ink-faint); cursor: default; }
.pano-list .rm { color: var(--ink-faint); font-size: .82rem; font-variant-numeric: tabular-nums; }
.pano-list-note { color: var(--ink-faint); font-size: .82rem; margin: .9rem .3rem 0; }

/* ---------- Galéria ----------
   `min(320px, 100%)` a nie tvrdých 320 px: v 280 px širokom .wrap (viewport
   320 px) stopa 320 px nafúkla dokument na 340 px a preteklo 39 prvkov. */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1.25rem; }
.gallery figure { margin: 0; }
.gallery img {
  width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--line);
  transition: transform .25s;
}
.gallery img:hover { transform: scale(1.008); }

/* Obrázok v galérii aj vo fotkách zo stavby je vnútri <button> — inak sa
   lightbox nedal otvoriť klávesnicou (kurzor `zoom-in` sľuboval zväčšenie,
   ktoré 13 vizualizácií nevedelo dať nikomu okrem myši) a po zavretí sa fokus
   nemal kam vrátiť. Tlačidlo je „neviditeľné“ — vizuálne sa nič nemení. */
.zoom-btn {
  display: block; width: 100%; padding: 0; margin: 0; border: 0;
  background: none; font: inherit; color: inherit; cursor: zoom-in;
  border-radius: var(--radius-lg);
}
.zoom-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery figcaption { font-size: .87rem; color: var(--ink-faint); margin-top: .6rem; }

/* Fotografie zo stavby. Sú na výšku (z telefónu), preto užšie stĺpce než
   galéria vizualizácií a pevný pomer strán — inak by riadok poskakoval
   podľa toho, ktorá fotka sa načíta skôr. */
.stavba-head { margin: 2.75rem 0 1rem; font-size: 1.15rem; }
.stavba-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem;
}
.stavba-grid figure { margin: 0; }
/* `height: auto` MUSÍ zostať (je aj v resete): atribút height="1600" na <img>
   inak dá boxu definitívnu výšku, `aspect-ratio` sa zahodí a fotka sa vykreslí
   1600 px vysoká a orezaná na 29 % svojej šírky. Sekcia mala na telefóne
   18 034 px, teda 52 % celého dokumentu, a v tlači 8 z 20 strán. */
.stavba-grid img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  transition: transform .25s;
}
.stavba-grid img:hover { transform: scale(1.008); }
.stavba-grid figcaption {
  font-size: .82rem; color: var(--ink-faint); margin-top: .45rem; line-height: 1.35;
}
.form-note { font-size: .9rem; color: #b9bdc4; margin-top: 1rem; }
/* Vizuálne skryté, ale čitateľné pre odčítač obrazovky. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Rozmery musia byť zadané explicitne: <dialog> má od prehliadača
   `width/height: fit-content; margin: auto`, čo `inset: 0` NEPREBIJE — dialóg
   sa zmrštil na obsah a na telefóne zobrazil fotku 302 × 189 px, teda menšiu
   než 350 px náhľad, na ktorý sa ťuklo. Rovnaká úprava ako pri .planzoom. */
.lightbox {
  position: fixed; inset: 0; z-index: 100; place-items: center;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0;
  background: rgba(12, 14, 16, .93); padding: 1.5rem; border: 0;
}
/* Rovnaký dôvod ako pri .planzoom — `display` len pre otvorený dialóg, inak by
   zatvorený lightbox prekryl celú stránku. Otvorený vyzerá presne ako predtým. */
.lightbox[open] { display: grid; }
/* Na telefóne by 1,5rem odsadenia z každej strany nechalo fotku (327 px)
   menšiu než náhľad v mriežke (335 px) — teda „zväčšenie", ktoré zmenšuje. */
@media (max-width: 600px) { .lightbox { padding: .5rem; } }
.lightbox::backdrop { background: rgba(12, 14, 16, .93); }
.lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: var(--radius); }
.lightbox button {
  position: absolute; top: 1rem; right: 1rem; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 50%;
  width: 42px; height: 42px; font-size: 1.3rem; cursor: pointer; line-height: 1;
}

/* ---------- Technické riešenie ---------- */
.spec-group + .spec-group { margin-top: 2.5rem; }
.spec-group h3 {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .9rem;
}
.section--ink .spec-group h3 { color: #9dbca8; }
.spec-list { margin: 0; display: grid; grid-template-columns: minmax(150px, 15rem) 1fr; gap: 0; }
.spec-list dt, .spec-list dd {
  padding: .8rem 0; border-top: 1px solid var(--line); margin: 0;
}
.section--ink .spec-list dt, .section--ink .spec-list dd { border-top-color: rgba(255,255,255,.14); }
.spec-list dt { color: var(--ink-faint); font-size: .95rem; padding-right: 1.5rem; }
.section--ink .spec-list dt { color: #a5aab2; }
@media (max-width: 620px) {
  .spec-list { grid-template-columns: 1fr; }
  .spec-list dt { padding-bottom: 0; border-top: 1px solid var(--line); }
  .spec-list dd { padding-top: .15rem; border-top: 0; }
}

/* ---------- Priebeh výstavby ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; padding: .85rem 0 .85rem 2.4rem;
  border-bottom: 1px solid var(--line-soft); color: var(--ink-soft);
}
.timeline li::before {
  content: ''; position: absolute; left: 0; top: 1.32rem;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--paper);
}
.timeline li::after {
  content: ''; position: absolute; left: 6px; top: 1.95rem; bottom: -.85rem;
  width: 1px; background: var(--line);
}
.timeline li:last-child::after { display: none; }
.timeline li[data-state="done"] { color: var(--ink); }
.timeline li[data-state="done"]::before { background: var(--accent); border-color: var(--accent); }
.timeline li[data-state="current"] { color: var(--ink); font-weight: 600; }
.timeline li[data-state="current"]::before {
  border-color: var(--accent); background: var(--paper);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.timeline .state { font-weight: 400; font-size: .85rem; color: var(--accent); margin-left: .6rem; }

/* ---------- Lokalita ---------- */
.poi { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.poi li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .75rem 0; border-bottom: 1px solid var(--line);
}
.poi b { font-weight: 500; }
.poi span { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card { display: grid; gap: 1rem; }
.contact-card a { color: #fff; text-decoration: none; font-size: 1.28rem; font-weight: 500; }
.contact-card a:hover { text-decoration: underline; }
.contact-card dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.contact-card dd { margin: .2rem 0 0; }

.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .38rem; }
.field label { font-size: .87rem; opacity: .8; }
.field input, .field textarea {
  font: inherit; font-size: .97rem; color: #fff; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius);
  padding: .72rem .9rem; width: 100%;
}
.field input:focus, .field textarea:focus {
  outline: 2px solid #9dbca8; outline-offset: 1px; background: rgba(255, 255, 255, .12);
}
.field textarea { resize: vertical; min-height: 118px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form .btn--primary { background: #e9e5df; color: var(--ink); justify-self: start; }
.form .btn--primary:hover { background: #fff; }
/* Bez `opacity` — sčítavala sa s farbou #b9bdc4 na efektívnych #787b81, teda
   4,17:1 na tmavom podklade. Bežné nástroje to prehliadnu, lebo počítajú
   s farbou pred priehľadnosťou (9,34:1). #9ea3ab dáva 6,3:1. */
.form-note { font-size: .82rem; color: #9ea3ab; margin: 0; }

/* Skryté pole na odchytenie botov */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Päta ---------- */
.site-footer {
  background: var(--ink); color: rgba(255, 255, 255, .55);
  font-size: .85rem; padding-block: 2.5rem; border-top: 1px solid rgba(255,255,255,.1);
}
.site-footer p { margin-bottom: .6rem; max-width: 78ch; }

/* Prístupnosť */
.skip {
  position: absolute; left: -9999px; background: var(--accent); color: #fff;
  padding: .7rem 1.1rem; z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; top: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Na tmavom podklade má --accent (#35513f) voči --ink pomer 2,01:1, teda pod
   3:1 — prstenec bolo prakticky nevidieť, aj na telefónnom čísle v kontakte.
   #9dbca8 dáva 8,55:1 a je to tá istá farba, akú už majú polia formulára. */
.section--ink :focus-visible, .site-footer :focus-visible { outline-color: #9dbca8; }
.hero :focus-visible { outline-color: #fff; }

@media print {
  .site-header, .viewer, .pano, .pano-tools, .hero-actions, .form, .nav-toggle,
  .plan-zoom-open { display: none !important; }
  .pano-layout { grid-template-columns: 1fr; }
  body { font-size: 11pt; }
  .section { padding-block: 1.5rem; }
}