/* Tematické stránky (generuje _stranky/build.py). Navazuje na styles.css,
   nic v něm nepřepisuje — jen přidává bloky, které ruční stránky nemají. */

/* Krátká odpověď hned pod hero — pro čtenářku i pro AI vyhledávače */
.odpoved{max-width:var(--wrap);margin:0 auto var(--sp);padding:0 var(--pad)}
.odpoved-in{background:var(--ivory);border-left:3px solid var(--gold);padding:30px 34px;max-width:880px}
.odpoved-in .eyebrow{margin-bottom:10px;color:var(--brand)}
.odpoved-in p{font-size:20px;line-height:1.6;color:var(--grey-1)}
.odpoved-in ul{margin:14px 0 0 1.1em;list-style:disc}
.odpoved-in li{font-size:18px;line-height:1.55;margin:4px 0;color:var(--grey-1)}

/* Dlouhý text průvodce */
.clanek{padding:var(--sp) 0}
.clanek.ivory{background:var(--ivory)}
.clanek .wrap>h2{margin-bottom:22px}
.clanek h3{font-family:var(--serif);font-size:clamp(24px,2.4vw,30px);font-weight:500;margin:38px 0 12px;max-width:var(--measure)}
.clanek p{max-width:var(--measure);margin:0 0 16px;line-height:1.7}
.clanek ul,.clanek ol{max-width:var(--measure);margin:0 0 18px 1.2em}
.clanek ul{list-style:disc}.clanek ol{list-style:decimal}
.clanek li{margin:6px 0;line-height:1.6}
.clanek a:not(.btn){color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.clanek a:not(.btn):hover{color:var(--brand-dark)}
.clanek .btn{margin-top:14px}

/* Srovnávací tabulka */
.srovnani-obal{overflow-x:auto;margin:26px 0 10px;-webkit-overflow-scrolling:touch}
.srovnani{border-collapse:collapse;width:100%;min-width:640px;font-size:17px;background:var(--white)}
.srovnani th,.srovnani td{border-bottom:1px solid var(--grey-4);padding:14px 16px;text-align:left;vertical-align:top;line-height:1.5}
.srovnani thead th{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);border-bottom:2px solid var(--grey-1)}
.srovnani tbody th{font-weight:500;color:var(--grey-1);white-space:nowrap}

/* Obsah stránky (kotvy) */
.toc{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) 10px}
.toc ol{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:0;padding:0}
.toc a{display:inline-block;border:1px solid var(--grey-4);padding:8px 14px;font-size:15px;color:var(--grey-2);border-radius:999px;transition:border-color .3s,color .3s}
.toc a:hover{border-color:var(--grey-1);color:var(--grey-1)}

/* Video proměny (svislé, klik = přehrát) */
.promena{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(28px,5vw,70px);align-items:center;margin-top:40px}
.promena .vid,.promena figure{width:100%;max-width:340px}
.promena figure img{width:100%;height:auto;display:block}
.promena-txt p{max-width:58ch}
.promena-txt ol{margin:12px 0 0 1.2em;list-style:decimal}
.promena-txt li{margin:6px 0;line-height:1.55}
@media (max-width:820px){.promena{grid-template-columns:1fr}.promena .vid,.promena figure{margin:0 auto;max-width:300px}}

/* Související služby */
.souvisejici{background:var(--ivory);padding:var(--sp) 0}
.souv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:34px}
.souv{display:block;background:var(--white);border:1px solid var(--grey-4);padding:22px 24px;transition:border-color .3s,transform .3s var(--ease)}
.souv:hover{border-color:var(--grey-1);transform:translateY(-2px)}
.souv b{display:block;font-family:var(--serif);font-size:23px;font-weight:500;color:var(--grey-1)}
.souv span{display:block;margin-top:6px;font-size:16px;color:var(--grey-3);line-height:1.5}

/* Autorka textu (E-E-A-T) */
.autor{display:flex;gap:22px;align-items:center;padding-top:10px;padding-bottom:var(--sp)}
.autor img{width:96px;height:128px;object-fit:cover;flex:none}
.autor p{font-size:17px;line-height:1.6;color:var(--grey-2);max-width:var(--measure)}
.autor .eyebrow{margin-bottom:6px}

/* Seznam všech služeb v patičce */
.f-sluzby{max-width:var(--wide);margin:0 auto;padding:26px var(--pad) 6px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;border-top:1px solid rgba(0,0,0,.08)}
.f-sluzby span{width:100%;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--grey-3);margin-bottom:4px}
.f-sluzby a{color:var(--grey-2)}
.f-sluzby a:hover{color:var(--grey-1);text-decoration:underline}

/* Mapa okolí na lokální stránce */
.mapa{width:100%;aspect-ratio:16/9;border:0;margin-top:26px;background:var(--blush)}

@media (max-width:640px){
  .odpoved-in{padding:24px 22px}
  .odpoved-in p{font-size:18px}
  .autor{align-items:flex-start}
  .autor img{width:72px;height:96px}
}

/* Hero se svislou fotkou proměny (9:16) */
.hero-split figure.hero-vysoky img{width:min(340px,80vw);height:auto;aspect-ratio:9/16;object-fit:cover}

/* Galerie „Z našeho křesla“ na tematických stránkách */
.kreslo{padding:var(--sp) 0;background:var(--white)}
.zk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,270px));justify-content:center;gap:clamp(10px,1.6vw,18px);margin-top:36px}
.zk-grid figure{aspect-ratio:3/4;overflow:hidden;margin:0}
.zk-grid figure.ctverec{aspect-ratio:1/1}
.zk-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.zk-grid figure:hover img{transform:scale(1.04)}
.kreslo .vids-grid{margin-top:26px}
@media (max-width:640px){.zk-grid{grid-template-columns:repeat(2,1fr);gap:6px}}

/* Kroky mají v obsahu inline počet sloupců — na mobilu je přebít na jeden */
@media (max-width:880px){.steps-grid{grid-template-columns:1fr!important}}