/* ---------- Tokenový systém ---------------------------------------------
   Barvy: krém z knihy, tmavě modrá + zlatá z pfl.cz, vínová z obálky ebooku.
   Web je záměrně "světlý, tištěný" – jeden vizuální svět, žádný dark mode.  */
:root{
  color-scheme: light;
  --papir:      #FCFAF7;   /* krém – shodný s vnitřkem ebooku */
  --papir-tmavy:#F4EFE9;
  --inkoust:    #18275D;   /* tmavě modrá z pfl.cz */
  --inkoust-hl: #0E1838;   /* hluboká modrá pro tmavý pruh */
  --vino:       #96355D;   /* vínová z obálky ebooku */
  --vino-svetla:#F3E7EC;
  --zlata:      #E1CA8A;   /* zlatá z pfl.cz – jen linky a detaily */
  --zlata-tmava:#A5843A;   /* čitelná zlatá pro text */
  --text:       #4A4E63;   /* šedá s modrým nádechem */
  --text-slaby: #83879B;
  --linka:      #E3DDD4;

  --sirka: 1120px;
  --radius: 2px;

  --f-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --f-text: "Karla", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--papir);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: var(--inkoust); }

h1,h2,h3{
  font-family: var(--f-display);
  color: var(--inkoust);
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}

.obal{ width:100%; max-width: var(--sirka); margin-inline:auto; padding-inline: 24px; }

/* Vlasová linka + prostrkaný verzálkový popisek – převzato ze sazby knihy */
.zahlavi{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vino);
  margin: 0 0 28px;
}
.zahlavi--svetle{ color: var(--zlata); }

/* ---------- Navigace ---------------------------------------------------- */
.nav{
  position: sticky; top:0; z-index:50;
  background: rgba(252,250,247,.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--linka);
}
.nav__vnitrek{ display:flex; align-items:center; gap:32px; height:66px; }
.znacka{
  font-family: var(--f-display);
  font-size: 19px; color: var(--inkoust);
  text-decoration:none; white-space:nowrap;
}
.znacka em{ font-style: italic; color: var(--vino); }
.znacka__kratky{ display:none; }
.nav__odkazy{ display:flex; gap:28px; margin-left:auto; }
.nav__odkazy a{
  font-size: 13.5px; letter-spacing:.02em; color: var(--text);
  text-decoration:none; padding: 6px 0; border-bottom:1px solid transparent;
}
.nav__odkazy a:hover{ color: var(--inkoust); border-bottom-color: var(--zlata); }

.tlacitko{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--f-text); font-size:15px; font-weight:600; letter-spacing:.01em;
  padding: 13px 26px; border-radius: var(--radius);
  background: var(--vino); color:#fff; text-decoration:none;
  border:1px solid var(--vino); cursor:pointer; white-space:nowrap;
  transition: background .18s ease, transform .18s ease;
}
.tlacitko:hover{ background:#7d2b4d; transform: translateY(-1px); }
.tlacitko--maly{ padding: 9px 18px; font-size:13.5px; }
.tlacitko--obrys{
  background: transparent; color: var(--inkoust); border-color: var(--inkoust);
}
.tlacitko--obrys:hover{ background: var(--inkoust); color:#fff; }
.tlacitko--zlaty{
  background: var(--zlata); color: var(--inkoust-hl); border-color: var(--zlata);
}
.tlacitko--zlaty:hover{ background:#eed9a6; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline: 2px solid var(--vino); outline-offset: 3px;
}

/* ---------- Hero -------------------------------------------------------- */
.hero{ padding: 84px 0 72px; }
.hero__mrizka{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items:center;
}
.hero h1{
  font-size: clamp(40px, 5.6vw, 68px);
  letter-spacing: -.01em;
  margin-bottom: 26px;
}
.hero h1 em{ font-style: italic; color: var(--vino); }
.hero__perex{
  font-size: 19px; line-height:1.6; max-width: 46ch; margin: 0 0 32px;
}
.hero__akce{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero__detail{
  margin-top: 26px; padding-top: 18px; border-top:1px solid var(--linka);
  font-size: 13.5px; color: var(--text-slaby); letter-spacing:.02em;
}
.hero__detail b{ color: var(--inkoust); font-weight:600; }

.obalka{ position:relative; width:100%; max-width: 400px; margin: 0 0 0 auto; }
.obalka::before{
  content:""; position:absolute; inset: 26px -26px -26px 26px;
  background: var(--vino-svetla); border-radius: var(--radius);
}
.obalka img{
  position:relative; width:100%; border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(24,39,93,.18), 0 2px 6px rgba(24,39,93,.08);
}
.obalka__popis{
  position:relative; margin-top: 34px; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color: var(--text-slaby); text-align:center;
}

/* ---------- Pruh s fakty ------------------------------------------------ */
.fakta{ border-block:1px solid var(--linka); background: var(--papir-tmavy); }
.fakta__mrizka{
  display:grid; grid-template-columns: repeat(4, 1fr);
}
.fakt{ padding: 30px 0; text-align:center; border-left:1px solid var(--linka); }
.fakt:first-child{ border-left:0; }
.fakt b{
  display:block; font-family: var(--f-display); font-size: 30px;
  color: var(--inkoust); font-weight:500; font-variant-numeric: tabular-nums;
}
.fakt span{ font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--text-slaby); }

/* ---------- Obecná sekce ------------------------------------------------ */
.sekce{ padding: 88px 0; }
.sekce--linka{ border-top:1px solid var(--linka); }
.sekce h2{ font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 20px; }
.sekce__uvod{ max-width: 62ch; font-size: 18px; }

/* Situace */
.situace{ display:grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 56px; }
.situace__polozka{ border-top: 2px solid var(--zlata); padding-top: 22px; }
.situace__polozka h3{ font-size: 21px; margin-bottom: 10px; }
.situace__polozka p{ margin:0; font-size: 16px; }

/* ---------- Obsah knihy – hlavní typografický motiv ---------------------- */
.obsah{ background: var(--papir-tmavy); border-block:1px solid var(--linka); }
.obsah__matter{
  font-size: 12px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--text-slaby); margin: 0 0 4px;
}
.kapitoly{ margin: 40px 0 0; padding:0; list-style:none; border-top:1px solid var(--linka); }
.kapitola{
  display:grid; grid-template-columns: 56px 1fr auto; align-items: baseline; gap: 12px;
  padding: 26px 8px; border-bottom:1px solid var(--linka);
  transition: background .18s ease;
}
.kapitola:hover{ background: rgba(150,53,93,.045); }
.kapitola__cislo{
  font-family: var(--f-display); font-size: 22px; color: var(--vino);
  font-variant-numeric: tabular-nums;
}
.kapitola__nazev{ font-family: var(--f-display); font-size: clamp(20px, 2.4vw, 27px); color: var(--inkoust); }
.kapitola__motto{ font-family: var(--f-display); font-style: italic; font-size: 17px; color: var(--text-slaby); text-align:right; }

/* ---------- Co kniha umí ------------------------------------------------ */
.body{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 34px 56px; margin-top: 48px; }
.bod{ display:grid; grid-template-columns: 26px 1fr; gap: 16px; }
.bod svg{ width: 20px; height:20px; margin-top:4px; color: var(--vino); flex:none; }
.bod h3{ font-size: 19px; margin-bottom: 6px; }
.bod p{ margin:0; font-size:16px; }

/* ---------- Autorky ----------------------------------------------------- */
.autorky{ display:grid; grid-template-columns: repeat(2,1fr); gap: 56px; margin-top: 52px; }
.autorka__portret{
  position:relative; aspect-ratio: 4/5; background: var(--vino-svetla);
  border-radius: var(--radius);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border:1px solid var(--linka);
}
.autorka__portret img{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover;
}
.autorka__zastupce{
  font-family: var(--f-display); font-size: 42px; color: var(--vino); opacity:.45;
}
.autorka h3{ font-size: 24px; margin: 22px 0 4px; }
.autorka__role{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--zlata-tmava); margin: 0 0 14px;
}
.autorka p{ margin:0; font-size:16px; }

/* ---------- Objednávka – tmavý pruh ------------------------------------- */
.objednavka{ background: var(--inkoust-hl); color: #D9DCE8; padding: 88px 0; }
.objednavka h2{ color: #fff; font-size: clamp(30px,3.4vw,40px); margin-bottom: 18px; }
.objednavka__mrizka{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:start; }
.objednavka p{ font-size:17px; max-width: 44ch; }
.cena{
  display:flex; align-items:baseline; gap: 14px; margin: 30px 0 8px;
  font-family: var(--f-display); color:#fff;
}
.cena b{ font-size: 46px; font-weight:500; font-variant-numeric: tabular-nums; }
.cena span{ font-family: var(--f-text); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color: var(--zlata); }
.formular{
  background: #fff; border-radius: var(--radius); padding: 34px;
  border-top: 3px solid var(--zlata);
}
.formular__misto{
  border: 1px dashed #C9CEDF; border-radius: var(--radius);
  padding: 40px 24px; text-align:center; color: var(--text-slaby); font-size:14.5px;
}
.formular__misto strong{ display:block; color: var(--inkoust); font-size:16px; margin-bottom:8px; font-weight:600; }
.formular__pod{ margin: 18px 0 0; font-size:12.5px; color: var(--text-slaby); text-align:center; }

/* ---------- Otázky ------------------------------------------------------ */
.otazky{ margin-top: 44px; border-top:1px solid var(--linka); }
details{ border-bottom:1px solid var(--linka); }
summary{
  list-style:none; cursor:pointer; padding: 22px 40px 22px 0; position:relative;
  font-family: var(--f-display); font-size: 20px; color: var(--inkoust);
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+"; position:absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-text); font-size: 22px; color: var(--vino); line-height:1;
}
details[open] summary::after{ content:"–"; }
details p{ margin: 0 0 24px; max-width: 68ch; font-size: 16.5px; }

/* ---------- Patička ----------------------------------------------------- */
.paticka{ border-top:1px solid var(--linka); padding: 54px 0 40px; font-size: 14.5px; }
.paticka__mrizka{ display:flex; flex-wrap:wrap; gap: 40px; justify-content: space-between; }
.paticka a{ color: var(--text); text-decoration:none; border-bottom:1px solid var(--linka); }
.paticka a:hover{ color: var(--inkoust); border-bottom-color: var(--zlata); }
.paticka__odkazy{ display:flex; flex-wrap:wrap; gap: 22px; }
.paticka__copy{ margin-top: 34px; padding-top: 22px; border-top:1px solid var(--linka); color: var(--text-slaby); font-size:13px; }

/* ---------- Odhalení při scrollu ---------------------------------------- */
.odhal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.odhal.videt{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .odhal{ opacity:1; transform:none; transition:none; }
  .tlacitko:hover{ transform:none; }
}

/* ---------- Responzivita ------------------------------------------------ */
@media (max-width: 900px){
  .hero__mrizka{ grid-template-columns: 1fr; gap: 48px; }
  .obalka{ max-width: 340px; margin-inline:auto; }
  .obalka::before{ inset: 20px -18px -18px 18px; }
  .situace, .body, .autorky, .objednavka__mrizka{ grid-template-columns: 1fr; gap: 34px; }
  .fakta__mrizka{ grid-template-columns: repeat(2,1fr); }
  .fakt:nth-child(3){ border-left:0; }
  .fakt{ border-top:1px solid var(--linka); }
  .fakt:nth-child(-n+2){ border-top:0; }
  .nav__odkazy{ display:none; }
  .nav__vnitrek{ gap:16px; }
  .znacka{ font-size: 16px; }
  .znacka__dlouhy{ display:none; }
  .znacka__kratky{ display:inline; }
  .kapitola{ grid-template-columns: 40px 1fr; }
  .kapitola__motto{ grid-column: 2; text-align:left; }
  .sekce, .hero, .objednavka{ padding: 60px 0; }
}

/* ---------- Textové podstránky (podmínky, GDPR, kontakt) ---------------- */
.stranka-text{ padding: 64px 0 88px; }
.proza{ max-width: 68ch; }
.proza h1{ font-size: clamp(32px, 4.2vw, 48px); margin-bottom: 14px; }
.proza .datum{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--text-slaby); margin: 0 0 44px;
}
.proza h2{
  font-size: 24px; margin: 46px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--linka);
}
.proza h3{ font-size: 19px; margin: 28px 0 8px; }
.proza p{ margin: 0 0 16px; }
.proza ul, .proza ol{ margin: 0 0 18px; padding-left: 22px; }
.proza li{ margin-bottom: 8px; }
.proza a{ color: var(--vino); }
.proza table{ border-collapse: collapse; width:100%; margin: 0 0 20px; font-size:16px; }
.proza td{ padding: 9px 14px 9px 0; border-bottom:1px solid var(--linka); vertical-align: top; }
.proza td:first-child{ width: 42%; color: var(--text-slaby); }
.proza strong{ color: var(--inkoust); font-weight:600; }

.udaje{
  background: var(--papir-tmavy); border-left: 3px solid var(--zlata);
  padding: 24px 28px; margin: 0 0 32px; border-radius: var(--radius);
}
.udaje p{ margin:0 0 6px; }
.udaje p:last-child{ margin:0; }

/* Dočasná poznámka pro autorku – před spuštěním webu celý blok smazat */
.navrh{
  background: var(--vino-svetla); border: 1px dashed var(--vino);
  padding: 18px 22px; border-radius: var(--radius); margin: 0 0 36px;
  font-size: 15px; color: var(--vino);
}
.navrh strong{ color: var(--vino); }

.kontakt-mrizka{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start; }
@media (max-width: 900px){ .kontakt-mrizka{ grid-template-columns:1fr; gap:32px; } }

/* Tlačítko uvnitř textového bloku – ať ho nepřebije obecné .proza a */
.proza a.tlacitko{ color:#fff; text-decoration:none; }
.proza a.tlacitko--obrys{ color: var(--inkoust); }
.proza a.tlacitko--obrys:hover{ color:#fff; }

/* ---------- Tvrzení: proč knize věřit ----------------------------------- */
.tvrzeni{ background: var(--vino-svetla); border-block:1px solid #E7D5DC; }
.tvrzeni__mrizka{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items:start; }
.tvrzeni h2{
  font-size: clamp(28px, 3.4vw, 40px); color: var(--vino);
  margin-bottom: 20px;
}
.tvrzeni__lead{ font-size: 18px; max-width: 44ch; margin:0; color: #5C4A52; }
.tvrzeni__seznam{ list-style:none; margin:0; padding:0; }
.tvrzeni__seznam li{
  padding: 18px 0 18px 26px; border-top:1px solid #E7D5DC; position:relative;
  font-size: 16.5px; color:#5C4A52;
}
.tvrzeni__seznam li:first-child{ border-top:0; }
.tvrzeni__seznam li::before{
  content:""; position:absolute; left:0; top: 27px;
  width: 12px; height:1px; background: var(--vino);
}
@media (max-width: 900px){ .tvrzeni__mrizka{ grid-template-columns:1fr; gap:28px; } }

/* Zvýraznění objednávkové karty */
.formular{ box-shadow: 0 24px 60px rgba(0,0,0,.35); border-top-width: 4px; }
.formular__nadpis{
  margin: 0 0 18px; padding-bottom: 14px; border-bottom:1px solid var(--linka);
  font-size: 12px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--zlata-tmava); font-weight:600;
}

/* Tichý odkaz pod častými dotazy */
.otazky__pod{ margin: 26px 0 0; font-size: 15.5px; color: var(--text-slaby); }
.otazky__pod a{ color: var(--vino); }

/* ---------- Mobilní menu ------------------------------------------------ */
.nav__burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width: 42px; height: 42px; padding: 0 10px;
  background:transparent; border:1px solid var(--linka); border-radius: var(--radius);
  cursor:pointer;
}
.nav__burger span{
  display:block; height:1.5px; width:100%; background: var(--inkoust);
  transition: transform .22s ease, opacity .18s ease;
}
.nav__burger.je-otevrene span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav__burger.je-otevrene span:nth-child(2){ opacity:0; }
.nav__burger.je-otevrene span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px){
  .nav__burger{ display:flex; margin-left:auto; }
  .nav__odkazy{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    margin:0; padding: 4px 24px 16px;
    background: var(--papir); border-bottom:1px solid var(--linka);
    box-shadow: 0 18px 40px rgba(24,39,93,.10);
  }
  .nav__odkazy.je-otevrene{ display:flex; }
  .nav__odkazy a{
    padding: 15px 0; font-size: 16.5px;
    border-bottom:1px solid var(--linka); border-top:0;
  }
  .nav__odkazy a:last-child{ border-bottom:0; }
  .nav__odkazy a:hover{ border-bottom-color: var(--linka); }
}
@media (prefers-reduced-motion: reduce){ .nav__burger span{ transition:none; } }