/* ============================================================================
   styl.css - Areál UP Bučovice
   ----------------------------------------------------------------------------
   Světlý základ, tmavá hlavička/patička, červená střídmě na akcenty a CTA.
   Barevné tokeny drž v :root - režim jde snadno přepnout změnou proměnných.
   Branding dle manuálu Dražební společnosti MORAVA.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   BAREVNÉ A ROZMĚROVÉ TOKENY
   --------------------------------------------------------------------------- */
:root {
  /* značkové barvy */
  --cervena: #ff1721;
  --cervena-tmava: #d40f18;
  --tmave-seda: #191919;
  --seda: #333333;
  --bila: #ffffff;
  --cerna: #000000;

  /* odvozené plochy a text (světlý režim) */
  --text: #191919;
  --text-tlumeny: #555555;
  --pozadi: #ffffff;
  --pozadi-jemne: #f5f5f5;
  --pozadi-sekce: #fafafa;
  --linka: #e2e2e2;
  --linka-vyrazna: #cccccc;

  /* rozměry */
  --max-sirka: 1180px;
  --radius: 8px;
  --radius-s: 4px;
  --mezera: 1.25rem;
  --stin: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(0, 0, 0, 0.05);
  --stin-hover: 0 4px 10px rgba(0, 0, 0, 0.10), 0 10px 28px rgba(0, 0, 0, 0.10);

  /* fonty */
  --font-nadpis: "Exo", system-ui, sans-serif;
  --font-text: "Open Sans", system-ui, sans-serif;
}

/* ---------------------------------------------------------------------------
   ZÁKLAD
   --------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--pozadi);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-nadpis);
  font-weight: 600;
  line-height: 1.2;
  color: var(--tmave-seda);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1rem; }

a { color: var(--cervena-tmava); }

img { max-width: 100%; display: block; }

.obal {
  width: 100%;
  max-width: var(--max-sirka);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--cervena);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

/* viditelný focus pro přístupnost */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.zona:focus-visible {
  outline: 3px solid var(--cervena);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   TLAČÍTKA
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-nadpis);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }

.btn-cervene {
  background: var(--cervena);
  color: #fff;
}
.btn-cervene:hover { background: var(--cervena-tmava); }

.btn-obrys {
  background: transparent;
  color: var(--tmave-seda);
  border-color: var(--linka-vyrazna);
}
.btn-obrys:hover { border-color: var(--tmave-seda); }

.btn-svetle {
  background: #fff;
  color: var(--tmave-seda);
}
.btn-svetle:hover { background: var(--pozadi-jemne); }

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   HLAVIČKA
   --------------------------------------------------------------------------- */
.hlavicka {
  background: #fff;
  color: var(--text);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--linka);
}
.hlavicka .obal {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}
.loga { display: flex; align-items: center; gap: 1.1rem; }
.logo-dsm { display: flex; }
.logo-dsm img { height: 40px; width: auto; display: block; }
/* svislý oddělovač mezi logem dražebníka a znakem města */
.logo-mesto {
  height: 46px;
  width: auto;
  display: block;
  padding-left: 1.1rem;
  border-left: 1px solid var(--linka);
}

.hlavni-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.hlavni-nav a {
  color: var(--seda);
  text-decoration: none;
  font-size: 0.95rem;
  font-family: var(--font-nadpis);
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.hlavni-nav a:hover { color: var(--tmave-seda); border-bottom-color: var(--cervena); }
/* poslední položka (Kontakt) jako červené tlačítko */
.hlavni-nav a.nav-kontakt {
  background: var(--cervena);
  color: #fff;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  border-bottom: none;
}
.hlavni-nav a.nav-kontakt:hover { background: var(--cervena-tmava); color: #fff; }

.nav-prepinac {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--linka-vyrazna);
  color: var(--text);
  border-radius: var(--radius-s);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   HERO + MAPA
   --------------------------------------------------------------------------- */
/* kotvy v navigaci: odsazení, aby cílovou sekci nepřekryla pevná hlavička */
.hero, .sekce, .paticka { scroll-margin-top: 88px; }

.hero {
  background: var(--pozadi-sekce);
  border-bottom: 1px solid var(--linka);
  padding: 3.25rem 0;
}
/* hero: dva sloupce - vlevo text, vpravo mapa */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.45rem 0.95rem;
  background: rgba(255, 23, 33, 0.10);
  color: var(--cervena-tmava);
  border-radius: 999px;
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 0.85rem;
}
.hero-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cervena);
}
.hero-text h1 { font-size: clamp(2.1rem, 4.5vw, 3rem); line-height: 1.1; }
.hero-text p { color: var(--text-tlumeny); font-size: 1.05rem; max-width: 48ch; }
.hero-akce { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.75rem; }
.hero-popisek { color: var(--text-tlumeny); font-size: 0.9rem; margin-top: 0.75rem; }

/* mapa areálu - reálný situační render s klikacími zónami */
.mapa-ramecek { width: 100%; }
/* vnitřní plocha drží obrázek, SVG zóny i tooltip (bez overflow, ať se
   tooltip u horních zón neořízne) */
.mapa-plocha { position: relative; }
.mapa-podklad {
  display: block;
  width: 100%;
  height: auto;
  /* rezervuj místo (obrázek 1500x1000), ať se rozložení nezhroutí před načtením
     - jinak skok na kotvu v menu skončí na špatném místě */
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
}
.mapa-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.zona { cursor: pointer; }
.zona-tvar {
  fill: rgba(255, 23, 33, 0);
  pointer-events: fill;
  transition: fill .15s;
}
.zona:hover .zona-tvar,
.zona:focus .zona-tvar { fill: rgba(255, 23, 33, 0.28); }
.zona:focus-visible { outline: none; }
.zona:focus-visible .zona-tvar { fill: rgba(255, 23, 33, 0.28); stroke: var(--cervena); stroke-width: 1.2; }

/* popisek celku (kód) jako HTML štítek nad zónou */
.zona-stitek {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  color: #fff;
  background: rgba(25, 25, 25, 0.55);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}

/* tooltip (štítek) celku */
.mapa-tip {
  position: absolute;
  transform: translate(-50%, -116%);
  background: var(--tmave-seda);
  color: #fff;
  line-height: 1.35;
  padding: 10px 14px;
  border-radius: 11px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
  z-index: 5;
}
.mapa-tip.aktivni { opacity: 1; }
.mapa-tip .tip-n { font-size: 15px; font-weight: 700; }
.mapa-tip .tip-s { font-size: 12.5px; color: #c9ccd2; margin-top: 2px; }
.mapa-tip .tip-c { font-size: 12px; color: var(--cervena); margin-top: 5px; font-weight: 600; }

/* ---------------------------------------------------------------------------
   SEKCE
   --------------------------------------------------------------------------- */
.sekce { padding: 3rem 0; }
.sekce-seda { background: var(--pozadi-sekce); border-top: 1px solid var(--linka); border-bottom: 1px solid var(--linka); }
.sekce-tmava { background: var(--tmave-seda); color: #e8e8e8; }
.sekce-tmava h2 { color: #fff; }
.sekce-nadpis { margin-bottom: 2.5rem; text-align: center; }
.sekce-nadpis h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.sekce-nadpis p { color: var(--text-tlumeny); max-width: 62ch; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------------
   KARTY CELKŮ
   --------------------------------------------------------------------------- */
.karty-celku {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.karta-celek {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--stin);
  transition: box-shadow .15s, transform .15s;
  text-decoration: none;
  color: inherit;
}
.karta-celek:hover { box-shadow: var(--stin-hover); transform: translateY(-3px); }
.karta-telo { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; }
.karta-telo h3 {
  margin: 0 0 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.karta-telo h3 .kod-celku {
  color: var(--cervena);
  font-size: 1.4rem;
}
.karta-metriky {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.9rem;
}
.karta-metriky li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px dotted var(--linka);
}
.karta-metriky li span:first-child { color: var(--text-tlumeny); }
.karta-metriky li span:last-child { font-weight: 600; text-align: right; }
.karta-telo .btn { margin-top: auto; }

/* ---------------------------------------------------------------------------
   KROKY (Jak elektronická dražba funguje)
   --------------------------------------------------------------------------- */
.kroky {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.krok {
  background: var(--pozadi-jemne);
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 1.75rem 1.4rem;
  text-align: center;
}
.krok-ikona { display: inline-flex; color: var(--cervena); margin-bottom: 0.9rem; }
.krok-ikona svg { width: 40px; height: 40px; }
.krok h3 { color: var(--tmave-seda); font-size: 1.15rem; }
.krok p { color: var(--text-tlumeny); font-size: 0.92rem; margin: 0; }
.kroky-cta { text-align: center; margin-top: 2rem; }
.kroky-cta .btn { gap: 0.55rem; }
.kroky-pozn { text-align: center; color: var(--text-tlumeny); font-size: 0.9rem; margin: 1.25rem 0 0; }

/* ---------------------------------------------------------------------------
   KONTAKT
   --------------------------------------------------------------------------- */
.kontakt-karty {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.kontakt-karta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
}
.kontakt-ikona { color: var(--cervena); margin-bottom: 0.5rem; }
.kontakt-ikona svg { width: 34px; height: 34px; }
.kontakt-hodnota {
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--tmave-seda);
  text-decoration: none;
}
a.kontakt-hodnota:hover { color: var(--cervena); }
.kontakt-detail { color: var(--text-tlumeny); font-size: 0.92rem; text-decoration: none; }
a.kontakt-detail:hover { color: var(--cervena); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   TECHNICKÉ A STAVEBNÍ INFORMACE
   --------------------------------------------------------------------------- */
.tech-mrizka {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.tech-karta {
  background: var(--pozadi-jemne);
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}
.tech-ikona { display: inline-flex; color: var(--cervena); margin-bottom: 0.8rem; }
.tech-ikona svg { width: 34px; height: 34px; }
.tech-karta h3 { color: var(--tmave-seda); font-size: 1.05rem; margin-bottom: 0.4rem; }
.tech-karta p { color: var(--text-tlumeny); font-size: 0.9rem; margin: 0; line-height: 1.45; }

/* ---------------------------------------------------------------------------
   LOKALITA
   --------------------------------------------------------------------------- */
.lokalita-text {
  margin: 0 0 2.5rem;
  color: var(--text);
}
.lokalita-text p { margin: 0 0 1rem; text-align: justify; }
.lokalita-text p:last-child { margin-bottom: 0; }

.lokalita-vzdalenosti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.lokalita-vzd-karta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.lokalita-vzd-ikona { flex: none; display: inline-flex; color: var(--cervena); }
.lokalita-vzd-ikona svg { width: 28px; height: 28px; }
.lokalita-vzd-text { display: flex; flex-direction: column; line-height: 1.3; }
.lokalita-vzd-text strong { color: var(--tmave-seda); font-family: var(--font-nadpis); font-size: 0.98rem; }
.lokalita-vzd-text small { color: var(--text-tlumeny); font-size: 0.85rem; }

.lokalita-pocty {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem 1rem;
  margin-bottom: 2.5rem;
}
.lokalita-pocet {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
}
.lokalita-pocet-ikona { display: inline-flex; color: var(--cervena); }
.lokalita-pocet-ikona svg { width: 30px; height: 30px; }
.lokalita-pocet-cislo { font-family: var(--font-nadpis); font-weight: 700; font-size: 1.9rem; color: var(--tmave-seda); }
.lokalita-pocet-label { color: var(--text-tlumeny); font-size: 0.85rem; }

.lokalita-mapa {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--linka);
  box-shadow: var(--stin);
}
.lokalita-mapa iframe { width: 100%; height: 420px; border: 0; display: block; }

/* ---------------------------------------------------------------------------
   CITÁT
   --------------------------------------------------------------------------- */
.citat { text-align: center; background: #262626; }
.citat-text {
  font-family: var(--font-nadpis);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.3;
  color: #fff;
  margin: 0 auto;
  max-width: 28ch;
}
.citat-cara { border: none; border-top: 1px solid #3a3a3a; max-width: 75%; margin: 2rem auto 1.25rem; }
.citat-autor { color: #9a9a9a; font-size: 0.95rem; font-style: normal; }

/* ---------------------------------------------------------------------------
   VIZUALIZACE - masonry galerie + lightbox
   --------------------------------------------------------------------------- */
.galerie {
  columns: 3 260px;
  column-gap: 1rem;
}
.galerie-odkaz {
  display: block;
  break-inside: avoid;
  margin: 0 0 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  border: 1px solid var(--linka);
  background: var(--pozadi-jemne);
}
.galerie-odkaz img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .35s ease;
}
.galerie-odkaz:hover img { transform: scale(1.04); }
.galerie-odkaz:focus-visible { outline: 3px solid var(--cervena); outline-offset: 2px; }
.galerie-popis {
  position: relative;
  display: block;
  padding: .55rem .8rem .65rem;
  font-family: var(--font-nadpis);
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.3;
  color: var(--text);
  background: var(--pozadi);
  border-top: 1px solid var(--linka);
}

/* lightbox */
body.lb-lock { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 4.5rem;
  background: rgba(0, 0, 0, 0.92);
}
.lightbox.otevreno { display: flex; }
.lb-ramecek { margin: 0; text-align: center; }
.lb-obrazek {
  display: block;
  max-width: 90vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.lb-popisek { color: #e8e8e8; font-size: 0.95rem; margin-top: 0.9rem; }
.lb-zavrit {
  position: absolute;
  top: 1rem;
  right: 1.4rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
}
.lb-sipka {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
}
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-sipka:hover, .lb-zavrit:hover { color: var(--cervena); }
.lb-sipka:hover { background: rgba(255, 255, 255, 0.22); }
.lb-zavrit:focus-visible, .lb-sipka:focus-visible { outline: 2px solid var(--cervena); outline-offset: 2px; }

@media (max-width: 560px) {
  .lightbox { padding: 1rem; }
  .lb-sipka { width: 2.5rem; height: 2.5rem; font-size: 1.8rem; }
  .lb-prev { left: 0.4rem; }
  .lb-next { right: 0.4rem; }
}

/* ---------------------------------------------------------------------------
   DOKUMENTY
   --------------------------------------------------------------------------- */
.dokumenty {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dokument {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.dokument:hover { border-color: var(--linka-vyrazna); box-shadow: var(--stin); }
.dokument .ikona-pdf {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: rgba(255, 23, 33, 0.10);
  color: var(--cervena-tmava);
  border-radius: var(--radius-s);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-nadpis);
}
.dokument .dok-text { flex: 1; line-height: 1.3; }
.dokument .dok-velikost { flex: none; color: var(--text-tlumeny); font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
   PATIČKA
   --------------------------------------------------------------------------- */
.paticka {
  background: var(--tmave-seda);
  color: #cfcfcf;
  padding: 2.75rem 0 2rem;
  font-size: 0.92rem;
  border-top: 1px solid #34343a;
}
.paticka-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem;
}
.paticka h3 {
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.8rem;
}
.paticka a { color: #fff; }
.paticka .drazebnik strong { color: #fff; }
.paticka-spodek {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid #2c2c2c;
  color: #8f8f8f;
  font-size: 0.85rem;
}
.placeholder-slot {
  border: 1px dashed #4a4a4a;
  border-radius: var(--radius-s);
  padding: 0.6rem 0.8rem;
  color: #8f8f8f;
  font-size: 0.85rem;
}

/* ---------------------------------------------------------------------------
   STRÁNKA CELKU
   --------------------------------------------------------------------------- */

/* přepínač celků (popisek + taby) */
.celek-prepinac-obal {
  display: flex;
  align-items: center;
  gap: 0.85rem 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}
.celek-prepinac-lab { font-size: 0.85rem; font-weight: 600; color: var(--text-tlumeny); }
.celek-prepinac {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.celek-tab {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--linka);
  background: var(--pozadi-sekce);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-tlumeny);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.celek-tab:hover { border-color: var(--linka-vyrazna); background: #fff; }
.celek-tab.aktivni {
  border-color: var(--cervena);
  background: #fff;
  box-shadow: 0 2px 10px rgba(255, 23, 33, 0.10);
}
.celek-tab-k {
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--tmave-seda);
}
.celek-tab.aktivni .celek-tab-k { color: var(--cervena); }
.celek-tab-m { font-size: 0.76rem; opacity: 0.8; }

/* horní část celku: vlevo info (metriky + CTA), vpravo plán celku */
.celek-top {
  display: grid;
  grid-template-columns: 1fr 2fr; /* info 1/3, mapa 2/3 */
  gap: 2.5rem;
  align-items: start;
  padding: 1.5rem 0 2.5rem;
}
.celek-info h1 { margin-top: 0; }
.celek-info h1 .kod-celku { color: var(--cervena); }
.celek-info-popis { color: var(--text-tlumeny); }
/* prodejní stav jako odznak */
.stav-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 1.5rem;
  padding: 0.5rem 0.9rem;
  background: rgba(255, 23, 33, 0.10);
  color: var(--cervena-tmava);
  border-radius: 999px;
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.stav-badge svg { width: 16px; height: 16px; }

/* moderní statistiky celku s ikonami */
.celek-staty {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* cenový blok (vyvolávací cena + detaily dražby) */
.cena-blok {
  background: var(--pozadi-jemne);
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.5rem;
}
.cena-label { display: block; font-size: 0.8rem; color: var(--text-tlumeny); text-transform: uppercase; letter-spacing: 0.03em; }
.cena-castka {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  color: var(--cervena);
  line-height: 1.15;
}
.cena-castka .cena-dph { font-size: 0.8rem; font-weight: 600; color: var(--text-tlumeny); }
.cena-vc { display: block; font-size: 0.9rem; color: var(--text-tlumeny); margin-top: 0.1rem; }
.cena-detaily {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px dotted var(--linka-vyrazna);
  font-size: 0.85rem;
}
.cena-detaily li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.28rem 0; }
.cena-detaily li span:first-child { color: var(--text-tlumeny); }
.cena-detaily li span:last-child { font-weight: 600; text-align: right; }
.stat { display: flex; align-items: center; gap: 0.9rem; }
.stat-ikona {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--pozadi-jemne);
  border: 1px solid var(--linka);
  border-radius: 12px;
  color: var(--cervena);
}
.stat-ikona svg { width: 22px; height: 22px; }
.stat-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.stat-val {
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--tmave-seda);
}
.stat-lab {
  font-size: 0.78rem;
  color: var(--text-tlumeny);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* plán celku - pravý sloupec */
.plan-celku h2 { font-size: 1.2rem; margin-top: 0; }
/* 2,5D mapa celku */
.mapa-celku { width: 100%; }
/* statická situace celku dle GP (klik = zvětšení) */
.mapa-celku-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
}
.mapa-celku-zoom:focus-visible { outline: 3px solid var(--cervena); outline-offset: 2px; }
.mapa-celku-img { display: block; width: 100%; height: auto; }
/* celek B má vysoký GP obrázek na výšku - omezíme výšku (proporcionálně, na střed) */
.mapa-celku-img--vysoky { width: auto; max-width: 100%; max-height: 680px; margin: 0 auto; }
/* interaktivní 3D izometrická mapa celku (dle GP) */
.mapa-celku--3d { background: var(--pozadi-jemne); border-radius: var(--radius); padding: 14px; }
.mapa3d { width: 100%; height: auto; display: block; overflow: visible; }
.mapa3d-parcel { cursor: pointer; transition: transform .16s cubic-bezier(.22,1,.36,1), opacity .18s ease; }
.mapa3d-parcel .top { transition: filter .16s ease; }
.mapa3d-parcel.active { transform: translate(0,-8px); }
.mapa3d-parcel.active .top { filter: brightness(1.09); }
.mapa3d-parcel.faded { opacity: .24; }
.mapa3d-parcel.dim { opacity: .12; pointer-events: none; }
.mapa3d-label { fill:#fff; font-weight:700; text-anchor:middle; dominant-baseline:middle;
  pointer-events:none; paint-order:stroke; stroke:rgba(0,0,0,.34); stroke-width:.8px; }
.mapa3d-podklad { pointer-events:none; }
.mapa3d-podklad-label { fill:#a86a5a; font-style:italic; font-weight:600; text-anchor:middle; dominant-baseline:middle; pointer-events:none; }
.mapa3d-legenda { display:flex; flex-wrap:wrap; gap:.45rem 1.1rem; margin-top:.9rem; }
.mapa3d-legenda span { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-tlumeny); }
.mapa3d-legenda i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.mc-box {
  position: relative;
  background: #eef1ea;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
}
/* aspect-ratio nutný pro iOS Safari - jinak se SVG bez výšky v gridu zhroutí na 0 */
.mc-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 560; border-radius: var(--radius); overflow: visible; }
.mc-badge {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 6;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--linka);
  border-radius: 8px;
  padding: 6px 10px;
}
.mc-badge-t { font-family: var(--font-nadpis); font-weight: 700; font-size: 1.05rem; line-height: 1; color: var(--tmave-seda); }
.mc-badge-s { font-size: 0.72rem; color: var(--text-tlumeny); margin-top: 3px; }
.mc-plot { cursor: pointer; transition: transform .2s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.mc-plot:focus { outline: none; }
.mc-plot:focus-visible .mc-label { paint-order: stroke; stroke: var(--cervena); stroke-width: 2px; }
.mc-label { font-family: var(--font-nadpis); font-weight: 700; font-size: 13px; fill: rgba(255, 255, 255, 0.92); pointer-events: none; }

/* legenda typů zástavby */
.mc-legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.75rem; font-size: 0.8rem; color: var(--seda); align-items: center; }
.mc-leg-lab { font-weight: 600; color: var(--text-tlumeny); }
.mc-leg-it { display: inline-flex; align-items: center; gap: 0.4rem; }
.mc-sw { width: 13px; height: 13px; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }

/* tooltip pozemku v mapě celku (pozici a flip řídí js) */
.mc-tip { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .12s; }
.mc-tip.aktivni { opacity: 1; }
.mc-tip-card { background: var(--tmave-seda); color: #fff; border-radius: 11px; padding: 11px 13px; box-shadow: 0 10px 26px rgba(15, 18, 22, 0.3); min-width: 188px; }
.mc-tip-h { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.mc-tip-code { font-family: var(--font-nadpis); font-weight: 700; font-size: 15px; }
.mc-tip-typ { font-size: 12px; color: #c9ccd2; }
.mc-tip-row { display: flex; gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.mc-tip-lab { font-size: 10px; color: #8b9099; text-transform: uppercase; letter-spacing: 0.03em; }
.mc-tip-val { font-size: 14px; font-weight: 600; }
.mc-tip-pozn { font-size: 11px; color: #c9ccd2; margin-top: 7px; }

/* mřížka pozemků přes celou šířku pod horní částí */
.celek-mrizka { padding-bottom: 3rem; }
.celek-mrizka > h2 { margin-bottom: 0.4rem; }
.celek-mrizka-pozn { color: var(--text-tlumeny); margin: 0 0 1.25rem; }

/* filtry */
.filtry {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--pozadi-sekce);
  border: 1px solid var(--linka);
  border-radius: var(--radius);
}
.filtr-skupina { display: flex; flex-direction: column; gap: 0.35rem; }
.filtr-skupina label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-tlumeny);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.filtr-skupina select {
  font-family: var(--font-text);
  font-size: 0.95rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--linka-vyrazna);
  border-radius: var(--radius-s);
  background: #fff;
  min-width: 170px;
}
.filtr-reset {
  align-self: center;
  font-family: var(--font-text);
  font-size: 0.85rem;
  color: var(--cervena-tmava);
  background: transparent;
  border: 1px solid var(--linka-vyrazna);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.filtr-reset:hover { border-color: var(--cervena); background: rgba(255, 23, 33, 0.06); }
.filtr-pocet { margin-left: auto; align-self: center; color: var(--text-tlumeny); font-size: 0.9rem; }

/* mřížka pozemků */
.mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}
.dlazdice {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--linka);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--stin);
  scroll-margin-top: 90px;
  transition: box-shadow .15s, border-color .15s;
}
.dlazdice:hover { box-shadow: var(--stin-hover); }
.dlazdice.zvyrazneno { border-color: var(--cervena); box-shadow: 0 0 0 2px var(--cervena); }
.dlazdice .nahled-pozemku {
  width: 100%;
  aspect-ratio: 1 / 1; /* čtvercové náhledy 500x500 - bez šedých pruhů */
  object-fit: cover;
  background: var(--pozadi-jemne);
  border-bottom: 1px solid var(--linka);
}
.dlazdice-telo { padding: 1rem; display: flex; flex-direction: column; flex: 1; }
.dlazdice-hlava {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.dlazdice-hlava .oznaceni {
  font-family: var(--font-nadpis);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--cervena);
}
.dlazdice-hlava .kod { font-size: 0.78rem; color: var(--text-tlumeny); text-align: right; }
.dlazdice-popis { font-size: 0.88rem; color: var(--text-tlumeny); margin-bottom: 0.75rem; }
.dlazdice-data {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.87rem;
}
.dlazdice-data li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.28rem 0;
  border-bottom: 1px dotted var(--linka);
}
.dlazdice-data li span:first-child { color: var(--text-tlumeny); }
.dlazdice-data li span:last-child { font-weight: 600; text-align: right; }
.dlazdice .btn { margin-top: auto; }

/* přípojky - drobná poznámka pod daty */
.dlazdice-pripojky {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-tlumeny);
  margin: 0 0 1rem;
}
.dlazdice-pripojky svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--cervena); }
.dlazdice-pripojky strong { color: var(--seda); font-weight: 600; }

.stitky { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.stitek-maly {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--pozadi-jemne);
  color: var(--seda);
  border: 1px solid var(--linka);
}
.stitek-maly.stitek-akcent {
  background: rgba(255, 23, 33, 0.10);
  color: var(--cervena-tmava);
  border-color: rgba(255, 23, 33, 0.25);
}

.prazdny-vysledek {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-tlumeny);
}

.chyba-nacteni {
  background: rgba(255, 23, 33, 0.06);
  border: 1px solid rgba(255, 23, 33, 0.3);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  color: var(--seda);
}

/* ---------------------------------------------------------------------------
   RESPONZIVITA
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .karty-celku { grid-template-columns: repeat(2, 1fr); }
  .kroky { grid-template-columns: repeat(2, 1fr); }
  .tech-mrizka { grid-template-columns: repeat(2, 1fr); }
  .kontakt-karty { grid-template-columns: 1fr; }
  .lokalita-vzdalenosti { grid-template-columns: repeat(2, 1fr); }
  .lokalita-pocty { grid-template-columns: repeat(3, 1fr); }
  /* na užších obrazovkách: info nad plánem, mřížka pod nimi */
  .celek-top { grid-template-columns: 1fr; gap: 1.75rem; }
  /* hero pod sebou: text nad mapou */
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 760px) {
  .hlavni-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #fff;
    border-top: 1px solid var(--linka);
    box-shadow: var(--stin);
    padding: 0.5rem 1.25rem 1rem;
  }
  .hlavni-nav.otevreno { display: flex; }
  .hlavni-nav a { padding: 0.65rem 0; border-bottom: 1px solid var(--linka); width: 100%; }
  .hlavni-nav a.nav-kontakt {
    border-bottom: none;
    width: auto;
    margin-top: 0.5rem;
    padding: 0.5rem 1.2rem;
  }
  .nav-prepinac { display: inline-block; }
  .galerie { columns: 2; }
}

@media (max-width: 560px) {
  .karty-celku { grid-template-columns: 1fr; }
  .kroky { grid-template-columns: 1fr; }
  .tech-mrizka { grid-template-columns: 1fr; }
  .mrizka { grid-template-columns: 1fr; }
  .lokalita-vzdalenosti { grid-template-columns: 1fr; }
  .lokalita-pocty { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .lokalita-mapa iframe { height: 300px; }
  .filtr-skupina select { min-width: 140px; }
  /* na mobilu je mapa jen orientační - karty celků slouží jako plnohodnotná
     alternativa, viz poznámka v index.html */
}