/* ==========================================================================
   Redesign 2026 — Vodič za klađenje (kladjenje.php: guide article + hub).
   The guide ARTICLE reuses the news article structure (.single-analysis) and
   is fully styled by css/kl-news.css. This file adds only the guide-specific
   hub/category chrome (.analize wrapper, intro block, category headers, bare
   breadcrumb) + the design's uppercase article kicker. Editor content blocks
   live in css/kl-blocks.css (shared with the news cluster). Design ref: Betting
   Guide -mobile-/-desktop-.dc.html ("Vodic Kvote"). Tokens only; legacy
   analize.css/novosti.css load after → doubled .container-main.kl-main prefix.
   ========================================================================== */

/* --- Hub / category wrapper ---------------------------------------------- */
.container-main.kl-main .analize {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--kl-sp-16) var(--kl-sp-16) var(--kl-sp-32) var(--kl-sp-16);
  color: var(--kl-text);
}

/* --- Intro block (hub + category landings) ------------------------------- */
.container-main.kl-main .intro-section { margin-bottom: var(--kl-sp-16); }

.container-main.kl-main .intro-title {
  font: 800 24px var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.2;
  letter-spacing: var(--kl-ls-heading);
  margin: 0 0 var(--kl-sp-6) 0;
}

.container-main.kl-main .intro-text {
  font: 400 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
  line-height: var(--kl-lh-body);
  margin: 0;
  max-width: 640px;
}

/* --- Category section headers in the hub --------------------------------- */
.container-main.kl-main .analize .section-title { margin: var(--kl-sp-24) 0 var(--kl-sp-12) 0; }

.container-main.kl-main .analize .section-title h2 {
  font: 800 var(--kl-fs-19) var(--kl-font-display);
  color: var(--kl-ink);
  letter-spacing: var(--kl-ls-heading);
  margin: 0;
}

/* --- Bare breadcrumb (category view — not inside .news-single) ------------ */
.container-main.kl-main .analize .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kl-sp-6);
  list-style: none;
  margin: 0 0 var(--kl-sp-16) 0;
  padding: 0;
  background: none;
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
}

.container-main.kl-main .analize .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-6);
  color: var(--kl-text-2);
}

.container-main.kl-main .analize .breadcrumb-item + .breadcrumb-item::before {
  content: "\203A";
  color: var(--kl-text-disabled);
}

.container-main.kl-main .analize .breadcrumb-item a { color: var(--kl-text-2); text-decoration: none; }
.container-main.kl-main .analize .breadcrumb-item a:hover { color: var(--kl-ink); }
.container-main.kl-main .analize .breadcrumb-item.active { color: var(--kl-text-4); }

/* --- Empty state --------------------------------------------------------- */
.container-main.kl-main .analize > p {
  font: 400 var(--kl-fs-14) var(--kl-font-ui);
  color: var(--kl-text-2);
  padding: var(--kl-sp-16) 0;
}

/* --- Guide article kicker (design: uppercase "OSNOVE KLAĐENJA") ----------- */
/* On the guide article, .analysis-location carries the category name; the
   design renders it as an uppercase letterspaced kicker above the h1. */
.container-main.kl-main .single-analysis .analysis-location {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 10.5px;
  color: var(--kl-text-4);
}

.container-main.kl-main .single-analysis .analysis-location a { color: var(--kl-text-4); }
.container-main.kl-main .single-analysis .analysis-location a:hover { color: var(--kl-ink); }

/* ================================ DESKTOP ================================= */
@media (min-width: 1024px) {
  .container-main.kl-main .analize {
    padding: var(--kl-sp-28) var(--kl-sp-16) var(--kl-sp-48) var(--kl-sp-16);
  }
  .container-main.kl-main .intro-title { font-size: 28px; }
  .container-main.kl-main .analize .section-title h2 { font-size: var(--kl-fs-22); }
}