/* ============================================================
   clanek.css — sdílený stylesheet pro články blogu
   ============================================================ */
:root {
  --bg: #f7f6f3; --ink: #141210; --muted: #7a7671; --border: #e4e2dc;
  --blue: #1a6fb5; --blue-mid: #2a87d4; --blue-light: #deeef9; --blue-pale: #f0f7fd;
  --orange: #d95b22; --orange-light: #fdf0e8;
  --red: #c0392b; --red-light: #fdf0ee;
  --green: #1a9e5e; --green-light: #e9f7f0;
  --white: #ffffff;
  --serif: "Instrument Serif", serif; --sans: "Outfit", sans-serif;
  --radius: 16px; --shadow: 0 4px 24px rgba(26,111,181,.08); --shadow-lg: 0 12px 48px rgba(26,111,181,.13);
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300; line-height:1.7; }

/* NAV */
nav { position:sticky; top:0; z-index:200; display:flex; align-items:center; justify-content:space-between;
      padding:1rem 5vw; background:rgba(247,246,243,.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.nav-logo { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); }
.nav-logo-text { font-family:var(--serif); font-size:1.3rem; }
.btn-ghost { background:none; border:1.5px solid var(--border); color:var(--ink); padding:.5rem 1.1rem;
             border-radius:8px; text-decoration:none; font-size:.875rem; transition:border-color .2s, background .2s; }
.btn-ghost:hover { border-color:var(--blue); background:var(--blue-pale); }
.btn-primary { background:var(--blue); color:#fff; border:none; padding:.55rem 1.25rem; border-radius:8px;
               text-decoration:none; font-size:.875rem; font-weight:500; display:inline-block; transition:background .2s; }
.btn-primary:hover { background:var(--blue-mid); }

/* ── Hlavička článku ── */
.art-head { padding:3rem 5vw 2rem; background:linear-gradient(135deg, var(--bg) 0%, var(--blue-pale) 100%);
            border-bottom:1px solid var(--border); }
.art-head-inner { max-width:760px; margin:0 auto; }
.art-breadcrumb { font-size:.82rem; color:var(--muted); margin-bottom:1.25rem; }
.art-breadcrumb a { color:var(--muted); text-decoration:none; }
.art-breadcrumb a:hover { color:var(--blue); text-decoration:underline; }
.art-tag { display:inline-block; background:var(--blue-light); color:var(--blue); padding:.28rem .8rem;
           border-radius:100px; font-size:.75rem; font-weight:600; letter-spacing:.03em; margin-bottom:1rem; }
.art-tag.orange { background:var(--orange-light); color:var(--orange); }
.art-head h1 { font-family:var(--serif); font-size:clamp(1.9rem,4.5vw,3rem); line-height:1.18;
               letter-spacing:-.02em; margin-bottom:1rem; font-weight:400; }
.art-perex { font-size:1.08rem; color:var(--muted); line-height:1.75; margin-bottom:1.75rem; }

/* Autor */
.art-author { display:flex; align-items:center; gap:.85rem; padding-top:1.25rem; border-top:1px solid var(--border); }
.art-author img { width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid var(--white); box-shadow:var(--shadow); }
.art-author-name { font-size:.9rem; font-weight:600; }
.art-author-name a { color:var(--ink); text-decoration:none; }
.art-author-name a:hover { color:var(--blue); }
.art-author-meta { font-size:.78rem; color:var(--muted); }

/* ── Tělo článku ── */
.art-body { max-width:760px; margin:0 auto; padding:3rem 5vw 4rem; }
.art-body h2 { font-family:var(--serif); font-size:clamp(1.45rem,3vw,2rem); line-height:1.25; font-weight:400;
               margin:2.75rem 0 1rem; letter-spacing:-.01em; scroll-margin-top:5rem; }
.art-body h2:first-child { margin-top:0; }
.art-body h3 { font-size:1.12rem; font-weight:600; margin:1.85rem 0 .6rem; }
.art-body p { margin-bottom:1.15rem; font-size:1.02rem; }
.art-body a { color:var(--blue); }
.art-body strong { font-weight:600; }
.art-body ul, .art-body ol { margin:0 0 1.25rem 1.35rem; }
.art-body li { margin-bottom:.55rem; font-size:1.02rem; }

/* Obsah (kotvy) */
.art-toc { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:1.35rem 1.6rem; margin-bottom:2.5rem; }
.art-toc-title { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-bottom:.85rem; }
.art-toc ol { margin:0 0 0 1.15rem; }
.art-toc li { margin-bottom:.4rem; font-size:.92rem; }
.art-toc a { color:var(--blue); text-decoration:none; }
.art-toc a:hover { text-decoration:underline; }

/* Zvýrazněné bloky */
.art-note { background:var(--blue-pale); border-left:3px solid var(--blue); border-radius:0 10px 10px 0;
            padding:1.1rem 1.35rem; margin:1.75rem 0; font-size:.95rem; }
.art-note strong { color:var(--blue); }
.art-warn { background:var(--red-light); border-left:3px solid var(--red); border-radius:0 10px 10px 0;
            padding:1.25rem 1.45rem; margin:1.75rem 0; }
.art-warn-title { font-weight:700; color:var(--red); margin-bottom:.6rem; font-size:1rem; }
.art-warn ul { margin:.5rem 0 0 1.2rem; }
.art-warn li { font-size:.95rem; margin-bottom:.4rem; }
.art-tip { background:var(--green-light); border-left:3px solid var(--green); border-radius:0 10px 10px 0;
           padding:1.1rem 1.35rem; margin:1.75rem 0; font-size:.95rem; }
.art-tip strong { color:var(--green); }

/* Cvik */
.art-exercise { background:var(--white); border:1px solid var(--border); border-radius:12px;
                padding:1.4rem 1.6rem; margin-bottom:1rem; }
.art-exercise h3 { margin-top:0; display:flex; align-items:center; gap:.6rem; }
.art-exercise-num { background:var(--blue); color:#fff; width:26px; height:26px; border-radius:50%;
                    display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; flex-shrink:0; }
.art-exercise p { margin-bottom:.6rem; font-size:.97rem; }
.art-exercise p:last-child { margin-bottom:0; }
.art-exercise-meta { font-size:.85rem; color:var(--muted); background:var(--bg); border-radius:7px;
                     padding:.45rem .8rem; display:inline-block; margin-top:.5rem; }

/* Tabulka */
.art-table-wrap { overflow-x:auto; margin:1.75rem 0; }
.art-body table { width:100%; border-collapse:collapse; font-size:.95rem; background:var(--white);
                  border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.art-body th { background:var(--bg); text-align:left; padding:.8rem 1rem; font-weight:600; font-size:.88rem; }
.art-body td { padding:.8rem 1rem; border-top:1px solid var(--border); vertical-align:top; }

/* FAQ */
.art-faq { border:1px solid var(--border); border-radius:11px; background:var(--white); margin-bottom:.7rem; overflow:hidden; }
.art-faq summary { cursor:pointer; padding:1.1rem 1.4rem; font-weight:500; font-size:1rem; list-style:none;
                   display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.art-faq summary::-webkit-details-marker { display:none; }
.art-faq summary::after { content:'+'; font-size:1.35rem; color:var(--blue); flex-shrink:0; transition:transform .25s; line-height:1; }
.art-faq[open] summary::after { transform:rotate(45deg); }
.art-faq[open] { border-color:var(--blue-light); }
.art-faq-a { padding:0 1.4rem 1.25rem; color:var(--muted); font-size:.96rem; }

/* CTA v článku */
.art-cta { background:linear-gradient(135deg, var(--blue) 0%, #134e80 100%); border-radius:16px;
           padding:2rem 1.9rem; margin:2.75rem 0; text-align:center; color:#fff; }
.art-cta h3 { font-family:var(--serif); font-size:1.5rem; font-weight:400; margin:0 0 .6rem; color:#fff; }
.art-cta p { color:rgba(255,255,255,.85); font-size:.97rem; margin-bottom:1.4rem; }
.art-cta-btn { display:inline-block; background:var(--orange); color:#fff; padding:.9rem 2rem; border-radius:10px;
               text-decoration:none; font-weight:600; font-size:1rem; box-shadow:0 8px 26px rgba(217,91,34,.4);
               transition:transform .18s, background .2s; }
.art-cta-btn:hover { background:#e86a32; transform:translateY(-2px); }

/* Zdroje + disclaimer */
.art-sources { margin-top:3rem; padding-top:1.75rem; border-top:1px solid var(--border); }
.art-sources h2 { font-size:1.1rem !important; font-family:var(--sans) !important; font-weight:600; margin:0 0 .85rem; }
.art-sources ol { margin-left:1.2rem; }
.art-sources li { font-size:.88rem; color:var(--muted); margin-bottom:.5rem; }
.art-sources a { color:var(--blue); word-break:break-word; }
.art-disclaimer { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:1.1rem 1.35rem;
                  margin-top:1.5rem; font-size:.85rem; color:var(--muted); line-height:1.65; }

/* Další články */
.art-more { background:var(--white); border-top:1px solid var(--border); padding:3.5rem 5vw; }
.art-more-inner { max-width:760px; margin:0 auto; }
.art-more h2 { font-family:var(--serif); font-size:1.6rem; font-weight:400; margin-bottom:1.5rem; }
.art-more-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.art-more-card { display:block; border:1px solid var(--border); border-radius:12px; padding:1.35rem;
                 text-decoration:none; color:var(--ink); transition:border-color .2s, transform .2s, box-shadow .2s; }
.art-more-card:hover { border-color:var(--blue); transform:translateY(-3px); box-shadow:var(--shadow); }
.art-more-card .t { font-size:.72rem; color:var(--blue); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem; }
.art-more-card .h { font-weight:600; font-size:1rem; line-height:1.4; }

/* FOOTER */
footer { background:var(--ink); color:rgba(255,255,255,.6); padding:2.5rem 5vw; text-align:center; }
footer div { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }
footer a { color:rgba(255,255,255,.65); text-decoration:none; font-size:.875rem; }
footer a:hover { color:#fff; }
.footer-copy { font-size:.8rem; color:rgba(255,255,255,.35); display:block !important; }

@media (max-width:640px) {
  .art-more-grid { grid-template-columns:1fr; }
  .art-body { padding:2rem 1.4rem 3rem; }
  .art-head { padding:2rem 1.4rem 1.75rem; }
}