/* ============================================================
   DAVID NEUVERTH — sdilene styly webu
   Barvy, pisma a tvary se NEDEFINUJI tady. Berou se z tokens.css.
   Chybi komponenta? Pridej ji sem, nezakladej dalsi soubor.
   ============================================================ */

:root{
  /* Jen rozvrzeni, zadne brandove hodnoty */
  --sirka:1140px;
  --sirka-text:680px;
  --m1:8px; --m2:16px; --m3:24px; --m4:32px; --m5:48px; --m6:64px; --m7:96px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--dn-paper);
  color:var(--dn-text);
  font-family:var(--dn-font-body);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3{font-family:var(--dn-font-display);font-weight:400;color:var(--dn-deep-slate);
  margin:0;text-wrap:balance;line-height:1.15}
h1{font-size:clamp(38px,5.4vw,60px)}
h2{font-size:clamp(28px,3.6vw,40px)}
h3{font-size:clamp(20px,2.2vw,24px);line-height:1.3}
p{margin:0 0 1em}
a{color:var(--dn-copper-clay)}

.obal{max-width:var(--sirka);margin:0 auto;padding:0 var(--m3)}
.uzky{max-width:var(--sirka-text)}
.sekce{padding:var(--m7) 0}
.sekce--tesna{padding:var(--m5) 0}
.sekce--ivory{background:var(--dn-warm-ivory)}
.sekce--papir{background:var(--dn-paper)}
.sekce--tmava{background:var(--dn-deep-slate);color:var(--dn-warm-ivory)}
.sekce--tmava h2,.sekce--tmava h3{color:var(--dn-warm-ivory)}

.nadtitulek{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dn-copper-clay);margin-bottom:var(--m2)}
.perex{font-size:20px;line-height:1.6;max-width:var(--sirka-text)}
.drobne{font-size:15px;color:var(--dn-muted)}
.sekce--tmava .drobne{color:var(--dn-stone-beige)}

/* Tlacitka */
.btn{display:inline-block;background:var(--dn-copper-clay);color:var(--dn-paper);
  font-family:var(--dn-font-body);font-size:16px;font-weight:500;text-decoration:none;
  padding:16px 30px;border-radius:var(--dn-radius-btn);min-height:44px;
  transition:background .18s ease}
.btn:hover,.btn:focus-visible{background:#8A5C43}
.btn--tichy{background:transparent;color:var(--dn-deep-slate);
  border:1px solid var(--dn-line);padding:15px 29px}
.btn--tichy:hover{background:var(--dn-warm-ivory)}
a:focus-visible,button:focus-visible{outline:2px solid var(--dn-copper-clay);outline-offset:3px}

/* Hlavicka */
.hlavicka{background:var(--dn-warm-ivory);border-bottom:1px solid var(--dn-line);
  position:relative;z-index:5}
.hlavicka .obal{display:flex;align-items:center;justify-content:space-between;
  gap:var(--m4);padding-top:18px;padding-bottom:18px}
.logo img{height:34px;width:auto}
.menu{display:flex;align-items:center;gap:var(--m4);list-style:none;margin:0;padding:0}
.menu a{color:var(--dn-deep-slate);text-decoration:none;font-size:15px;
  letter-spacing:.02em;padding:6px 0;border-bottom:1px solid transparent}
.menu a:hover{border-bottom-color:var(--dn-copper-clay)}
/* Jednostrankovy web: menu skace na sekce, kotva nesmi skoncit pod okrajem. */
section[id]{scroll-margin-top:24px}
.menu a[href^="#"]{cursor:pointer}

/* Delsi reference: 24px displej fontu je na 3 odstavce moc. */
#reference .citat p{font-size:20px}
#reference .citat .drobne{font-family:var(--dn-font-body);font-size:15px;
  color:var(--dn-muted);line-height:1.6}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--m6);
  align-items:start;margin-top:var(--m5)}
.kontakt-mail{font-size:20px;text-decoration:none;font-weight:500}
.kontakt-mail:hover{text-decoration:underline}

/* Uvodni sekce */
.uvod{background:var(--dn-deep-slate);color:var(--dn-warm-ivory)}
.uvod .obal{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--m6);
  align-items:center;padding-top:var(--m7);padding-bottom:var(--m7)}
.uvod h1{color:var(--dn-warm-ivory)}
.uvod .perex{color:var(--dn-stone-beige);margin:var(--m3) 0 var(--m5)}
/* Tlumena seda z tokenu je na tmavem pozadi necitelna. Na tmavem se drobne pise beige. */
.uvod .drobne{margin-top:var(--m2);color:var(--dn-stone-beige)}
.uvod-foto{border-radius:var(--dn-radius-card);overflow:hidden;box-shadow:var(--dn-shadow-soft)}

/* Citat */
.citat{border-left:3px solid var(--dn-copper-clay);padding-left:var(--m3);
  max-width:var(--sirka-text)}
.citat p{font-family:var(--dn-font-display);font-size:24px;line-height:1.45;
  color:var(--dn-deep-slate);margin-bottom:var(--m2)}
.citat cite{font-style:normal;font-size:15px;font-weight:500;color:var(--dn-deep-slate)}
.citat cite span{color:var(--dn-muted);font-weight:400}

/* Seznam situaci */
.situace{list-style:none;margin:var(--m4) 0 0;padding:0;max-width:var(--sirka-text)}
.situace li{padding:14px 0 14px 30px;border-bottom:1px solid var(--dn-line);position:relative}
.situace li::before{content:"";position:absolute;left:0;top:24px;width:14px;height:1px;
  background:var(--dn-copper-clay)}
.situace li:last-child{border-bottom:0}

/* Kroky a fáze */
.faze{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m4);margin-top:var(--m5)}
/* Ctyri vrstvy se vedle sebe na sirku nevejdou citelne. Dve rady po dvou. */
.faze--ctyri{grid-template-columns:repeat(2,1fr);gap:var(--m5) var(--m6);max-width:960px}
.faze-polozka .cislo{font-family:var(--dn-font-display);font-size:44px;
  color:var(--dn-copper-clay);line-height:1}
.faze-polozka h3{margin:var(--m2) 0 10px}
.faze-polozka p{font-size:17px;margin:0}

/* Karty */
.karty{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m3);margin-top:var(--m5)}
.karta{background:var(--dn-paper);border-radius:var(--dn-radius-card);
  padding:var(--m4);display:flex;flex-direction:column}
.sekce--papir .karta{background:var(--dn-warm-ivory)}
.karta h3{margin-bottom:10px}
.karta p{font-size:17px}
.karta .cena{margin-top:auto;padding-top:var(--m3);font-size:20px;font-weight:600;
  color:var(--dn-deep-slate)}
.karta .cena small{display:block;font-size:15px;font-weight:400;color:var(--dn-muted)}

/* Dvousloupec s fotkou */
.dvojice{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--m6);align-items:center}
.dvojice img{border-radius:var(--dn-radius-card)}

/* Neni pro tebe */
.vymezeni{display:grid;grid-template-columns:1fr 1fr;gap:var(--m5);margin-top:var(--m5)}
.vymezeni ul{list-style:none;margin:var(--m2) 0 0;padding:0}
.vymezeni li{padding:10px 0 10px 26px;position:relative;font-size:17px}
.vymezeni li::before{position:absolute;left:0;top:10px;font-size:15px}
.ano li::before{content:"✓";color:var(--dn-copper-clay)}
.ne li::before{content:"—";color:var(--dn-stone-beige)}

/* Zaver */
.zaver{text-align:center}
.zaver .obal{max-width:760px}
.zaver .btn{margin-top:var(--m4)}

/* Paticka */
.paticka{background:var(--dn-deep-slate);color:var(--dn-stone-beige);
  padding:var(--m6) 0 var(--m5);font-size:15px}
.paticka .obal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m4)}
.paticka h4{font-family:var(--dn-font-body);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dn-warm-ivory);margin:0 0 var(--m2);font-weight:500}
.paticka a{color:var(--dn-stone-beige);text-decoration:none;display:block;padding:3px 0}
.paticka a:hover{color:var(--dn-warm-ivory)}
.paticka .copy{grid-column:1/-1;border-top:1px solid rgba(236,229,216,.18);
  margin-top:var(--m3);padding-top:var(--m3);color:var(--dn-stone-beige);font-size:14px}

@media (max-width:860px){
  body{font-size:17px}
  .sekce{padding:var(--m6) 0}
  .uvod .obal{grid-template-columns:1fr;gap:var(--m4)}
  .uvod-foto{order:-1}
  .faze,.karty,.vymezeni,.dvojice,.paticka .obal,.kontakt{grid-template-columns:1fr}
  .hlavicka .obal{flex-wrap:wrap;justify-content:center;gap:var(--m2);
    padding-top:14px;padding-bottom:14px}
  .menu{gap:var(--m3);flex-wrap:wrap;justify-content:center}
  .menu a{font-size:14px}
}

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