/* ==========================================================================
   Section rules moved from css/style-15.css (CSS-PLAN Step 8 Wave 2).
   PREPENDED so this sheet's own rules keep winning their ties.
   ========================================================================== */
.titlehead { margin-bottom: 1rem; font-size: 1.25rem; }

.like-icon { display: inline-block; width: 16px; height: 16px; line-height: 16px; overflow: hidden; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; }

.like-icon img, .like-icon i { width: 100%; height: 100%; object-fit: contain; opacity: 1; }

.like-btn { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; cursor: pointer; padding: 5px; display: flex; align-items: center; gap: 0.5rem; }

.like-text { transition: font-weight 0.3s ease-in-out; color: var(--bodyText); }

.section-title { margin-top: 1rem; margin-bottom: 0.5rem; }

.section-title { color: var(--bodyText); margin-top: 0px; margin-bottom: 15px; font-size: 1.1rem; }

.match-teams { display: flex; justify-content: flex-start; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

.separator { font-size: 18px; font-weight: 500; }

.single-analysis-content p { font-weight: 400; font-family: Inter, sans-serif; }

.single-analysis-content p, .single-analysis-content ul, .single-analysis-content ol { margin: 1.25rem 0px; }

.banner-img { display: block; width: 100%; height: 100px; object-fit: cover; border-radius: var(--kl-r-8); }

@media (max-width: 767px) {
  .banner-img { width: 100%; height: auto; aspect-ratio: 310 / 70; object-fit: cover; border-radius: var(--kl-r-8); }
}

/* ==========================================================================
   Redesign 2026 — News cluster (novosti.php: najave / vijesti / u-fokusu).
   Article single view = design 11f "Najava — članak". Listing views have no
   design → derived from the same card language (owner previews before ship).
   Legacy analize.css + novosti.css load AFTER this file, so every rule that
   touches an existing legacy class uses the doubled .container-main.kl-main
   prefix to win the cascade. Tokens only (css/design-tokens.css).
   ========================================================================== */

/* ============================ SINGLE ARTICLE ============================== */

/* A .news-single breadcrumb bar was styled here (7 rules). Its only markup came
   from novosti.php's displayBreadcrumbs(), which was never called — so neither the
   wrapper nor the crumbs have ever rendered. News articles use .news-article-crumb
   (see below, ~line 1700) instead. Both halves deleted CSS-REST Step 2. */

.container-main.kl-main .single-analysis {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--kl-sp-16) var(--kl-sp-16) var(--kl-sp-32) var(--kl-sp-16);
  background: var(--kl-surface);
}

/* --- Breadcrumb-style category row (Najave › Nogomet) --------------------- */
.container-main.kl-main .single-analysis .analysis-meta {
  margin: 0 0 var(--kl-sp-10) 0;
  padding: 0;
  border: 0;
  background: none;
}

.container-main.kl-main .analysis-location {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kl-sp-6);
  font: 600 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-4);
}

.container-main.kl-main .analysis-location a { color: var(--kl-text-2); text-decoration: none; }
.container-main.kl-main .analysis-location a:hover { color: var(--kl-ink); }
.container-main.kl-main .analysis-location .separ { color: var(--kl-text-disabled); display: inline-flex; }

/* --- Header (h1 + hero + author + share) ---------------------------------- */
.container-main.kl-main .single-analysis .analysis-header {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-14);
  border: 0;
  padding: 0;
  margin: 0 0 var(--kl-sp-16) 0;
}

.container-main.kl-main .single-analysis .analysis-header h1 {
  font: 800 22px var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.25;
  letter-spacing: var(--kl-ls-heading);
  margin: 0;
}

.container-main.kl-main .analysis-featured-image {
  margin: 0;
  border-radius: var(--kl-r-16);
  overflow: hidden;
  background: var(--kl-surface-3);
}

.container-main.kl-main .analysis-featured-image img,
.container-main.kl-main .analysis-featured-image .news-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: cover;
}

/* Author + date row */
.container-main.kl-main .single-analysis .item-info {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-10);
  margin: 0;
  padding: 0;
  border: 0;
}

.container-main.kl-main .single-analysis .item-info > img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--kl-surface-4);
  flex-shrink: 0;
}

.container-main.kl-main .single-analysis .item-info-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.container-main.kl-main .single-analysis .item-info-span {
  font: 700 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-ink);
}

.container-main.kl-main .single-analysis .item-info-details span:not(.item-info-span) {
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-4);
}

/* Share / like row */
.container-main.kl-main .single-analysis .share-news {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-8);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  border: 0;
}

.container-main.kl-main .single-analysis .analiza-social { display: flex; align-items: center; gap: var(--kl-sp-8); }

.container-main.kl-main .single-analysis .share-native-btn,
.container-main.kl-main .single-analysis .like-btn,
.container-main.kl-main .single-analysis .like-count-container {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-6);
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-2);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-pill);
  padding: var(--kl-sp-6) var(--kl-sp-12);
  background: var(--kl-surface);
  cursor: pointer;
}

.container-main.kl-main .single-analysis .like-count-container { cursor: default; }

/* --- Article body --------------------------------------------------------- */
.container-main.kl-main .single-analysis-content {
  font: 400 var(--kl-fs-14) var(--kl-font-ui);
  color: var(--kl-text);
  line-height: var(--kl-lh-body);
}

.container-main.kl-main .single-analysis-content p { margin: 0 0 var(--kl-sp-14) 0; }

.container-main.kl-main .single-analysis-content h2 {
  font: 800 var(--kl-fs-19) var(--kl-font-display);
  color: var(--kl-ink);
  letter-spacing: var(--kl-ls-heading);
  margin: var(--kl-sp-24) 0 var(--kl-sp-10) 0;
}

.container-main.kl-main .single-analysis-content h3 {
  font: 800 var(--kl-fs-16) var(--kl-font-display);
  color: var(--kl-ink);
  margin: var(--kl-sp-20) 0 var(--kl-sp-8) 0;
}

.container-main.kl-main .single-analysis-content a { color: var(--kl-blue); text-decoration: none; }
.container-main.kl-main .single-analysis-content a:hover { text-decoration: underline; }

.container-main.kl-main .single-analysis-content strong,
.container-main.kl-main .single-analysis-content b { color: var(--kl-ink); font-weight: 700; }

.container-main.kl-main .single-analysis-content ul,
.container-main.kl-main .single-analysis-content ol { margin: 0 0 var(--kl-sp-14) 0; padding-left: var(--kl-sp-20); }
.container-main.kl-main .single-analysis-content li { margin-bottom: var(--kl-sp-6); }

.container-main.kl-main .single-analysis-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--kl-r-12);
  margin: var(--kl-sp-8) 0;
}

.container-main.kl-main .single-analysis-content blockquote {
  margin: var(--kl-sp-16) 0;
  padding: 0 0 0 var(--kl-sp-14);
  border-left: 3px solid var(--kl-border);
  font: italic 500 var(--kl-fs-14) var(--kl-font-ui);
  color: var(--kl-text-2);
  line-height: var(--kl-lh-body);
}

.container-main.kl-main .single-analysis-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--kl-sp-14) 0;
  font-family: var(--kl-font-ui);
}

.container-main.kl-main .single-analysis-content th,
.container-main.kl-main .single-analysis-content td {
  border: 1px solid var(--kl-border);
  padding: var(--kl-sp-8) var(--kl-sp-10);
  text-align: left;
  font-size: var(--kl-fs-13);
}

.container-main.kl-main .single-analysis-content th {
  background: var(--kl-surface-2);
  color: var(--kl-text-3);
  font-weight: 600;
}

/* --- Tags ----------------------------------------------------------------- */
.container-main.kl-main .analysis-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kl-sp-6);
  margin: var(--kl-sp-20) 0 0 0;
}

.container-main.kl-main .analysis-tags .tag-badge {
  font: 600 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-2);
  background: var(--kl-surface-3);
  border-radius: var(--kl-r-pill);
  padding: var(--kl-sp-4) var(--kl-sp-10);
  text-decoration: none;
}

.container-main.kl-main .analysis-tags .tag-badge:hover { color: var(--kl-ink); background: var(--kl-surface-4); }

/* --- Related articles (design: horizontal thumb + text rows) -------------- */
.container-main.kl-main .related-analyses { margin-top: var(--kl-sp-24); }

.container-main.kl-main .related-analyses h2 {
  font: 700 var(--kl-fs-16) var(--kl-font-display);
  color: var(--kl-ink);
  margin: 0 0 var(--kl-sp-10) 0;
}

.container-main.kl-main .related-grid {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-10);
}

.container-main.kl-main .related-item {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-14);
  overflow: hidden;
  background: var(--kl-surface);
}

.container-main.kl-main .related-link {
  display: flex;
  gap: var(--kl-sp-12);
  padding: var(--kl-sp-10);
  text-decoration: none;
  align-items: center;
}

.container-main.kl-main .related-img {
  width: 92px;
  height: 68px;
  border-radius: var(--kl-r-10);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--kl-surface-3);
}

.container-main.kl-main .related-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.container-main.kl-main .related-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container-main.kl-main .related-title {
  font: 700 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-ink);
  line-height: 1.35;
}

.container-main.kl-main .related-date {
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-4);
  margin-top: var(--kl-sp-4);
}

.container-main.kl-main .single-analysis .analize { color: var(--kl-text); }

/* ============================== LISTING VIEWS ============================= */

.container-main.kl-main #vesti-items {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--kl-sp-16) var(--kl-sp-16) var(--kl-sp-32) var(--kl-sp-16);
}

/* Section nav (Sve novosti / Najave / U fokusu / Vijesti) */
.container-main.kl-main #vesti-items .section-title { margin-bottom: var(--kl-sp-12); }

.container-main.kl-main .category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kl-sp-6);
  margin-bottom: var(--kl-sp-12);
}

.container-main.kl-main .category-nav a {
  font: 600 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
  background: var(--kl-surface-3);
  border-radius: var(--kl-r-pill);
  padding: var(--kl-sp-8) var(--kl-sp-14);
  text-decoration: none;
}

.container-main.kl-main .category-nav a.active {
  background: var(--kl-blue);
  color: #fff;
}

/* Headings (aggregate h1 / tag h1 / category h1 + intro) */
.container-main.kl-main #vesti-items .section-title h1,
.container-main.kl-main #vesti-items .titlehead h1,
.container-main.kl-main #vesti-items .news-subcategory h1 {
  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 #vesti-items .category-intro {
  font: 400 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
  line-height: var(--kl-lh-body);
  margin: 0 0 var(--kl-sp-14) 0;
  max-width: 640px;
}

.container-main.kl-main .news-subcategory { margin-bottom: var(--kl-sp-16); }

/* Subcategory chips */
.container-main.kl-main .subcategory-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kl-sp-6);
  margin-top: var(--kl-sp-10);
}

.container-main.kl-main .subcategory-chips .chip {
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-2);
  background: var(--kl-surface-3);
  border-radius: var(--kl-r-pill);
  padding: var(--kl-sp-6) var(--kl-sp-12);
  text-decoration: none;
}

.container-main.kl-main .subcategory-chips .chip.active {
  background: var(--kl-blue);
  color: #fff;
}

/* Featured (top 3) — horizontal card, media + content */
.container-main.kl-main .featured-news-container {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-12);
  margin-bottom: var(--kl-sp-16);
}

.container-main.kl-main .featured-news-item {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--kl-sp-14);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-16);
  overflow: hidden;
  background: var(--kl-surface);
  padding: var(--kl-sp-12);
}

.container-main.kl-main .featured-media {
  flex: 0 0 128px;
  width: 128px;
  min-width: 0;      /* beats legacy .featured-media { min-width: 200px } */
  height: 96px;      /* beats legacy mobile MQ { height: 180px }; fixed landscape thumb */
  align-self: flex-start;
  border-radius: var(--kl-r-12);
  overflow: hidden;
  background: var(--kl-surface-3);
}

.container-main.kl-main .featured-image-link { display: block; height: 100%; }

.container-main.kl-main .featured-media .featured-image {
  width: 100%;
  height: 100%;
  min-height: 96px;
  object-fit: cover;
  border-radius: var(--kl-r-12);
  display: block;
  color: transparent;
}

/* CSS-FINAL Step 1: the .featured-image-placeholder rule was deleted here (its
   untokenized twin went in CSS-REST Step 2). novosti.php used to echo the
   placeholder div for an image-less article; that echo was removed in 577e6fc
   (news 15a redesign) and no template, script or stored article body emits the
   class now — checked against 19.1 MB of analize/blog/tipovi content. An
   image-less article renders no placeholder at all today; if that state ever
   wants one again it comes back as new markup plus a new rule.
   Audit: CSS-AUDIT-FINAL.md §7.6. */

.container-main.kl-main .featured-novosti-content {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-4);
  min-width: 0;
  justify-content: center;
}

.container-main.kl-main .featured-categories { margin-bottom: 2px; }

.container-main.kl-main .featured-category,
.container-main.kl-main .featured-subcategory {
  font: 600 var(--kl-fs-10) var(--kl-font-ui);
  color: var(--kl-blue);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.container-main.kl-main .featured-title {
  font: 700 var(--kl-fs-15) var(--kl-font-display);
  line-height: 1.3;
  margin: 0;
}

.container-main.kl-main .featured-title a { color: var(--kl-ink); text-decoration: none; }

.container-main.kl-main .featured-meta {
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-4);
}

.container-main.kl-main .featured-excerpt {
  font: 400 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.container-main.kl-main .featured-read-more {
  font: 700 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-blue);
  text-decoration: none;
  margin-top: 2px;
}

/* Grid (rest of the list) */
.container-main.kl-main .news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kl-sp-12);
}

.container-main.kl-main .novosti-card {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-16);
  overflow: hidden;
  background: var(--kl-surface);
}

.container-main.kl-main .novosti-card-link { display: flex; text-decoration: none; }

.container-main.kl-main .novosti-card-media {
  position: relative;
  width: 128px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--kl-surface-3);
}

.container-main.kl-main .novosti-card-media .news-img,
.container-main.kl-main .novosti-card-media img {
  width: 100%;
  height: 100%;
  min-height: 104px;
  object-fit: cover;
  display: block;
  color: transparent;   /* hide broken-image alt text (lazy imgs: loader owns onerror) */
}

.container-main.kl-main .news-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kl-text-4);
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
}

.container-main.kl-main .novosti-card-media .news-category {
  position: absolute;
  top: var(--kl-sp-6);
  left: var(--kl-sp-6);
  font: 700 9px var(--kl-font-ui);
  color: #fff;
  background: rgba(2, 23, 49, 0.82);
  border-radius: var(--kl-r-6);
  padding: 3px 7px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.container-main.kl-main .novosti-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-4);
  padding: var(--kl-sp-12) var(--kl-sp-14);
  min-width: 0;
  justify-content: center;
}

.container-main.kl-main .novosti-card-content .news-title {
  font: 700 var(--kl-fs-14) var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.3;
  margin: 0;
}

.container-main.kl-main .novosti-card-content .news-meta {
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-4);
}

.container-main.kl-main .novosti-card-content .news-excerpt {
  font: 400 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pagination — compact centred row that WRAPS instead of scrolling. Scoped to
   .kl-nv-page so one rule governs both the novosti listing (#vesti-items is a
   .kl-nv-page) and the kladjenje guide index; global.css .pagination still
   serves other legacy pages. Active page = white on blue. */
.container-main.kl-main .kl-nv-page .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kl-sp-6);
  justify-content: center;
  align-items: center;
  margin-top: var(--kl-sp-24);
}

.container-main.kl-main .kl-nv-page .pagination a,
.container-main.kl-main .kl-nv-page .pagination span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 var(--kl-sp-8);
  font: 600 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
  background: var(--kl-surface-3);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-8);
  text-decoration: none;
  white-space: nowrap;
}

.container-main.kl-main .kl-nv-page .pagination a:hover {
  border-color: var(--kl-border-strong);
  color: var(--kl-ink);
  background: var(--kl-surface-4);
}

.container-main.kl-main .kl-nv-page .pagination .page-current {
  background: var(--kl-blue);
  border-color: var(--kl-blue);
  color: var(--kl-on-dark);
  font-weight: 700;
}

/* Ellipsis is a spacer, not a button. */
.container-main.kl-main .kl-nv-page .pagination .page-dots {
  min-width: auto;
  padding: 0 var(--kl-sp-4);
  border-color: transparent;
  background: transparent;
  color: var(--kl-text-4);
}

/* Mobile: page 2+ carries more buttons than page 1, and fixed 34px cells
   overflowed the row. Let the buttons share the width (flex:1, no min-width)
   so the whole control fits; flex-wrap is the fallback on very deep sets. */
@media (max-width: 767px) {
  .container-main.kl-main .kl-nv-page .pagination a,
  .container-main.kl-main .kl-nv-page .pagination span {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 var(--kl-sp-4);
  }
  .container-main.kl-main .kl-nv-page .pagination .page-dots { flex: 0 0 auto; }
}

/* Not-found / error states */
.container-main.kl-main .analize {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--kl-sp-24) var(--kl-sp-16);
  color: var(--kl-text);
}

.container-main.kl-main .analize h1 {
  font: 800 22px var(--kl-font-display);
  color: var(--kl-ink);
  margin: 0 0 var(--kl-sp-8) 0;
}

/* ================================ DESKTOP ================================= */
@media (min-width: 1024px) {
  .container-main.kl-main .single-analysis {
    padding: var(--kl-sp-28) var(--kl-sp-20) var(--kl-sp-48) var(--kl-sp-20);
  }

  .container-main.kl-main .single-analysis .analysis-header h1 { font-size: 30px; }
  .container-main.kl-main .analysis-featured-image img { max-height: 420px; }
  .container-main.kl-main .single-analysis-content { font-size: var(--kl-fs-15); line-height: 1.7; }

  .container-main.kl-main #vesti-items { padding: var(--kl-sp-28) var(--kl-sp-20) var(--kl-sp-48) var(--kl-sp-20); }
  .container-main.kl-main #vesti-items .section-title h1,
  .container-main.kl-main #vesti-items .titlehead h1,
  .container-main.kl-main #vesti-items .news-subcategory h1 { font-size: 28px; }

  /* Two-up grid on wide screens for the card list */
  .container-main.kl-main .news-grid { grid-template-columns: 1fr 1fr; }
  .container-main.kl-main .featured-media { width: 200px; }
}

/* ==========================================================================
   Shared article skin merged from css/analize.css (generic layer, old lines
   1-104 + its .match-teams mobile rule) + css/novosti.css (CSS-PLAN Step
   7.4), in original cascade order. Original specificity — the
   .container-main.kl-main-scoped rules above keep out-ranking these.
   Also loaded on legacy top-analize.php (own head.php condition, after
   analize.css) which consumed both files; 2 dead novosti rules dropped
   (featured-news-title, featured-divider).
   ========================================================================== */

.analiza-page {
    width:100%;
}

.analysis-header h1 {
    font-size: 28px;
    margin-bottom: 10px;
    color: #333;
}

.match-teams {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 1.5rem;
    font-weight: 600;
}

.content-divider {
    background-color: rgba(217, 217, 217, 1);
    min-height: 1px;
    width: 100%;
    border: none;
}

.vs {
    font-size: 16px;
    color: #666;
}

.separator {
    margin: 0 8px;
    color: var(--darkGrey, #6c757d);
}

.date-icon, .author-icon {
    margin-right: 5px;
    display: inline-flex;
    align-items: center;
}

.analysis-featured-image {
    margin-bottom: 20px;
}

.analysis-featured-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--kl-r-4);
}

.single-analysis-content img {
    max-width: 100%;
    height: auto;
    margin: 15px 0;
}

.social-sharing {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-sharing h4 {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* Breadcrumbs styling */
.breadcrumb {
    max-width: 893px;
}

/* Item info styles */
.item-info {
    border-bottom: 1px solid #ddd;
    color: #888;
    font-size: 12px;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.item-info-details {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}

.item-info-span {
    color: var(--bodyText, #333);
    font-weight: 500;
    line-height: 150%;
    font-size: var(--kl-fs-12);
}


/* moved with the layer from analize.css's mobile block (only top-analize.php
   emits .match-teams); must stay after the base rule above */
@media (max-width: 768px) {
    .match-teams {
        font-size: 1.25rem;
    }
}


/* ==========================================================================
   top-analize / article-state layer merged from css/analize.css (CSS-PLAN
   Step 7.6), original rule order (archive toggle, empty states, pagination,
   date variants). Loads on news surfaces + legacy top-analize.php.
   ========================================================================== */
.related-item { padding: 1rem; }

.related-match-title { margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem; line-height: 1.4; color: var(--bodyText, #333); }

.related-match-date { font-size: 12px; color: var(--bodyText); }

.related-match-date.today { color: var(--primaryAlt); font-weight: 500; }

.related-match-date.tomorrow { color: var(--blue); font-weight: 500; }

.analize-card { background-color: rgb(255, 255, 255); border-radius: var(--kl-r-10); overflow: hidden; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 15px -1px; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid rgb(239, 239, 239); padding: 1rem; }

.analize-card:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px; }

.analize-card-link { display: block; color: inherit; text-decoration: none; }

.analiza-category { display: flex; align-items: center; gap: 0.5rem; background-color: var(--lightGrey); color: var(--bodyText); font-size: 11px; font-weight: 500; padding: 4px 12px 4px 8px; border-radius: var(--kl-r-20); text-transform: uppercase; letter-spacing: 0.5px; width: fit-content; }

.analiza-card-header { display: flex; align-items: center; justify-content: space-between; }

.analize-card-content { padding-top: 1rem; }

.analiza-title { font-size: 16px; font-weight: 500; margin-bottom: 6px; line-height: 1.3; color: var(--bodyText); }

.analiza-title:hover { color: var(--bodyText); }

.analiza-tip-preview { display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; gap: 0.5rem; align-items: center; margin: 0.5rem 0px; padding: 0.5rem 0.75rem; border: 1px solid var(--lightBlue); border-radius: 0.5rem; color: var(--bodyText); font-size: var(--kl-fs-14); }

.analiza-tip-preview span { opacity: 0.75; }

.analiza-tip-preview strong { min-width: 0px; overflow: hidden; color: var(--titleText); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.analiza-tip-preview em { color: var(--primary); font-style: normal; font-weight: 700; }

.teams-info { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: var(--titleText); }

.match-date { font-weight: 500; }

.match-date.today { color: var(--primaryAlt); }

.match-date.tomorrow { color: var(--blue); }

@media (max-width: 768px) {
  .analysis-meta { flex-wrap: wrap; gap: 0px; font-size: 12px; color: rgb(102, 102, 102); margin-bottom: 15px; }

  .teams-info { font-size: 1.125rem; }

  .analiza-title { font-size: var(--kl-fs-16); }

  .analysis-header h1 { font-size: 22px; }
}

.archive-content.collapsed { display: none; }

.archive-heading { cursor: pointer; }

.toggle-archive { margin-left: 10px; font-weight: bold; }

.date-heading { margin-top: 20px; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid rgb(238, 238, 238); }

/* Editorial article bodies (analize, novosti, kladjenje): heading levels are
   normalised on output (see includes/article-headings.php), so pin the ladder
   here. h2 keeps exactly the look the authored h3 had; the deeper levels step
   down from it instead of falling back to browser defaults. The .kl-article-body
   scope marks a body that went through the normaliser — .single-analysis-content
   stays purely the typography/editor-block skin. */
.kl-article-body h2 { font-size: 1.5rem; line-height: 1.4; margin: 2rem 0 0.625rem; color: var(--titleText); font-weight: 700; }

.kl-article-body h3 { font-size: 1.25rem; line-height: 1.4; margin: 1.5rem 0 0.625rem; color: var(--titleText); font-weight: 700; }

.kl-article-body h4 { font-size: 1.125rem; line-height: 1.4; margin: 1.25rem 0 0.5rem; color: var(--titleText); font-weight: 700; }

/* /analize list view: date groups and the subcategory label are H2 (the page H1
   lives in .section-title), sized here so the level carries no visual weight. */
.date-heading h2 { font-size: 1.5rem; line-height: 1.4; margin: 2rem 0 0.625rem; color: var(--titleText); font-weight: 700; }

.news-subcategory h2 { font-size: 1.25rem; line-height: 1.4; margin: 0; color: var(--titleText); font-weight: 700; }

@media (max-width: 768px) {
  .date-heading h2 { font-size: 1.25rem; }
  .kl-article-body h2 { font-size: 1.25rem; }
  .kl-article-body h3 { font-size: 1.125rem; }
  .kl-article-body h4 { font-size: var(--kl-fs-16); }
}

.error-message { margin-top: 10px; padding: 10px; background: rgb(255, 238, 238); border: 1px solid rgb(255, 204, 204); border-radius: var(--kl-r-4); color: rgb(204, 51, 51); font-size: 0.9rem; }

.alert { padding: 15px; margin-bottom: 20px; border-radius: var(--kl-r-4); font-size: 0.95rem; }

.banner-analiza { width: 94%; height: 70px; margin: 0px auto 2rem; display: flex; align-items: center; justify-content: space-between; border-radius: var(--kl-r-8); padding: 1rem 1.5rem; background: rgb(6, 27, 48); transform: skewX(-5deg); }

.banner-analiza:hover { box-shadow: rgb(18, 157, 246) 6px 6px 0px; }

.banner-button-wrapper { display: flex; justify-content: center; }

.banner-img { height: 55%; width: auto; }

.banner-analiza .cta { display: flex; padding: 10px 0px; text-decoration: none; font-family: Poppins, sans-serif; font-size: 40px; color: var(--white); transition: opacity var(--motion-duration-long) var(--motion-easing-standard); font-style: italic; font-weight: bold; align-items: center; }

.banner-analiza .cta:focus { outline: none; }

.banner-analiza .cta .banner-span:nth-child(2) { transition: transform var(--motion-duration-long) var(--motion-easing-standard); margin-right: 0px; }

.banner-analiza .cta:hover .banner-span:nth-child(2) { margin-right: 45px; }

.banner-analiza .banner-span { transform: skewX(5deg); }

.banner-analiza .banner-span:nth-child(2) { width: 20px; margin-left: 30px; position: relative; top: 12%; }

.banner-analiza path.one { transition: transform var(--motion-duration-long) var(--motion-easing-standard); transform: translateX(-60%); }

.banner-analiza path.two { transition: transform var(--motion-duration-long) var(--motion-easing-standard); transform: translateX(-30%); }

.banner-analiza .cta:hover path.one, .banner-analiza .cta:hover path.two { transform: translateX(0%); }

.banner-analiza .cta:hover path.three { animation: 1s ease 0.2s infinite normal none running color_anim; }

.banner-analiza .cta:hover path.one { animation: 1s ease 0.6s infinite normal none running color_anim; }

.banner-analiza .cta:hover path.two { animation: 1s ease 0.4s infinite normal none running color_anim; }

@keyframes color_anim { 
  0%, 100% { fill: var(--white); }
  50% { fill: rgb(18, 157, 246); }
}

.archive-indicator { font-size: 0.8em; color: rgb(108, 117, 125); font-weight: normal; }

.analiza-page .empty-state { padding: 30px 20px; text-align: center; background-color: rgb(248, 249, 250); border-radius: var(--kl-r-8); margin: 20px 0px; }

.analiza-page .empty-message { font-size: 16px; color: rgb(108, 117, 125); }

.analiza-page .empty-message p { margin: 10px 0px; }

.page-link.archive-toggle { background-color: rgb(240, 240, 240); font-weight: bold; }

@media (max-width: 768px) {
  .banner-analiza { width: 100%; transform: skewX(0deg); box-shadow: rgb(18, 157, 246) 6px 6px 0px; }

  .banner-analiza .cta { font-size: 24px; }

  .banner-img { height: 60%; }

  .banner-analiza .banner-span { transform: skewX(0deg); }

  .banner-analiza .banner-span:nth-child(2) { margin-left: 10px; }
}

.match-page-member-actions .like-btn, .match-page-member-report { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0px; padding: 0px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--bodyText); }

.match-page-member-actions .like-btn.active { color: var(--primaryAlt); }

@media (max-width: 1024px) {
  .analize textarea { padding: 9px 0px 0px 36px; height: 25px; }

  .analize { border-radius: 0px; margin-bottom: 0px; }

  .analize h1 { font-size: 1.25rem; margin-bottom: 1rem; }

  .empty-state p { font-size: var(--kl-fs-14); }
}

/* Featured news section styles */
.featured-news-container {
    border-bottom: 1px solid #eaeaea;
}

.featured-news-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;
    background-color: #fff;
    border-radius: var(--kl-r-8);
    overflow: hidden;
    box-shadow: 0 2px 15px -1px rgba(0, 0, 0, .06);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #efefef;
}

.featured-news-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Content side - on the left */
.featured-novosti-content {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

/* Media side - on the right */
.featured-media {
    width: 35%;
    min-width: 200px;
    position: relative;
}

.featured-image-link {
    display: block;
    height: 100%;
}

.featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* An untokenized .featured-image-placeholder copy sat here (8 declarations,
   byte-identical to global.css's .news-img-placeholder). No template, script or
   article body emits that class anywhere, so it never rendered. Deleted CSS-REST
   Step 2. The tokenized rule at ~line 485 is equally unreached — see the note
   there before assuming it is live. */

.featured-categories {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
}

.featured-category,
.featured-subcategory {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--kl-r-12);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.featured-category {
    background-color: #0e77a9;
    color: #fff;
}

.featured-subcategory {
    background-color: #f0f0f0;
    color: #555;
}

.featured-title {
    font-size: 18px;
    line-height: 1.3;
    margin: 8px 0;
}

.featured-title a {
    color: var(--titleText, #333);
    text-decoration: none;
    font-weight: 600;
}

.featured-title a:hover {
    color: #0e77a9;
}

.featured-meta {
    display: flex;
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
}

.featured-excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin-bottom: 15px;
    flex-grow: 1;
}

.featured-read-more {
    align-self: flex-start;
    color: #0e77a9;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}

.featured-read-more:after {
    content: "→";
    margin-left: 5px;
    transition: transform 0.2s;
}

.featured-read-more:hover {
    color: #005580;
}

.featured-read-more:hover:after {
    transform: translateX(3px);
}

/* Responsive adjustments for featured news */
@media (max-width: 768px) {
    .featured-news-item {
        flex-direction: column;
    }

    .featured-media {
        width: 100%;
        height: 180px;
    }
    
    .featured-title {
        font-size: 16px;
    }
    
    .featured-excerpt {
        font-size: 13px;
        margin-bottom: 10px;
    }
}

/* Breadcrumbs styling */
.breadcrumb {
    max-width: 928px;
}

.analysis-header h1 {
    font-size: 32px;
    margin-bottom: 10px;
    color: var(--titleText, #333);
}

.separ {
    margin: 0 4px;
}

.analysis-featured-image {
    margin: 24px 0 0;
}

.analysis-featured-image img {
    width: 100%;
    height: auto;
    border-radius: var(--kl-r-12);
}

.single-analysis-content {
    font-size: 16px;
    line-height: 1.6;
    color: var(--bodyText);
    margin-bottom: 25px;
}

/* Item info styles */
.item-info {
    border-bottom: 1px solid #ddd;
    color: #888;
    font-size: 12px;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0 0.75rem;
}

.item-info-details {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.item-info-span {
    color: var(--bodyText, #333);
    font-weight: 500;
    line-height: 150%;
    font-size: var(--kl-fs-14);
}

/* Related articles styles */
.related-title {
    padding: 12px 10px 6px;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--bodyText, #333);
}

.related-date {
    padding: 0 10px 12px;
    font-size: 12px;
    color: #888;
}

/* News card */
.novosti-card {
    background-color: #fff;
    border-radius: var(--kl-r-10);
    overflow: hidden;
    box-shadow: 0 2px 15px -1px rgba(0, 0, 0, .06);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #efefef;
}

.novosti-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.novosti-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Media section */
.novosti-card-media {
    position: relative;
    height: 180px;
    overflow: hidden;
        border-radius: var(--kl-r-10);
    box-shadow: 0 2px 6px -1px rgba(7, 10, 25, .2), 0 6px 12px -6px rgba(7, 10, 25, .2);
}

/* Category badge */
.news-category {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: var(--kl-r-20);
    text-transform: uppercase;
    letter-spacing: 0.5px;
      white-space: nowrap;
  background-color: rgba(200, 200, 200, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
}

/* Content section */
.novosti-card-content {
    padding: 15px;
}

.news-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .analysis-header h1 {
        font-size: 1.5rem;
    }
}

/* ── Mobile rules migrated from responsive-11.css (CSS-PLAN Step 6): news
   surfaces (.vijest listing card, tags, meta, #vesti_items, .analysis-content
   — the latter's home.css base never loads on news URIs; this rule was
   always the live one). End-of-file keeps the last-word cascade position.
   Gate converted max-device-width → max-width per owner decision 2026-07-20. ── */
@media (max-width: 1024px) {
    .analysis-tags {
        overflow-x:auto;
        flex-wrap: nowrap;
    }
    
    .tag-badge {
        flex-shrink:0;
    }
    
    #vesti_items {
        display: grid;
        grid-template-columns: 1fr;
      gap: 1rem;
      padding: .75rem .75rem 0;
    }
    
    .vijest img {
        width: 102px;
        border-radius: .5rem 0 0 .5rem;
        height: 100%;
    }
    
    .vijest {
        background: var(--white);
        box-shadow: var(--shadowButton);
        border-radius: .5rem;
        display: flex;
        flex-direction: row;
        min-height: 104px;
      }
    
    .news-meta {
        gap: 0;
        font-size: var(--kl-fs-12);
      }
    
    .analysis-content {
            padding: 12px;
        }

}

/* ==========================================================================
   15a — Najave / Vijesti / U fokusu article index (najave/vijesti/u-fokusu)
   Lead card + dense list card. Mobile spec at 390px; desktop reuses the same
   components in a centred column. Colours are tokens; component dimensions
   (image slots, 18px card radius, half-px type) are literal by design.
   ========================================================================== */

/* Full-bleed listing wrapper: header hairline runs the full column width, the
   20px gutter sits on the children (spec §4). */
.container-main.kl-main #vesti-items.kl-nv-page,
.container-main.kl-main .kl-nv-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 0 var(--kl-sp-40) 0;
}

/* ---- Header block (§4) ---- */
.container-main.kl-main .kl-nv-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 14px 0;
  border-bottom: 1px solid var(--kl-divider-2);
}
/* Breadcrumb on the category/sport listings. Reuses the article crumb component
   (.news-article-crumb) and only adds the side gutter the title and intro carry. */
.container-main.kl-main .kl-nv-head .news-article-crumb { padding: 0 var(--kl-sp-16); }
.container-main.kl-main .kl-nv-title {
  margin: 0;
  padding: 0 var(--kl-sp-16);
  font: 800 20px var(--kl-font-display);
  color: var(--kl-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.container-main.kl-main .kl-nv-intro {
  margin: 0;
  padding: 0 var(--kl-sp-16);
  font: 400 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
  line-height: 1.5;
}
.container-main.kl-main .kl-nv-chips {
  display: flex;
  gap: 6px;
  padding: 0 var(--kl-sp-16);
  overflow-x: auto;
  scroll-padding: 0 var(--kl-sp-16);
  scrollbar-width: none;
}
.container-main.kl-main .kl-nv-chips::-webkit-scrollbar { display: none; }
.container-main.kl-main .kl-nv-chip {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: var(--kl-r-pill);
  padding: 6px 12px;
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-2);
  background: var(--kl-surface-3);
  text-decoration: none;
}
.container-main.kl-main .kl-nv-chip.is-active {
  font-weight: 700;
  color: var(--kl-on-dark);
  background: var(--kl-blue);
}

/* ---- Content region (§5-§6) ---- */
.container-main.kl-main .kl-nv-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px var(--kl-sp-16) 0 var(--kl-sp-16);
}

/* Shared image fill — the slot's box is fixed; only the fill changes (§0). */
.container-main.kl-main .kl-nv-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Lead card (§5) ---- */
.container-main.kl-main .kl-nv-lead {
  display: block;
  border: 1px solid var(--kl-border);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.container-main.kl-main .kl-nv-lead-media {
  position: relative;
  height: 146px;
  background: var(--kl-surface-4); /* loading / no-image / error fill (§0) */
}
.container-main.kl-main .kl-nv-lead-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: var(--kl-r-pill);
  font: 700 10px var(--kl-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kl-ink);
  background: var(--kl-on-dark);
}
.container-main.kl-main .kl-nv-lead-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
}
.container-main.kl-main .kl-nv-lead-title {
  margin: 0;
  font: 800 17px var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.3;
}
.container-main.kl-main .kl-nv-lead-desc {
  margin: 0;
  font: 400 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.container-main.kl-main .kl-nv-lead-meta {
  font: 400 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-4);
}

/* ---- List card (§6) ---- */
.container-main.kl-main .kl-nv-list {
  border: 1px solid var(--kl-border);
  border-radius: 18px;
  overflow: hidden;
}
.container-main.kl-main .kl-nv-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--kl-divider);
  text-decoration: none;
  color: inherit;
}
.container-main.kl-main .kl-nv-row:last-child { border-bottom: 0; }
.container-main.kl-main .kl-nv-thumb {
  flex-shrink: 0;
  width: 92px;
  height: 69px;
  border-radius: var(--kl-r-10);
  overflow: hidden;
  background: var(--kl-surface-4);
}
.container-main.kl-main .kl-nv-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.container-main.kl-main .kl-nv-row-cat {
  font: 600 var(--kl-fs-10) var(--kl-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kl-text-4);
}
.container-main.kl-main .kl-nv-row-title {
  margin: 0;
  font: 700 var(--kl-fs-14) var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.container-main.kl-main .kl-nv-row-date {
  font: 400 11px var(--kl-font-ui);
  color: var(--kl-text-4);
}

/* Subtle pointer affordance on devices that hover (desktop). */
@media (hover: hover) {
  .container-main.kl-main .kl-nv-lead:hover .kl-nv-lead-title,
  .container-main.kl-main .kl-nv-row:hover .kl-nv-row-title { color: var(--kl-blue); }
}

/* ---- Empty state (§9) ---- */
.container-main.kl-main .kl-nv-empty {
  margin: 0;
  padding: 40px 20px;
  text-align: center;
  font: 500 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
}

/* ---- Layout wrappers ----
   Mobile is a single column: the grid is a plain block and the sponsored rail
   is desktop-only (§8). Desktop overrides live in the min-width block below. */
.container-main.kl-main .kl-nv-grid { display: block; }
.container-main.kl-main .kl-nv-col { min-width: 0; }
.container-main.kl-main .kl-nv-rail { display: none; }

/* Fully white page (spec §1; matches the home 9a chrome). The shell paints the
   desktop body grey via `body:has(.kl-appbar)`; this page-sheet selector loads
   after global.css and wins on cascade, repainting white on both the 15a
   listing (`.kl-nv-page`: najave / vijesti / u-fokusu / kladjenje) and the
   article detail (`.news-article`: those sections' articles + guide pages). */
body:has(.kl-nv-page),
body:has(.news-article) { background: var(--kl-surface); }

/* ==========================================================================
   15a desktop (≥1024px): main column (1fr) + sponsored rail (380px), gutter
   40px, 36px gap (§2). Component dimensions (440px lead image, 120×80 thumbs,
   34px logo tile) are literal by design; colours stay tokens.
   ========================================================================== */
@media (min-width: 1024px) {
  /* Full-width frame; the grid supplies the page gutter (§2). */
  .container-main.kl-main #vesti-items.kl-nv-page,
  .container-main.kl-main .kl-nv-page { max-width: none; padding: 0; }

  .container-main.kl-main .kl-nv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 36px;
    align-items: start;
    padding: var(--kl-sp-28) var(--kl-sp-40) var(--kl-sp-40);
  }
  .container-main.kl-main .kl-nv-col { display: flex; flex-direction: column; gap: 18px; }

  /* Header block — no border on desktop; the app bar already separates it (§4). */
  .container-main.kl-main .kl-nv-head { padding: 0; border-bottom: 0; gap: 14px; }
  .container-main.kl-main .kl-nv-head .news-article-crumb { padding: 0; }
  .container-main.kl-main .kl-nv-title { padding: 0; font-size: 26px; }
  .container-main.kl-main .kl-nv-intro { padding: 0; font-size: var(--kl-fs-14); }

  /* Chips wrap instead of scrolling; desktop pill size (§4). */
  .container-main.kl-main .kl-nv-chips { padding: 0; gap: var(--kl-sp-8); flex-wrap: wrap; overflow: visible; }
  .container-main.kl-main .kl-nv-chip { padding: 7px 14px; font-size: 12px; }

  /* Content column — grid supplies the gutter; 18px between cards. */
  .container-main.kl-main .kl-nv-content { padding: 0; gap: 18px; }

  /* Lead card — image left (440px) + text right, text vertically centred (§5). */
  .container-main.kl-main .kl-nv-lead { display: grid; grid-template-columns: 440px 1fr; }
  .container-main.kl-main .kl-nv-lead-media { height: 100%; min-height: 248px; }
  .container-main.kl-main .kl-nv-lead-badge { top: 14px; left: 14px; }
  .container-main.kl-main .kl-nv-lead-body { justify-content: center; gap: 10px; padding: 22px 24px; }
  .container-main.kl-main .kl-nv-lead-title { font-size: 22px; line-height: 1.28; }
  .container-main.kl-main .kl-nv-lead-desc { font-size: var(--kl-fs-14); line-height: 1.55; -webkit-line-clamp: 3; }
  .container-main.kl-main .kl-nv-lead-meta { font-size: 12px; }

  /* List rows — 120×80 thumbs, roomier row padding (§6). */
  .container-main.kl-main .kl-nv-row { padding: 14px 16px; gap: 16px; }
  .container-main.kl-main .kl-nv-thumb { width: 120px; height: 80px; }
  .container-main.kl-main .kl-nv-row-cat { font-size: 10px; }
  .container-main.kl-main .kl-nv-row-title { font-size: 15px; }
  .container-main.kl-main .kl-nv-row-date { font-size: var(--kl-fs-12); }
  @media (hover: hover) {
    .container-main.kl-main .kl-nv-row:hover { background: var(--kl-surface-2); }
  }

  /* Right rail — single sponsored "Bonusi kladionica" card (§8; mirrors 9a). */
  /* align-items:stretch overrides the global bare `aside{align-items:center}`,
     which otherwise shrinks the card to its content width instead of 380px. */
  .container-main.kl-main .kl-nv-rail { display: flex; flex-direction: column; align-items: stretch; gap: var(--kl-sp-20); padding: 0; }
  .container-main.kl-main .kl-nv-rcard {
    border: 1px solid var(--kl-border);
    border-radius: var(--kl-r-16);
    overflow: hidden;
    background: var(--kl-surface);
  }
  /* The rail card's header bar and its h2 are global.css's `.kl-card-head`
     (COMP Step 3). The sponsor tag below stays here — it is news-only. */
  .container-main.kl-main .kl-nv-rcard-tag {
    font: 500 var(--kl-fs-10) var(--kl-font-ui);
    color: var(--kl-text-disabled);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .container-main.kl-main .kl-nv-rlist {
    display: flex;
    flex-direction: column;
    padding: var(--kl-sp-12) var(--kl-sp-16) var(--kl-sp-16);
  }
  /* The row, text block and CTA pill are global.css's `.kl-bonus-*` (COMP
     Step 2). The rail used to sit its logos on a navy plate because it was fed
     white-on-transparent review logos; it now takes the square bookmaker tiles
     from /static/img/bookmakers-square/, which carry their own brand
     background, so the plate would only show as a navy ring (owner 2026-08-17). */
  .container-main.kl-main .kl-nv-rcard .kl-bonus-row img {
    border-radius: 9px;
  }

  /* "Današnje utakmice" card: header "Svi mečevi ›" link + body that hosts the
     shared today-matches widget (widget cards are styled in global.css). */
  .container-main.kl-main .kl-nv-rcard-link {
    flex-shrink: 0;
    font: 600 var(--kl-fs-12) var(--kl-font-ui);
    color: var(--kl-blue);
    text-decoration: none;
    white-space: nowrap;
  }
  .container-main.kl-main .kl-nv-rcard-link:hover { text-decoration: underline; }
  .container-main.kl-main .kl-nv-rbody { padding: var(--kl-sp-8) var(--kl-sp-12) var(--kl-sp-12); }
  /* Keep the widget's fixture cards inside the 380px rail. The wrapper carries
     its own 0.75rem padding in global.css, so it must be border-box — a plain
     width:100% made it 24px wider than the rail and overflowed. */
  .container-main.kl-main .kl-nv-rbody .today-matches-widget-wrapper {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0;
  }
  .container-main.kl-main .kl-nv-rbody .match-card-upcoming { margin: 0 0 var(--kl-sp-8); }
}

/* ==========================================================================
   11f / 11g — Article detail (najave / vijesti / u-fokusu / vodič).
   Single .news-article wrapper (no nested .news-single + .single-analysis).
   Mobile = one column; desktop = main + 380px related rail.
   ========================================================================== */
.container-main.kl-main .news-article {
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--kl-sp-16) var(--kl-sp-16) var(--kl-sp-40);
}
.container-main.kl-main .news-article-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Breadcrumb (category › subcategory) */
.container-main.kl-main .news-article-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 11px var(--kl-font-ui);
  color: var(--kl-text-4);
}
.container-main.kl-main .news-article-crumb a { color: var(--kl-text-4); text-decoration: none; }
.container-main.kl-main .news-article-crumb a:hover { color: var(--kl-ink); }
.container-main.kl-main .news-article-crumb .sep { color: var(--kl-text-disabled); }

/* Title */
.container-main.kl-main .news-article-title {
  margin: 0;
  font: 800 20px var(--kl-font-display);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--kl-ink);
}

/* Hero image — ratio, not fixed height, so mobile and desktop each get a
   proportionate crop (220px-ish on a phone, ~460px on the desktop column). */
.container-main.kl-main .news-article-hero {
  aspect-ratio: 16 / 10;
  border-radius: var(--kl-r-16);
  overflow: hidden;
  background: var(--kl-surface-4);
}
.container-main.kl-main .news-article-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Byline: author left · share + like right */
.container-main.kl-main .news-article-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-10);
}
.container-main.kl-main .news-article-author {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-10);
  min-width: 0;
}
.container-main.kl-main .news-article-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--kl-surface-4);
  flex-shrink: 0;
}
.container-main.kl-main .news-article-authormeta { display: flex; flex-direction: column; min-width: 0; }
.container-main.kl-main .news-article-authorname { font: 700 12px var(--kl-font-ui); color: var(--kl-ink); }
.container-main.kl-main .news-article-date { font: 500 11px var(--kl-font-ui); color: var(--kl-text-4); }

.container-main.kl-main .news-article-actions { display: flex; align-items: center; gap: var(--kl-sp-8); flex-shrink: 0; }
.container-main.kl-main .news-article-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--kl-text-2);
  cursor: pointer;
  padding: 6px;
  font: 600 12px var(--kl-font-ui);
}
.container-main.kl-main .news-article-btn:hover { color: var(--kl-ink); }
/* Like: bordered pill on all sizes. Mobile = heart + count; desktop also shows
   the "Sviđa mi se" label. */
.container-main.kl-main .news-article-like {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-pill);
  padding: 6px 10px;
}
.container-main.kl-main .news-article-like .like-text { display: none; }
/* .active is what js/novosti-likes.js toggles; .is-liked kept for older markup. */
.container-main.kl-main .news-article-like.is-liked,
.container-main.kl-main .news-article-like.active { color: var(--kl-red); }
.container-main.kl-main .news-article-like.active .like-icon svg { fill: currentColor; }
/* The article heart is an inline 17px <svg>; the legacy 16px img box clips it. */
.container-main.kl-main .news-article-like .like-icon {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  overflow: visible;
}

/* Tags */
.container-main.kl-main .news-article-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.container-main.kl-main .news-article-tag {
  font: 600 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-2);
  background: var(--kl-surface-3);
  border-radius: var(--kl-r-pill);
  padding: 4px 10px;
  text-decoration: none;
}
.container-main.kl-main .news-article-tag:hover { color: var(--kl-ink); }

/* Related (11g) — rail on desktop, stacked below on mobile.
   `display:block` overrides the legacy mobile `aside{display:none}`. */
.container-main.kl-main .news-article-rail { display: block; margin-top: var(--kl-sp-24); }
.container-main.kl-main .news-article-related { display: flex; flex-direction: column; gap: var(--kl-sp-10); }
.container-main.kl-main .news-article-related h2 {
  margin: 0;
  font: 700 14px var(--kl-font-display);
  color: var(--kl-ink);
}
.container-main.kl-main .news-rel {
  display: flex;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-14);
  text-decoration: none;
}
.container-main.kl-main .news-rel:hover { border-color: var(--kl-border-strong); }
.container-main.kl-main .news-rel-thumb {
  flex: 0 0 92px;
  width: 92px;
  height: 68px;
  border-radius: var(--kl-r-10);
  overflow: hidden;
  background: var(--kl-surface-4);
}
.container-main.kl-main .news-rel-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.container-main.kl-main .news-rel-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.container-main.kl-main .news-rel-title {
  font: 700 var(--kl-fs-13) var(--kl-font-ui);
  line-height: 1.35;
  color: var(--kl-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.container-main.kl-main .news-rel-date { font: 500 var(--kl-fs-11) var(--kl-font-ui); color: var(--kl-text-4); }

/* ---- Desktop: main + 380px related rail (11f) ---- */
@media (min-width: 1024px) {
  .container-main.kl-main .news-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 36px;
    padding: var(--kl-sp-28) var(--kl-sp-16) var(--kl-sp-48);
  }
  .container-main.kl-main .news-article-main { gap: 18px; }
  .container-main.kl-main .news-article-title { font-size: 30px; }
  .container-main.kl-main .news-article-hero { height: 320px; }
  .container-main.kl-main .news-article-rail { margin-top: 0; }
  /* Desktop adds the "Sviđa mi se" label to the (already bordered) like pill. */
  .container-main.kl-main .news-article-like { padding: 6px 12px; }
  .container-main.kl-main .news-article-like .like-text { display: inline; }
}

/* ── Povezane utakmice (IA-2026 najava → bet-centar chips) ────────────────── */
.kl-nv-matchchips { margin: var(--kl-sp-24) 0; }
.kl-nv-matchchips-title { font: 800 var(--kl-fs-17) var(--kl-font-display); color: var(--kl-ink); margin: 0 0 var(--kl-sp-12); }
.kl-nv-matchchips-row { display: flex; flex-wrap: wrap; gap: var(--kl-sp-10); }
.kl-nv-matchchip { display: flex; flex-direction: column; gap: 2px; padding: var(--kl-sp-10) var(--kl-sp-14); border: 1px solid var(--kl-border); border-radius: var(--kl-r-12); text-decoration: none; background: var(--kl-surface); }
.kl-nv-matchchip:hover { border-color: var(--kl-border-strong); }
.kl-nv-matchchip strong { font: 700 var(--kl-fs-13) var(--kl-font-ui); color: var(--kl-ink); }
.kl-nv-matchchip small { font: 500 var(--kl-fs-12) var(--kl-font-ui); color: var(--kl-text-2); }

/* ── Today-matches widget: empty-state line ───────────────────────────────────
   includes/today-matches-widget.php's "Nema utakmica za danas" paragraph. It had
   no class and took its 16px padding from global.css's bare `aside p` rule; that
   rule is now scoped to the legacy shell (CSS-FINAL Step 4), so on the
   redesigned rails this class is the only thing padding it. Values are the ones
   the bare rule was supplying, so rendering is unchanged everywhere.
   The widget also renders inside the legacy `includes/aside.php` on /analize and
   the tennis page; there the scoped rule still applies and simply restates the
   same values. (/blog.php was a third such surface until INLINE-STYLE Step 2
   deleted that page.) Audit: CSS-AUDIT-FINAL.md §6.2. */
.kl-rail-empty {
  padding: var(--kl-sp-16);
  font-weight: 500;
  margin: 0;
}