/* ============================================================
   VKLIDU INVESTOR - clenska sekce kurzu
   JEDINY stylovy soubor celeho kurzu. Chybi ti komponenta?
   Pridej ji SEM, nezakladej dalsi soubor. (standardy/vizual.md, bod 2)
   Hodnoty pochazi z mozek/pravda/design/davidneuverth-web/tokens.css
   ============================================================ */

:root{
  --dn-deep-slate:#24323A;
  --dn-steel-teal:#43606A;
  --dn-warm-ivory:#ECE5D8;
  --dn-stone-beige:#B7B0A6;
  --dn-copper-clay:#9C6B4F;
  --dn-carbon-ink:#171A1D;
  --dn-paper:#F6F2E9;
  --dn-text:#3D4A51;
  --dn-muted:#6B7378;
  --dn-line:rgba(36,50,58,.16);
  --dn-radius-card:18px;
  --dn-radius-btn:10px;
  --dn-shadow-soft:0 18px 48px rgba(23,26,29,.12);
  --dn-border-soft:1px solid rgba(36,50,58,.14);
  --dn-font-display:"Questa Display","Baskervville","Cormorant Garamond",Georgia,serif;
  --dn-font-body:"Sofia Pro","Manrope","Avenir Next",-apple-system,BlinkMacSystemFont,sans-serif;
  --sloupec:700px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--dn-paper); color:var(--dn-text);
  font-family:var(--dn-font-body); font-size:18px; line-height:1.7;
  font-weight:400; -webkit-font-smoothing:antialiased;
}

/* ---------- hlavicka a paticka ---------- */
.hlavicka{
  border-bottom:1px solid var(--dn-line); background:var(--dn-paper);
  position:sticky; top:0; z-index:10;
}
.hlavicka__vnitrek,.paticka__vnitrek{
  max-width:1080px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.znacka{
  font-family:var(--dn-font-display); font-size:20px; color:var(--dn-deep-slate);
  text-decoration:none; letter-spacing:.01em;
}
.znacka span{color:var(--dn-copper-clay)}
.hlavicka a.odkaz-tise{
  color:var(--dn-muted); text-decoration:none; font-size:15px;
  padding:10px 12px; border-radius:var(--dn-radius-btn);
}
.hlavicka a.odkaz-tise:hover{color:var(--dn-deep-slate)}

.paticka{border-top:1px solid var(--dn-line); margin-top:80px; color:var(--dn-muted); font-size:15px}
.paticka__vnitrek{flex-wrap:wrap}
.paticka a{color:var(--dn-muted)}

/* ---------- rozvrzeni ---------- */
.obal{max-width:1080px; margin:0 auto; padding:0 24px}
.sloupec{max-width:var(--sloupec); margin:0 auto}
.hlava-stranky{padding:64px 0 36px}
.stitek{
  display:inline-block; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dn-copper-clay); margin:0 0 14px;
}

h1{
  font-family:var(--dn-font-display); font-weight:400; color:var(--dn-deep-slate);
  font-size:clamp(34px,5vw,52px); line-height:1.15; margin:0 0 18px; letter-spacing:-.01em;
}
h2{
  font-family:var(--dn-font-display); font-weight:400; color:var(--dn-deep-slate);
  font-size:clamp(25px,3vw,32px); line-height:1.25; margin:56px 0 16px;
}
h3{
  font-family:var(--dn-font-body); font-weight:600; color:var(--dn-deep-slate);
  font-size:20px; margin:38px 0 12px;
}
p{margin:0 0 22px}
a{color:var(--dn-copper-clay)}
strong{font-weight:600; color:var(--dn-deep-slate)}
.perex{font-size:20px; color:var(--dn-steel-teal); margin-bottom:30px}

ul,ol{margin:0 0 24px; padding-left:22px}
li{margin:0 0 10px}

blockquote{
  margin:32px 0; padding:4px 0 4px 22px;
  border-left:3px solid var(--dn-copper-clay);
  font-family:var(--dn-font-display); font-size:21px; line-height:1.5; color:var(--dn-deep-slate);
}

/* ---------- karty lekci ---------- */
.mrizka{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin:0 0 20px}
.karta{
  display:block; background:#fff; border:var(--dn-border-soft); border-radius:var(--dn-radius-card);
  padding:24px; text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease;
}
.karta:hover{transform:translateY(-2px); box-shadow:var(--dn-shadow-soft)}
.karta__cislo{
  font-family:var(--dn-font-display); font-size:15px; color:var(--dn-copper-clay);
  letter-spacing:.08em; display:block; margin-bottom:8px;
}
.karta__nazev{font-family:var(--dn-font-display); font-size:23px; color:var(--dn-deep-slate); line-height:1.25; margin:0 0 8px}
.karta__popis{font-size:16px; color:var(--dn-muted); margin:0}
.karta--bonus{background:var(--dn-warm-ivory)}

/* ---------- zvyraznujici prvky (zachytne body v dlouhem textu) ---------- */
.zvyrazneni{
  background:var(--dn-warm-ivory); border-left:3px solid var(--dn-copper-clay);
  border-radius:0 var(--dn-radius-card) var(--dn-radius-card) 0;
  padding:20px 24px; margin:32px 0;
}
.zvyrazneni p:last-child{margin-bottom:0}

.cviceni{
  border:var(--dn-border-soft); border-radius:var(--dn-radius-card);
  padding:24px; margin:32px 0; background:#fff;
}
.cviceni__nadpis{
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dn-copper-clay); margin:0 0 10px;
}
.cviceni p:last-child{margin-bottom:0}

/* ---------- audio ---------- */
.audio{margin:0 0 40px; padding:20px 24px; border:var(--dn-border-soft); border-radius:var(--dn-radius-card); background:#fff}
.audio audio{width:100%}
.audio--chybi{background:var(--dn-warm-ivory); color:var(--dn-muted); font-size:16px}
.audio--chybi p{margin:0}

/* ---------- tlacitka a navigace ---------- */
.tlacitko{
  display:inline-block; background:var(--dn-copper-clay); color:#fff; text-decoration:none;
  padding:15px 28px; border-radius:var(--dn-radius-btn); font-weight:600; font-size:17px;
  border:0; cursor:pointer; min-height:44px;
}
.tlacitko:hover{background:#8a5d44}

.prepinac{display:flex; justify-content:space-between; gap:16px; margin:56px 0 0; flex-wrap:wrap}
.prepinac a{
  flex:1 1 220px; text-decoration:none; color:inherit; border:var(--dn-border-soft);
  border-radius:var(--dn-radius-card); padding:18px 22px; background:#fff;
}
.prepinac small{display:block; color:var(--dn-muted); font-size:14px; margin-bottom:4px}
.prepinac span{font-family:var(--dn-font-display); font-size:19px; color:var(--dn-deep-slate)}
.prepinac a.vpravo{text-align:right}

/* ---------- vstupni brana ---------- */
.brana{max-width:520px; margin:0 auto; padding:80px 24px}
.brana .karta{padding:32px}
.pole{display:block; margin:0 0 18px}
.pole span{display:block; font-size:15px; color:var(--dn-muted); margin-bottom:6px}
.pole input{
  width:100%; padding:13px 14px; font-size:17px; font-family:inherit; color:var(--dn-text);
  border:1px solid var(--dn-line); border-radius:var(--dn-radius-btn); background:#fff; min-height:44px;
}
.chyba{background:#fff3f0; border-left:3px solid #a4462f; padding:14px 18px; border-radius:0 10px 10px 0; margin:0 0 20px; font-size:16px}

@media (max-width:640px){
  body{font-size:17px}
  .hlava-stranky{padding:44px 0 28px}
  .prepinac a.vpravo{text-align:left}
}