/* ==========================================================================
   blog/blog.css — samo tisto, česar skupni styles.css še ne pokriva.
   Uporablja obstoječe spremenljivke iz styles.css (--ink, --ink-soft,
   --turq-*, --beige-*, --radius*, --f-head, --f-body, --shadow-s).
   Novih barv ne uvaja. styles.css se ne popravlja.
   ========================================================================== */

/* ---------- DROBTINICE ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft)}
.crumbs a{transition:.22s}
.crumbs a:hover{color:var(--turq-700)}
.crumbs span[aria-hidden]{color:var(--beige-300)}
.crumbs [aria-current]{color:var(--ink)}

/* ---------- DATUM IN ČAS BRANJA ---------- */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-soft);
  margin:18px 0 22px}
.meta .sep{color:var(--beige-300)}

/* ---------- TELO ČLANKA ---------- */
.art{width:min(100%,760px);margin-inline:auto}
.art h2{font-size:clamp(24px,3.2vw,34px);margin:52px 0 14px;font-weight:600;scroll-margin-top:96px}
.art h3{font-size:20.5px;margin:34px 0 10px}
.art p{font-size:17.5px;line-height:1.72;margin-bottom:20px}
.art>p:first-of-type{margin-top:0}
.art a{color:var(--turq-700);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:3px;transition:.22s}
.art a:hover{color:var(--turq-800)}
/* v styles.css je globalno list-style:none — tu pikice vrnemo */
.art ul{list-style:disc;padding-left:22px;margin:0 0 20px}
.art ol{list-style:decimal;padding-left:22px;margin:0 0 20px}
.art ul li,.art ol li{font-size:17.5px;line-height:1.72;margin-bottom:9px}
.art ul li::marker,.art ol li::marker{color:var(--turq-500)}
.art strong{font-weight:600;color:var(--ink)}

/* ---------- CENOVNA TABELA ---------- */
/* ovita v <div class="t-scroll">, da na telefonu drsi tabela in ne cela stran */
.t-scroll{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
.art table{border-collapse:collapse;width:100%;min-width:520px;font-size:16px;background:var(--white)}
.art table th,.art table td{border:1.5px solid var(--beige-200);padding:13px 16px;text-align:left;
  vertical-align:top}
.art table th{background:var(--beige-100);font-family:var(--f-head);font-weight:600;font-size:15.5px}
.art table td:last-child{white-space:nowrap;font-weight:600}

/* ---------- POUDARJEN OKVIRČEK ---------- */
.callout{background:var(--turq-100);border:1.5px solid var(--turq-200);border-radius:var(--radius-sm);
  padding:20px 24px;margin:0 0 24px}
.callout p:last-child{margin-bottom:0}
.callout p{font-size:16.8px}

/* ---------- KAZALO VSEBINE ---------- */
.toc{background:var(--white);border:1.5px solid var(--beige-200);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-s);padding:22px 26px;margin-bottom:34px}
.toc h2{font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--turq-700);margin:0 0 12px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{counter-increment:toc;display:flex;gap:11px;padding:5px 0;font-size:16px;line-height:1.5}
.toc li::before{content:counter(toc) ".";color:var(--beige-300);font-family:var(--f-head);
  font-weight:600;flex:none}
.toc a{color:var(--ink-soft);text-decoration:none;transition:.22s}
.toc a:hover{color:var(--turq-700)}

/* ---------- POZIV K DEJANJU SREDI ČLANKA ---------- */
.art-cta{background:var(--beige-100);border:1.5px solid var(--beige-200);border-radius:var(--radius);
  padding:30px 32px;margin:38px 0;text-align:center}
.art-cta h3{margin:0 0 10px}
.art-cta p{color:var(--ink-soft);font-size:16.5px;margin-bottom:22px}
.art-cta .btn{white-space:normal}

/* ---------- SORODNI ČLANKI ---------- */
.art-related{width:min(100%,760px);margin:48px auto 0}
.art-related h2{font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--turq-700);margin:0 0 4px}
.art-related ul{list-style:none;margin:0;padding:0}
.art-related li{border-bottom:1.5px solid var(--beige-200)}
.art-related a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;color:var(--ink);text-decoration:none;font-family:var(--f-head);
  font-weight:600;font-size:17.5px;line-height:1.35;transition:.22s}
.art-related a svg{width:18px;height:18px;flex:none;color:var(--turq-600);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.art-related a:hover{color:var(--turq-700)}
.art-related a:hover svg{transform:translateX(5px)}

/* ---------- NAZAJ NA BLOG ---------- */
.art-more{width:min(100%,760px);margin:28px auto 0;padding-top:28px;
  border-top:1.5px solid var(--beige-200)}
.art-more a{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-head);
  font-weight:600;font-size:16.5px;color:var(--turq-700);transition:.25s}
.art-more a svg{width:19px;height:19px;flex:none}
.art-more a:hover{gap:14px;color:var(--turq-800)}

/* ---------- KARTICA ČLANKA V KAZALU ---------- */
/* cela kartica je klikljiva: povezava v naslovu se razpre prek nje */
.post .p-date{font-size:14px;color:var(--ink-soft);margin-bottom:10px}
.post h3{font-size:21.5px;margin-bottom:9px;line-height:1.22}
.post h3 a{color:inherit;text-decoration:none}
/* Cela kartica je klikljiva. Prekrivalo mora biti svoj element: v styles.css
   velja .card>*{position:relative}, zato bi se ::after na naslovu razpel samo
   prek <h3>, ne prek kartice. Naslova ne moremo dati na position:static, ker
   bi ga okrasni krog .card::after ob prehodu miske prekril.
   Prekrivalo je samo za misko; dostopno ime nosi povezava v naslovu. */
.post .p-hit{position:absolute;inset:0;z-index:3;border-radius:var(--radius)}
.post h3 a:focus-visible{outline:3px solid var(--turq-500);outline-offset:3px;border-radius:7px}
.post .p-read{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-family:var(--f-head);
  font-weight:600;font-size:15.5px;color:var(--turq-700)}
.post .p-read svg{width:18px;height:18px;flex:none;transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.post:hover .p-read svg{transform:translateX(5px)}

/* ---------- DEJSTVA / INFOGRAFIKE V ČLANKU ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 28px}
.fact{background:var(--beige-100);border:1.5px solid var(--beige-200);border-radius:var(--radius-sm);
  padding:20px 16px 16px;text-align:center}
.fact b{display:block;font-family:var(--f-head);font-size:clamp(28px,4vw,36px);font-weight:700;
  color:var(--turq-700);line-height:1.1;margin-bottom:8px}
.fact span{display:block;font-size:14.5px;line-height:1.45;color:var(--ink)}
.fact cite{display:block;margin-top:10px;font-size:12px;font-style:normal;color:var(--ink-soft)}
.fact cite a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ranks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 28px}
.rank{background:var(--white);border:1.5px solid var(--beige-200);border-radius:var(--radius-sm);
  padding:18px 16px 16px;box-shadow:var(--shadow-s)}
.rank em{display:block;font-family:var(--f-head);font-style:normal;font-weight:600;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--turq-700);margin-bottom:8px}
.rank p{font-size:15px;line-height:1.5;margin:0;color:var(--ink)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0 28px}
.split>div{border-radius:var(--radius-sm);padding:20px 18px 16px}
.split .ig{background:var(--beige-100);border:1.5px solid var(--beige-200)}
.split .g{background:var(--turq-100);border:1.5px solid var(--turq-200)}
.split h3{margin:0 0 10px;font-size:16.5px}
.split ul{margin:0;padding-left:18px}
.split li{font-size:15px;margin-bottom:6px}
.src{font-size:13.5px;color:var(--ink-soft);margin:-8px 0 24px}

@media(max-width:640px){
  .art h2{margin:42px 0 12px}
  .art p,.art ul li,.art ol li{font-size:17px}
  .callout,.art-cta{padding:20px 20px}
  .toc{padding:20px}
  .facts,.ranks,.split{grid-template-columns:1fr}
}