/* ==========================================================================
   PENÍZE A BYDLENÍ — stylopis prototypu

   PRAVIDLA, KTERÁ SE NEPORUŠUJÍ
   ------------------------------------------------------------------
   TEXT má tři úrovně a žádnou čtvrtou:
     1) čtený text  — var(--fs-read),  var(--c-ink)
     2) popisky     — var(--fs-micro), var(--c-muted)
     3) data        — var(--fs-small), var(--c-ink)  … pouze tabulky
   Šedá se nikdy nepoužije na text, který má člověk souvisle číst.

   ŠÍŘKY řídí výhradně .wrap. Žádná jiná třída nenastavuje boční padding.

   SEZNAMY mají jeden systém odrážek (sekce 6).

   NAVIGACE: odkaz a rozbalovací tlačítko jsou dva různé prvky.
   Rozlišení hubu a článku nikdy nestojí jen na barvě.
   ========================================================================== */

/* ==========================================================================
   1. TOKENY
   ========================================================================== */
:root{
  --c-ink:        #141C33;
  --c-heading:    #101830;
  --c-muted:      #5A6377;
  --c-accent:     #4A4ADF;      /* 6,3:1 na bílé · 5,7:1 na podkladu · 5,2:1 na šedé */
  --c-accent-dk:  #3535B4;      /* text v prose, 9,1:1 */
  --c-accent-wk:  #E8E8FC;
  --c-accent-lt:  #A9B6FF;      /* pouze na tmavé ploše */
  --c-hair:       #EAEDF4;      /* dělicí vlasová linka uvnitř ploch */
  --c-dark:       #1B2340;
  --c-bg:         #EFF1F7;
  --c-surface:    #FFFFFF;
  --c-border:     #E3E6EF;
  --c-border-st:  #C9CFE0;   /* silnější linka, drobné šipky */

  --c-warn:       #9A5B12;
  --c-warn-bg:    #FDF3E3;
  --c-legal:      #3B4664;
  --c-legal-bg:   #F1F3F9;
  --c-ex:         #16745A;
  --c-ex-bg:      #E7F4EF;

  --f-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --fs-hero:  clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  --fs-h1:    clamp(1.6rem, 1.15rem + 1.8vw, 2.4rem);
  --fs-h2:    clamp(1.3rem, 1.1rem + .9vw, 1.6rem);
  --fs-h3:    clamp(1.05rem, .98rem + .35vw, 1.25rem);
  --fs-body:  1rem;
  --fs-read:  1.0625rem;
  --fs-small:  .9375rem;
  --fs-micro:  .8125rem;

  --lh-read: 1.72;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4.5rem;

  --r-card: 16px;
  --r-box: 12px;
  --r-panel: 18px;
  --r-pill: 999px;

  /* prostrkání podle optické velikosti — jedna rodina, charakter z detailu */
  --ls-display: -.024em;
  --ls-title:   -.014em;
  --ls-meta:     .012em;
  --ls-label:    .09em;

  --ease: cubic-bezier(.2,.7,.3,1);
  --w-page: 1280px;
  --w-text: 68ch;

  --li-indent: 1.75rem;
  --li-gutter: 1.25rem;
  --li-gap: var(--sp-3);

  --tap: 44px;                 /* minimální dotyková plocha */
  --h-header: 64px;

  --shadow: 0 1px 3px rgba(20,28,51,.04);
  --shadow-hover: 0 10px 30px rgba(20,28,51,.09);
  --shadow-panel: 0 18px 40px rgba(20,28,51,.12);
}

/* ==========================================================================
   2. ZÁKLAD
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--h-header) + 1rem)}
body{
  margin:0; background:var(--c-bg); color:var(--c-ink);
  font-family:var(--f-sans); font-size:var(--fs-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-weight:800; line-height:1.2; letter-spacing:var(--ls-display); color:var(--c-heading); margin:0; text-wrap:balance}
h3,h4{letter-spacing:var(--ls-title)}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--c-accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}

.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--c-surface); padding:var(--sp-3) var(--sp-4); border-radius:0 0 var(--r-box) 0; z-index:200; font-weight:700}
.skip-link:focus{left:0}

.meta{display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; font-size:var(--fs-micro); font-weight:600; color:var(--c-muted); letter-spacing:var(--ls-meta); font-variant-numeric:tabular-nums}
.meta > span{white-space:nowrap}
.meta--onImage{color:rgba(255,255,255,.92)}
.label{font-size:var(--fs-micro); font-weight:800; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--c-muted); margin:0}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap{max-width:var(--w-page); margin:0 auto; padding-left:var(--sp-4); padding-right:var(--sp-4)}
@media(min-width:768px){.wrap{padding-left:var(--sp-6); padding-right:var(--sp-6)}}

.section{padding-top:var(--sp-6)}
@media(min-width:768px){.section{padding-top:var(--sp-7)}}
.section__head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--sp-2) var(--sp-4); margin-bottom:var(--sp-5)}
.section__link{white-space:nowrap}
.section__title{font-size:1.125rem; font-weight:800; letter-spacing:var(--ls-title); margin:0}
.section__link{font-size:var(--fs-micro); font-weight:800; color:var(--c-accent)}
.section__link:hover{text-decoration:underline}

.layout{display:grid; gap:var(--sp-6)}
@media(min-width:1100px){.layout{grid-template-columns:minmax(0,1fr) 340px; gap:var(--sp-7)}}

/* ==========================================================================
   4. HLAVIČKA A NAVIGACE
   Plné menu od 1220 px, pod tím drawer.
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--c-bg);
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.is-stuck{border-bottom-color:var(--c-border); box-shadow:0 6px 20px -16px rgba(20,28,51,.5)}
.site-header__inner{display:flex; align-items:center; gap:var(--sp-4); min-height:var(--h-header)}
.brand{display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap}
.brand__mark{width:28px; height:28px; flex:none; border-radius:8px}
.brand__text{font-size:1.1875rem; font-weight:800; letter-spacing:-.03em; color:var(--c-heading); line-height:1}
.brand:hover .brand__text{color:var(--c-accent)}
.footer__brand{display:inline-flex; align-items:center; gap:.55rem}
.footer__brand .brand__text{font-size:1.35rem}

.nav{display:none}
.nav__list{display:flex; align-items:center; gap:var(--sp-1); list-style:none; margin:0; padding:0}
.nav__item{position:static; display:flex; align-items:center; border-radius:10px}
.nav__item:hover{background:var(--c-surface); box-shadow:var(--shadow)}
.nav__item.is-open{background:var(--c-surface); box-shadow:0 -1px 0 var(--c-border) inset, var(--shadow)}
.nav__link{
  font-size:.9375rem; font-weight:600; color:var(--c-ink);
  padding:.55rem .25rem .55rem .7rem; border-radius:10px 0 0 10px;
}
.nav__link:hover{color:var(--c-accent)}
.nav__link[aria-current="page"]{color:var(--c-accent)}
.nav__toggle{
  border:0; background:transparent; cursor:pointer; color:var(--c-muted);
  padding:.55rem .7rem .55rem .25rem; border-radius:0 10px 10px 0; display:grid; place-items:center;
}
.nav__toggle:hover{color:var(--c-accent)}
.nav__toggle svg{width:12px; height:12px; transition:transform .18s ease}
.nav__item.is-open .nav__link,
.nav__item.is-open .nav__toggle{color:var(--c-accent)}
.nav__item.is-open .nav__toggle svg{transform:rotate(180deg)}

/* Každý mega panel sdílí stejnou hranu: začíná přesně u navigace za logem
   a končí u pravé strany ovládacích prvků hlavičky. */
.panel{
  position:absolute; top:calc(100% + 12px); left:0;
  width:calc(100% + var(--tap) + var(--sp-4)); max-width:none;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-panel);
  box-shadow:0 28px 64px -24px rgba(20,28,51,.30), 0 2px 6px rgba(20,28,51,.05);
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  max-height:calc(100vh - var(--h-header) - 2rem); overflow-y:auto;
}
/* Otevření: krátký náběh. Výchozí stav je viditelný, bez JS i bez animace. */
@media (prefers-reduced-motion:no-preference){
  .panel:not([hidden]){animation:panel-in .16s var(--ease)}
}
@keyframes panel-in{from{opacity:0; transform:translateY(-6px)}}
.panel[hidden]{display:none}
/* Sloupce se zarovnávají nahoru a dělí je vlasová linka — oko má vedení.
   Propagační karta je poslední a jako jediná se roztahuje na plnou výšku. */
.panel__cols{display:flex; align-items:stretch; gap:0}
.panel__col{flex:0 0 auto; width:216px; padding-right:var(--sp-5)}
.panel__col + .panel__col{padding-left:var(--sp-5); border-left:1px solid var(--c-hair)}
.panel__col .label{margin-bottom:var(--sp-2)}
.panel__list{list-style:none; margin:0; padding:0; display:grid; gap:0}
.panel__all{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-4); padding-top:var(--sp-4); min-height:36px;
  border-top:1px solid var(--c-hair); width:100%;
  font-size:var(--fs-micro); font-weight:800; letter-spacing:var(--ls-meta); color:var(--c-accent);
}
.panel__all:hover{text-decoration:underline; text-underline-offset:3px}

/* Zvýrazněná karta v panelu, aby nezůstávalo prázdné místo */
/* Karta má vlastní obrazovou plochu, která pohltí volnou výšku.
   Tím zmizí prázdné pásmo mezi popiskem a odkazem. */
.panel__promo{
  flex:0 0 244px; margin-left:auto; align-self:stretch;
  background:var(--c-bg); border:1px solid var(--c-hair); border-radius:var(--r-box);
  padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2);
  overflow:hidden;
}
.panel__promo-media{
  flex:1 1 auto; min-height:84px; margin:calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-3);
  overflow:hidden; background:#E4E8F2;
}
.panel__promo-media img{width:100%; height:100%; object-fit:cover; display:block}
.panel__promo .label{margin:0}
.panel__promo-title{font-size:var(--fs-small); font-weight:800; line-height:1.32; letter-spacing:var(--ls-title); color:var(--c-heading)}
.panel__promo-text{font-size:var(--fs-micro); line-height:1.5; color:var(--c-muted); margin:0}
.panel__promo a{
  margin-top:var(--sp-2); min-height:32px; display:inline-flex; align-items:center;
  font-size:var(--fs-micro); font-weight:800; color:var(--c-accent);
}
.panel__promo a:hover{text-decoration:underline; text-underline-offset:3px}

/* Hub versus článek — tučnost, ikona i odsazení, nikdy jen barva */
.link-hub{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-small); font-weight:800; letter-spacing:var(--ls-title); color:var(--c-heading);
  padding:.35rem 0 .55rem; margin-bottom:.3rem; border-bottom:1px solid var(--c-hair);
}
.link-hub::after{
  content:""; flex:none; margin-left:auto; width:7px; height:7px;
  border-right:2px solid var(--c-accent); border-bottom:2px solid var(--c-accent);
  transform:rotate(-45deg); transition:transform .15s var(--ease);
}
.link-hub:hover{color:var(--c-accent)}
.link-hub:hover::after{transform:rotate(-45deg) translate(2px,2px)}
.link-article{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  font-size:.9375rem; font-weight:500; line-height:1.38; color:var(--c-ink);
  padding:.38rem 0;
}
.link-article::before{content:""; width:4px; height:4px; border-radius:50%; background:#C1C7D8; flex:none; margin-top:.58em; transition:background-color .15s var(--ease)}
.link-article:hover{color:var(--c-accent)}
.link-article:hover::before{background:var(--c-accent)}

.header__right{margin-left:auto; display:flex; align-items:center; gap:var(--sp-2)}
.icon-btn{
  border:0; background:transparent; width:var(--tap); height:var(--tap); border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:var(--c-ink);
}
.icon-btn:hover{background:var(--c-surface); color:var(--c-accent)}
.icon-btn[aria-expanded="true"]{background:var(--c-surface); color:var(--c-accent)}

@media(min-width:1100px){
  .nav{display:block; position:relative; flex:1; min-width:0; margin-left:var(--sp-3)}
  .burger{display:none}
}

/* Vyhledávání */
.searchbar{
  position:absolute; left:0; right:0; top:100%;
  background:var(--c-surface); border-top:1px solid var(--c-border);
  box-shadow:var(--shadow-panel); padding:var(--sp-6) 0;
}
.searchbar[hidden]{display:none}
.searchbar__form{display:flex; gap:var(--sp-3)}
.searchbar__input{
  flex:1; font-family:inherit; font-size:1.0625rem; color:var(--c-ink);
  padding:.9rem 1.1rem; border:1px solid var(--c-border); border-radius:var(--r-box); background:var(--c-bg);
}
.searchbar__input::placeholder{color:var(--c-muted)}
.searchbar__input:focus{outline:2px solid var(--c-accent); outline-offset:0; background:var(--c-surface)}
.searchbar__hints{margin-top:var(--sp-4)}
.searchbar__hints .label{margin-bottom:var(--sp-2)}
.searchbar__chips{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
/* Nápovědy jsou tlačítka, ne odkazy na "#": vyplní pole, nikam nenavigují. */
.chip{
  border:0; font-family:inherit; cursor:pointer;
  background:var(--c-bg); color:var(--c-ink); font-size:var(--fs-micro);
  font-weight:600; padding:.5rem .85rem; border-radius:var(--r-pill);
}
.chip:hover{background:var(--c-accent-wk); color:var(--c-accent-dk)}
.searchbar__note{
  margin-top:var(--sp-4); font-size:var(--fs-small); line-height:1.6;
  color:var(--c-ink); background:var(--c-accent-wk); border-radius:var(--r-box);
  padding:var(--sp-3) var(--sp-4);
}
.searchbar__note[hidden]{display:none}
@media(max-width:640px){
  .searchbar__form{flex-direction:column}
  .searchbar__form .btn{width:100%}
}

/* ==========================================================================
   5. MOBILNÍ PANEL
   ========================================================================== */
/* ZAVŘENÝ STAV = display:none přes atribut hidden.
   Posun mimo viewport (translateX) nestačí — prvky by zůstaly v pořadí
   tabulátoru a čtečka by je četla. Atribut hidden nastavuje a odebírá
   nav.js; transform řeší už jen animaci mezi oběma stavy. */
.drawer{
  /* Vlevo zůstává proužek overlaye, aby šel panel zavřít i klepnutím
     mimo něj — na úzkém mobilu by jinak žádná taková plocha nebyla. */
  position:fixed; inset:0 0 0 auto; width:100%; max-width:min(480px, calc(100% - 3rem)); z-index:100;
  background:var(--c-surface); transform:translateX(100%); transition:transform .22s ease;
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
}
.drawer[hidden]{display:none}
@media(min-width:768px){.drawer{max-width:460px}}
.drawer.is-open{transform:none}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}
.drawer__head{display:flex; align-items:center; justify-content:space-between; padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--c-border); position:sticky; top:0; background:var(--c-surface)}
.drawer__body{padding:var(--sp-4) var(--sp-4) var(--sp-8)}

.quick{background:var(--c-bg); border-radius:var(--r-box); padding:var(--sp-4); margin-bottom:var(--sp-5)}
.quick .label{margin-bottom:var(--sp-3)}
.quick ul{list-style:none; margin:0; padding:0}
.quick a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  min-height:var(--tap); font-size:var(--fs-small); font-weight:700; color:var(--c-heading);
}
.quick a::after{
  content:""; flex:none; width:8px; height:8px;
  border-right:2px solid var(--c-accent); border-bottom:2px solid var(--c-accent);
  transform:rotate(-45deg); transition:transform .15s var(--ease);
}
.quick a:hover{color:var(--c-accent)}

.drawer details{border-bottom:1px solid var(--c-border)}
.drawer summary{
  cursor:pointer; list-style:none; min-height:var(--tap);
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  font-size:1.0625rem; font-weight:700; color:var(--c-heading); padding:var(--sp-3) 0;
}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary::after{
  content:""; flex:none; width:24px; height:24px; border-radius:50%;
  background:var(--c-accent-wk);
  background-image:linear-gradient(var(--c-accent-dk),var(--c-accent-dk)),linear-gradient(var(--c-accent-dk),var(--c-accent-dk));
  background-size:11px 2px, 2px 11px; background-position:center, center; background-repeat:no-repeat;
  transition:background-size .18s var(--ease), background-color .18s var(--ease);
}
.drawer details[open] summary::after{background-size:11px 2px, 2px 0; background-color:var(--c-accent); background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff)}
.drawer__sub{list-style:none; margin:0; padding:0 0 var(--sp-4); display:grid; gap:var(--sp-1)}
.drawer__sub .label{margin:var(--sp-3) 0 var(--sp-1)}
.drawer__sub a{display:flex; align-items:center; min-height:var(--tap)}
.drawer__link{
  display:flex; align-items:center; min-height:var(--tap);
  font-size:1.0625rem; font-weight:700; color:var(--c-heading); border-bottom:1px solid var(--c-border);
}
.drawer__link:hover{color:var(--c-accent)}

.overlay{position:fixed; inset:0; background:rgba(16,24,48,.45); opacity:0; transition:opacity .22s ease; z-index:90}
.overlay[hidden]{display:none}
.overlay.is-open{opacity:1}
/* Uzamčení scrollu drží původní pozici: body se zafixuje s posunem
   top:-Ypx a po zavření se scroll obnoví (řeší nav.js).
   Samotné overflow:hidden pozici ztrácelo. */
body.is-locked{position:fixed; left:0; right:0; width:100%; overflow:hidden}

/* ==========================================================================
   6. SYSTÉM SEZNAMŮ V TEXTU
   ========================================================================== */
.prose ul:not([class]),
.prose ol:not([class]),
.checklist,
.timeline,
.toc ol{list-style:none; margin:0; padding:0; display:grid; gap:var(--li-gap)}

.prose ul:not([class]) > li,
.prose ol:not([class]) > li,
.checklist > li,
.toc ol > li{position:relative; padding-left:var(--li-indent)}

.prose ul:not([class]) > li::before{
  content:""; position:absolute; left:.3rem; top:calc(var(--lh-read) * .5em - 3px);
  width:7px; height:7px; border-radius:2px; background:var(--c-accent); opacity:.85;
}
.prose ol:not([class]),
.toc ol{counter-reset:li}
.toc ol > li{counter-increment:li}
.prose ol:not([class]) > li,
.toc ol > li{counter-increment:li}
.prose ol:not([class]) > li::before,
.toc ol > li::before{
  content:counter(li) "."; position:absolute; left:0; top:0;
  width:var(--li-gutter); text-align:right;
  font-weight:800; color:var(--c-accent); font-variant-numeric:tabular-nums;
}
/* Odškrtnutí je nakreslené, ne psané znakem — drží stejnou sílu tahu jako ikony. */
.checklist{--li-indent:2.35rem}
.checklist > li::before{
  content:""; position:absolute; left:0; top:calc(var(--lh-read) * .5em - 11px);
  width:22px; height:22px; border-radius:50%;
  background:var(--c-ex-bg); box-shadow:inset 0 0 0 1px rgba(22,116,90,.18);
}
.checklist > li::after{
  content:""; position:absolute; left:7px; top:calc(var(--lh-read) * .5em - 4px);
  width:8px; height:4px;
  border-left:2px solid var(--c-ex); border-bottom:2px solid var(--c-ex);
  border-radius:1px; transform:rotate(-45deg);
}
.box--example ul:not([class]) > li::before{background:var(--c-ex)}
.box--warn ul:not([class]) > li::before{background:var(--c-warn)}

/* ==========================================================================
   7. TLAČÍTKA A OBRÁZKOVÉ PLOCHY
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-size:.9375rem; font-weight:700; min-height:var(--tap);
  padding:.7rem 1.5rem; border-radius:var(--r-pill); border:0; cursor:pointer;
}
.btn--dark{background:var(--c-dark); color:#fff}
.btn--dark:hover{background:#111830}
.btn--light{background:var(--c-surface); color:var(--c-ink); box-shadow:var(--shadow)}
.btn--light:hover{color:var(--c-accent)}
.btn--full{width:100%}

/* Obrazová plocha. Poměr drží obal, proto nevzniká CLS.
   Zdroj je zaměnitelný za fotografii beze změny CSS. */
.thumb{position:relative; background:#DDE1EC; overflow:hidden}
.thumb > :is(img,picture){display:block; width:100%; height:100%}
/* object-fit musí dostat KAŽDÝ obrázek v ploše, i ten bez obalu <picture>.
   Bez něj se u SVG roztáhne jen jeho viewport a grafika uvnitř se olemuje. */
.thumb :is(img,picture > img){width:100%; height:100%; object-fit:cover; display:block}
.thumb--fill > :is(img,picture){position:absolute; inset:0}

.pill{display:inline-block; background:var(--c-accent-wk); color:var(--c-accent-dk); font-size:.75rem; font-weight:800; letter-spacing:.03em; padding:.32rem .7rem; border-radius:var(--r-pill); line-height:1.35}
/* Štítek rubriky sedí u VŠECH karet na jedné linii vlevo nahoře.
   Levá hrana lícuje s levou hranou titulku, proto se odsazení řídí
   proměnnou --pill-inset, která kopíruje odsazení těla karty. */
.pill--onImage{
  position:absolute; z-index:3;
  top:var(--pill-inset, var(--sp-5)); left:var(--pill-inset, var(--sp-5));
  background:rgba(255,255,255,.94); color:var(--c-accent-dk);
  box-shadow:0 1px 3px rgba(20,28,51,.12);
}

/* ==========================================================================
   8. KARTY
   XL hero · L standardní (desktop) · M vodorovná (mobil) · S kompaktní
   ========================================================================== */
.card{
  position:relative;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-card); overflow:hidden;
  display:flex; box-shadow:var(--shadow);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
/* Celá karta je klikací, text zůstává označitelný */
.card__title a::after{content:""; position:absolute; inset:0; z-index:1}
.card__title a:focus-visible{outline:none}
.card:has(.card__title a:focus-visible){outline:3px solid var(--c-accent); outline-offset:2px}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover); border-color:#D3D9E8}
.card__media{position:relative; flex:none; align-self:stretch}
.card__thumb{display:block; width:112px; height:100%; min-height:96px}

.card__body{padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); flex:1; min-width:0}
/* Štítek rubriky má dvě podoby podle kontextu.
   Do 639 px stojí v toku nad titulkem jako nenápadný popisek — pilulka je
   tlačítkový tvar a na nedotykovém prvku mate. Od 640 px leží na obrázku,
   kde potřebuje plochu, aby byla čitelná. */
.card__pill{
  align-self:flex-start; max-width:100%;
  background:none; border:0; border-radius:0; padding:0;
  font-size:.75rem; font-weight:700; letter-spacing:.035em;
  color:var(--c-accent-dk); line-height:1.3;
}
@media(min-width:640px){
  .card__pill{
    position:absolute; top:var(--sp-4); left:var(--sp-5); z-index:2;
    background:rgba(255,255,255,.94); color:var(--c-accent-dk);
    /* základní pravidlo je pro mobil nuluje — tady se musí vrátit obě */
    padding:.32rem .7rem; border-radius:var(--r-pill);
    box-shadow:0 1px 3px rgba(20,28,51,.12);
  }
}
.card__title{
  font-size:1rem; line-height:1.32; letter-spacing:var(--ls-title);
  overflow-wrap:break-word;
}
.card__title a:hover{color:var(--c-accent)}
.card__meta{margin-top:auto}

/* Od 640 px karta se obrázkem nahoře */
@media(min-width:640px){
  .card{flex-direction:column}
  .card__thumb{aspect-ratio:16/10; width:auto; height:auto; min-height:0}
  .card__thumb::after{display:block}
  .card__body{padding:var(--sp-5); gap:var(--sp-4)}
  .card__title{font-size:var(--fs-h3)}
}



.post-grid{display:grid; gap:var(--sp-3); grid-template-columns:1fr}
@media(min-width:640px){.post-grid{gap:var(--sp-4); grid-template-columns:1fr 1fr}}
.post-grid--three{grid-template-columns:1fr}
@media(min-width:640px){.post-grid--three{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.post-grid--three{grid-template-columns:repeat(3,1fr)}}

.loadmore{display:flex; justify-content:center; padding-top:var(--sp-6)}

/* Hero */
.hero__grid{display:grid; gap:var(--sp-3)}
@media(min-width:900px){
  .hero__grid{grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr; gap:var(--sp-4)}
  .hero__main{grid-row:1 / 3}
}
.feature{position:relative; border-radius:var(--r-card); overflow:hidden; display:flex; align-items:flex-end; min-height:260px}
.feature::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(10,15,30,.92) 0%, rgba(10,15,30,.5) 52%, rgba(10,15,30,.1) 100%)}
.feature__body{position:relative; z-index:2; padding:var(--sp-5)}
.feature__title{color:#fff; margin:var(--sp-3) 0}
.feature__perex{font-size:var(--fs-small); line-height:1.6; color:rgba(255,255,255,.9); max-width:54ch; margin:0 0 var(--sp-4)}
.feature--main{min-height:380px}
.feature--main .feature__title{font-size:var(--fs-hero)}
.feature--side .feature__title{font-size:var(--fs-h3); margin-bottom:var(--sp-3)}
@media(min-width:900px){
  .feature--main{min-height:100%}
  .feature--main{--pill-inset:var(--sp-6)}
  .feature--main .feature__body{padding:var(--sp-6)}
  .feature--side{min-height:200px}
}

/* Karty témat */
/* Karty témat — na mobilu vodorovné, od 640 px klasické */
.cats{display:grid; gap:var(--sp-3); grid-template-columns:1fr}
@media(min-width:640px){.cats{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.cats{grid-template-columns:repeat(4,1fr); gap:var(--sp-4)}}
.cat-card{background:var(--c-surface); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease; display:flex}
.cat-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)}
.cat-card__img{display:block; width:104px; flex:none; align-self:stretch; min-height:88px}
.cat-card__body{display:block; padding:var(--sp-4); flex:1; min-width:0}
@media(min-width:640px){
  .cat-card{display:block}
  .cat-card__img{width:auto; aspect-ratio:16/9; min-height:0}
  .cat-card__body{padding:var(--sp-5)}
}
.cat-card__name{font-size:1rem; font-weight:800; color:var(--c-heading); display:block; margin-bottom:var(--sp-2)}
.cat-card__desc{display:block; font-size:var(--fs-small); line-height:1.5; color:var(--c-muted); margin:0}

/* Pruh situací */
.situations{background:var(--c-surface); border-radius:var(--r-card); padding:var(--sp-5); box-shadow:var(--shadow)}
.situations__title{font-size:1.0625rem; font-weight:700; margin:0 0 var(--sp-2)}
.situations__list{list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:var(--sp-2)}
@media(min-width:768px){.situations__list{grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-3)}}
.situations__list > li{min-width:0}
.situations__list a{
  display:flex; align-items:center; gap:var(--sp-3);
  min-height:var(--tap); padding:.6rem var(--sp-4); border-radius:var(--r-box);
  background:var(--c-bg); border:1px solid transparent;
  font-size:var(--fs-small); font-weight:700; color:var(--c-heading);
  transition:background-color .15s var(--ease), border-color .15s var(--ease);
}
.situations__list a > span{margin-right:auto}
.situations__list a::after{
  content:""; flex:none; width:8px; height:8px;
  border-right:2px solid var(--c-accent); border-bottom:2px solid var(--c-accent);
  transform:rotate(-45deg); transition:transform .15s var(--ease);
}
.situations__list a:hover::after{transform:rotate(-45deg) translate(2px,2px)}
.situations__list a:hover{background:var(--c-accent-wk); border-color:#D6D6FA; color:var(--c-accent-dk)}

/* ==========================================================================
   9. SIDEBAR
   ========================================================================== */
.sidebar{display:flex; flex-direction:column; gap:var(--sp-5)}
.widget{background:var(--c-surface); border-radius:var(--r-card); padding:var(--sp-5); box-shadow:var(--shadow)}
.widget__label{font-size:1.0625rem; font-weight:700; margin:0 0 var(--sp-4)}
.widget__intro{font-size:var(--fs-small); line-height:1.6; color:var(--c-ink); margin:0 0 var(--sp-4)}

.author-card{display:flex; flex-direction:column; gap:var(--sp-4)}
.author-card__avatar{width:64px; height:64px; border-radius:14px; background:linear-gradient(140deg,#2F3E7E,#141C33)}
.author-card__claim{font-size:1.125rem; font-weight:800; line-height:1.35; color:var(--c-heading); margin:0}
.author-card__text{font-size:var(--fs-small); line-height:1.6; color:var(--c-ink); margin:0}

.factlist{list-style:none; margin:var(--sp-5) 0 0; padding:0; border-top:1px solid var(--c-border)}
.factlist li{display:flex; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px solid var(--c-border); font-size:var(--fs-small)}
.factlist strong{font-weight:700; color:var(--c-heading)}
.factlist span{color:var(--c-muted); text-align:right}
.factlist a{color:var(--c-accent); font-weight:700}
.factlist--flush{margin-top:0; border-top:0}

.featured{position:relative; border-radius:var(--r-card); overflow:hidden; min-height:320px; display:flex; align-items:flex-end}
.featured::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(10,15,30,.92) 0%, rgba(10,15,30,.35) 60%, rgba(10,15,30,.05) 100%)}
.featured__body{position:relative; z-index:2; padding:var(--sp-5); color:#fff}
.featured__title{color:#fff; font-size:var(--fs-h3); margin:var(--sp-3) 0}

.ranked{list-style:none; margin:0; padding:0}
.ranked li{display:flex; gap:var(--sp-4); padding:var(--sp-4) 0; border-bottom:1px solid var(--c-border)}
.ranked li:first-child{padding-top:0}
.ranked li:last-child{border-bottom:0; padding-bottom:0}
.ranked__num{font-size:var(--fs-small); font-weight:800; color:var(--c-accent); width:1.4rem; flex:none; font-variant-numeric:tabular-nums}
.ranked__title{font-size:var(--fs-small); font-weight:700; line-height:1.45; display:block; color:var(--c-ink)}
.ranked__title:hover{color:var(--c-accent)}
.ranked__meta{font-size:var(--fs-micro); font-weight:600; color:var(--c-muted); margin-top:2px}

/* ==========================================================================
   10. ČLÁNEK
   Na mobilu přes celou šířku bez vnořené karty. Titulek nad obrázkem.
   ========================================================================== */
/* Drobečky jsou seznam — čtečka ohlásí počet úrovní. Oddělovač kreslí CSS,
   takže se do textu nedostane znak, který by čtečka přečetla. */
.crumbs{padding-top:var(--sp-3); font-size:var(--fs-micro); font-weight:600; color:var(--c-muted)}
.crumbs ol{display:flex; flex-wrap:wrap; gap:var(--sp-2); list-style:none; margin:0; padding:0}
.crumbs li{display:flex; align-items:center; gap:var(--sp-2)}
.crumbs li + li::before{content:"›"; opacity:.5}
.crumbs a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--c-border-st)}
.crumbs a:hover{color:var(--c-accent); text-decoration-color:currentColor}
.crumbs [aria-current="page"]{color:var(--c-ink)}

.article{background:var(--c-surface); overflow:hidden}
/* Na mobilu je článek list papíru přes celou šířku okna s vlastním
   vnitřním odsazením. Text ani vlasové linky nikdy nesedí na hraně bílé. */
.article{margin-inline:calc(var(--sp-4) * -1)}
.article__inner{padding:var(--sp-5) var(--sp-4)}
/* Zlom musí sedět na .wrap — ta mění odsazení na 768 px, ne na 640. */
@media(min-width:768px){
  .article{margin-inline:calc(var(--sp-6) * -1)}
  .article__inner{padding:var(--sp-6)}
}
.article__title{font-size:var(--fs-h1); margin:var(--sp-3) 0}
/* Perex musí být zřetelně nad úrovní běžného textu (1,0625rem). */
.article__perex{font-size:1.25rem; line-height:1.62; font-weight:500; color:var(--c-ink); margin:0 0 var(--sp-6); max-width:var(--w-text)}
@media(max-width:639px){.article__perex{font-size:1.125rem}}
/* Ilustrace je dekorativní, proto smí být nižší. 16/9 -> 16/7.2 je pokles
   výšky o 20 %; poměr drží obal, takže nevzniká layout shift. */
.article__hero{aspect-ratio:16/7.2; border-radius:var(--r-box); margin:var(--sp-5) 0 var(--sp-6)}
@media(max-width:639px){.article__hero{aspect-ratio:16/9}}

.byline{display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-6); align-items:center; justify-content:space-between; padding:var(--sp-4) 0; border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border)}
.byline__person{display:flex; align-items:center; gap:var(--sp-3)}
.byline__avatar{width:44px; height:44px; border-radius:50%; flex:none; overflow:hidden; background:linear-gradient(140deg,#2F3E7E,#141C33)}
.byline__avatar img{width:100%; height:100%; object-fit:cover; display:block}
.byline__name{font-weight:800; font-size:1rem; color:var(--c-heading); display:block}
.byline__role{font-size:var(--fs-micro); font-weight:600; color:var(--c-muted); display:block}

@media(min-width:900px){
  .article{margin-inline:0; border:1px solid var(--c-border); box-shadow:var(--shadow)}
  .article__inner{padding:var(--sp-7)}
  .article__hero{margin-top:var(--sp-6)}
}

.toc{
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-box);
  padding:var(--sp-4) var(--sp-5) var(--sp-2); margin:var(--sp-6) 0; max-width:var(--w-text);
}
.toc__title{
  display:flex; align-items:center; gap:.5rem; margin:0 0 var(--sp-2);
  font-size:var(--fs-micro); font-weight:800; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--c-muted);
}
.toc__title svg{width:17px; height:17px; flex:none}
.toc ol{display:block; font-size:var(--fs-small)}
.toc ol > li{padding-left:0; border-bottom:1px solid var(--c-hair)}
.toc ol > li:last-child{border-bottom:0}
.toc ol > li::before{content:none}
.toc a{
  display:flex; align-items:center; gap:var(--sp-3); min-height:var(--tap); padding:.45rem 0;
  font-weight:600; line-height:1.35; color:var(--c-ink);
}
.toc a::before{
  content:counter(li,decimal-leading-zero); counter-increment:none;
  flex:none; width:26px; height:26px; border-radius:7px;
  background:var(--c-accent-wk); color:var(--c-accent-dk);
  font-size:.75rem; font-weight:800; font-variant-numeric:tabular-nums;
  display:grid; place-items:center;
}
.toc a::after{
  content:""; flex:none; margin-left:auto;
  width:7px; height:7px; border-right:2px solid var(--c-border-st); border-bottom:2px solid var(--c-border-st);
  transform:rotate(-45deg); transition:transform .15s var(--ease), border-color .15s var(--ease);
}
.toc a:hover{color:var(--c-accent)}
.toc a:hover::before{background:var(--c-accent); color:#fff}
.toc a:hover::after{border-color:var(--c-accent); transform:rotate(-45deg) translate(2px,2px)}

.prose{max-width:var(--w-text); font-size:var(--fs-read); line-height:var(--lh-read); color:var(--c-ink)}
.prose > * + *{margin-top:var(--sp-5)}
.prose h2{font-size:var(--fs-h2); margin-top:var(--sp-7)}
.prose h3{font-size:var(--fs-h3); margin-top:var(--sp-6)}
.prose a:not(.btn){color:var(--c-accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.prose a:not(.btn):hover{color:var(--c-accent-dk)}
.prose strong{font-weight:700; color:var(--c-heading)}

.box{border-radius:var(--r-box); padding:var(--sp-5); margin-top:var(--sp-6); color:var(--c-ink)}
.box__title{
  display:flex; align-items:center; gap:.5rem; margin:0 0 var(--sp-4);
  font-size:var(--fs-micro); font-weight:800; letter-spacing:var(--ls-label); text-transform:uppercase;
}
.box__title svg{width:17px; height:17px; flex:none}
.box > * + *{margin-top:var(--sp-4)}
.box--summary{background:var(--c-accent-wk)}
.box--summary .box__title{color:var(--c-accent-dk)}
.box--example{background:var(--c-ex-bg)}
.box--example .box__title{color:var(--c-ex)}
.box--warn{background:var(--c-warn-bg)}
.box--warn .box__title{color:var(--c-warn)}
/* .box má PRÁVĚ TŘI varianty: summary / warn / example.
   Doplňkové sdělení (právní upozornění) používá subtilnější .note,
   aby nevznikala čtvrtá plnohodnotná barevná plocha. */
.box__note{font-size:var(--fs-small); line-height:1.6; color:var(--c-muted)}

.note{margin-top:var(--sp-6); padding:var(--sp-4) var(--sp-5); border-left:3px solid var(--c-legal); background:var(--c-legal-bg); border-radius:0 var(--r-box) var(--r-box) 0; font-size:var(--fs-small); line-height:1.65}
.note__title{font-size:var(--fs-micro); font-weight:800; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--c-legal); margin:0 0 var(--sp-2)}
.note p{margin:0}

/* Box s rychlou pomocí — na mobilu uvnitř textu, na desktopu jen v sidebaru */
.inline-help{margin-top:var(--sp-6); background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-box); padding:var(--sp-5)}
.inline-help .widget__label{font-size:1rem}
@media(min-width:1100px){.inline-help{display:none}}

.timeline{margin-top:var(--sp-6)}
.timeline > li{position:relative; display:grid; grid-template-columns:2rem 1fr; gap:var(--sp-4); align-items:start; padding-bottom:var(--sp-5)}
.timeline > li:last-child{padding-bottom:0}
.timeline > li::after{content:""; position:absolute; left:1rem; top:2rem; bottom:.35rem; width:2px; background:var(--c-border); transform:translateX(-1px)}
.timeline > li:last-child::after{display:none}
.timeline__step{
  position:relative; z-index:1; width:2rem; height:2rem; border-radius:50%;
  background:var(--c-accent); color:#fff; font-size:var(--fs-micro); font-weight:800;
  display:grid; place-items:center; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 4px var(--c-surface);
}
.timeline__label{font-weight:800; color:var(--c-heading); display:block; padding-top:.2rem}
.timeline__text{margin:var(--sp-2) 0 0}

.table-wrap{margin-top:var(--sp-6); max-width:var(--w-text)}
table{border-collapse:collapse; width:100%; font-size:var(--fs-small); color:var(--c-ink)}
caption{text-align:left; font-size:var(--fs-micro); font-weight:800; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--c-muted); padding-bottom:var(--sp-3)}
th,td{text-align:left; line-height:1.5}

/* Do 699 px se řádky překlápějí do karet. Záhlaví zůstává v DOM
   jen vizuálně skryté, takže sémantika a čtečky nic neztratí. */
@media(max-width:699px){
  thead{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  tbody tr{display:block; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-box); padding:var(--sp-4); margin-bottom:var(--sp-3)}
  tbody th{display:block; font-size:1.0625rem; font-weight:800; letter-spacing:var(--ls-title); color:var(--c-heading); padding-bottom:var(--sp-3); margin-bottom:var(--sp-2); border-bottom:1px solid var(--c-border)}
  tbody td{
    display:grid; grid-template-columns:minmax(6.5rem,38%) 1fr; gap:var(--sp-3);
    padding:.5rem 0; border-bottom:1px solid var(--c-hair);
  }
  tbody tr td:last-child{border-bottom:0}
  tbody td::before{
    content:attr(data-label); font-size:var(--fs-micro); font-weight:600; color:var(--c-muted);
    letter-spacing:.01em;
  }
  tbody td{font-weight:700; color:var(--c-heading)}
}
@media(min-width:700px){
  /* Wrapper je fokusovatelná oblast (role=region + tabindex=0), aby se
     dal široký obsah posouvat i klávesnicí. */
  .table-wrap{border:1px solid var(--c-border); border-radius:var(--r-box); overflow-x:auto; background:var(--c-surface)}
  .table-wrap table{min-width:38rem}
  caption{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
  th,td{padding:var(--sp-4); border-bottom:1px solid var(--c-border)}
  thead th{background:var(--c-bg); font-weight:800; color:var(--c-heading); font-size:var(--fs-micro); letter-spacing:.04em; text-transform:uppercase}
  tbody th{font-weight:700; color:var(--c-heading)}
  tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
  tbody tr:hover{background:var(--c-bg)}
}

.checklist{margin-top:var(--sp-6)}

.quote{margin:var(--sp-6) 0 0; padding:var(--sp-5); background:var(--c-bg); border-radius:var(--r-box); display:flex; gap:var(--sp-4); align-items:flex-start}
.quote__avatar{width:48px; height:48px; border-radius:50%; flex:none; background:linear-gradient(140deg,#2F3E7E,#141C33)}
.quote blockquote{margin:0; font-size:1.0625rem; font-weight:700; line-height:1.55; color:var(--c-heading)}
.quote figcaption{margin-top:var(--sp-3); font-size:var(--fs-micro); font-weight:600; color:var(--c-muted)}

.faq{margin-top:var(--sp-6); border-top:1px solid var(--c-border)}
.faq details{border-bottom:1px solid var(--c-border)}
.faq summary{cursor:pointer; padding:var(--sp-4) 0; font-weight:700; color:var(--c-heading); list-style:none; display:flex; justify-content:space-between; gap:var(--sp-4); align-items:center; min-height:var(--tap)}
.faq summary::-webkit-details-marker{display:none}
/* Křížek je nakreslený dvěma tahy a v otevřeném stavu se otočí na minus. */
.faq summary::after{
  content:""; flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--c-accent-wk);
  background-image:linear-gradient(var(--c-accent-dk),var(--c-accent-dk)),linear-gradient(var(--c-accent-dk),var(--c-accent-dk));
  background-size:10px 2px, 2px 10px; background-position:center, center; background-repeat:no-repeat;
  transition:background-size .18s var(--ease), background-color .18s var(--ease);
}
.faq details[open] summary::after{background-size:10px 2px, 2px 0; background-color:var(--c-accent); background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff)}
.faq summary:hover::after{background-color:var(--c-accent-wk)}
.faq__body{padding-bottom:var(--sp-4)}
.faq__body p{margin:0; color:var(--c-ink)}

.sources{margin-top:var(--sp-6); background:var(--c-bg); border:1px solid var(--c-hair); border-radius:var(--r-box); padding:var(--sp-5)}
.sources .box__title{color:var(--c-muted)}
.sources ol{font-size:var(--fs-small); --li-indent:2.35rem}
.sources ol > li::before{
  left:0; top:calc(1.6em * .5 - 11px); width:22px; height:22px; text-align:center;
  border-radius:50%; background:var(--c-surface); box-shadow:inset 0 0 0 1px var(--c-border);
  color:var(--c-muted); font-size:.75rem; display:grid; place-items:center;
}

.signoff{margin-top:var(--sp-6)}
.signoff__item{background:var(--c-bg); border-radius:var(--r-box); padding:var(--sp-5); display:flex; gap:var(--sp-4)}
.signoff__avatar{width:52px; height:52px; border-radius:50%; flex:none; overflow:hidden; background:linear-gradient(140deg,#2F3E7E,#141C33)}
.signoff__avatar img{width:100%; height:100%; object-fit:cover; display:block}
.signoff__role{font-size:var(--fs-micro); font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted)}
.signoff__name{font-weight:800; color:var(--c-heading); font-size:1.0625rem}
.signoff__text{font-size:var(--fs-small); line-height:1.6; color:var(--c-ink); margin:var(--sp-2) 0 0; max-width:60ch}
.signoff__text a{color:var(--c-accent); font-weight:700}

.cta{margin-top:var(--sp-6); background:var(--c-dark); color:#fff; border-radius:var(--r-card); padding:var(--sp-5)}
@media(min-width:768px){.cta{padding:var(--sp-6)}}
.cta h3{color:#fff; font-size:var(--fs-h3); margin-bottom:var(--sp-3)}
.cta p{margin:0 0 var(--sp-5); font-size:var(--fs-small); line-height:1.6; color:rgba(255,255,255,.85); max-width:52ch}
.cta__note{display:block; margin-top:var(--sp-4); font-size:var(--fs-micro); color:rgba(255,255,255,.6)}

/* ==========================================================================
   11. PATIČKA
   ========================================================================== */
.site-footer{background:var(--c-surface); margin-top:var(--sp-8)}
.footer__grid{display:grid; gap:var(--sp-6); padding:var(--sp-7) 0}
@media(min-width:768px){.footer__grid{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.footer__brand{font-size:1.35rem; font-weight:800; letter-spacing:-.03em; color:var(--c-heading)}
.footer__claim{font-size:var(--fs-small); line-height:1.6; color:var(--c-ink); max-width:36ch; margin:var(--sp-3) 0 0}
/* Sémantický základ patičky je NADPIS + SEZNAM, nikoli <details>.
   Bez JavaScriptu jsou proto všechny odkazy viditelné na desktopu i na
   mobilu. Akordeon na mobilu vytváří nav.js a přidá skupině .is-accordion.
   Původní chyba (details bez atributu open + pointer-events:none na
   desktopu) tímto nemůže nastat. */
.footer__group{border-top:1px solid var(--c-border)}
.footer__title{
  font-size:.9375rem; font-weight:800; letter-spacing:var(--ls-title);
  color:var(--c-heading); margin:0; padding:var(--sp-4) 0 var(--sp-3);
}
.footer__toggle{
  width:100%; min-height:52px; padding:0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  font:inherit; color:inherit; text-align:left;
}
.footer__group.is-accordion .footer__title{padding:0}
.footer__chev{
  width:9px; height:9px; flex:none;
  border-right:2px solid var(--c-muted); border-bottom:2px solid var(--c-muted);
  transform:rotate(45deg) translateY(-2px); transition:transform .18s var(--ease);
}
.footer__toggle[aria-expanded="true"] .footer__chev{transform:rotate(-135deg) translateY(-2px)}
.footer__list{list-style:none; margin:0; padding:0 0 var(--sp-3); font-size:var(--fs-small); color:var(--c-ink)}
.footer__list[hidden]{display:none}
.footer__list a,
.footer__list .is-planned{display:flex; align-items:center; gap:var(--sp-2); min-height:var(--tap)}
.footer__list a:hover{color:var(--c-accent); text-decoration:underline}
@media(min-width:768px){
  .footer__group{border-top:0}
  .footer__title{padding:0 0 var(--sp-3)}
  .footer__list{padding-bottom:0}
  .footer__list a,
  .footer__list .is-planned{min-height:30px}
}
.disclosure{background:var(--c-bg); border-radius:var(--r-box); padding:var(--sp-4); font-size:var(--fs-micro); line-height:1.6; color:var(--c-muted); margin-top:var(--sp-5)}
.footer__bottom{border-top:1px solid var(--c-border); padding:var(--sp-5) 0; display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between; font-size:var(--fs-micro); color:var(--c-muted)}

/* ==========================================================================
   12. MOBILNÍ DOLADĚNÍ
   ========================================================================== */
@media(max-width:640px){
  .byline{flex-direction:column; align-items:flex-start; gap:var(--sp-4)}
  .quote{flex-direction:column; gap:var(--sp-3)}
  .cta .btn{width:100%}
  .timeline > li{grid-template-columns:1.75rem 1fr; gap:var(--sp-3)}
  .timeline__step{width:1.75rem; height:1.75rem}
  .signoff__item{flex-direction:column; gap:var(--sp-3)}
  .article__hero{border-radius:var(--r-box)}
}

/* Drobné varianty, aby nevznikaly inline styly */
.btn--spaced{margin-top:var(--sp-5)}

/* ==========================================================================
   13. MOBILNÍ ÚPRAVY HOMEPAGE
   Cílem je zkrátit stránku a dostat důležitý obsah výš.
   Ve WordPressu se počty článků budou řídit dotazem, ne skrýváním.
   ========================================================================== */
@media(max-width:639px){
  /* Vedlejší články v hero jako vodorovné karty */
  .feature{flex-direction:column; align-items:stretch; justify-content:flex-end}
  .feature > .pill--onImage{
    position:relative; inset:auto; align-self:flex-start;
    max-width:calc(100% - (var(--sp-5) * 2));
    margin:0 var(--sp-5); overflow-wrap:anywhere;
  }
  .feature--side{min-height:0; border-radius:var(--r-card)}
  .feature--side{--pill-inset:var(--sp-4)}
  .feature--side > .pill--onImage{max-width:calc(100% - (var(--sp-4) * 2)); margin-inline:var(--sp-4)}
  .feature--side .feature__body{padding:var(--sp-4)}
  .feature--side .feature__title{font-size:1rem; margin:var(--sp-2) 0}
  .feature--main{min-height:340px}

  /* Žádná karta se neskrývá. Výpis je na mobilu kompaktní vodorovná karta. */
  .card__thumb{width:104px; min-height:88px}
  .card__body{padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-4)}
  .card__title{font-size:.9375rem}

  /* Doporučený článek vložený doprostřed výpisu */
  .inline-featured{margin-top:var(--sp-3)}
  .sidebar__featured{display:none}
}
@media(min-width:640px){
  .inline-featured{display:none}
}

/* Hledání v mobilním panelu */
.drawer__search{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-4)}
.drawer__search .searchbar__input{flex:1; font-size:1rem; padding:.7rem .9rem}


/* ==========================================================================
   14. ČTENÍ DLOUHÉHO ČLÁNKU
   Ukazatel postupu i zvýraznění kapitoly jsou progresivní vylepšení:
   bez JavaScriptu stránka funguje beze změny.
   ========================================================================== */
.reading{position:fixed; top:0; left:0; right:0; height:3px; z-index:60; pointer-events:none}
.reading > span{display:block; height:100%; width:0; background:var(--c-accent); transition:width .1s linear}
@media (prefers-reduced-motion:reduce){.reading > span{transition:none}}

.toc a[aria-current="true"]{color:var(--c-accent-dk)}
.toc a[aria-current="true"]::before{background:var(--c-accent); color:#fff}

/* ==========================================================================
   15. NADPIS STRÁNKY
   H1 měl v původní verzi 18 px, tedy méně než titulek karty (20 px).
   Posílení je mírné: H1 je zřetelně nadřazený sekcím, ale zůstává pod
   hlavním hero titulkem (--fs-hero), takže hierarchie sedí.
   ========================================================================== */
.page-head{margin-bottom:var(--sp-5); max-width:62ch}
.page-title{font-size:clamp(1.375rem, 1.15rem + .8vw, 1.75rem); font-weight:800; letter-spacing:var(--ls-display); margin:0}
.page-lede{margin:var(--sp-3) 0 0; font-size:var(--fs-read); line-height:1.6; color:var(--c-muted)}

/* ==========================================================================
   16. NAPLÁNOVANÝ OBSAH A PLACEHOLDERY
   Karta naplánovaného článku vypadá STEJNĚ jako hotová. Rozdíl nese jedno
   tiché slovo v řádku s metadaty — tam, kam sekundární informace patří.
   Předchozí verze lepila štítek za titulek: rozbíjelo to zalomení nadpisů
   a z celé stránky dělalo rozestavěné staveniště.
   ========================================================================== */
.meta__soon{
  font-size:.6875rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--c-accent-dk); white-space:nowrap;
}
.meta--onImage .meta__soon{color:rgba(255,255,255,.82)}
.ranked__meta .meta__soon{font-size:.625rem}

/* Přísná varianta (PLANNED_LINK = None): položka není odkaz. */
.is-planned{color:var(--c-muted); cursor:default}
.link-hub.is-planned::after{display:none}

/* Placeholder v textu. Že jde o nevyplněný údaj, nese tečkované podtržení,
   ne dlouhá hranatá závorka, která rozbíjela sazbu. */
.ph{
  color:var(--c-muted); font-style:normal;
  text-decoration:underline dotted var(--c-border-st); text-underline-offset:3px;
}
.factlist .ph{overflow-wrap:anywhere}

/* Stránka „Připravujeme" — cíl odkazů na dosud nevydaný obsah. */
.soon-page{max-width:var(--w-text)}
.soon-page .label{margin-bottom:var(--sp-3)}
.soon-page__hint{margin:var(--sp-6) 0 var(--sp-4); font-size:var(--fs-read); color:var(--c-ink)}
.soon-page__label{margin:var(--sp-6) 0 var(--sp-3)}
.soon-page__list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.soon-page__list a{
  display:inline-flex; align-items:center; min-height:var(--tap);
  padding:.5rem var(--sp-4); border-radius:var(--r-pill);
  background:var(--c-surface); box-shadow:var(--shadow);
  font-size:var(--fs-small); font-weight:700; color:var(--c-heading);
}
.soon-page__list a:hover{color:var(--c-accent)}
.soon-page .post-grid{max-width:none}

/* ==========================================================================
   17. RYTMUS HOMEPAGE — obsahová série
   Jedna sekce se odliší popisným proužkem, ne novým vizuálním systémem.
   ========================================================================== */
.section__tag{
  font-size:var(--fs-micro); font-weight:800; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--c-accent-dk);
  background:var(--c-accent-wk); border-radius:var(--r-pill); padding:.28rem .7rem;
}
.series-note{
  margin:calc(var(--sp-5) * -1) 0 var(--sp-5);
  font-size:var(--fs-small); line-height:1.6; color:var(--c-muted); max-width:60ch;
}
/* Krátký kontext u souvisejících článků, aby karty vizuálně nesplývaly. */
.card__why{margin:0; font-size:var(--fs-small); line-height:1.5; color:var(--c-muted)}

/* WordPress-generated content and navigation integration. */
.nav__list .sub-menu{position:absolute; top:100%; left:0; min-width:240px; margin:0; padding:var(--sp-3); list-style:none; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-box); box-shadow:var(--shadow); display:none}
.nav__item:hover > .sub-menu,.nav__item:focus-within > .sub-menu{display:block}
.nav__list .sub-menu a{display:block; padding:var(--sp-2) var(--sp-3); color:var(--c-ink); text-decoration:none}
.drawer__nav{list-style:none; margin:0; padding:0}
.drawer__nav .sub-menu{list-style:none; margin:0; padding:0 0 0 var(--sp-4)}
.drawer__link{display:block; padding:var(--sp-3) 0; color:var(--c-heading); font-weight:700; text-decoration:none}
.byline__avatar{overflow:hidden}.byline__avatar img{width:100%;height:100%;object-fit:cover}
.tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6)}
.tags a{display:inline-flex;padding:.4rem .7rem;border:1px solid var(--c-border);border-radius:999px;text-decoration:none}
.pagination{margin-top:var(--sp-7)}
.pagination__list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.pagination a,.pagination .current{display:inline-flex;min-width:42px;min-height:42px;align-items:center;justify-content:center;padding:var(--sp-2) var(--sp-3);border:1px solid var(--c-border);border-radius:10px;text-decoration:none}
.pagination .current{background:var(--c-heading);color:var(--c-surface);border-color:var(--c-heading)}
.prose img{max-width:100%;height:auto}.prose .alignwide{max-width:var(--w-wide);margin-left:auto;margin-right:auto}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   18. TRUST BOX NA MOBILU
   Na desktopu zůstává v pravém sloupci beze změny. Pod 1100 px se sloupce
   rozpadnou do jednoho toku a trust box se posune nad výpis článků, aby
   nebyl až za několika sekcemi.
   ========================================================================== */
@media(max-width:1099px){
  .layout{display:flex; flex-direction:column; gap:var(--sp-6)}
  .sidebar{display:contents}
  .layout__main{order:0}
  .widget--trust{order:-1}
  .sidebar > *:not(.widget--trust),
  .sidebar__sticky{order:1}
}
.sidebar__sticky{display:flex; flex-direction:column; gap:var(--sp-5)}
@media(min-width:1100px){
  /* Sticky sidebar zabrání dlouhé prázdné ploše po konci jeho obsahu. */
  .sidebar__sticky{position:sticky; top:calc(var(--h-header) + var(--sp-4))}
}
.widget__foot{margin:var(--sp-3) 0 0; font-size:var(--fs-micro); line-height:1.5; color:var(--c-muted)}
.widget--review .factlist span{text-align:right; overflow-wrap:anywhere}
.situations__list--stack{grid-template-columns:1fr}
@media(min-width:768px){.situations__list--stack{grid-template-columns:1fr}}

/* ==========================================================================
   19. DROBNOSTI ŠABLONY ČLÁNKU
   ========================================================================== */
.byline__review{
  margin:var(--sp-3) 0 0; font-size:var(--fs-micro); line-height:1.6; color:var(--c-muted);
}
.byline__review strong{color:var(--c-ink); font-weight:700}
.byline__meta time{font-variant-numeric:tabular-nums}
.caption__note{text-transform:none; letter-spacing:0; font-weight:600}
.cta__title{color:#fff; font-size:var(--fs-h3); margin:0 0 var(--sp-3)}
.table-wrap:focus-visible{outline:3px solid var(--c-accent); outline-offset:2px}
.sources__note{margin:var(--sp-3) 0 0; font-size:var(--fs-micro); line-height:1.5; color:var(--c-muted)}