/* ─────────────────────────────────────────────────────────────
   CUHH — spoločný štýl webu
   verzia 2.0 · 16. 9. 2026 · smer D podľa kánonu D19.4
   Typografia v rem pri koreňovej veľkosti 100 % (D22).
   Koreň sa NEFIXUJE na 16px — musí zostať väzba na používateľom
   zvolenú základnú veľkosť písma.

   ⛔ V rem je LEN TYPOGRAFIA. Priestorová osnova — padding kontajnera,
   gap mriežky, odsadenie sekcií — zostáva v px/vw. Doložené 16. 9. 2026:
   pri rem gapoch sa 11 medzier mriežky pri 200 % roztiahlo na 396 px
   a pri viewporte 320 px spôsobilo vodorovné pretekanie.
   ───────────────────────────────────────────────────────────── */

:root{
  /* farby merané z originálu loga (D19.4) */
  --navy:#2B2825;
  --navy-2:#2F2B27;
  --navy-3:#6B6158;
  --krivka:#D9C8AE;
  --siva:#75726E;          /* plochy a línie */
  --siva-text:#5F5C58;     /* drobný text — sivá zo značky na tmavších vrstvách nevyhovuje */
  --terakota:#A64C1A;
  --terakota-tmava:#8A3D14;
  --terakota-l:#F2C29B;
  --krem:#FDFCF9;
  --ivory:#EFEAE3;
  --col:minmax(0,1fr);
}

html{font-size:100%;scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Source Sans 3",system-ui,sans-serif;
  color:var(--navy);
  background:var(--krem);
  -webkit-font-smoothing:antialiased;
  /* Nezalomiteľné medzery („15. januára", „27,5 km²") sú v slovenskej typografii správne,
     ale pri zväčšenom písme a úzkom stĺpci tvoria neprerušiteľný blok. Poistka, aby
     text radšej zlomil slovo, než pretiekol. Doložené 16. 9. 2026 pri 320 px a 200 %. */
  overflow-wrap:break-word;
}
img{max-width:100%;display:block}

/* ── vrstvy: prechod krém → navy nesie každá sekcia zvlášť ──
   Gradient cez celý dokument je závislý od výšky obsahu a na úzkom
   viewporte sa rozpadne (doložené 16. 9. 2026). */
.v0{background:var(--krem)}
.v1{background:linear-gradient(180deg,#FDFCF9,#F4EFE7)}
.v2{background:linear-gradient(180deg,#F4EFE7,#DBD5CD)}
.v3{background:linear-gradient(180deg,#DBD5CD,#57504A)}
.v4{background:linear-gradient(180deg,#57504A,#3A3530)}
.v5{background:linear-gradient(180deg,#3A3530,#2B2825)}
.v6{background:var(--navy)}

/* ── osnova ── */
.wrap{max-width:1340px;margin:0 auto;padding:0 clamp(22px,4vw,64px)}
.grid{display:grid;grid-template-columns:repeat(12,var(--col));gap:0 clamp(18px,2.4vw,34px)}
.c1-7{grid-column:1/8}.c8-12{grid-column:8/13}.c1-5{grid-column:1/6}.c7-12{grid-column:7/13}
.c1-6{grid-column:1/7}.c1-4{grid-column:1/5}.c6-12{grid-column:6/13}.c1-12{grid-column:1/13}
.c1-8{grid-column:1/9}.c5-12{grid-column:5/13}.c1-9{grid-column:1/10}

/* ── typografia ──
   clamp() skladá preferovanú hodnotu z rem AJ vw, inak sa nadpisy
   pri zväčšení písma nezväčšia (D22). */
h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;
  letter-spacing:-.005em;margin:0}
h1{font-size:clamp(2.375rem,1.2rem + 3.2vw,4.125rem);line-height:1.08}
h1 em{font-style:italic;font-weight:300}
h2{font-size:clamp(1.6875rem,1rem + 1.9vw,2.625rem);line-height:1.15;margin-bottom:1.25rem}
h3{font-size:1.3125rem;line-height:1.32}
h4{font-size:1.125rem;line-height:1.35}
p{font-size:1.03125rem;line-height:1.7;margin:0 0 1.125rem}
.lead{font-size:1.1875rem;line-height:1.6}
.eyebrow{font-size:.8125rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--siva-text);margin:0 0 1.375rem}
.small{font-size:.875rem;line-height:1.64}
section{padding:clamp(66px,7.4vw,112px) 0}

/* ── hlavička ── */
header{padding:34px 0 0}
header .row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
header .row>a{flex:0 0 auto;max-width:100%;line-height:0}
/* Obal loga sa NESMIE zmrštiť na nulu — min-width:0 mu pri 320 px zrazil šírku na 0.
   Hlavička sa namiesto toho zalomí (flex-wrap). */
header .row>nav{min-width:0}
header img{height:66px;width:auto;max-width:100%;flex:none}
/* logo je obrázok, nie text — jeho veľkosť nerastie s používateľským zväčšením písma;
   pri height v rem by pri 200 % malo 377 px šírky a pretieklo by 320 px viewport */
nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:26px;font-size:.90625rem}
nav a{color:var(--siva-text);text-decoration:none;padding-bottom:.25rem;
  border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current=page]{color:var(--navy);border-bottom-color:var(--terakota)}
.lang{display:flex;gap:.625rem;font-size:.8125rem;letter-spacing:.09em;margin-left:.625rem;
  padding-left:1.25rem;border-left:1px solid rgba(43,40,37,.2)}
.lang b{color:var(--navy);font-weight:600}
.lang .nedostupne{color:var(--siva-text);cursor:default}
.lang a{color:var(--siva-text);text-decoration:none;border-bottom:1px solid transparent}
.lang a:hover{color:var(--navy);border-bottom-color:var(--terakota)}
.dark .lang a{color:rgba(239,234,227,.8)}

/* mobilná navigácia */
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid rgba(43,40,37,.32);
  color:var(--navy);font:inherit;font-size:.875rem;padding:.625rem 1rem;cursor:pointer;
  align-items:center;gap:.5625rem}
.nav-toggle .ciary{display:inline-flex;flex-direction:column;gap:3px}
.nav-toggle .ciary i{display:block;width:16px;height:1.5px;background:currentColor}
.nav-toggle[aria-expanded=true]{background:var(--navy);color:var(--krem);border-color:var(--navy)}

/* ── ovládanie z klávesnice ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--terakota);outline-offset:3px}
.dark a:focus-visible,.dark button:focus-visible{outline-color:var(--krivka)}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:var(--krem);
  padding:.75rem 1.25rem;z-index:200;text-decoration:none;font-size:.875rem}
.skip:focus{left:0}

/* ── tlačidlá ── */
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-block;background:var(--navy);color:var(--krem);text-decoration:none;
  padding:.875rem 1.75rem;font-size:.875rem;font-weight:500;letter-spacing:.05em;
  border:1px solid var(--navy);cursor:pointer;font-family:inherit;transition:background .2s,border-color .2s}
.btn:hover{background:var(--terakota);border-color:var(--terakota)}
.btn.ghost{background:none;border-color:rgba(43,40,37,.32);color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:var(--krem);border-color:var(--navy)}
.dark .btn{background:var(--krem);color:var(--navy);border-color:var(--krem)}
.dark .btn:hover{background:var(--terakota);color:var(--krem);border-color:var(--terakota)}
.dark .btn.ghost{background:none;border-color:rgba(239,234,227,.36);color:var(--ivory)}
.dark .btn.ghost:hover{background:var(--krem);color:var(--navy)}

/* ── stavy projektu: doloženosť · priebeh · etapa (D22 bod 4) ── */
.stavy{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:.875rem;align-items:baseline}
.stav{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--siva-text)}
.stav::before{content:"";width:7px;height:7px;flex:none;border:1.5px solid currentColor}
.stav.prax{color:var(--terakota-tmava)}
.stav.prax::before{background:currentColor}
.stav.zamer::before{border-style:dashed}
.etapa{font-size:.8125rem;color:var(--siva-text);letter-spacing:.02em}
.dark .stav{color:var(--krivka)}
.dark .stav.prax{color:var(--terakota-l)}
.dark .etapa{color:rgba(239,234,227,.8)}

/* ── tmavá zóna ── */
.dark{color:var(--ivory)}
.dark .eyebrow{color:var(--krivka)}
.dark h1,.dark h2,.dark h3,.dark h4{color:var(--krem)}
.dark p{color:rgba(239,234,227,.88)}
.dark .small{color:rgba(239,234,227,.8)}
/* drobné poznámky — vlastný token; nikdy ďalšia opacity nad zdedenou priehľadnosťou */
.zdroj{color:rgba(239,234,227,.8);font-size:.875rem}
.v0 .zdroj,.v1 .zdroj,.v2 .zdroj{color:var(--siva-text)}

/* ── vrstevnica ako deliaci prvok (motív loga) ── */
.contour{display:block;width:100%;height:auto;opacity:.5}

/* ── mapy a výkresy ── */
.mapy{display:grid;grid-template-columns:repeat(12,var(--col));gap:clamp(12px,1.6vw,22px)}
.mapa{position:relative;overflow:hidden;background:#3A3530}
.mapa.a{grid-column:1/8;aspect-ratio:16/10}
.mapa.b{grid-column:8/13;aspect-ratio:4/5}
.mapa.c{grid-column:1/5;aspect-ratio:1/1}
.mapa.d{grid-column:5/13;aspect-ratio:16/7}
.mapa img,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mapa figcaption,.hero-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:.8125rem 1rem;
  background:linear-gradient(0deg,rgba(43,40,37,.9),rgba(43,40,37,0));
  color:var(--krem);font-size:.84375rem;letter-spacing:.02em}
.maketa{position:absolute;top:0;left:0;z-index:2;background:var(--terakota);color:#fff;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:.375rem .6875rem}

/* ── pätička ── */
footer{padding:3.625rem 0 5.25rem;font-size:.84375rem;line-height:1.82;color:rgba(239,234,227,.78)}
footer a{color:rgba(239,234,227,.9)}
.sestra{border-top:1px solid rgba(239,234,227,.2);border-bottom:1px solid rgba(239,234,227,.2);
  padding:1.375rem 0;margin:0 0 2.625rem;display:flex;gap:10px 26px;align-items:baseline;
  flex-wrap:wrap;font-size:.90625rem;color:rgba(239,234,227,.82)}
.sestra a{white-space:nowrap}
.riadok b{overflow-wrap:anywhere}
.pozn{margin-top:1.625rem;padding-top:1.125rem;border-top:1px solid rgba(239,234,227,.16);
  font-size:.8125rem;color:rgba(239,234,227,.62);max-width:78ch;line-height:1.7}

@media(max-width:560px){
  header img{height:52px}
}
@media(max-width:920px){
  .c1-7,.c8-12,.c1-5,.c7-12,.c1-6,.c1-4,.c6-12,.c1-8,.c5-12,.c1-9{grid-column:1/13}
  .c8-12,.c7-12,.c6-12,.c5-12{margin-top:2rem}
  .nav-toggle{display:inline-flex}
  nav{display:none;flex-direction:column;align-items:flex-start;gap:0;width:100%;
    margin:1.125rem 0 0;padding-top:.75rem;border-top:1px solid rgba(43,40,37,.2)}
  nav[data-open="true"]{display:flex}
  nav a{padding:.8125rem 0;width:100%;font-size:1rem;border-bottom:1px solid rgba(43,40,37,.12)}
  .lang{margin:.875rem 0 0;padding:0;border-left:0;font-size:.9375rem}
  header .row{flex-wrap:wrap}
  .mapa.a,.mapa.b,.mapa.c,.mapa.d{grid-column:1/13;aspect-ratio:16/10}
}