/* ==========================================================================
   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: 8px; }

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

/* ==========================================================================
   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 ============================== */

/* Top breadcrumb bar (semantic, carries BreadcrumbList JSON-LD) — align to the
   article column and tokenize the legacy Bootstrap-style list. */
.container-main.kl-main .news-single {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--kl-sp-14) var(--kl-sp-16) 0 var(--kl-sp-16);
}

.container-main.kl-main .news-single .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kl-sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
}

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

.container-main.kl-main .news-single .breadcrumb-item + .breadcrumb-item::before {
  content: "\203A";           /* › */
  color: var(--kl-text-disabled);
  padding: 0;
}

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

.container-main.kl-main .news-single .breadcrumb-item.active {
  color: var(--kl-text-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
}

.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 h3 {
  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 12.5px var(--kl-font-ui);
  color: var(--kl-ink);
  line-height: 1.35;
}

.container-main.kl-main .related-date {
  font: 500 10.5px 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;
}

.container-main.kl-main .featured-image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--kl-r-12);
  background: var(--kl-surface-3);
  color: var(--kl-text-4);
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
}

.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: 4px;
}

.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: 0.75rem;
}


/* 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: 10px; 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: 20px; 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: 0.875rem; }

.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: 1rem; }

  .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); }

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

.alert { padding: 15px; margin-bottom: 20px; border-radius: 4px; 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: 8px; 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: 8px; 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: 0.875rem; }
}

/* 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: 8px;
    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;
}

.featured-image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 14px;
}

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

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

.featured-category {
    background-color: var(--c-main, #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: var(--c-main, #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: var(--c-main, #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: 12px;
}

.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: 0.875rem;
}

/* 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: var(--mutedText, #888);
}

/* News card */
.novosti-card {
    background-color: #fff;
    border-radius: 10px;
    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: 10px;
    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: 20px;
    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: 0.75rem;
      }
    
    .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);
}
.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 12.5px 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 11.5px 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 12.5px 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 11.5px 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 9.5px 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 13.5px 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 12.5px 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-title { padding: 0; font-size: 26px; }
  .container-main.kl-main .kl-nv-intro { padding: 0; font-size: 13.5px; }

  /* 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: 13.5px; 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: 11.5px; }
  @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);
  }
  .container-main.kl-main .kl-nv-rcard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kl-sp-10);
    padding: var(--kl-sp-14) var(--kl-sp-16);
    border-bottom: 1px solid var(--kl-divider);
  }
  .container-main.kl-main .kl-nv-rcard-head h2 { margin: 0; font: 700 var(--kl-fs-14) var(--kl-font-display); color: var(--kl-ink); }
  .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);
  }
  .container-main.kl-main .kl-nv-bonus { display: flex; align-items: center; gap: var(--kl-sp-12); padding: 9px 0; text-decoration: none; }
  .container-main.kl-main .kl-nv-bonus + .kl-nv-bonus { border-top: 1px solid var(--kl-divider); }
  .container-main.kl-main .kl-nv-bonus:hover { background: var(--kl-surface-2); }
  .container-main.kl-main .kl-nv-bonus img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: contain;
    background: var(--kl-navy);
    padding: 3px;
    flex-shrink: 0;
  }
  .container-main.kl-main .kl-nv-bonus-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .container-main.kl-main .kl-nv-bonus-text strong { font: 700 12.5px var(--kl-font-display); color: var(--kl-ink); }
  .container-main.kl-main .kl-nv-bonus-text small { font: 400 var(--kl-fs-11) var(--kl-font-ui); color: var(--kl-text-4); }
  .container-main.kl-main .kl-nv-bonus-cta {
    flex-shrink: 0;
    padding: 5px 12px;
    border: 1px solid var(--kl-border-strong);
    border-radius: var(--kl-r-pill);
    font: 700 11.5px var(--kl-font-ui);
    color: var(--kl-ink);
    white-space: nowrap;
  }

  /* "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 */
.container-main.kl-main .news-article-hero {
  height: 180px;
  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 10.5px 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 12.5px 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 10.5px 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); }