/* =====================================================================
   ITDelivery – článkoviště (redesign)
   /clanek/{slug}, /clanky, /tema/{slug}
   Vizuálně navazuje na nový web / e-shop: světlé pozadí, tmavě modrá,
   tyrkysová, čisté karty, radius 10px, pilulková tlačítka.
   Globální --brand / --brand-dark / --ink / --bg-dark přicházejí z default.css.
   Vše je scopované pod .art-page, ať se nebije s katalogem.
   ===================================================================== */
.art-page{
  --art-ink:#111827;
  --art-muted:#5b6472;
  --art-line:#e5e7eb;
  --art-bg:#f3f4f6;
  --art-card:#ffffff;
  --art-brand:#00c4cc;
  --art-brand-dark:#0295a0;
  --art-dark:#293948;
  --art-ok:#0a7d34;
  --art-ok-bg:#e7f6ec;
  --art-warn:#8a5a00;
  --art-warn-bg:#fdf3e2;
  --art-wrap:1200px;
  --art-measure:820px;
  --art-radius:10px;

  background:var(--art-bg);
  color:var(--art-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
}
.art-page *{box-sizing:border-box}
.art-page img{max-width:100%;height:auto;display:block}
.art-page a{color:var(--art-brand-dark);text-decoration:none}
.art-page a:hover{text-decoration:underline}

.art-wrap{width:100%;max-width:var(--art-wrap);margin:0 auto;padding:0 24px}
@media(max-width:640px){.art-wrap{padding:0 16px}}
.art-page .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* pilulky */
.art-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;line-height:1;padding:12px 20px;border-radius:999px;
  border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.art-btn--primary{background:var(--art-brand);color:#fff}
.art-btn--primary:hover{background:var(--art-brand-dark);color:#fff;text-decoration:none}
.art-btn--ghost{background:#fff;color:var(--art-ink);border-color:var(--art-line)}
.art-btn--ghost:hover{border-color:var(--art-brand);color:var(--art-brand-dark);text-decoration:none}
.art-btn--ondark{background:var(--art-brand);color:#fff}
.art-btn--ondark:hover{background:#fff;color:var(--art-dark);text-decoration:none}

/* ---------- shop bar pod sdílenou hlavičkou ---------- */
.art-shopbar{background:#fff;border-bottom:1px solid var(--art-line)}
.art-shopbar__inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 0}
.art-shopbar__primary{
  display:inline-flex;align-items:center;gap:8px;background:var(--art-brand);color:#fff;
  font-weight:700;font-size:14px;padding:9px 18px;border-radius:999px;
}
.art-shopbar__primary:hover{background:var(--art-brand-dark);color:#fff;text-decoration:none}
.art-shopbar__link{color:var(--art-ink);font-size:14px;font-weight:600}
.art-shopbar__link:hover{color:var(--art-brand-dark);text-decoration:none}
.art-shopbar__sep{color:var(--art-line)}
.art-shopbar__note{margin-left:auto;color:var(--art-muted);font-size:13px}
@media(max-width:720px){.art-shopbar__note{display:none}}

/* ---------- layout článku ---------- */
.art-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;
  padding:28px 0 48px;align-items:start;
}
.art-main{min-width:0}
.art-side{min-width:0}
@media(max-width:980px){
  .art-layout{grid-template-columns:1fr;gap:24px}
  .art-side{order:2}
}

/* ---------- hlavička článku ---------- */
.art-breadcrumb{font-size:13px;color:var(--art-muted);margin-bottom:14px}
.art-breadcrumb a{color:var(--art-muted)}
.art-breadcrumb a:hover{color:var(--art-brand-dark)}
.art-breadcrumb .sep{margin:0 8px;opacity:.6}

.art-topic-tag{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--art-brand-dark);background:var(--art-ok-bg);border-radius:999px;padding:5px 12px;margin-bottom:14px;
}
.art-head h1{
  font-size:32px;line-height:1.2;margin:0 0 14px;color:var(--art-ink);
  max-width:var(--art-measure);letter-spacing:-.01em;
}
.art-perex{
  font-size:18px;line-height:1.6;color:#374151;margin:0 0 16px;max-width:var(--art-measure);
}
.art-meta{
  display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--art-muted);
  border-top:1px solid var(--art-line);border-bottom:1px solid var(--art-line);
  padding:10px 0;margin:0 0 22px;max-width:var(--art-measure);
}
.art-meta i{color:var(--art-brand-dark);margin-right:6px}
.art-hero{margin:0 0 24px;max-width:var(--art-measure)}
.art-hero img{width:100%;border-radius:var(--art-radius);border:1px solid var(--art-line)}
.art-video{position:relative;max-width:var(--art-measure);aspect-ratio:16/9;margin:0 0 24px}
.art-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:var(--art-radius)}

/* ---------- obsah (TOC) ---------- */
.art-toc{
  background:var(--art-card);border:1px solid var(--art-line);border-radius:var(--art-radius);
  padding:16px 18px;margin:0 0 26px;max-width:var(--art-measure);
}
.art-toc__title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--art-muted);margin:0 0 10px}
.art-toc ol{list-style:none;margin:0;padding:0}
.art-toc li{margin:0}
.art-toc a{
  display:block;padding:6px 0 6px 12px;font-size:14px;color:#374151;border-left:2px solid transparent;
}
.art-toc a:hover{color:var(--art-brand-dark);text-decoration:none}
.art-toc a.is-active{color:var(--art-brand-dark);border-left-color:var(--art-brand);font-weight:600}
.art-toc li.lvl-3 a{padding-left:26px;font-size:13px;color:var(--art-muted)}
.art-toc.is-collapsible > summary{
  list-style:none;cursor:pointer;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--art-muted);display:flex;align-items:center;justify-content:space-between;
}
.art-toc.is-collapsible > summary::-webkit-details-marker{display:none}
.art-toc.is-collapsible > summary::after{content:"▾";font-size:12px;transition:transform .15s ease}
.art-toc.is-collapsible[open] > summary::after{transform:rotate(180deg)}
.art-toc.is-collapsible[open] .art-toc__title{margin-top:10px}

/* sticky TOC v sidebaru na desktopu */
.art-side__toc{position:sticky;top:20px}
@media(max-width:980px){.art-side__toc{display:none}}

/* TOC nad článkem jen na mobilu/tabletu */
.art-toc--mobile .art-toc__title{display:none}
@media(min-width:981px){.art-toc--mobile{display:none}}

/* ---------- tělo článku – typografie ---------- */
.art-body{max-width:var(--art-measure);font-size:16.5px;color:#1f2937}
.art-body > *:first-child{margin-top:0}
.art-body p{margin:0 0 18px}
.art-body h2{
  font-size:23px;line-height:1.3;margin:38px 0 12px;color:var(--art-dark);
  padding-bottom:8px;border-bottom:2px solid var(--art-ok-bg);scroll-margin-top:90px;
}
.art-body h3{
  font-size:18px;line-height:1.35;margin:26px 0 10px;color:var(--art-dark);scroll-margin-top:90px;
}
.art-body h4{font-size:16px;margin:20px 0 8px;color:var(--art-dark)}
.art-body ul,.art-body ol{margin:0 0 18px;padding-left:22px}
.art-body li{margin:0 0 8px}
.art-body li::marker{color:var(--art-brand-dark)}
.art-body a{color:var(--art-brand-dark);text-decoration:underline}
.art-body strong{color:var(--art-ink)}
.art-body blockquote{
  margin:0 0 20px;padding:12px 18px;border-left:3px solid var(--art-brand);
  background:#fff;border-radius:0 var(--art-radius) var(--art-radius) 0;color:#374151;
}
.art-body img{border-radius:var(--art-radius);border:1px solid var(--art-line);margin:6px 0 20px}
.art-body hr{border:0;border-top:1px solid var(--art-line);margin:28px 0}
.art-body code{background:#eef2f7;border-radius:5px;padding:2px 6px;font-size:.92em}
.art-body pre{background:#0f172a;color:#e2e8f0;padding:16px;border-radius:var(--art-radius);overflow:auto;margin:0 0 20px}
.art-body pre code{background:none;padding:0;color:inherit}

/* tabulky – na mobilu horizontální scroll */
.art-body .table-scroll,.art-body figure.table{overflow-x:auto;margin:0 0 20px}
.art-body table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:480px}
.art-body th,.art-body td{border:1px solid var(--art-line);padding:9px 12px;text-align:left;vertical-align:top}
.art-body thead th{background:#f8fafc;color:var(--art-dark);font-weight:700}
.art-body tbody tr:nth-child(even){background:#fafbfc}

/* ---------- boxy uvnitř článku (renderer-ready) ---------- */
.art-box{
  margin:0 0 22px;padding:16px 18px;border:1px solid var(--art-line);border-left-width:4px;
  border-radius:var(--art-radius);background:var(--art-card);
}
.art-box__title{margin:0 0 6px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.art-box__title i{font-style:normal}
.art-box > :last-child{margin-bottom:0}
.art-box--tip{border-left-color:var(--art-brand)}
.art-box--tip .art-box__title{color:var(--art-brand-dark)}
.art-box--reco{border-left-color:var(--art-ok);background:var(--art-ok-bg)}
.art-box--reco .art-box__title{color:var(--art-ok)}
.art-box--warn{border-left-color:#e0a53a;background:var(--art-warn-bg)}
.art-box--warn .art-box__title{color:var(--art-warn)}
.art-box--summary{border-left-color:var(--art-dark);background:#f8fafc}
.art-box--summary .art-box__title{color:var(--art-dark)}
.art-box--checklist{border-left-color:var(--art-brand)}
.art-box--checklist ul{list-style:none;margin:0;padding:0}
.art-box--checklist li{position:relative;padding-left:28px;margin:0 0 8px}
.art-box--checklist li::before{
  content:"✓";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:5px;
  background:var(--art-ok-bg);color:var(--art-ok);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- CTA bloky ---------- */
.art-cta{
  max-width:var(--art-measure);margin:30px 0;padding:22px 24px;border-radius:14px;
  background:linear-gradient(160deg,#e8fbfc,#f3f4f6);border:1px solid #cdeef0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.art-cta h3{margin:0 0 4px;font-size:18px;color:var(--art-dark)}
.art-cta p{margin:0;font-size:14px;color:#475569;max-width:52ch}
.art-cta--rfq{background:#31424f;border-color:#31424f}
.art-cta--rfq h3{color:#fff}
.art-cta--rfq p{color:#a9bccc}

/* ---------- související články ---------- */
.art-related{max-width:var(--art-measure);margin:36px 0 0}
.art-related h2{font-size:20px;color:var(--art-dark);margin:0 0 16px}
.art-related__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.art-rcard{
  display:flex;flex-direction:column;background:var(--art-card);border:1px solid var(--art-line);
  border-radius:var(--art-radius);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease;
}
.art-rcard:hover{border-color:var(--art-brand);box-shadow:0 6px 18px rgba(16,24,40,.08);text-decoration:none}
.art-rcard__thumb{aspect-ratio:16/9;background:#f1f5f9;overflow:hidden}
.art-rcard__thumb img{width:100%;height:100%;object-fit:cover}
.art-rcard__body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.art-rcard__topic{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--art-muted)}
.art-rcard__title{font-size:15px;font-weight:600;color:var(--art-ink);line-height:1.35}
.art-rcard__perex{font-size:13px;color:var(--art-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-rcard__more{margin-top:auto;font-size:13px;font-weight:600;color:var(--art-brand-dark)}
@media(max-width:560px){.art-related__grid{grid-template-columns:1fr}}

/* ---------- ITDelivery karta ---------- */
.art-orgcard{
  max-width:var(--art-measure);margin:34px 0 0;padding:22px 24px;border:1px solid var(--art-line);
  border-radius:14px;background:var(--art-card);display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
}
.art-orgcard__logo{font-weight:800;font-size:18px;color:var(--art-dark);letter-spacing:-.01em}
.art-orgcard__body{flex:1;min-width:240px}
.art-orgcard__body p{margin:0 0 12px;font-size:14px;color:#475569}
.art-orgcard__actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- sidebar ---------- */
.art-side__block{
  background:var(--art-card);border:1px solid var(--art-line);border-radius:var(--art-radius);
  padding:16px 18px;margin:0 0 18px;
}
.art-side__title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--art-muted);margin:0 0 12px}
.art-topics{list-style:none;margin:0;padding:0}
.art-topic{margin:0 0 4px}
.art-topic > a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;border-radius:8px;font-size:14px;font-weight:600;color:var(--art-ink);
}
.art-topic > a:hover{background:#f3f4f6;text-decoration:none}
.art-topic.is-active > a{background:var(--art-ok-bg);color:var(--art-brand-dark)}
.art-topic__count{font-size:12px;font-weight:600;color:var(--art-muted);background:#f1f5f9;border-radius:999px;padding:1px 8px}
.art-sublist{list-style:none;margin:6px 0 8px;padding:0 0 0 10px;border-left:2px solid var(--art-line)}
.art-sublist li{margin:0}
.art-sublist a{display:block;padding:5px 10px;font-size:13px;color:var(--art-muted)}
.art-sublist a:hover{color:var(--art-brand-dark);text-decoration:none}
.art-sublist a.is-active{color:var(--art-brand-dark);font-weight:600}

/* „Zobrazit více" – skryté položky nad limit */
[data-more-wrap] .is-over-limit{display:none}
[data-more-wrap].is-expanded .is-over-limit{display:block}
.art-more-btn{
  margin-top:8px;background:none;border:0;padding:6px 10px;font-size:13px;font-weight:600;
  color:var(--art-brand-dark);cursor:pointer;
}
.art-more-btn:hover{text-decoration:underline}

.art-side__cta{background:linear-gradient(160deg,#0f2f39,#293948);color:#e6f7f8;border:0}
.art-side__cta .art-side__title{color:#9fd9dd}
.art-side__cta p{margin:0 0 12px;font-size:13px;color:#cdeef0}

/* ===================================================================
   /clanky – moderní index
   =================================================================== */
.art-index{padding:28px 0 48px}
.art-index__head{margin-bottom:20px}
.art-index__head h1{font-size:30px;margin:0 0 6px;color:var(--art-ink)}
.art-index__head p{margin:0;color:var(--art-muted);font-size:15px}

.art-toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:0 0 22px}
.art-chips{display:flex;gap:8px;flex-wrap:wrap}
.art-chip{
  font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--art-line);
  background:#fff;color:var(--art-ink);cursor:pointer;
}
.art-chip:hover{border-color:var(--art-brand);text-decoration:none;color:var(--art-brand-dark)}
.art-chip.is-active{background:var(--art-brand);border-color:var(--art-brand);color:#fff}
.art-search{position:relative;margin-left:auto;flex:1 1 240px;max-width:340px}
.art-search input{
  width:100%;height:42px;border:1px solid var(--art-line);border-radius:999px;padding:0 16px 0 40px;
  font-size:14px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 14px center no-repeat;
}
.art-search input:focus{outline:0;border-color:var(--art-brand);box-shadow:0 0 0 3px rgba(0,196,204,.18)}

.art-featured{
  display:grid;grid-template-columns:1.1fr .9fr;gap:0;background:var(--art-card);
  border:1px solid var(--art-line);border-radius:14px;overflow:hidden;margin:0 0 26px;
}
.art-featured__media{background:#f1f5f9;min-height:220px}
.art-featured__media img{width:100%;height:100%;object-fit:cover}
.art-featured__body{padding:28px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.art-featured__tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--art-brand-dark)}
.art-featured__body h2{font-size:24px;margin:0;color:var(--art-ink);line-height:1.25}
.art-featured__body h2 a{color:inherit}
.art-featured__body h2 a:hover{color:var(--art-brand-dark);text-decoration:none}
.art-featured__body p{margin:0;color:var(--art-muted);font-size:14.5px}
.art-featured--nomedia{grid-template-columns:1fr}
@media(max-width:760px){.art-featured{grid-template-columns:1fr}.art-featured__media{min-height:170px}}

.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.art-card{
  display:flex;flex-direction:column;background:var(--art-card);border:1px solid var(--art-line);
  border-radius:var(--art-radius);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease;
}
.art-card:hover{border-color:var(--art-brand);box-shadow:0 6px 18px rgba(16,24,40,.08)}
.art-card__thumb{aspect-ratio:16/9;background:#f1f5f9;overflow:hidden}
.art-card__thumb img{width:100%;height:100%;object-fit:cover}
.art-card__body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.art-card__topic{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--art-muted)}
.art-card__title{font-size:16px;font-weight:600;color:var(--art-ink);line-height:1.35}
.art-card__title a{color:inherit}
.art-card__title a:hover{color:var(--art-brand-dark);text-decoration:none}
.art-card__perex{font-size:13.5px;color:var(--art-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-card__more{margin-top:auto;font-size:13px;font-weight:600;color:var(--art-brand-dark)}
@media(max-width:920px){.art-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.art-grid{grid-template-columns:1fr}}
.art-empty{padding:30px 0;color:var(--art-muted)}

/* ===================================================================
   /tema/{slug} – LP stránka (sjednocení vzhledu)
   =================================================================== */
.art-lp{max-width:var(--art-measure)}
.art-lp .art-topic-tag{margin-bottom:12px}
.art-lp h1{font-size:30px;margin:0 0 12px;color:var(--art-ink)}
.art-lp__perex{font-size:18px;color:#374151;margin:0 0 22px}
.art-lp__content{font-size:16.5px;color:#1f2937}
.art-lp__content h2{font-size:22px;color:var(--art-dark);margin:32px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--art-ok-bg)}
.art-lp__content h3{font-size:17px;color:var(--art-dark);margin:22px 0 8px}
.art-lp__content p{margin:0 0 16px}
.art-lp__content ul,.art-lp__content ol{margin:0 0 16px;padding-left:22px}
.art-lp__list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}