/* ===== Barvy a základ ===== */
:root {
  --zelena: #48ac26;        /* barva z loga */
  --zelena-tmava: #2f7a17;
  --les: #173d22;           /* tmavé plochy */
  --les-2: #0f2a17;
  --text: #1c2620;
  --text-2: #56635a;
  --linka: #e3e8e1;
  --pozadi-2: #f4f7f2;
  --zluta: #ffd84d;
  --radius: 18px;
  --stin: 0 1px 2px rgba(16,40,22,.06), 0 8px 24px rgba(16,40,22,.08);
}
*, *::before, *::after {box-sizing: border-box;}
html {font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem;}
body {margin: 0; background: #fff; color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased;}
img, svg {max-width: 100%; height: auto; vertical-align: middle;}
a {color: var(--zelena-tmava); text-decoration: none;}
a:hover {color: var(--les);}
h1, h2, h3 {margin: 0 0 .75rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 800;}
h2 {font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);}
p, ul, dl, figure {margin: 0 0 1rem;}
small {font-size: 80%;}
:focus-visible {outline: 3px solid var(--zluta); outline-offset: 2px;}

.wrap {max-width: 72rem; margin: 0 auto; padding: 0 1.25rem;}
.ikona {width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none;}

/* ===== Tlačítka ===== */
.btn {display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .7rem 1.25rem; border-radius: 999px; background: var(--zelena); color: #fff; font-weight: 700; font-size: .95rem; white-space: nowrap; border: 0; transition: background-color .15s, transform .15s, box-shadow .15s;}
.btn:hover {background: var(--zelena-tmava); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(47,122,23,.3);}
.btn-sm {padding: .5rem 1rem; font-size: .9rem;}
.btn-lg {padding: .95rem 1.6rem; font-size: 1.05rem;}
.btn-svetly {background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); backdrop-filter: blur(4px);}
.btn-svetly:hover {background: #fff; color: var(--les); box-shadow: none;}

/* ===== Horní lišta ===== */
.topbar {position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: box-shadow .2s, border-color .2s;}
.topbar.odrolovano {border-color: var(--linka); box-shadow: 0 4px 20px rgba(16,40,22,.08);}
.topbar-in {display: flex; align-items: center; gap: 1.5rem; height: 4.25rem;}
.brand {display: flex; align-items: center; gap: .65rem; color: var(--text); line-height: 1.1;}
.brand:hover {color: var(--text);}
.brand img {width: 40px; height: auto;}
.brand span {font-size: .95rem;}
.brand strong {font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;}
.brand small {display: block; color: var(--text-2); font-size: .75rem; margin-top: .15rem;}
.menu {display: none; margin-left: auto; gap: .25rem;}
.menu a {color: var(--text); font-weight: 600; font-size: .95rem; padding: .5rem .85rem; border-radius: 999px;}
.menu a:hover {background: var(--pozadi-2);}
.topbar .btn {margin-left: auto;}
.topbar .btn span {display: none;}

/* ===== Hero ===== */
.hero {position: relative; color: #fff; background: var(--les-2) url('../graph/hero.webp') 62% 50% / cover no-repeat; isolation: isolate;}
.hero::before {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,30,15,.82) 0%, rgba(10,30,15,.7) 55%, rgba(10,30,15,.9) 100%);}
.hero-in {padding: 3.5rem 1.25rem 6.5rem;}
.stitek {display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .9rem; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); font-size: .85rem; font-weight: 600; margin-bottom: 1.25rem;}
.tecka {width: .55rem; height: .55rem; border-radius: 50%; background: #6ee04a; box-shadow: 0 0 0 4px rgba(110,224,74,.25);}
.hero h1 {font-size: clamp(2.2rem, 1.3rem + 4.2vw, 4.2rem); margin-bottom: 1rem; text-wrap: balance;}
.perex {font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: rgba(255,255,255,.85); max-width: 34rem; margin-bottom: 2rem;}
.hero-cta {display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem;}
.hero-fakta {display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin: 0;}
.hero-fakta div {border-left: 2px solid var(--zelena); padding-left: .85rem;}
.hero-fakta dt {font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.65);}
.hero-fakta dd {margin: 0; font-weight: 700; font-size: 1.1rem;}

/* ===== Statistiky ===== */
.staty {position: relative; z-index: 2; margin-top: -3.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem;}
.stat {background: #fff; border-radius: var(--radius); box-shadow: var(--stin); padding: 1.1rem 1rem; text-align: center; border: 1px solid var(--linka);}
.stat strong {display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--zelena-tmava); line-height: 1.1;}
.stat span {font-size: .85rem; color: var(--text-2);}

/* ===== Sekce ===== */
.sekce {padding: 4.5rem 0;}
.sekce-svetla {background: var(--pozadi-2);}
.nadtitul {color: var(--zelena-tmava); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .6rem;}
.uvod {color: var(--text-2); font-size: 1.1rem; max-width: 38rem;}
.hlavicka {text-align: center; margin-bottom: 2.5rem;}
.hlavicka .uvod {margin: 0 auto;}

.dva-sloupce {display: grid; gap: 2.5rem; align-items: center;}
.vyhody {list-style: none; padding: 0; margin-top: 1.75rem; display: grid; gap: 1.25rem;}
.vyhody li {display: flex; gap: 1rem; align-items: flex-start;}
.vyhody .ikona {width: 2.75rem; height: 2.75rem; padding: .65rem; border-radius: 14px; background: #e8f4e3; color: var(--zelena-tmava); stroke-width: 1.7;}
.vyhody strong {display: block; font-size: 1.05rem;}
.vyhody span {color: var(--text-2); font-size: .95rem;}
.karta-obr {margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--stin); background: #fff;}
.karta-obr img {display: block; width: 100%;}
.karta-obr figcaption {padding: .75rem 1rem; font-size: .85rem; color: var(--text-2);}

/* ===== Stavy parcel ===== */
.volny {--stav: #3fa61f;}
.rezervace {--stav: #f08a00;}
.prodano {--stav: #d9302c;}

/* ===== Mapa parcel ===== */
.mapa-karta {background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--stin); margin-bottom: 1.5rem;}
.mapa svg {display: block; width: 100%; height: auto;}
.parcela polygon {fill: var(--stav); fill-opacity: .3; stroke: var(--stav); stroke-width: 3; transition: fill-opacity .15s;}
.parcela:hover polygon, .parcela.aktivni polygon, .parcela.vybrana polygon {fill-opacity: .62; stroke: #fff; stroke-width: 4;}
.parcela {cursor: pointer; outline: none;}
.legenda {list-style: none; margin: 0; padding: .85rem 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .9rem; color: var(--text-2);}
.legenda li::before {content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .45em; border-radius: 50%; background: var(--stav);}

/* ===== Tabulka ===== */
.tabulka-karta {background: #fff; border-radius: var(--radius); box-shadow: var(--stin); overflow: hidden;}
.tabulka {width: 100%; border-collapse: collapse; font-size: .98rem;}
.tabulka th {text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); font-weight: 700; padding: 1rem; border-bottom: 1px solid var(--linka); background: #fafcf9;}
.tabulka td {padding: .9rem 1rem; border-bottom: 1px solid var(--linka); transition: background-color .15s;}
.tabulka tbody tr:last-child td {border-bottom: 0;}
.tabulka .r {text-align: right;}
.tabulka tbody tr {cursor: pointer;}
.tabulka tbody tr:hover td, .tabulka tbody tr.aktivni td {background: #f7faf6;}
.tabulka tbody tr.vybrana td {background: #fff8d9;}
.cislo-kolecko {display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--stav); color: #fff; font-weight: 800; font-size: .95rem;}
.tabulka .cena {font-weight: 700;}
.stav {display: inline-flex; align-items: center; gap: .4em; padding: .2rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--stav); background: color-mix(in srgb, var(--stav) 12%, #fff);}
.stav::before {content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor;}
.tabulka .rezervace td, .tabulka .prodano td {color: #8a948c;}
.tabulka .rezervace .stav, .tabulka .prodano .stav {color: var(--stav);}

/* ===== Sítě ===== */
.site {list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 2rem;}
.site li {display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; padding: 1.5rem 1rem; border-radius: var(--radius); background: var(--pozadi-2); font-weight: 700; font-size: .95rem;}
.site .ikona {width: 3rem; height: 3rem; padding: .7rem; border-radius: 50%; background: #fff; color: var(--zelena-tmava); box-shadow: var(--stin);}
.site li:last-child {grid-column: 1 / -1;}

.dokument {display: flex; align-items: center; gap: 1rem; max-width: 40rem; margin: 0 auto; padding: 1.1rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--linka); color: var(--text); background: #fff; box-shadow: var(--stin); transition: transform .15s, border-color .15s;}
.dokument:hover {color: var(--text); border-color: var(--zelena); transform: translateY(-2px);}
.dokument-ikona {display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px; background: #fdecec; color: #d9302c; flex: none;}
.dokument-ikona .ikona {width: 1.6rem; height: 1.6rem;}
.dokument-text {flex: 1;}
.dokument-text strong {display: block; line-height: 1.3;}
.dokument-text small {color: var(--text-2);}
.dokument > .ikona {color: var(--zelena-tmava);}

/* ===== Kontakt ===== */
.kontakt {background: var(--les); color: #fff; padding: 4.5rem 0; background-image: radial-gradient(ellipse at 85% 0%, rgba(72,172,38,.35), transparent 55%);}
.kontakt .nadtitul {color: #8fdc6c;}
.kontakt .uvod {color: rgba(255,255,255,.75);}
.kontakt-in {display: grid; gap: 2rem; align-items: center;}
.kontakt-karta {background: #fff; color: var(--text); border-radius: var(--radius); padding: 1.1rem; box-shadow: 0 20px 50px rgba(0,0,0,.3);}
.jmeno {font-size: 1.25rem; font-weight: 800; margin-bottom: 1rem;}
.kontakt-radek {display: flex; align-items: center; gap: .9rem; padding: .85rem; border-radius: 14px; color: var(--text); font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; transition: background-color .15s;}
.kontakt-radek + .kontakt-radek {margin-top: .25rem;}
.kontakt-radek:hover {background: var(--pozadi-2); color: var(--text);}
.kontakt-radek .ikona {width: 2.75rem; height: 2.75rem; padding: .7rem; border-radius: 50%; background: var(--zelena); color: #fff;}
.kontakt-radek small {display: block; font-size: .75rem; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .08em;}

/* ===== Patička ===== */
.footer {background: var(--les-2); color: rgba(255,255,255,.7); padding: 2.5rem 0 1.5rem; font-size: .92rem;}
.footer-in {display: grid; gap: 1.5rem;}
.brand-footer, .brand-footer:hover {color: #fff;}
.brand-footer small {color: rgba(255,255,255,.55);}
.odkazy {list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem 1.5rem;}
.odkazy a {color: rgba(255,255,255,.8);}
.odkazy a:hover {color: #fff; text-decoration: underline;}
.copy {text-align: center; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .82rem; color: rgba(255,255,255,.45);}

/* ===== Telefon: tabulka jako kartičky ===== */
@media (max-width: 47.99em) {
  .tabulka-karta {background: transparent; box-shadow: none; overflow: visible;}
  .tabulka thead {display: none;}
  .tabulka, .tabulka tbody, .tabulka tr, .tabulka td {display: block; width: 100%;}
  .tabulka tr {margin-bottom: .85rem; border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--stin);}
  .tabulka td {display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 1.1rem; text-align: right; border-bottom-color: #f0f3ee;}
  .tabulka td::before {content: attr(data-label); color: var(--text-2); font-size: .9rem; text-align: left;}
  .tabulka td.cislo {padding: .9rem 1.1rem;}
  .tabulka td.cislo::before {font-weight: 700; color: var(--text); font-size: 1rem;}
  .tabulka td.akce:empty, .tabulka td.bez-ceny {display: none;}
  .tabulka td.akce {padding: .9rem 1.1rem 1.1rem;}
  .tabulka td.akce::before {content: none;}
  .tabulka td.akce .btn {width: 100%; padding: .75rem;}
  .tabulka tbody tr:last-child td {border-bottom: 1px solid #f0f3ee;}
  .tabulka tbody tr td:last-child {border-bottom: 0;}
}

@media (min-width: 36em) {
  .topbar .btn span {display: inline;}
  .site {grid-template-columns: repeat(3, 1fr);}
  .site li:last-child {grid-column: auto;}
  .odkazy {grid-template-columns: repeat(3, auto);}
}

@media (min-width: 48em) {
  .hero {background-position: 0% 50%;}
  .hero::before {background: linear-gradient(90deg, rgba(10,30,15,.92) 0%, rgba(10,30,15,.75) 45%, rgba(10,30,15,.15) 100%);}
  .hero-in {padding: 6rem 1.25rem 9rem;}
  .staty {grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: -4.5rem;}
  .stat {padding: 1.5rem 1rem;}
  .stat strong {font-size: 2.4rem;}
  .stat span {font-size: .92rem;}
  .sekce, .kontakt {padding: 6rem 0;}
  .site {grid-template-columns: repeat(5, 1fr);}
  .kontakt-karta {padding: 2rem;}
  .kontakt-radek {font-size: 1.1rem;}
}

@media (min-width: 64em) {
  .menu {display: flex;}
  .topbar .btn {margin-left: 0;}
  .dva-sloupce {grid-template-columns: 5fr 6fr; gap: 4rem;}
  .kontakt-in {grid-template-columns: 1fr 26rem; gap: 4rem;}
  .footer-in {grid-template-columns: auto 1fr; align-items: center;}
  .odkazy {justify-self: end;}
}

@media (prefers-reduced-motion: reduce) {
  html {scroll-behavior: auto;}
  * {transition: none !important;}
}