/* ==========================================================================
   VAŠE NOVÉ BYDLENÍ — vizuální systém motivu 3.0.0
   Přeneseno 1 : 1 z odsouhlaseného prototypu index-6 (bloky 5.0, 6.0,
   6.1 a 6.2). Níže navazují části 6.3 (oprava mobilního hero) a 7.0
   (komponenty, které prototyp neřešil: článek, výpisy, komentáře).
   Písmo Roboto je hostované v motivu, žádné Google Fonts.
   ========================================================================== */

@font-face{
  font-family:"Roboto";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/roboto-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Roboto";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   VAŠE NOVÉ BYDLENÍ — designový systém 5.0

   ZÁMĚR: obrazový magazín. Nosič je karta s obrazem, ne textový výpis.
   Struktura je portálová, vzhled magazínový.

   ZÁMKY, KTERÉ SE NEPORUŠUJÍ
   1. VÝHRADNĚ SVĚTLÝ REŽIM. Žádná větev prefers-color-scheme, žádná
      tmavá sekce. color-scheme je zamčené na light, aby systémový
      tmavý režim prohlížeče stránku nepřebarvil.
   2. BARVA RUBRIKY je orientace, ne ozdoba. Žije na dvou místech:
      ve štítku a v 3px liště karty. Nikdy nebarví text ani plochu.
      Vždy ji doprovází název rubriky slovem.
   3. Jedna prostorová stupnice, jedna sada poloměrů, jedna sada stínů.
   4. Dotyková plocha nikdy pod 44 px.
   5. Šířky řídí výhradně .shell.
   ========================================================================== */

:root{
  color-scheme: light only;            /* zámek proti tmavému režimu systému */

  --ink:      #0F1523;
  --ink-2:    #303B4E;
  --muted:    #616D82;                 /* 5,3:1 na bílé */
  --line:     #E6EAF1;
  --line-2:   #D2D9E4;
  --paper:    #F3F5F9;
  --card:     #FFFFFF;
  --card-2:   #F8FAFC;

  --brand:    #3B3FD8;
  --brand-dk: #2A2EAE;
  --brand-wk: #EEEEFD;

  --c-reality:#3B3FD8; --b-reality:#ECEDFD;
  --c-hypo:   #0B6E78; --b-hypo:   #E2F3F4;
  --c-podnik: #A8134F; --b-podnik: #FCE8EF;
  --c-pojist: #17693F; --b-pojist: #E4F3EA;
  --c-domac:  #8A5A08; --b-domac:  #FBEFDA;
  --c-nastroj:#37476B; --b-nastroj:#EAEEF5;

  --ok:#17693F; --flag:#B87A0B;

  --font:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --t-hero: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
  --t-h2:   clamp(1.3rem, 1.15rem + .8vw, 1.8rem);
  --t-h3:   clamp(1.02rem, .97rem + .34vw, 1.2rem);
  --t-body: 1rem;
  --t-sm:   .9rem;
  --t-xs:   .78rem;
  --ls:     -.022em;
  --ls-lab:  .08em;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:2.75rem; --s8:4rem;
  --row: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);

  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;

  --shell:1320px; --tap:44px; --head:64px;

  --ease:cubic-bezier(.2,.7,.3,1);
  --sh-1:0 1px 2px rgba(15,21,35,.05);
  --sh-2:0 12px 28px -16px rgba(15,21,35,.3);
  --sh-3:0 24px 54px -24px rgba(15,21,35,.38);
}

/* ==========================================================================
   ZÁKLAD
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--vnb-sticky-top,calc(var(--head) + 1rem))}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:var(--t-body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:visible}
/* clip zachová sticky vůči viewportu; hidden by z body udělal scroll předka. */
@supports(overflow:clip){body{overflow-x:clip}}
h1,h2,h3,h4{margin:0;line-height:1.16;letter-spacing:var(--ls);text-wrap:balance}
p{margin:0} a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}

.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:#fff;padding:var(--s3) var(--s4);font-weight:700}
.skip:focus{left:0}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--s4)}
@media(min-width:760px){.shell{padding-inline:var(--s6)}}
@media(min-width:1200px){.shell{padding-inline:var(--s7)}}

/* ==========================================================================
   DROBNÉ PRVKY
   ========================================================================== */
.eyebrow{font-size:var(--t-xs);font-weight:700;letter-spacing:var(--ls-lab);
  text-transform:uppercase;color:var(--muted)}

.pill{display:inline-flex;align-items:center;padding:.3em .7em;border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:700;line-height:1.25;
  background:var(--b-reality);color:var(--c-reality)}
.pill--hypo{background:var(--b-hypo);color:var(--c-hypo)}
.pill--podnik{background:var(--b-podnik);color:var(--c-podnik)}
.pill--pojist{background:var(--b-pojist);color:var(--c-pojist)}
.pill--domac{background:var(--b-domac);color:var(--c-domac)}
.pill--nastroj{background:var(--b-nastroj);color:var(--c-nastroj)}
/* štítek položený na obraz — vždy plná bílá kvůli kontrastu */
.pill--on{position:absolute;top:var(--s3);left:var(--s3);z-index:2;
  background:#fff;box-shadow:var(--sh-1)}

.meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);
  font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.meta b{font-weight:700;color:var(--ink-2)}
.meta i{font-style:normal;color:var(--line-2)}
.meta svg{width:13px;height:13px;flex:none}
.meta span{display:inline-flex;align-items:center;gap:.3em}

.more{display:inline-flex;align-items:center;gap:.4em;font-size:var(--t-sm);
  font-weight:700;color:var(--brand-dk);white-space:nowrap}
.more em{font-style:normal}
.more:hover{text-decoration:underline}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:0 var(--s5);border:1px solid transparent;border-radius:var(--r);
  font-size:var(--t-sm);font-weight:700;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease)}
.btn--solid{background:var(--brand);color:#fff}
.btn--solid:hover{background:var(--brand-dk)}
.btn--line{border-color:var(--line-2);background:var(--card)}
.btn--line:hover{border-color:var(--brand);color:var(--brand-dk)}

.head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-bottom:var(--s5)}
.head__t{font-size:var(--t-h2);font-weight:800}
.head__i{margin-top:var(--s2);font-size:var(--t-sm);color:var(--muted);max-width:64ch}
@media(max-width:640px){.head{align-items:flex-start;flex-direction:column;gap:var(--s3)}}

/* ==========================================================================
   HLAVIČKA
   ========================================================================== */
/* Bez JS zůstávají kotvy i sticky panel pod standardní lištou WordPressu. */
html:has(body.admin-bar){--vnb-sticky-top:calc(var(--head) + 48px)}
@media(max-width:782px){html:has(body.admin-bar){--vnb-sticky-top:calc(var(--head) + 62px)}}
@media(max-width:600px){html:has(body.admin-bar){--vnb-sticky-top:calc(var(--head) + 16px)}}
body.admin-bar .top{top:var(--vnb-admin-offset,32px)}
@media(max-width:782px){body.admin-bar .top{top:var(--vnb-admin-offset,46px)}}
@media(max-width:600px){body.admin-bar .top{top:var(--vnb-admin-offset,0px)}}
.top{position:sticky;top:var(--vnb-admin-offset,0px);z-index:200;background:var(--card);box-shadow:var(--sh-1)}
.top__in{display:flex;align-items:center;gap:var(--s4);min-height:var(--head)}
.brand{display:flex;align-items:center;gap:var(--s3);flex:none}
.brand__m{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:var(--ink);color:#fff}
.brand__m svg{width:20px;height:20px}
.brand__t{font-weight:800;font-size:1.02rem;letter-spacing:var(--ls);line-height:1.1}
.brand__t small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}

.nav{display:none;margin-left:var(--s5)}
@media(min-width:1080px){.nav{display:flex;gap:var(--s2)}}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 var(--s3);font-size:var(--t-sm);font-weight:600;border-radius:var(--r-sm)}
.nav a::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:8px;height:3px;
  border-radius:2px;background:transparent;transition:background .18s var(--ease)}
.nav a:hover::after{background:var(--line-2)}
.nav a[aria-current]::after{background:var(--brand)}

.find{position:relative;flex:1;max-width:340px;margin-left:auto;display:none}
@media(min-width:1080px){.find{display:block}}
.find input{width:100%;min-height:40px;padding:0 var(--s4) 0 2.45rem;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--card-2);font-size:var(--t-sm)}
.find svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);width:17px;height:17px;
  color:var(--muted);pointer-events:none}
.acts{margin-left:auto;display:flex;gap:var(--s1)}
@media(min-width:1080px){.acts{margin-left:var(--s3)}}
.ico{width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;background:transparent;
  border-radius:var(--r-sm);cursor:pointer}
.ico:hover{background:var(--brand-wk);color:var(--brand-dk)}
.ico svg{width:20px;height:20px}
@media(min-width:1080px){.ico--menu,.ico--find{display:none}}

/* ==========================================================================
   HERO — velká obrazová karta + dvě menší
   ========================================================================== */
.hero{display:grid;gap:var(--s4);padding-top:var(--s6)}
@media(min-width:900px){.hero{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}}

.hcard{position:relative;display:block;overflow:hidden;border-radius:var(--r-xl);
  background:var(--card-2);isolation:isolate;transition:box-shadow .18s var(--ease)}
.hcard img{width:100%;height:100%;object-fit:cover}
.hcard:hover,.hcard:focus-within{box-shadow:var(--sh-1)}
.hcard::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(8,12,22,.9) 0%,rgba(8,12,22,.62) 38%,rgba(8,12,22,.06) 72%)}
.hcard__b{position:absolute;inset:auto 0 0 0;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--s3);padding:var(--s5)}
/* Překryvný odkaz přes celou hero kartu. Leží nad textovým blokem, takže
   kliknutí kamkoli vede na článek. Odkaz v nadpisu zůstává pod ním a nese
   přístupný název i viditelný fokusový rámeček. */
.hcard__link{position:absolute;inset:0;z-index:3;border-radius:inherit}
.hcard__t{color:#fff;font-weight:800;letter-spacing:-.028em}
.hcard__p{color:rgba(255,255,255,.8);font-size:var(--t-sm);line-height:1.55;max-width:52ch}
.hcard .meta{color:rgba(255,255,255,.72)}
.hcard .meta b{color:#fff}
.hcard .meta i{color:rgba(255,255,255,.35)}

.hero__main{aspect-ratio:16/11}
.hero__main .hcard__t{font-size:var(--t-hero)}
@media(min-width:900px){.hero__main{aspect-ratio:auto;height:100%;min-height:460px}
  .hero__main .hcard__b{padding:var(--s6)}}

.hero__side{display:grid;gap:var(--s4);grid-template-rows:1fr 1fr}
.hero__side .hcard{aspect-ratio:16/9}
@media(min-width:900px){.hero__side .hcard{aspect-ratio:auto}}
.hero__side .hcard__t{font-size:var(--t-h3)}
@media(max-width:899px){.hero__side{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-template-rows:none}}

/* ==========================================================================
   PROZKOUMAT RUBRIKY — dlaždice s obrazem
   ========================================================================== */
.explore{margin-top:var(--row)}








/* ==========================================================================
   KARTA ČLÁNKU
   ========================================================================== */
.grid{display:grid;gap:var(--s5)}
.grid--2{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(min(100%,278px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,238px),1fr))}

.card{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.card:hover,.card:focus-within{border-color:var(--line-2);box-shadow:var(--sh-1)}
.card__rule{height:3px;flex:none;background:var(--c-reality)}
.card--hypo .card__rule{background:var(--c-hypo)}
.card--podnik .card__rule{background:var(--c-podnik)}
.card--pojist .card__rule{background:var(--c-pojist)}
.card--domac .card__rule{background:var(--c-domac)}
.card--nastroj .card__rule{background:var(--c-nastroj)}
.card__im{position:relative;display:block;aspect-ratio:16/10;background:var(--card-2);overflow:hidden}
.card__im img{width:100%;height:100%;object-fit:cover}
.card__b{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);flex:1;align-items:flex-start}
.card__t{font-size:var(--t-h3);font-weight:700;line-height:1.32}
.card__t a::after{content:"";position:absolute;inset:0}
.card__t a:hover{color:var(--brand-dk)}
.card__p{font-size:var(--t-sm);color:var(--muted);line-height:1.55}
.card__f{margin-top:auto;width:100%}

/* ==========================================================================
   NÁSTROJE
   ========================================================================== */
.kit{margin-top:var(--row);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.kit__h{display:flex;align-items:baseline;gap:var(--s3) var(--s4);flex-wrap:wrap;
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);background:var(--card-2)}
.kit__n{font-size:var(--t-xs);color:var(--muted)}
.kit__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.kit__a{display:flex;flex-direction:column;gap:var(--s3);height:100%;padding:var(--s5) var(--s4);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:var(--t-sm);font-weight:700;line-height:1.3;transition:background .18s var(--ease)}
.kit__a:hover{background:var(--brand-wk);color:var(--brand-dk)}
.kit__ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--b-nastroj);color:var(--c-nastroj);flex:none}
.kit__ic svg{width:21px;height:21px}
.kit__s{font-size:var(--t-xs);font-weight:500;color:var(--muted)}

/* ==========================================================================
   PÁS RUBRIKY — hlavička s barvou + řada karet
   ========================================================================== */
.band{margin-top:var(--row)}
.band__h{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;margin-bottom:var(--s5);padding-bottom:var(--s3);
  border-bottom:2px solid var(--c-reality)}
.band--hypo .band__h{border-color:var(--c-hypo)}
.band--podnik .band__h{border-color:var(--c-podnik)}
.band--pojist .band__h{border-color:var(--c-pojist)}
.band--domac .band__h{border-color:var(--c-domac)}
.band__t{font-size:var(--t-h2);font-weight:800}
@media(max-width:640px){.band__h{align-items:flex-start;flex-direction:column;gap:var(--s3)}}

/* dvousloupcová varianta: karty + boční seznam */
.band__lay{display:grid;gap:var(--s5)}
@media(min-width:1080px){.band__lay{grid-template-columns:minmax(0,1fr) 304px;align-items:start}}
.side{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4)}
.side h3{font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-lab);
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.side li{border-bottom:1px solid var(--line)}
.side li:last-child{border-bottom:0}
.side a{display:flex;align-items:center;justify-content:flex-start;gap:var(--s3);
  padding-block:var(--s3);min-height:var(--tap);font-size:var(--t-sm);font-weight:600;line-height:1.35}
.side a:hover{color:var(--brand-dk)}
.side svg{width:15px;height:15px;color:var(--line-2);flex:none;margin-left:auto}
.side__n{font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;flex:none;min-width:1.3em}

/* ==========================================================================
   PRŮVODCI
   ========================================================================== */
.paths{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,276px),1fr))}
.path{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.path:hover,.path:focus-within{border-color:var(--line-2);box-shadow:var(--sh-1)}
.path__t{font-size:var(--t-h3);font-weight:800}
.path__p{font-size:var(--t-sm);color:var(--muted);line-height:1.5}
.path__bar{display:flex;gap:3px;margin-top:var(--s2)}
.path__seg{flex:1;height:6px;border-radius:3px;background:var(--line-2)}
.path__seg.on{background:var(--brand)}
.path__f{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line)}
.path__c{font-size:var(--t-xs);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}

/* ==========================================================================
   KALENDÁŘ
   ========================================================================== */
.cal{display:grid;gap:var(--s5)}
@media(min-width:920px){.cal{grid-template-columns:minmax(0,352px) minmax(0,1fr)}}
.cal__box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4)}
.cal__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.cal__mo{font-weight:800;font-size:var(--t-sm)}
.cal__g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.cal__dow{font-size:var(--t-xs);font-weight:700;color:var(--muted);padding-block:var(--s2)}
.cal__d{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;
  font-size:var(--t-sm);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.cal__d--out{color:var(--line-2)}
.cal__d--mark{background:var(--b-domac);color:var(--c-domac);font-weight:800;
  box-shadow:inset 0 0 0 1.5px var(--flag)}
.cal__d--now{background:var(--ink);color:#fff;font-weight:800}
.cal__l li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);
  padding:var(--s4);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:var(--s3)}
.cal__day{text-align:center;min-width:46px}
.cal__day b{display:block;font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.cal__day span{font-size:var(--t-xs);color:var(--muted)}
.cal__w{font-size:var(--t-sm);font-weight:700;margin-bottom:2px}
.cal__s{font-size:var(--t-xs);color:var(--muted)}

/* ==========================================================================
   PROUD + PANEL
   ========================================================================== */
.flow{margin-top:var(--row);display:grid;gap:var(--s6)}
@media(min-width:1080px){.flow{grid-template-columns:minmax(0,1fr) 304px;align-items:start}}
.fl{display:grid;grid-template-columns:168px minmax(0,1fr);gap:var(--s4);
  padding:var(--s4);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);margin-bottom:var(--s4);position:relative;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.fl:hover,.fl:focus-within{border-color:var(--line-2);box-shadow:var(--sh-1)}
.fl__im{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--card-2)}
.fl__im img{width:100%;height:100%;object-fit:cover}
.fl__b{display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start;min-width:0}
.fl__t{font-size:var(--t-h3);font-weight:700;line-height:1.32}
.fl__t a::after{content:"";position:absolute;inset:0}
.fl__t a:hover{color:var(--brand-dk)}
.fl__p{font-size:var(--t-sm);color:var(--muted);line-height:1.55}
@media(max-width:600px){
  .fl{grid-template-columns:100px minmax(0,1fr);gap:var(--s3);padding:var(--s3)}
  .fl__p{display:none}
}

/* ==========================================================================
   ODBĚR A PATIČKA
   ========================================================================== */
.sub{margin-top:var(--row);background:var(--ink);border-radius:var(--r-lg);
  padding:var(--s5);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);
  justify-content:space-between}
@media(min-width:1080px){.sub{padding:var(--s6)}}
.sub h2{color:#fff;font-size:var(--t-h2);font-weight:800}
.sub p{margin-top:var(--s2);color:rgba(255,255,255,.72);font-size:var(--t-sm);max-width:52ch}
.sub .btn--solid{background:#fff;color:var(--ink)}
.sub .btn--solid:hover{background:#E8E9FB}

.foot{margin-top:var(--row);border-top:1px solid var(--line);background:var(--card)}
.foot__g{display:grid;gap:var(--s5);padding-block:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr))}
@media(min-width:960px){.foot__g{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.foot h2{font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-lab);
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.foot li a{display:inline-flex;align-items:center;min-height:32px;font-size:var(--t-sm);color:var(--ink-2)}
.foot li a:hover{color:var(--brand-dk);text-decoration:underline}
.foot__n{padding-block:var(--s4);border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--muted)}

/* ==========================================================================
   TISK
   ========================================================================== */
@media print{
  .top,.kit,.side,.sub,.foot{display:none}
  body{background:#fff}
  .card,.fl,.trust,.hcard{border:1px solid #999;break-inside:avoid}
  .hcard::after{display:none}
}

/* ==========================================================================
   RUBRIKY MAGAZÍNU — přestavěno v 5.1
   Dřív: šest úzkých vodorovných dlaždic, které se lámaly 5 + 1, a název
   se slil s popisem, protože nebyl blokový. Teď: mřížka 3 × 2 s obrazovým
   pruhem, pevnou hierarchií a počtem článků v patě.
   ========================================================================== */
.explore__g{display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,296px),1fr))}

.rcard{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.rcard:hover,.rcard:focus-within{border-color:var(--line-2);box-shadow:var(--sh-1)}

.rcard__im{position:relative;display:block;aspect-ratio:16/6;background:var(--card-2);overflow:hidden}
.rcard__im img{width:100%;height:100%;object-fit:cover}
/* lišta v barvě rubriky — druhé a poslední místo, kde barva žije */
.rcard__im::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--c-reality)}
.rcard--hypo .rcard__im::after{background:var(--c-hypo)}
.rcard--podnik .rcard__im::after{background:var(--c-podnik)}
.rcard--pojist .rcard__im::after{background:var(--c-pojist)}
.rcard--domac .rcard__im::after{background:var(--c-domac)}
.rcard--nastroj .rcard__im::after{background:var(--c-nastroj)}

.rcard__b{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);flex:1}
.rcard__n{display:block;font-size:var(--t-h3);font-weight:800;letter-spacing:var(--ls);line-height:1.25}
/* Stejný postup jako u .card a .fl — celá dlaždice je klikatelná. */
.rcard__n a::after{content:"";position:absolute;inset:0}
.rcard__d{display:block;font-size:var(--t-sm);color:var(--muted);line-height:1.5}
.rcard__f{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--line)}
.rcard__c{font-size:var(--t-xs);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.rcard__a{color:var(--brand);font-weight:700;transition:color .18s var(--ease)}
.rcard:hover .rcard__a{color:var(--brand-dk)}

@media(max-width:520px){
  .rcard__im{aspect-ratio:16/5}
  .rcard__b{padding:var(--s4)}
}


/* ==========================================================================
   DOPLNĚK 6.0 — komponenty pro schválenou strukturu indexu

   Nové oproti 5.1: situační vstup (B3), pruh transparentnosti (B8),
   samostatný průvodce (B5) a úprava redakčního okna (B2).
   Vše zůstává ve světlém režimu a v téže prostorové stupnici.
   ========================================================================== */

/* --------------------------------------------------------------------------
   B3 — SITUAČNÍ VSTUP
   Jediné místo na indexu, kde se dostane ke slovu osa „situace".
   Není to menu nastavení: každá dlaždice nese počet a má váhu karty.
   -------------------------------------------------------------------------- */
.sit{margin-top:var(--row)}
.sit__g{display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,236px),1fr))}

.sit__a{
  position:relative;display:flex;flex-direction:column;gap:var(--s2);
  min-height:96px;padding:var(--s4) var(--s5) var(--s4) var(--s4);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  transition:box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.sit__a:hover,.sit__a:focus-visible{box-shadow:var(--sh-1);border-color:var(--line-2)}

/* svislá stopka v barvě rubriky, do které situace vede */
.sit__a::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--c-reality);
}
.sit__a--hypo::before{background:var(--c-hypo)}
.sit__a--najem::before{background:var(--c-domac)}
.sit__a--pojist::before{background:var(--c-pojist)}

.sit__t{font-size:var(--t-sm);font-weight:700;line-height:1.3;letter-spacing:var(--ls)}
.sit__c{
  margin-top:auto;font-size:var(--t-xs);font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.sit__ar{
  position:absolute;right:var(--s4);bottom:var(--s4);
  color:var(--line-2);transition:color .18s var(--ease);
}
.sit__a:hover .sit__ar{color:var(--brand)}

/* --------------------------------------------------------------------------
   B5 — PRŮVODCE, samostatný
   Při startu je hotový jeden. Aby nevypadal osaměle, dostane celou šířku
   a kroky se vypíší jako pás, ne jako karta ztracená v mřížce.
   -------------------------------------------------------------------------- */
.guide{
  margin-top:var(--row);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.guide__top{height:3px;background:var(--c-reality)}
.guide__in{padding:var(--s5)}
@media(min-width:1080px){.guide__in{padding:var(--s6)}}

.guide__h{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.guide__t{font-size:var(--t-h2);font-weight:800}
.guide__p{margin-top:var(--s2);font-size:var(--t-sm);color:var(--muted);max-width:64ch}

.guide__steps{display:grid;gap:var(--s1);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.gstep{
  display:flex;flex-direction:column;gap:var(--s2);height:100%;
  padding:var(--s4) var(--s3) var(--s5);
  border-top:3px solid var(--line-2);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.gstep:hover{border-top-color:var(--brand);background:var(--card-2)}
.gstep__n{font-size:var(--t-xs);font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums}
.gstep__t{font-size:var(--t-sm);font-weight:600;line-height:1.35}
.gstep.is-done{border-top-color:var(--ok)}
.gstep.is-done .gstep__n{color:var(--ok)}
.gstep.is-done .gstep__n::after{content:" ·"}

.guide__f{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s4);
  border-top:1px solid var(--line)}
.guide__prog{font-size:var(--t-xs);font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}
.guide__note{font-size:var(--t-xs);color:var(--muted)}

/* --------------------------------------------------------------------------
   B8 — PRUH TRANSPARENTNOSTI
   Vědomě tři řádky, ne čtyřsloupcová škatule. Ta byla těžkopádná.
   -------------------------------------------------------------------------- */
.disc{
  margin-top:var(--row);display:flex;gap:var(--s5);align-items:flex-start;
  flex-wrap:wrap;padding:var(--s5);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
}
.disc__ic{
  flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:var(--brand-wk);color:var(--brand-dk);
}
.disc__ic svg{width:21px;height:21px}
.disc__b{flex:1;min-width:260px}
.disc__t{font-size:var(--t-h3);font-weight:800;margin-bottom:var(--s2)}
.disc__p{font-size:var(--t-sm);color:var(--muted);line-height:1.6;max-width:78ch}
.disc__l{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s3)}

/* --------------------------------------------------------------------------
   B2 — redakční okno: perex u hlavního článku i na užších obrazovkách
   -------------------------------------------------------------------------- */
@media(min-width:560px){.hcard__p{display:block}}

/* --------------------------------------------------------------------------
   Zástupný text, který musí vydavatel doplnit
   -------------------------------------------------------------------------- */
.todo{
  background:#FFF6DA;color:#6B4E06;padding:.1em .4em;border-radius:4px;
  font-weight:700;font-size:.92em;
}


/* ==========================================================================
   ÚPRAVY 6.1 — po připomínkách

   1. VÝŠKA DOLŮ. Hero na širokém monitoru přerůstal obrazovku a titulek
      končil pod ohybem. Sazba se nezmenšila, zmenšil se prostor kolem ní.
   2. „Nářaďovna" bylo slovo z dílny. Blok se jmenuje Nástroje.
   3. Průvodci zpět do mřížky karet. Nepřipravený průvodce ale nedostane
      odkaz nikam — má stav Připravujeme.
   4. Tmavý pás nese odběr novinek, transparentnost sjela do patičky.
      Dlouhá světlá stránka potřebuje ke konci kotvu, ale odkaz na
      redakční pravidla musí zůstat čitelný, ne drobným písmem.
   ========================================================================== */

:root{
  --row: clamp(2rem, 1.4rem + 1.8vw, 3rem);   /* bylo až 4rem */
}

/* --- 1. hero: strop výšky a mírnější poměry --- */
.hero{padding-top:var(--s5)}
.hero__main{aspect-ratio:16/10}
@media(min-width:900px){
  .hero__main{min-height:0;height:100%;max-height:440px}
  .hero__main .hcard__b{padding:var(--s5)}
}
@media(min-width:1200px){.hero__main{max-height:400px}}
.hero__main .hcard__t{font-size:clamp(1.35rem,1.05rem + 1.2vw,2rem)}
.hero__main .hcard__p{
  font-size:var(--t-sm);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hero__side .hcard{max-height:212px}
.hcard__b{gap:var(--s2);padding:var(--s4)}
@media(min-width:900px){.hero__side .hcard__b{padding:var(--s4)}}

/* --- situace: nižší dlaždice, menší mezera pod názvem --- */
.sit__a{min-height:0;padding:var(--s3) var(--s5) var(--s3) var(--s4);gap:var(--s1)}
.sit__a::before{top:10px;bottom:10px}
.sit__c{margin-top:var(--s1)}
.sit__ar{bottom:auto;top:50%;transform:translateY(-50%)}


/* --- rubrikové pásy a karty: méně vzduchu, stejná čitelnost --- */
.band{margin-top:var(--row)}
.band__h{margin-bottom:var(--s4)}
.card__b{padding:var(--s4);gap:var(--s2)}
.card__im{aspect-ratio:16/9}
.kit__a{padding:var(--s4)}
.fl{padding:var(--s3)}
.fl__im{aspect-ratio:16/10}

/* --- 3. průvodce ve stavu Připravujeme --- */
.path--soon{background:var(--card-2);border-style:dashed}
.path--soon:hover{border-color:var(--line);box-shadow:none}
.path--soon .path__t{color:var(--ink-2)}
.path__soon{
  font-size:var(--t-xs);font-weight:700;color:var(--muted);
  padding:.25em .6em;border-radius:var(--r-pill);background:var(--line);
}

/* --- 4. transparentnost v patičce --- */
.fdisc{
  padding:var(--s5) 0;border-top:1px solid var(--line);
}
.fdisc__t{font-size:var(--t-h3);font-weight:800;margin-bottom:var(--s2)}
.fdisc__p{font-size:var(--t-sm);color:var(--muted);line-height:1.6;max-width:88ch}
.fdisc__l{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-top:var(--s3)}

/* odběr: nižší pás, aby nekonkuroval obsahu */
.sub{padding:var(--s5)}
@media(min-width:1080px){.sub{padding:var(--s5) var(--s6)}}
.sub h2{font-size:var(--t-h3)}


/* ==========================================================================
   ÚPRAVA 6.2 — HERO PODLE REFERENCE „PLATFORM"

   Co se mění a proč:
   1. Poměr sloupců 2 : 1 (bylo 1,75 : 1) a mezera 16 px — reference má
      velkou kartu přesně dvakrát širší než postranní sloupec.
   2. Všechny tři karty mají poměr 16:9. Dvě postranní karty + mezera
      se tím výškově rovnají velké kartě. Žádné max-height, výšku řídí
      šířka — proto se poměr nerozpadne na žádném monitoru.
   3. Přechod jen zdola. Reference nechává horní polovinu fotky vidět,
      ztmavuje se až pod titulkem. Původní přechod ležel přes 62 % plochy.
   4. Menší rádius (12 px místo 22), štítek jako obdélníček s malým
      zaoblením, ne jako pilulka.
   5. Sazba: titulek velké karty výš, popisek 3 řádky, metadata do jedné
      linky. Vnitřní okraj 28 px u velké, 20 px u postranních.
   ========================================================================== */

.hero{
  display:grid;
  gap:16px;
  padding-top:var(--s5);
}
@media(min-width:900px){
  .hero{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
}

/* --- geometrie karet: poměr 16:9 všude, žádné stropy výšky --- */
.hero__main{
  aspect-ratio:16/9;
  height:auto;
  min-height:0;
  max-height:none;
}
@media(min-width:900px){
  .hero__main{aspect-ratio:16/9;height:auto;min-height:0;max-height:none}
}
@media(min-width:1200px){
  .hero__main{max-height:none}
}

.hero__side{
  display:grid;
  gap:16px;
  grid-template-rows:1fr 1fr;
}
.hero__side .hcard{
  aspect-ratio:auto;
  max-height:none;
  min-height:0;
}
@media(max-width:899px){
  .hero__side{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-template-rows:none}
  .hero__side .hcard{aspect-ratio:16/9}
}

/* --- PODSTATNÉ: obraz ven z toku ---
   Původní chyba. Obrázky mají vlastní poměr (velký 1040×660, postranní
   560×420 = 4:3). Dokud ležely v toku karty, výšku karty určoval obrázek,
   ne mřížka: postranní sloupec vyrostl na 2×300 px a přetekl pod velkou
   kartu. Absolutní pozice obraz z počítání výšky vyřadí — výšku určuje
   výhradně poměr 16:9 velké karty a mřížka 1fr 1fr vedle ní. */
.hero .hcard{position:relative;overflow:hidden}
.hero .hcard img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.hero__side .hcard{height:100%}

/* --- tvar a přechod --- */
.hero .hcard{border-radius:12px}
.hero .hcard::after{
  background:linear-gradient(to top,
    rgba(6,10,18,.93) 0%,
    rgba(6,10,18,.74) 24%,
    rgba(6,10,18,.34) 50%,
    rgba(6,10,18,.04) 76%,
    rgba(6,10,18,0) 100%);
}

/* --- štítek rubriky --- */
.hero .pill--on{
  top:20px;left:20px;
  border-radius:8px;
  padding:.34em .72em;
  font-size:.82rem;
  box-shadow:0 2px 8px rgba(6,10,18,.18);
}

/* --- sazba ve velké kartě --- */
.hero__main .hcard__b{
  padding:28px;
  gap:14px;
}
.hero__main .hcard__t{
  font-size:clamp(1.5rem,1.05rem + 1.7vw,2.5rem);
  line-height:1.1;
  letter-spacing:-.032em;
  max-width:20ch;
}
.hero__main .hcard__p{
  font-size:1.0rem;
  line-height:1.5;
  max-width:52ch;
  color:rgba(255,255,255,.84);
  -webkit-line-clamp:3;
}

/* --- sazba v postranních kartách --- */
.hero__side .hcard__b{
  padding:20px;
  gap:10px;
}
.hero__side .hcard__t{
  font-size:clamp(1.05rem,.95rem + .45vw,1.28rem);
  line-height:1.18;
  letter-spacing:-.026em;
}

/* ==========================================================================
   „CO PRÁVĚ ŘEŠÍTE?" — sloupce natvrdo, ne auto-fit

   Situací je osm. Původní auto-fit s minimem 236 px vyskládá při plné
   šířce (obsah 1232 px) přesně pět sloupců, takže druhá řada zůstane
   ze tří pětin prázdná — 5 + 3 s dírou vpravo. A protože počet sloupců
   určuje zbytek po dělení šířky, mění se skokem podle okna: 5, 4, 3…
   a díra se stěhuje. Osm dlaždic potřebuje dělitele osmi: 4, 2, 1.
   ========================================================================== */
.sit__g{grid-template-columns:1fr}
@media(min-width:520px){ .sit__g{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(min-width:900px){ .sit__g{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* --- metadata na jedné lince --- */
.hero .meta{
  flex-wrap:nowrap;
  gap:var(--s3);
  font-size:.84rem;
  white-space:nowrap;
  overflow:hidden;
}
@media(min-width:900px){
  .hero .pill--on{top:16px;left:16px}
  .hero__side .pill--on{top:14px;left:14px;font-size:.78rem}
}

/* ==========================================================================
   6.3 — OPRAVA HERO NA ÚZKÝCH OBRAZOVKÁCH

   Prototyp měl na mobilu velkou kartu v poměru 16:9, tedy 200 px vysokou
   při šířce 356 px. Titulek, perex a metadata se do ní nevešly, textový
   blok přerostl kartu a štítek rubriky ležel přes titulek.
   Řešení: na mobilu vyšší poměr 4:3, menší sazba a perex až od 560 px
   (což byl původní záměr bloku 6.0).
   ========================================================================== */
@media(max-width:899px){
  .hero__main{aspect-ratio:4/3}
  .hero__main .hcard__b{padding:var(--s4);gap:var(--s2)}
  .hero__main .hcard__t{font-size:clamp(1.3rem,1.05rem + 1.1vw,1.7rem)}
  .hero__main .hcard__p{font-size:var(--t-sm)}
  .hero .pill--on{top:12px;left:12px;font-size:var(--t-xs)}
  .hero .meta{font-size:var(--t-xs)}
  .hero__side .hcard__b{padding:var(--s4)}
}
@media(max-width:559px){
  .hero__main .hcard__p{display:none}
}

/* ==========================================================================
   7.0 — KOMPONENTY, KTERÉ PROTOTYP NEŘEŠIL
   Článek, výpisy, hledání, komentáře a mobilní navigace. Stejná stupnice,
   stejné poloměry, stejné stíny, výhradně světlý režim.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILNÍ PANEL A HLEDÁNÍ
   -------------------------------------------------------------------------- */
.scrim{position:fixed;inset:0;z-index:210;background:rgba(15,21,35,.5);
  opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s var(--ease)}
.scrim.is-open{opacity:1;visibility:visible}

.drawer{position:fixed;inset:0 auto 0 0;z-index:220;width:min(92vw,380px);
  background:var(--card);box-shadow:var(--sh-3);display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .24s var(--ease);visibility:hidden}
.drawer.is-open{transform:none;visibility:visible}
@media(min-width:1080px){.drawer,.scrim{display:none}}
.drawer__h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);min-height:var(--head)}
.drawer__b{overflow-y:auto;padding:var(--s4);flex:1}
.drawer__s{border-bottom:1px solid var(--line);padding-block:var(--s2)}
.drawer__s:last-child{border-bottom:0}
.drawer__t{display:flex;align-items:center;min-height:var(--tap);font-size:var(--t-sm);font-weight:800}
.drawer__sub{padding-bottom:var(--s2)}
.drawer__sub a{display:flex;align-items:center;min-height:40px;padding-left:var(--s3);
  font-size:var(--t-sm);color:var(--ink-2);border-left:2px solid var(--line)}
.drawer__sub a:hover{color:var(--brand-dk);border-left-color:var(--brand)}

.seek{position:fixed;inset:0;z-index:230;background:rgba(15,21,35,.5);
  display:none;padding:var(--s6) var(--s4)}
.seek.is-open{display:block}
.seek__in{max-width:640px;margin-inline:auto;background:var(--card);
  border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--sh-3)}
.seek__h{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.seek__h p{font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-lab);
  text-transform:uppercase;color:var(--muted)}

/* jednotný vyhledávací formulář */
.sform{display:flex;gap:var(--s2)}
.sform input[type="search"]{flex:1;min-width:0;min-height:var(--tap);padding:0 var(--s4);
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--card-2);font-size:var(--t-sm)}
.sform .btn{flex:none}

/* --------------------------------------------------------------------------
   DROBEČKY, HLAVIČKA VÝPISU
   -------------------------------------------------------------------------- */
.crumbs{padding-top:var(--s4);font-size:var(--t-xs);color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.crumbs li{display:flex;align-items:center;gap:var(--s2)}
.crumbs li+li::before{content:"›";color:var(--line-2)}
.crumbs a:hover{color:var(--brand-dk);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink-2);font-weight:600}

.phead{padding-top:var(--s5)}
.phead__k{margin-bottom:var(--s2)}
.phead__t{font-size:var(--t-hero);font-weight:800}
.phead__p{margin-top:var(--s3);font-size:1.05rem;color:var(--muted);line-height:1.6;max-width:72ch}
.phead__r{height:3px;width:72px;margin-top:var(--s4);border-radius:2px;background:var(--c-reality)}
.phead--hypo .phead__r{background:var(--c-hypo)}
.phead--podnik .phead__r{background:var(--c-podnik)}
.phead--pojist .phead__r{background:var(--c-pojist)}
.phead--domac .phead__r{background:var(--c-domac)}
.phead--nastroj .phead__r{background:var(--c-nastroj)}

/* podrubriky jako řádek štítků */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.chips a{display:inline-flex;align-items:center;gap:.4em;min-height:36px;padding:0 var(--s4);
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card);
  font-size:var(--t-sm);font-weight:600}
.chips a:hover{border-color:var(--brand);color:var(--brand-dk)}
.chips b{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   VÝPIS ČLÁNKŮ
   -------------------------------------------------------------------------- */
.list{margin-top:var(--row);display:grid;gap:var(--s6)}
@media(min-width:1080px){.list{grid-template-columns:minmax(0,1fr) 304px;align-items:start}}
.pag{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6);justify-content:center}
.pag .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--tap);min-height:var(--tap);padding:0 var(--s3);
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  font-size:var(--t-sm);font-weight:700;font-variant-numeric:tabular-nums}
.pag .page-numbers:hover{border-color:var(--brand);color:var(--brand-dk)}
.pag .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}
.pag .page-numbers.dots{border-color:transparent;background:transparent}

.empty{margin-top:var(--row);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s6);display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--s4)}
.empty h1,.empty h2{font-size:var(--t-h2);font-weight:800}
.empty p{font-size:var(--t-sm);color:var(--muted);max-width:64ch;line-height:1.6}
.empty .sform{width:min(100%,420px)}

/* --------------------------------------------------------------------------
   ČLÁNEK
   -------------------------------------------------------------------------- */
.prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:250;background:transparent;pointer-events:none}
.prog span{display:block;height:100%;width:0;background:var(--brand);transition:width .1s linear}

/* Obrázek, text a závěrečné bloky sdílejí jednu čitelnou šířku.
   Omezení patří celému článku, nikoli samotným odstavcům. */
.art{width:100%;max-width:48rem;margin-top:var(--s5);margin-inline:auto;display:grid;gap:var(--s6)}
/* Desktop sdílí vnější osu s drobečkovou navigací a souvisejícími články.
   Uvnitř shellu: nejvýše 864 px textu + 48 px mezera + 320 px obsah. */
@media screen and (min-width:1080px){
  .art{max-width:none;margin-inline:0;grid-template-columns:minmax(0,1fr) 320px;gap:3rem;align-items:start}
}
.art__side{display:grid;gap:var(--s4)}
@media(min-width:1080px){.art__side{position:sticky;top:calc(var(--head) + var(--s4))}}

.art__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.art__t{font-size:var(--t-hero);font-weight:800}
.art__x{font-size:1.1rem;line-height:1.6;color:var(--ink-2);max-width:100%}

.byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);
  width:100%;padding-block:var(--s4);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.byline__p{display:flex;align-items:center;gap:var(--s3)}
.byline__av img{width:44px;height:44px;border-radius:50%;background:var(--card-2)}
.byline__n{font-size:var(--t-sm);font-weight:800;display:block}
.byline__n:hover{color:var(--brand-dk)}
.byline__r{font-size:var(--t-xs);color:var(--muted)}
.review{font-size:var(--t-sm);color:var(--ink-2)}
.review strong{font-weight:800}

.tools{display:flex;flex-wrap:wrap;gap:var(--s2)}
.tool{display:inline-flex;align-items:center;gap:.5em;min-height:38px;padding:0 var(--s4);
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--card);
  font-size:var(--t-xs);font-weight:700;cursor:pointer}
.tool:hover{border-color:var(--brand);color:var(--brand-dk)}
.tool svg{width:15px;height:15px}

.art__im{margin-top:var(--s2);border-radius:var(--r-lg);overflow:hidden;background:var(--card-2);
  aspect-ratio:16/9}
.art__im img{width:100%;height:100%;object-fit:cover}

.qa{background:var(--brand-wk);border:1px solid #DCDCFA;border-left:4px solid var(--brand);
  border-radius:var(--r);padding:var(--s5)}
.qa__k{font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-lab);
  text-transform:uppercase;color:var(--brand-dk);margin-bottom:var(--s2)}
.qa p{font-size:1.02rem;line-height:1.6}
.art__main>.qa{margin-top:var(--s5)}

.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4)}
.toc__t{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-xs);font-weight:800;
  letter-spacing:var(--ls-lab);text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.toc__t svg{width:15px;height:15px}
.toc ol{counter-reset:toc}
.toc li{border-bottom:1px solid var(--line)}
.toc li:last-child{border-bottom:0}
.toc a{display:flex;gap:var(--s3);padding-block:var(--s3);min-height:var(--tap);
  align-items:center;font-size:var(--t-sm);font-weight:600;line-height:1.35}
.toc a::before{counter-increment:toc;content:counter(toc);font-weight:800;color:var(--brand);
  font-variant-numeric:tabular-nums;flex:none;min-width:1.4em}
.toc a:hover{color:var(--brand-dk)}
.toc--desktop{display:none}
@media(min-width:1080px){
  .toc--desktop{display:block}
  .toc--mobile{display:none}
}

.disclaim{margin-top:var(--s5);padding:var(--s4);border-radius:var(--r);
  background:var(--card-2);border:1px solid var(--line);font-size:var(--t-sm);
  color:var(--ink-2);line-height:1.6}
.disclaim strong{font-weight:800}

.tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.tags a{display:inline-flex;align-items:center;min-height:34px;padding:0 var(--s3);
  border-radius:var(--r-pill);background:var(--card-2);border:1px solid var(--line);
  font-size:var(--t-xs);font-weight:700;color:var(--ink-2)}
.tags a:hover{border-color:var(--brand);color:var(--brand-dk)}

.about{margin-top:var(--s5);display:flex;gap:var(--s4);align-items:flex-start;
  padding:var(--s5);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.about img{width:56px;height:56px;border-radius:50%;flex:none;background:var(--card-2)}
.about__k{font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-lab);
  text-transform:uppercase;color:var(--muted)}
.about__n{font-size:var(--t-h3);font-weight:800;margin-top:2px}
.about__n a:hover{color:var(--brand-dk)}
.about p{margin-top:var(--s2);font-size:var(--t-sm);color:var(--muted);line-height:1.6;max-width:68ch}

.cta{margin-top:var(--row);background:var(--ink);border-radius:var(--r-lg);padding:var(--s5)}
@media(min-width:1080px){.cta{padding:var(--s6)}}
.cta__t{color:#fff;font-size:var(--t-h3);font-weight:800}
.cta__p{margin-top:var(--s2);color:rgba(255,255,255,.72);font-size:var(--t-sm);
  line-height:1.6;max-width:64ch}
.cta .btn{margin-top:var(--s4);background:#fff;color:var(--ink)}
.cta .btn:hover{background:#E8E9FB}
.cta__n{margin-top:var(--s3);color:rgba(255,255,255,.55);font-size:var(--t-xs);max-width:64ch}

.totop{position:fixed;right:var(--s4);bottom:var(--s4);z-index:190;
  display:inline-flex;align-items:center;gap:.4em;min-height:var(--tap);padding:0 var(--s4);
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--card);
  box-shadow:var(--sh-2);font-size:var(--t-xs);font-weight:700;cursor:pointer}
.totop svg{width:16px;height:16px}
.totop[hidden]{display:none}

/* --------------------------------------------------------------------------
   SAZBA ČLÁNKU + REDAKČNÍ VZORY Z EDITORU
   -------------------------------------------------------------------------- */
.prose{margin-top:var(--s5);font-size:1.06rem;line-height:1.72;color:var(--ink-2);max-width:72ch}
.art__main>.prose{width:100%;max-width:none}
@media screen and (min-width:1080px){
  .art__main>.prose{font-size:1.125rem;line-height:1.7}
}
.prose>*+*{margin-top:var(--s4)}
/* Nadpisy v článku se nevyvažují do stejně dlouhých řádků.
   text-wrap:balance rozdělí delší nadpis na dvě přibližně stejné
   poloviny, což u české věty s čárkou vypadá jako zlom uprostřed
   myšlenky. pretty jen zabrání osamocenému slovu na posledním řádku
   a jinak řádek vyplní. Prohlížeč bez podpory pretty se chová jako
   auto, tedy také bez vyvažování. */
.prose h2{margin-top:var(--s7);font-size:var(--t-h2);font-weight:800;color:var(--ink);text-wrap:pretty}
.prose h3{margin-top:var(--s6);font-size:var(--t-h3);font-weight:800;color:var(--ink);text-wrap:pretty}
.prose h4{margin-top:var(--s5);font-size:1.02rem;font-weight:800;color:var(--ink)}
.prose a{color:var(--brand-dk);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:700;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.35rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-top:var(--s2)}
.prose li::marker{color:var(--line-2)}
.prose ol li::marker{color:var(--brand);font-weight:700}
.prose blockquote{margin-inline:0;padding:var(--s2) 0 var(--s2) var(--s5);
  border-left:3px solid var(--brand);font-size:1.1rem;color:var(--ink)}
.prose figure{margin-inline:0}
.prose img{border-radius:var(--r);height:auto}
.prose figcaption{margin-top:var(--s2);font-size:var(--t-xs);color:var(--muted)}
.prose hr{border:0;border-top:1px solid var(--line);margin-block:var(--s6)}
.prose code{background:var(--card-2);border:1px solid var(--line);border-radius:6px;
  padding:.1em .35em;font-size:.92em}
.prose pre{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s4);overflow-x:auto}
.prose pre code{border:0;background:transparent;padding:0}
.prose table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.prose th,.prose td{border:1px solid var(--line);padding:var(--s3);text-align:left;vertical-align:top}
.prose th{background:var(--card-2);font-weight:800;color:var(--ink)}
.prose .wp-block-table{overflow-x:auto}
.prose .alignwide,.prose .alignfull{max-width:none}
.prose .aligncenter{margin-inline:auto;text-align:center}

/* vzory registrované v inc/patterns.php */
.prose .quick-answer,.prose .box,.prose .sources{
  border:1px solid var(--line);border-radius:var(--r);background:var(--card-2);padding:var(--s5)}
.prose .quick-answer{background:var(--brand-wk);border-color:#DCDCFA;border-left:4px solid var(--brand)}
.prose .quick-answer__label{font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-lab);
  text-transform:uppercase;color:var(--brand-dk);margin-bottom:var(--s2)}
.prose .box--warn{background:#FDF4E4;border-color:#EDD6AC}
.prose .box--example{background:var(--b-pojist);border-color:#BFDFCC}
.prose .box h3,.prose .sources h3,.prose .quick-answer h3{margin-top:0}
.prose .checklist{list-style:none;padding-left:0}
.prose .checklist li{position:relative;padding-left:1.9rem}
.prose .checklist li::before{content:"";position:absolute;left:0;top:.45em;width:16px;height:16px;
  border-radius:5px;border:2px solid var(--ok)}
.prose .editorial-steps{counter-reset:st;list-style:none;padding-left:0}
.prose .editorial-steps li{position:relative;padding-left:2.4rem;margin-top:var(--s4)}
.prose .editorial-steps li::before{counter-increment:st;content:counter(st);
  position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:var(--brand);color:#fff;
  font-size:var(--t-xs);font-weight:800}
.prose .sources__note{font-size:var(--t-xs);color:var(--muted)}

/* --------------------------------------------------------------------------
   PANELY A WIDGETY
   -------------------------------------------------------------------------- */
.widget{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4)}
.widget__t{font-size:var(--t-xs);font-weight:800;letter-spacing:var(--ls-lab);
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s2)}
.widget__i{font-size:var(--t-sm);color:var(--muted);line-height:1.55;margin-bottom:var(--s3)}
.widget ul{margin:0}
.widget li{border-bottom:1px solid var(--line)}
.widget li:last-child{border-bottom:0}
.widget li a{display:flex;flex-direction:column;gap:2px;padding-block:var(--s3);
  min-height:var(--tap);justify-content:center;font-size:var(--t-sm);font-weight:600;line-height:1.35}
.widget li a:hover{color:var(--brand-dk)}
.widget li small{font-size:var(--t-xs);font-weight:600;color:var(--muted)}
.facts li{display:flex;gap:var(--s3);justify-content:space-between;align-items:baseline;
  padding-block:var(--s3);font-size:var(--t-sm)}
.facts strong{font-weight:700;color:var(--muted);flex:none}
.facts span{text-align:right}
.facts a:hover{color:var(--brand-dk);text-decoration:underline}

/* výchozí widgety WordPressu uvnitř panelu */
.widget--dynamic select,.widget--dynamic input[type="search"],.widget--dynamic input[type="text"]{
  width:100%;min-height:40px;padding:0 var(--s3);border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--card-2);font-size:var(--t-sm)}
.widget--dynamic .wp-block-search__inside-wrapper{gap:var(--s2)}

/* --------------------------------------------------------------------------
   KOMENTÁŘE
   -------------------------------------------------------------------------- */
.cmt{margin-top:var(--row);padding-top:var(--s5);border-top:1px solid var(--line)}
.cmt__t{font-size:var(--t-h3);font-weight:800;margin-bottom:var(--s4)}
.cmt__l{display:grid;gap:var(--s4)}
.cmt__l ol{margin-top:var(--s4);padding-left:var(--s5);display:grid;gap:var(--s4)}
.cmt__i{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.cmt__h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin-bottom:var(--s2)}
.cmt__h img{width:36px;height:36px;border-radius:50%}
.cmt__n{font-size:var(--t-sm);font-weight:800}
.cmt__d{font-size:var(--t-xs);color:var(--muted)}
.cmt__b{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2)}
.cmt__b p+p{margin-top:var(--s3)}
.cmt__b .comment-reply-link{display:inline-flex;align-items:center;min-height:34px;
  font-size:var(--t-xs);font-weight:700;color:var(--brand-dk)}
.cmt .comment-respond{margin-top:var(--s5)}
.cmt .comment-reply-title{font-size:var(--t-h3);font-weight:800;margin-bottom:var(--s3)}
.cmt label{display:block;font-size:var(--t-xs);font-weight:700;margin-bottom:var(--s1)}
.cmt input[type="text"],.cmt input[type="email"],.cmt input[type="url"],.cmt textarea{
  width:100%;padding:var(--s3);border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--card);font-size:var(--t-sm)}
.cmt textarea{min-height:140px;resize:vertical}
.cmt .comment-form p{margin-bottom:var(--s3)}
.cmt .form-submit input{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 var(--s5);border:0;border-radius:var(--r);
  background:var(--brand);color:#fff;font-size:var(--t-sm);font-weight:700;cursor:pointer;width:auto}
.cmt .form-submit input:hover{background:var(--brand-dk)}
.cmt .comment-notes,.cmt .form-submit+p,.cmt .comment-form-cookies-consent label{
  font-size:var(--t-xs);color:var(--muted);font-weight:400}
.cmt .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:var(--s2)}
.cmt .comment-form-cookies-consent input{width:auto}

/* --------------------------------------------------------------------------
   STRÁNKA A AUTOR
   -------------------------------------------------------------------------- */
.page__b{margin-top:var(--s5);display:grid;gap:var(--s6)}
@media(min-width:1080px){.page__b{grid-template-columns:minmax(0,1fr) 304px;align-items:start}}
.abox{margin-top:var(--s5);display:flex;gap:var(--s5);align-items:flex-start;flex-wrap:wrap;
  padding:var(--s5);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.abox img{width:72px;height:72px;border-radius:50%;flex:none;background:var(--card-2)}
.abox__b{flex:1;min-width:260px}
.abox__n{font-size:var(--t-h2);font-weight:800}
.abox__p{margin-top:var(--s2);font-size:var(--t-sm);color:var(--muted);line-height:1.6;max-width:72ch}

/* --------------------------------------------------------------------------
   DOPLŇKY K TISKU
   -------------------------------------------------------------------------- */
@media print{
  .crumbs,.tools,.toc,.cta,.totop,.prog,.pag,.drawer,.scrim,.seek,.art__side{display:none}
  .art{display:block;max-width:none}
  .prose{max-width:none}
}

/* --------------------------------------------------------------------------
   7.1 — DVĚ TŘÍDY, KTERÉ V PROTOTYPU ZŮSTALY BEZ STYLU

   .mins  — v index-6 byla v markupu karty, ale nikde v CSS, takže by se
            vysypala jako holý text přes obraz. Doplněno jako štítek.
   .gstep--soon — stav kroku průvodce, který zatím není publikovaný.
   -------------------------------------------------------------------------- */
.mins{position:absolute;right:var(--s2);bottom:var(--s2);z-index:2;
  display:inline-flex;align-items:center;gap:.35em;
  padding:.28em .6em;border-radius:var(--r-pill);
  background:rgba(8,12,22,.72);color:#fff;
  font-size:var(--t-xs);font-weight:700;line-height:1.2;
  font-variant-numeric:tabular-nums;backdrop-filter:blur(2px)}
.mins svg{width:12px;height:12px;flex:none}

.gstep--soon{opacity:.66}
.gstep--soon .gstep__n{color:var(--muted)}
.gstep--soon:hover{border-top-color:var(--line-2);background:transparent}

/* --------------------------------------------------------------------------
   7.2 — VLASTNÍ MENU WORDPRESSU
   Prototyp měl v hlavičce holé odkazy. Když redakce zapne vlastní menu,
   přijde navíc obal <ul><li>; tyto tři řádky ho srovnají do téže řady.
   -------------------------------------------------------------------------- */
.nav__l{display:flex;align-items:center;gap:var(--s2)}
.drawer__m .drawer__l>li{border-bottom:1px solid var(--line)}
.drawer__m .drawer__l>li:last-child{border-bottom:0}
.drawer__m .sub-menu{padding-bottom:var(--s2)}
.drawer__m .sub-menu a{display:flex;align-items:center;min-height:40px;padding-left:var(--s3);
  font-size:var(--t-sm);color:var(--ink-2);border-left:2px solid var(--line)}
.brand__logo{width:36px;height:36px;border-radius:11px;object-fit:cover;flex:none}
.foot__d{margin-top:var(--s3);font-size:var(--t-sm);color:var(--muted);line-height:1.55;max-width:42ch}
.cmt__reply{display:inline-flex;margin-top:var(--s2)}
.list__sp{margin-top:var(--s5)}

/* --------------------------------------------------------------------------
   7.3 — DOPLNĚNÍ BAREVNÝCH VARIANT

   Prototyp měl situační dlaždice psané ručně, takže existovaly jen tři
   varianty (hypo, najem, pojist). Motiv odvozuje barvu z kategorie, a
   tónů je šest. Bez těchto řádků by dlaždice z rubrik Nájem, Interiér
   a Nástroje dostaly modrou stopku Realit. Totéž u pásu Nástroje.
   -------------------------------------------------------------------------- */
.sit__a--domac::before{background:var(--c-domac)}
.sit__a--podnik::before{background:var(--c-podnik)}
.sit__a--nastroj::before{background:var(--c-nastroj)}
.band--nastroj .band__h{border-color:var(--c-nastroj)}

/* --------------------------------------------------------------------------
   7.4 — CHOVÁNÍ PŘI MÁLU OBSAHU

   Na rozjetém webu se to nikdy neprojeví, na novém pořád. Mřížky karet
   proto používají auto-fill místo auto-fit: jediný článek zůstane kartou
   o třetině šířky a nenafoukne se přes celý pás na obrázek vysoký 440 px.
   Hero má tři rozvrhy podle toho, kolik článků je k dispozici.
   -------------------------------------------------------------------------- */
/* Pás nástrojů: dlaždice vyplní řádek i tehdy, když jsou zatím tři.
   Pevných šest sloupců nechávalo polovinu pásu prázdnou. */
@media(min-width:900px){
  .hero--solo{grid-template-columns:minmax(0,1fr)}
  .hero--duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero--duo .hero__side{grid-template-rows:minmax(0,1fr)}
}
.hero--solo .hero__main{aspect-ratio:21/9;max-height:460px}
@media(max-width:899px){.hero--solo .hero__main{aspect-ratio:4/3}}

/* ==========================================================================
   ROZBALOVACÍ MENU

   Jedna úroveň. Vlevo podtémata, vpravo tři nejnovější články zvoleného
   podtématu, dole odkaz na celou rubriku a na navazující nástroj.

   POZOR NA DĚDIČNOST: výše v souboru je pravidlo `.nav a`, které dává
   každému odkazu v navigaci výšku 44 px, vnitřní odsazení a podtrhávací
   pseudoprvek. Panel leží uvnitř `.nav`, takže by to obarvilo i jeho
   odkazy. Následující reset to ruší; bez něj se panel rozsype.
   ========================================================================== */

.nav__i{position:relative;display:flex;align-items:center}

.nav .nav__a{position:relative;display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 var(--s2) 0 var(--s3);font-size:var(--t-sm);font-weight:600;border-radius:var(--r-sm)}

/* Spouštěčem je celý odkaz včetně šipky, ne samostatné tlačítko.
   Klik na název rubriky otevře panel; do archivu vede spodní lišta panelu.
   Bez JavaScriptu odkaz normálně naviguje. */
.nav .nav__a--x{gap:var(--s2);padding-right:var(--s2)}
.nav__a--x svg{width:15px;height:15px;flex:none;color:var(--muted);
  transform:rotate(90deg);transition:transform .18s var(--ease),color .18s var(--ease)}
.nav .nav__a--x:hover svg{color:var(--ink)}
.nav__a--x[aria-expanded="true"]{background:var(--brand-wk);color:var(--brand-dk)}
.nav__a--x[aria-expanded="true"] svg{transform:rotate(-90deg);color:var(--brand-dk)}
.nav__t{white-space:nowrap}

/* --- reset zděděných pravidel uvnitř panelu --- */
.nav .mega a{min-height:0;padding:0;font-size:inherit;font-weight:inherit;border-radius:0}
.nav .mega a::after{content:none}

/* --- panel --- */
.mega{position:absolute;top:calc(100% + 10px);left:0;z-index:240;
  width:min(880px,calc(100vw - 2 * var(--s6)));
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);overflow:hidden}
.mega[hidden]{display:none}

/* Barva rubriky drží stejné pravidlo jako všude jinde: tenká lišta, nic víc. */
.mega::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand)}
.mega--hypo::before{background:var(--c-hypo)}
.mega--podnik::before{background:var(--c-podnik)}
.mega--pojist::before{background:var(--c-pojist)}
.mega--domac::before{background:var(--c-domac)}
.mega--nastroj::before{background:var(--c-nastroj)}

.mega__in{display:grid;grid-template-columns:minmax(0,38%) minmax(0,62%)}

/* --- levý sloupec: podtémata --- */
.mega__side{padding:var(--s5) var(--s4) var(--s4);border-right:1px solid var(--line);
  background:var(--card-2)}
.mega__lab{margin:0 0 var(--s3) var(--s3);font-size:var(--t-xs);font-weight:800;
  letter-spacing:var(--ls-lab);text-transform:uppercase;color:var(--muted)}
.mega__subs{list-style:none;margin:0;padding:0}

.nav .mega__sub{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:var(--tap);padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:600;line-height:1.3;color:var(--ink-2);
  transition:background .16s var(--ease),color .16s var(--ease)}
.nav .mega__sub:hover,
.nav .mega__sub.is-active{background:var(--card);color:var(--brand-dk);box-shadow:var(--sh-1)}
.mega__sub-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mega__sub-c{flex:none;font-size:var(--t-xs);font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* --- pravý sloupec: články --- */
.mega__main{padding:var(--s5) var(--s5) var(--s4)}
.mega__grp[hidden]{display:none}
.mega__posts{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}

.nav .mega__post-l{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--s3);
  align-items:center;padding:var(--s2);border-radius:var(--r);
  transition:background .16s var(--ease)}
.nav .mega__post-l:hover{background:var(--card-2)}
.mega__post-i{display:block;overflow:hidden;border-radius:var(--r-sm);
  aspect-ratio:4/3;background:var(--card-2)}
.mega__post-img{width:100%;height:100%;object-fit:cover}
.mega__post-b{display:block;min-width:0}
.mega__post-t{display:block;font-size:var(--t-sm);font-weight:700;line-height:1.35;
  color:var(--ink)}
.nav .mega__post-l:hover .mega__post-t{color:var(--brand-dk)}
.mega__post-m{display:flex;align-items:center;gap:.35em;margin-top:var(--s1);
  font-size:var(--t-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.mega__post-m svg{width:13px;height:13px;flex:none}
.mega__post-sep{color:var(--line-2)}
.mega__empty{margin:0;font-size:var(--t-sm);color:var(--muted);line-height:1.5}

/* --- spodní lišta --- */
.mega__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;padding:var(--s3) var(--s5);border-top:1px solid var(--line);
  background:var(--card-2)}
.nav .mega__all{font-size:var(--t-sm);font-weight:700;color:var(--brand-dk)}
.nav .mega__all:hover{text-decoration:underline}
.nav .mega__tool{display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--t-xs);font-weight:700;color:var(--muted)}
.nav .mega__tool svg{width:15px;height:15px}
.nav .mega__tool:hover{color:var(--brand-dk)}

/* Panel u posledních rubrik nesmí vyjet z obrazovky. */
@media(min-width:1080px){
  .nav__i:nth-last-child(-n+2) .mega{left:auto;right:0}
}

/* Panel je jen pro ukazovací zařízení s dostatkem místa. Pod tímto zlomem
   je celá lišta skrytá a orientaci přebírá mobilní panel. */
@media(max-width:1079px){
  .mega{display:none}
}

/* ==========================================================================
   MOBILNÍ PANEL — doplněk
   Menu nemá končit seznamem odkazů. Pod rubrikami jsou poslední články
   a odkazy na nástroje, aby se z panelu dalo někam dojít.
   ========================================================================== */
.drawer__x{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.drawer__xl{margin:0 0 var(--s3);font-size:var(--t-xs);font-weight:800;
  letter-spacing:var(--ls-lab);text-transform:uppercase;color:var(--muted)}
.drawer__p{display:grid;grid-template-columns:60px minmax(0,1fr);gap:var(--s3);
  align-items:center;padding-block:var(--s2)}
.drawer__pi{display:block;overflow:hidden;border-radius:var(--r-sm);aspect-ratio:4/3;
  background:var(--card-2)}
.drawer__pi img{width:100%;height:100%;object-fit:cover}
.drawer__pt{display:block;font-size:var(--t-sm);font-weight:700;line-height:1.35}
.drawer__pm{display:block;margin-top:2px;font-size:var(--t-xs);color:var(--muted);
  font-variant-numeric:tabular-nums}
.drawer__tools{display:flex;flex-wrap:wrap;gap:var(--s2)}
.drawer__tool{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);
  padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--t-xs);font-weight:700}
.drawer__tool svg{width:15px;height:15px}
.drawer__tool:hover{border-color:var(--brand);color:var(--brand-dk)}

/* 3.5 — visible introduction, real series, resilient article layouts. */
[hidden]{display:none!important}
.home-intro{padding-block:clamp(1.75rem,4vw,3.5rem) 1.5rem;max-width:58rem}
.home-intro h1{font-size:clamp(1.8rem,3.1vw,2.7rem);font-weight:800;line-height:1.14;letter-spacing:-.025em;text-wrap:balance}
.home-intro>p{margin-top:1rem;font-size:1.08rem;line-height:1.65;max-width:70ch;color:var(--ink-2)}
.home-page-content{margin-bottom:2rem}
.art__main,.page__b>article,.list>div,.art__side,.prose{min-width:0}
.prose{overflow-wrap:anywhere}
.prose pre{max-width:100%;overflow-x:auto}
.prose .wp-block-table,.vnb-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.vnb-table-scroll:focus-visible,.prose .wp-block-table:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.prose th,.prose td{overflow-wrap:normal;word-break:normal;min-width:7rem}
.series-nav,.series-index,.category-guide{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:clamp(1rem,2.5vw,1.5rem);margin-block:1.5rem}
.series-nav__home{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700;color:var(--brand-dk)}
.series-nav__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:.75rem}
.series-nav__link{display:flex;flex-direction:column;justify-content:center;gap:.35rem;border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem;font-weight:600;min-width:0;overflow-wrap:anywhere}
.series-nav__label{font-size:.875rem;font-weight:400;color:var(--muted)}
.series-nav a:hover,.series-index a:hover,.category-guide h2 a:hover{color:var(--brand-dk);text-decoration:none;background:var(--card-2)}
.series-index__title,.category-guide h2{font-size:1.3rem;font-weight:800;line-height:1.35}
.series-index__intro{margin-top:.5rem;color:var(--muted);line-height:1.55}
.series-index__list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:0}
.series-index__item+.series-index__item{border-top:1px solid var(--line)}
.series-index__link{display:flex;align-items:baseline;gap:.7rem;padding:.85rem .35rem;font-weight:600;line-height:1.5;min-height:2.75rem;border-radius:.3rem}
.series-index__link[aria-current=page]{background:var(--brand-wk);color:var(--brand-dk)}
.guide .series-index,.category-guide>.series-index{border:0;background:transparent;padding:0;margin-bottom:0}
.category-guide>.eyebrow{margin-bottom:.6rem}
.category-guide h2{font-size:clamp(1.25rem,2.2vw,1.8rem)}
.no-js-nav{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding-block:1rem}
.no-js-nav a{font-weight:700;min-height:2.75rem;display:inline-flex;align-items:center}
.no-js-nav .sform{flex:1 1 20rem;min-width:0;max-width:100%}
.protected-content{padding-block:2rem}
.nav__home{flex:none}
@media(max-width:600px){.series-nav__links{grid-template-columns:1fr}.home-intro>p{font-size:1rem}}
@media(min-width:1080px) and (max-width:1279px){.top__in{gap:.6rem}.find{max-width:12rem}.brand__t{font-size:1rem}.nav{gap:0}.nav__a{padding-inline:.55rem}}
@media print{.home-intro{padding:0}.series-nav,.series-index,.category-guide,.no-js-nav{display:none}.page__b{display:block}.vnb-table-scroll,.prose .wp-block-table{overflow:visible}}

.series-nav__home{flex-direction:column;align-items:flex-start;gap:.25rem;padding:.5rem;border-radius:var(--r);line-height:1.45}
.series-index__list{list-style:decimal;padding-left:1.8rem}
.series-index__item::marker{color:var(--brand-dk);font-weight:700;font-variant-numeric:tabular-nums}
.vnb-table-scroll{min-width:0}

.drawer__m .drawer__l>li>a{display:flex;align-items:center;min-height:2.75rem;font-size:1rem;font-weight:700;padding-block:.5rem}
.drawer__m .sub-menu a{display:flex;align-items:center;min-height:2.75rem;padding:.5rem 0 .5rem 1rem}

@media(max-width:1079px){
  .top__in{gap:.5rem}
  .top .brand{flex:1;min-width:0}
  .top .brand__t{min-width:0;overflow-wrap:break-word}
  .top .brand__t small{white-space:normal;line-height:1.3}
  .top .ico,.top .acts{flex:none}
}
@media(max-width:559px){.top .brand__t small{display:none}.top .brand{gap:.5rem}}