/* ───────────────────────────────────────────────────────────────────────────
   styl.css – SDÍLENÝ VZHLED CELÉHO WEBU.
   Tohle je jediné místo, kde se mění vzhled. Soubor je připojený na každé
   stránce, takže úprava tady se hned projeví všude (bez generování).
   Jednotlivý článek si může přidat vlastní <style> a tím cokoli přebít.
   ─────────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#fafafa;
  --surface:#ffffff;
  --text:#1b1b1a;
  --muted:#6a6a66;
  --faint:#9a9a93;
  --border:#e7e6e2;
  --border-strong:#d4d3ce;
  --accent:#1b1b1a;
  --link:#2f5d86;
  --maxw:1120px;
  --read:720px;
  --font-serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.6;font-size:17px;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* viditelné zvýraznění při procházení klávesnicí (přístupnost) */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;
}

/* ── Sdílený proužek (masthead) ────────────────────────────────────────────── */
.nd-mh{background:var(--surface);border-bottom:1px solid var(--border);}
.nd-mh__inner{max-width:var(--maxw);margin:0 auto;padding:20px 20px 0;}
.nd-mh__brand{display:inline-block;font-size:26px;font-weight:700;letter-spacing:-0.01em;color:var(--text);}
.nd-mh__tagline{margin:2px 0 0;font-size:14px;color:var(--muted);}
.nd-mh__nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:14px;padding-bottom:2px;}
.nd-mh__nav a{display:inline-block;padding:10px 0;font-size:15px;color:#3a3a36;border-bottom:2px solid transparent;}
.nd-mh__nav a:hover{color:var(--text);border-bottom-color:var(--border-strong);}
.nd-mh__nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--accent);}

/* ── Sdílená patička ───────────────────────────────────────────────────────── */
.nd-ft{border-top:1px solid var(--border);background:var(--surface);}
.nd-ft__inner{max-width:var(--maxw);margin:0 auto;padding:24px 20px 36px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;}
.nd-ft__inner a{color:var(--muted);}
.nd-ft__inner a:hover{color:var(--text);text-decoration:underline;}
.nd-ft__sep{color:#c9c8c2;}

/* ── Výpis článků (úvodní stránka, kategorie, stránkování) ─────────────────── */
main .wrap{padding-top:34px;padding-bottom:50px;}
.section-title{font-size:15px;font-weight:600;color:var(--muted);margin:0 0 18px;}

.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 20px;}
.search{flex:1 1 240px;max-width:420px;padding:10px 14px;font-size:15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);}
.search:focus{outline:none;border-color:var(--border-strong);}
.active-cat{font-size:14px;color:var(--muted);}
.active-cat strong{color:var(--text);font-weight:600;}
.active-cat a{color:var(--text);text-decoration:underline;}

.articles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  grid-auto-rows:96px;
  grid-auto-flow:dense;
  gap:16px;
}
.tile--s1{grid-row:span 1;}
.tile--s2{grid-row:span 2;}
.tile--s3{grid-row:span 3;}
.tile{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tile:hover{border-color:var(--border-strong);box-shadow:0 8px 24px rgba(0,0,0,.07);transform:translateY(-3px);}
.tile a{display:flex;flex-direction:column;height:100%;padding:14px;}
.tile__media{margin:-14px -14px 12px;aspect-ratio:16/9;background:#eee;overflow:hidden;}
.tile__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
.tile:hover .tile__media img{transform:scale(1.06);}
.tile__cat{font-size:12px;color:var(--faint);margin-bottom:3px;}
.tile__title{font-size:18px;font-weight:600;line-height:1.3;margin:0;letter-spacing:-0.01em;}
.tile__perex{font-size:14px;color:var(--muted);margin:8px 0 0;}
.tile__date{font-size:12px;color:var(--faint);margin-top:auto;padding-top:10px;}
.empty{color:var(--muted);font-size:16px;grid-column:1/-1;}

/* Stránkování */
.pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:28px 0 0;font-size:15px;}
.pagination a,.pagination span{display:inline-block;padding:8px 13px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);}
.pagination a:hover{border-color:var(--border-strong);}
.pagination .is-current{background:var(--accent);color:#fff;border-color:var(--accent);}
.pagination .is-disabled{color:var(--faint);background:transparent;border-color:transparent;}

/* Blok dalších magazínů */
.more{border-top:1px solid var(--border);}
.more .wrap{padding-top:34px;padding-bottom:44px;}
.mags{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.mag{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
.mag:hover{border-color:var(--border-strong);box-shadow:0 8px 24px rgba(0,0,0,.07);transform:translateY(-3px);}
.mag__media{aspect-ratio:16/9;background:var(--surface);display:flex;align-items:center;justify-content:center;}
.mag__media img{width:100%;height:100%;object-fit:contain;}
.mag__body{padding:14px;}
.mag__src{display:block;font-size:12px;color:var(--faint);margin-bottom:3px;}
.mag__title{font-size:18px;font-weight:600;line-height:1.3;margin:0;letter-spacing:-0.01em;}
.mag__desc{font-size:14px;color:var(--muted);margin:8px 0 0;}

/* ── Článek: dvousloupcové rozložení (text vlevo, panel vpravo) ────────────── */
.article-wrap{
  max-width:calc(var(--read) + 320px);
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:minmax(0,var(--read)) 260px;
  gap:48px;
  align-items:start;
}
.article-main{min-width:0;font-size:18px;line-height:1.75;}
.article-aside{position:sticky;top:24px;font-size:14px;}

.crumbs{font-size:14px;color:var(--muted);padding-top:22px;}
.crumbs a{color:var(--muted);}
.crumbs a:hover{text-decoration:underline;}
.crumbs span{color:var(--faint);}

.article-main h1{font-family:var(--font-serif);font-weight:600;font-size:38px;line-height:1.15;letter-spacing:-0.01em;margin:14px 0 0;}
.dek{font-size:20px;color:var(--muted);margin:14px 0 0;line-height:1.5;}

figure{margin:26px 0;}
figure img{width:100%;height:auto;border:1px solid var(--border);border-radius:12px;}
figcaption{font-size:14px;color:var(--faint);margin-top:8px;text-align:center;}

#nd-article{padding:8px 0 16px;}
#nd-article p{margin:0 0 18px;}
#nd-article h2{font-family:var(--font-serif);font-weight:600;font-size:26px;line-height:1.25;margin:32px 0 10px;scroll-margin-top:20px;}
#nd-article h3{font-weight:600;font-size:19px;line-height:1.3;margin:24px 0 6px;scroll-margin-top:20px;}
#nd-article ul,#nd-article ol{margin:0 0 18px;padding-left:24px;}
#nd-article li{margin:0 0 10px;}
#nd-article blockquote{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--border-strong);background:#f4f3ef;border-radius:0 10px 10px 0;color:#3a3a36;font-style:italic;}
/* odkazy v textu článku jsou jasně poznat (barva + podtržení) */
#nd-article a,.dek a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;}
#nd-article a:hover,.dek a:hover{color:var(--text);text-decoration-thickness:2px;}
/* tučné zvýraznění klíčových slov a důležitých údajů */
#nd-article strong,#nd-article b{font-weight:700;color:var(--text);}

/* Nepovinné: klíčové body (TL;DR) */
.tldr{background:#f4f6f4;border:1px solid #e2e7e2;border-radius:12px;padding:16px 18px;margin:22px 0;}
.tldr h2{font-family:var(--font-sans);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 8px;}
.tldr ul{margin:0;padding-left:20px;}
.tldr li{margin:0 0 6px;}

/* Nepovinné: časté otázky */
.faq{margin:30px 0 0;}
.faq details{border-top:1px solid var(--border);padding:12px 0;}
.faq summary{cursor:pointer;font-weight:600;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";float:right;color:var(--faint);}
.faq details[open] summary::after{content:"–";}
.faq p{margin:10px 0 0;color:var(--muted);}

/* Postranní panel (generuje se sám) */
.aside-box{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:16px 18px;}
.aside-meta{margin:0 0 4px;}
.aside-meta dt{font-size:12px;color:var(--faint);}
.aside-meta dd{margin:0 0 10px;color:var(--text);}
.aside-sep{border:0;border-top:1px solid var(--border);margin:14px 0;}
.toc summary{cursor:pointer;font-weight:600;list-style:none;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.toc summary::-webkit-details-marker{display:none;}
.toc nav{margin-top:10px;}
.toc a{display:block;padding:4px 0;color:var(--muted);line-height:1.35;border-left:2px solid transparent;padding-left:10px;margin-left:-10px;}
.toc a:hover{color:var(--text);}
.toc a.is-active{color:var(--text);border-left-color:var(--accent);}
.toc a.lvl-3{padding-left:22px;font-size:13px;}
.aside-tags{display:flex;flex-wrap:wrap;gap:8px;}
.aside-tags a{font-size:13px;color:var(--muted);background:#f1f0ec;border-radius:999px;padding:4px 11px;}
.aside-tags a:hover{color:var(--text);background:#e7e6e2;}
.aside-label{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px;}
.aside-back a{color:var(--text);}
.aside-back a:hover{text-decoration:underline;}

/* ── Hledání: výsledky ─────────────────────────────────────────────────────── */
.search-results{margin-top:6px;}
.search-results .tile{margin-bottom:12px;}

/* ── Responzivní: na úzké obrazovce vše do jednoho sloupce ─────────────────── */
@media (max-width:900px){
  .article-wrap{grid-template-columns:1fr;gap:0;}
  /* na mobilu panel přijde NAD text, ale jen jeho meta část; pořadí řeší app.js */
  .article-aside{position:static;margin-top:18px;}
}
@media (max-width:480px){
  body{font-size:16px;}
  .article-main{font-size:17px;}
  .article-main h1{font-size:30px;}
  #nd-article h2{font-size:23px;}
  .dek{font-size:18px;}
  .articles{grid-template-columns:1fr;}
}

/* ── Magazínové obrázky obtékané textem (fig-left / fig-right) ──────────────── */
#nd-article::after{content:"";display:table;clear:both;}
#nd-article figure{margin:6px 0 16px;}
#nd-article figure img{border-radius:8px;}
#nd-article figure.fig-left,#nd-article figure.fig-right{max-width:48%;}
#nd-article figure.fig-left{float:left;margin:8px 28px 16px 0;}
#nd-article figure.fig-right{float:right;margin:8px 0 16px 28px;}
#nd-article figcaption a{color:var(--muted);text-decoration:underline;}
@media (max-width:600px){
  #nd-article figure.fig-left,#nd-article figure.fig-right{float:none;max-width:100%!important;margin:18px auto;}
  #nd-article figure.fig-left figcaption,#nd-article figure.fig-right figcaption{text-align:center;}
}

/* ── Prameny pod článkem ───────────────────────────────────────────────────── */
.sources{border-top:1px solid var(--border);margin-top:30px;padding-top:18px;font-size:15px;color:var(--muted);}
.sources h2{font-family:var(--font-sans);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:0 0 10px;font-weight:700;}
.sources ul{margin:0;padding-left:20px;} .sources li{margin:0 0 7px;line-height:1.5;}
.sources a{color:var(--link);text-decoration:underline;}
.sources .note{font-size:13px;color:var(--faint);margin:12px 0 0;}

/* ── Cestování: tlačítko fotogalerie a hashtagy ────────────────────────────── */
.gallery-btn{display:inline-block;margin:4px 0 8px;padding:11px 18px;border:1px solid var(--border-strong);border-radius:10px;font-weight:600;color:var(--text);background:var(--surface);}
.gallery-btn:hover{background:#f4f3ef;border-color:#bdbcb6;}
.hashtags{color:var(--faint);font-size:14px;}
.morelinks a{color:var(--link);text-decoration:underline;}