/* ==========================================================================
   Žernosecké (Píšťanské) jezero — sdílený styl
   Paleta vychází z jezera samotného: hluboká voda, písčité pláže,
   čedičový Radobýl v pozadí.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,340;9..144,480;9..144,600&family=Public+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --deep:        #123141;   /* hluboká hladina */
  --water:       #2C7C93;   /* hlavní akcent — voda */
  --water-soft:  #AFD4DD;   /* mělčina */
  --sand:        #C79A4E;   /* písčitý břeh — sekundární akcent */
  --sand-pale:   #E9DAB4;   /* světlý písek */
  --basalt:      #1C2924;   /* Radobýl — text, tmavé plochy */
  --paper:       #F2EEE0;   /* pozadí stránky */
  --paper-raise: #FBF9F1;   /* karty */
  --line:        rgba(18,49,65,0.14);

  --display: 'Fraunces', serif;
  --body: 'Public Sans', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --wrap: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--basalt);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  color:var(--deep);
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(2.4rem,5vw,4rem); line-height:1.04; font-optical-sizing:auto; }
h2{ font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.15; }
h3{ font-size:1.25rem; }

p{ margin:0 0 1em; max-width:62ch; }
a{ color:var(--water); }

.eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--water);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--sand);
  display:inline-block;
}

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

/* ---------- navigace ---------- */
header.site{
  position:sticky; top:0; z-index:20;
  background:rgba(242,238,224,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px; max-width:var(--wrap); margin:0 auto;
}
.brand{
  font-family:var(--display); font-weight:600; font-size:1.15rem;
  color:var(--deep); text-decoration:none; display:flex; align-items:center; gap:.5em;
}
.brand svg{ width:26px; height:26px; }
nav.links{ display:flex; gap:2em; }
nav.links a{
  color:var(--basalt); text-decoration:none; font-size:.95rem; font-weight:500;
  padding-bottom:4px; border-bottom:2px solid transparent;
  transition:border-color .2s, color .2s;
}
nav.links a:hover{ color:var(--water); }
nav.links a[aria-current="page"]{
  color:var(--water);
  border-bottom-color:var(--sand);
}
.nav-toggle{ display:none; }

@media (max-width:720px){
  nav.links{
    position:fixed; inset:64px 0 auto 0; background:var(--paper-raise);
    flex-direction:column; gap:0; padding:8px 28px 18px;
    border-bottom:1px solid var(--line);
    transform:translateY(-130%); transition:transform .25s ease;
  }
  nav.links.open{ transform:translateY(0); }
  nav.links a{ padding:12px 0; border-bottom:1px solid var(--line); }
  .nav-toggle{
    display:block; background:none; border:1px solid var(--line);
    border-radius:8px; width:38px; height:34px; cursor:pointer;
  }
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after{
    content:""; display:block; height:2px; background:var(--basalt); margin:6px 8px;
  }
}

/* ---------- hero ---------- */
.hero{
  padding:64px 0 40px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
.hero .lede{ font-size:1.15rem; color:#2b3f3a; max-width:46ch; }
.hero-art{
  background:linear-gradient(160deg,var(--deep),#0c2530);
  border-radius:20px; padding:26px;
  box-shadow:0 24px 50px -20px rgba(18,49,65,.45);
}
.cta-row{ display:flex; gap:14px; margin-top:1.6em; flex-wrap:wrap; }
.btn{
  font-family:var(--mono); font-size:.85rem; letter-spacing:.03em;
  text-decoration:none; padding:12px 20px; border-radius:8px;
  display:inline-flex; align-items:center; gap:.5em;
  border:1px solid transparent;
}
.btn.primary{ background:var(--water); color:#fff; }
.btn.primary:hover{ background:#256a7e; }
.btn.ghost{ border-color:var(--line); color:var(--basalt); }
.btn.ghost:hover{ border-color:var(--water); color:var(--water); }

@media (max-width:860px){
  .hero{ grid-template-columns:1fr; padding-top:36px; }
}

/* ---------- page header (menší hero na podstránkách) ---------- */
.page-head{
  padding:56px 0 34px;
  border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:1.3fr .7fr; gap:32px; align-items:end;
}
.page-head p{ color:#2b3f3a; }
@media (max-width:780px){ .page-head{ grid-template-columns:1fr; } }

/* ---------- statistiky ---------- */
.stat-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  margin:2.2em 0;
}
.stat{ background:var(--paper-raise); padding:22px 20px; }
.stat b{
  font-family:var(--display); font-size:1.9rem; color:var(--deep); display:block; font-weight:600;
}
.stat span{ font-family:var(--mono); font-size:.76rem; letter-spacing:.05em; color:#5b6b64; text-transform:uppercase; }
@media (max-width:720px){ .stat-row{ grid-template-columns:repeat(2,1fr); } }

/* ---------- sekce ---------- */
section.block{ padding:52px 0; }
section.block.tinted{ background:var(--sand-pale); }
section.block.deep{ background:var(--deep); color:#dce9ec; }
section.block.deep h2, section.block.deep h3{ color:#fff; }
section.block.deep p{ color:#c3d6da; }
section.block.deep a{ color:var(--sand-pale); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:860px){ .grid-2, .grid-3{ grid-template-columns:1fr; } }

.card{
  background:var(--paper-raise); border:1px solid var(--line); border-radius:14px;
  padding:26px 24px;
}
.card .num{ font-family:var(--mono); color:var(--sand); font-size:.85rem; margin-bottom:.6em; display:block; }

.divider-wave{ height:34px; width:100%; display:block; color:var(--water); opacity:.55; }

.callout{
  border-left:3px solid var(--sand);
  padding:4px 0 4px 22px; margin:1.6em 0; color:#2b3f3a;
}
.callout b{ color:var(--deep); }

.fact-list{ list-style:none; margin:0; padding:0; }
.fact-list li{
  display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);
}
.fact-list li:last-child{ border-bottom:none; }
.fact-list .k{ font-family:var(--mono); font-size:.8rem; color:var(--water); min-width:9em; padding-top:2px; }

table.info{ width:100%; border-collapse:collapse; margin:1.4em 0; }
table.info th, table.info td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); font-size:.95rem; }
table.info th{ font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:#5b6b64; }

/* ---------- footer ---------- */
footer.site{
  background:var(--basalt); color:#cfe0da; padding:46px 0 30px; margin-top:20px;
}
footer.site .wrap{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; }
footer.site h4{ font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sand); margin:0 0 .9em; }
footer.site a{ color:#cfe0da; text-decoration:none; }
footer.site a:hover{ color:var(--sand); }
footer.site nav{ display:flex; flex-direction:column; gap:.5em; }
footer .bottom{
  max-width:var(--wrap); margin:34px auto 0; padding:18px 28px 0; border-top:1px solid rgba(255,255,255,.12);
  font-family:var(--mono); font-size:.78rem; color:#8fa39c;
}
@media (max-width:780px){ footer.site .wrap{ grid-template-columns:1fr; } }