/* ==========================================================================
   Naslovna — 2026 ground-up rebuild. Desktop follows screen 9a
   (handoff/reference/desktop/9a.html); mobile follows screens 7a/7b/7c
   (handoff/reference/mobile/) — same markup, per-breakpoint layout.

   All classes are prefixed `in-` (index) and are unique to this page. Colors,
   spacing and radii come from css/design-tokens.css (--kl-*), which encodes the
   exact handoff palette. Half-pixel font sizes with no token are inlined from
   the reference. Mobile-first; desktop layout at min-width: 1024px.
   ========================================================================== */

.in-page {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--kl-sp-16) var(--kl-sp-16) 0;
  background: var(--kl-surface);
  color: var(--kl-ink);
  font-family: var(--kl-font-ui);
  min-height: 60vh;
}

.in-page *,
.in-page *::before,
.in-page *::after { box-sizing: border-box; }

/* Naslovna chrome is white (owner). The shell paints the body grey via
   `body:has(.kl-appbar)`; match that selector so this page-only sheet (loaded
   after global.css) wins on cascade order. */
body:has(.kl-appbar) { background: var(--kl-surface); }

/* --- Logo tagline = the page <h1>, visible under the logo (naslovna only).
   Replaces the old display:none .in-intro block — no hidden SEO text.
   Styling supplied verbatim by owner (2026-07-31). ----------------------- */
.kl-logo { flex-direction: column; align-items: flex-start; gap: 2px; }
.home-logo-title {
  color: rgba(255,255,255, 0.80);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  margin: 0;
  max-width: 200px;
}
/* Owner 2026-08-02: at 360px the lockup + action row overflowed the app bar
   (408px needed, logged out). The tagline is what makes this logo 30px wider
   than every other page's, so it condenses with the mark instead of anything
   leaving the bar — the H1 stays visible for mobile-first indexing. Paired with
   the 132px logo mark in global.css's ≤430 block. */
@media (max-width: 430px) {
  .home-logo-title { font-size: var(--kl-fs-10); max-width: 132px; }
}

/* --- Live ticker (desktop strip; hidden on mobile) ---------------------- */
.in-ticker { display: none; }

/* --- Section headers (main column): accent bar kept per owner ----------- */
.in-sechead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-12);
  margin-bottom: var(--kl-sp-14);
}
.in-sechead h2 {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-8);
  margin: 0;
  font: 800 18px var(--kl-font-display);
  color: var(--kl-ink);
}
.in-sechead h2::before {
  content: '';
  width: 4px;
  height: 18px;
  border-radius: var(--kl-r-2);
  background: var(--kl-ink);
  flex-shrink: 0;
}
.in-sechead > a {
  font: 600 var(--kl-fs-13) var(--kl-font-ui);
  color: var(--kl-text-2);
  text-decoration: none;
  white-space: nowrap;
}
.in-sechead > a:hover { color: var(--kl-ink); }

/* Shared kicker (uppercase meta above card titles). */
.in-kicker {
  font: 600 var(--kl-fs-10) var(--kl-font-ui);
  color: var(--kl-text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Layout: single column (mobile) → main + rail (desktop) -------------- */
.in-grid {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-24);
}
.in-main,
.in-rail {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-24);
  min-width: 0;
}

/* --- Hero + najave top row ---------------------------------------------- */
.in-top { display: flex; flex-direction: column; gap: var(--kl-sp-20); }

/* Mobile layout + component overrides live in the "Mobile — screens 7a/7b/7c"
   block near the end of the file (after all base rules, so they win ties). */

/* Hero: text over image (owner decision — kept from the live site). */
.in-hero {
  position: relative;
  display: block;
  border-radius: var(--kl-r-16);
  overflow: hidden;
  min-height: 300px;
  text-decoration: none;
  background: var(--kl-surface-4);
}
.in-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Legibility treatment — ported 1:1 from the live site's
   .featured-image-container (kl-home.css §hero): a blurred, masked scrim over
   the bottom 60% plus a faint full-bleed darkening layer. Keep both rules
   byte-identical to the live ones; the redesign only reuses them. */
.in-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  z-index: 2;
  background: rgba(5, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  -webkit-mask-image: linear-gradient(0deg, #000 0, #000c 70%, #0000);
  mask-image: linear-gradient(0deg, #000 0, #000c 70%, #0000);
  border-radius: 0.75rem;
}
.in-hero::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.2;
  background: linear-gradient(0deg, var(--kl-scrim-10), var(--kl-scrim-10)), linear-gradient(180deg, #0000, #0009);
}
.in-hero-chip {
  position: absolute;
  top: var(--kl-sp-14);
  left: var(--kl-sp-14);
  z-index: 3;
  padding: 5px 12px;
  border-radius: var(--kl-r-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  font: 700 var(--kl-fs-10) var(--kl-font-ui);
  letter-spacing: 0.08em;
  color: var(--kl-on-dark);
}
.in-hero-body {
  position: absolute;
  left: var(--kl-sp-20);
  right: var(--kl-sp-20);
  bottom: var(--kl-sp-20);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-8);
}
.in-hero-title {
  font: 800 24px var(--kl-font-display);
  line-height: 1.2;
  color: var(--kl-on-dark);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.in-hero-desc {
  font: 400 var(--kl-fs-13) var(--kl-font-ui);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.in-hero-meta {
  font: 500 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-on-dark-70);
}

/* Najave column: bordered thumb-cards; link below (9a, no header). */
.in-najave-col { display: flex; flex-direction: column; gap: var(--kl-sp-8); }
.in-najave-list { display: flex; flex-direction: column; gap: var(--kl-sp-8); }
.in-najava {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-12);
  padding: var(--kl-sp-8);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-14);
  text-decoration: none;
  transition: background var(--kl-dur-short) var(--kl-ease);
}
.in-najava:hover { background: var(--kl-surface-2); }
.in-najava-img {
  width: 92px;
  height: 66px;
  border-radius: var(--kl-r-10);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--kl-surface-3);
}
.in-najava-text { display: flex; flex-direction: column; gap: var(--kl-sp-4); min-width: 0; }
.in-najava-text strong {
  font: 700 var(--kl-fs-13) var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.25;
}
/* Najave has its own section header (title + link), like the other sections.
   Tighten the header→cards gap so it matches the rest (gap 8 + this = 14). */
.in-najave-col .in-sechead { margin-bottom: var(--kl-sp-6); }

/* --- Tipovi: two-column card grid (9a) ---------------------------------- */
.in-tips-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kl-sp-14);
}
.in-tip {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-16);
  overflow: hidden;
  background: var(--kl-surface);
  transition: box-shadow var(--kl-dur-short) var(--kl-ease);
}
.in-tip:hover { box-shadow: var(--kl-shadow-sm); }
/* Whole-card click target (stretched); interactive children sit above it. */
.in-tip-link { position: absolute; inset: 0; z-index: 1; font-size: 0; }

.in-tip-body {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-8);
  padding: var(--kl-sp-14) var(--kl-sp-16);
  flex: 1 1 auto;
}
.in-tip-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-10);
  margin-bottom: 4px;
}
.in-tip-meta {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-6);
  min-width: 0;
}
.in-tip-flag {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--kl-logo-ph);
}
.in-tip-meta-text {
  font: 500 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-3);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* IA-3: live score chip inside the card meta row. Empty until the poller
   fills it, so it must not reserve space or push the league label. */
.in-tip-live:empty { display: none; }
.in-tip-live .matchScore {
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-ink);
  white-space: nowrap;
}
.in-tip-live .matchScore.isLive { color: var(--kl-red); }
.in-tip-live .matchTime { color: var(--kl-text-3); }
.in-tip-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-4);
  padding: 5px 11px;
  border: 1px solid var(--kl-border-strong);
  border-radius: var(--kl-r-6);
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-ink);
  white-space: nowrap;
  flex-shrink: 0;
}
/* The outcome chip that lived here is now global.css's `.bet-status-chip`
   (COMP Step 1) — same component, and the two were identical apart from
   flex-shrink, which the shared rule adopted. */

.in-tip-title {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-8);
  margin: 0;
  font: 800 var(--kl-fs-16) var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.25;
}
.in-tip-novo { font: 700 var(--kl-fs-10) var(--kl-font-ui); color: var(--kl-red); letter-spacing: 0.06em; }
.in-tip-excerpt {
  margin: 0;
  font: 400 var(--kl-fs-13) 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;
}

.in-tip-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-12);
  padding: 11px var(--kl-sp-16);
  border-top: 1px solid var(--kl-divider);
  border-radius: var(--kl-r-12);
  background: var(--kl-surface-2);
}
.in-tip-prognoza { display: flex; flex-direction: column; gap: var(--kl-sp-2); min-width: 0; }
.in-tip-prognoza-label {
  font: 600 var(--kl-fs-10) var(--kl-font-ui);
  color: var(--kl-text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.in-tip-prognoza-pick { font: 800 var(--kl-fs-14) var(--kl-font-display); color: var(--kl-ink); }
/* Odds + bookmaker tile — same anatomy as the /tipovi bet card's .bet-odds
   (odds over the bookmaker logo on a white tile), owner 2026-08-02. */
.in-tip-odds {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kl-sp-4);
  text-decoration: none;
  flex-shrink: 0;
  background: var(--kl-surface);
  border-radius: var(--kl-r-6);
  padding-top: var(--kl-sp-4);
  overflow: hidden;
}
/* Odds stay neutral in every settlement state — the status chip in the card
   header is the single outcome signal (owner 2026-08-03). */
.in-tip-odds-value { font: 800 var(--kl-fs-16) var(--kl-font-display); color: var(--kl-ink); }
.in-tip-odds .bookie-logo {
  display: block;
  height: 16px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  border-radius: var(--kl-r-2);
}

/* --- Banner (extra; not in 9a but kept, styled clean) ------------------- */
.in-banner-main { display: block; }
.in-banner { display: block; text-decoration: none; }
.in-banner img,
.in-banner picture { display: block; width: 100%; height: auto; border-radius: var(--kl-r-14); }
/* The slot owns its height instead of inheriting whichever artwork the rotation
   served. One <img> serves both breakpoints, so its width/height attributes can
   only describe one of them: the box was reserved at the desktop ratio and then
   re-laid-out to the 380×85 mobile one, a ~46px jump at phone width — and the
   banner is lazy-loaded below the fold, so the jump landed mid-scroll. Fixing
   the ratio per breakpoint makes the reserved box the final box; object-fit
   letterboxes anything off the house sizes (1280×100 wide, 380×85 mobile)
   rather than letting it resize the slot. */
.in-banner img { aspect-ratio: 1280 / 100; object-fit: contain; }
@media (max-width: 767px) {
  .in-banner img { aspect-ratio: 380 / 85; }
}
/* Rail slot: the 380×85 mobile-width artwork. Never blown up past its native
   size — the rail is 380px at ≥1360 and shrinks from there. It falls back to the
   wide desktop asset when a row has no mobile one, so it keeps the 380×85 box at
   every width rather than flattening to the wide ratio. */
.in-banner--rail img { max-width: 380px; margin-inline: auto; aspect-ratio: 380 / 85; }

/* --- Najnovije: three-column image-on-top cards (9a layout). Kicker links
   to the item's category listing, image/title link to the article. -------- */
.in-news-grid { display: grid; grid-template-columns: 1fr; gap: var(--kl-sp-14); }
.in-news { display: flex; flex-direction: column; gap: var(--kl-sp-8); }
.in-news-imglink,
.in-news-titlelink { display: block; text-decoration: none; }
.in-news-img {
  width: 100%;
  height: 150px;
  border-radius: var(--kl-r-12);
  object-fit: cover;
  background: var(--kl-surface-3);
}
.in-news-cat { color: inherit; text-decoration: none; }
.in-news-cat:hover { color: var(--kl-ink); text-decoration: underline; }
.in-news-title {
  font: 700 var(--kl-fs-14) var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.35;
}
.in-news-titlelink:hover .in-news-title { text-decoration: underline; }

/* --- Nizovi i trendovi: teaser cards for /nizovi. Same card anatomy as the
   /nizovi page (grey header strip → bulleted sentences → boxed pick row) so
   the component reads as one thing across both surfaces; the values here
   mirror kl-nizovi.css deliberately. A wrapping grid on purpose — the old
   homepage widget scrolled sideways and the picks past the fold were never
   seen (owner 2026-08-03). ----------------------------------------------- */
.in-trend-grid { display: grid; grid-template-columns: 1fr; gap: var(--kl-sp-14); }
.in-trend {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-16);
  overflow: hidden;
  background: var(--kl-surface);
}

/* Grey header strip: league · kickoff over the match itself */
.in-trend-match {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-6);
  padding: var(--kl-sp-12) var(--kl-sp-14);
  background: var(--kl-surface-2);
  border-bottom: 1px solid var(--kl-divider);
}
.in-trend-meta {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-6);
  min-width: 0;
  font: 600 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.in-trend-flag {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--kl-logo-ph);
}
.in-trend-teams { margin: 0; font: 800 var(--kl-fs-14) var(--kl-font-display); line-height: 1.3; }
.in-trend-teams a { color: var(--kl-ink); text-decoration: none; }
.in-trend-teams a:hover { text-decoration: underline; }

.in-trend-body {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-10);
  padding: var(--kl-sp-12) var(--kl-sp-14);
  flex: 1 1 auto;
}

/* Trend bullets */
.in-trend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-6);
}
.in-trend-list li {
  position: relative;
  padding-left: var(--kl-sp-16);
  font: 400 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text);
  line-height: 1.5;
}
.in-trend-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 9px;
  color: var(--kl-text-4);
}
.in-trend-list .highlightStat { font-weight: 700; color: var(--kl-ink); }

/* Boxed pick row */
.in-trend-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-10);
  margin-top: auto;
  padding: var(--kl-sp-10) var(--kl-sp-14);
  background: var(--kl-surface-2);
  border: 1px solid var(--kl-divider);
  border-radius: var(--kl-r-12);
}
.in-trend-pick strong { font: 800 var(--kl-fs-13) var(--kl-font-display); color: var(--kl-ink); }
.in-trend-odd {
  display: inline-flex;
  align-items: center;
  gap: var(--kl-sp-10);
  flex-shrink: 0;
  text-decoration: none;
}
.in-trend-odd b { font: 800 var(--kl-fs-14) var(--kl-font-display); color: var(--kl-blue); }
.in-trend-bookie {
  font: 700 9px var(--kl-font-ui);
  color: var(--kl-ink);
  background: var(--kl-surface);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-6);
  padding: 3px 7px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* --- Pogođeno jučer: the proof strip under the trends grid. Yesterday's
   graded picks, one row each — match on the left, outcome chip on the right.
   Lived in the right rail until 2026-08-07, when the compact rail copy of
   Nizovi i trendovi was removed and this block moved to the main column. -- */
.in-won {
  margin-top: var(--kl-sp-14);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-16);
  overflow: hidden;
  background: var(--kl-surface);
}
/* "Neki od" is literal — there are usually more hits than the three shown, so
   the head carries the way to see the rest: yesterday's full trend day, misses
   included (owner 2026-08-07). */
.in-won-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-10);
  padding: var(--kl-sp-12) var(--kl-sp-14);
  background: var(--kl-surface-2);
  border-bottom: 1px solid var(--kl-divider);
}
.in-won-head h3 {
  margin: 0;
  font: 700 var(--kl-fs-13) var(--kl-font-display);
  color: var(--kl-ink);
}
.in-won-head > a {
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-2);
  text-decoration: none;
  white-space: nowrap;
}
.in-won-head > a:hover { color: var(--kl-ink); }
/* Three side by side, split evenly — the picks read as one row of proof rather
   than a stack (owner 2026-08-07). Each cell is its own column: match on top,
   outcome chip under it; the main column is too narrow to keep them on one line
   at a third of its width. Mobile stacks them again, further down. */
.in-won-list { display: flex; flex-direction: row; }
.in-won-row {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--kl-sp-8);
  padding: var(--kl-sp-12) var(--kl-sp-14);
  border-right: 1px solid var(--kl-divider);
}
.in-won-row:last-child { border-right: 0; }
.in-won-info {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-4);
  min-width: 0;
  width: 100%;
}
/* Meta line: flag + league · score. Sentence case (owner 2026-08-04) — the
   shared .in-kicker uppercase treatment is deliberately not used here. */
.in-won-meta {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-6);
  font: 500 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-3);
}
.in-won-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.in-won-flag {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--kl-logo-ph);
}
/* Plain text, not a link — nothing here is clickable, so no hover affordance. */
.in-won-teams {
  font: 700 var(--kl-fs-13) var(--kl-font-display);
  color: var(--kl-ink);
  line-height: 1.25;
}
/* Chips line up along the bottom even when a long team name wraps to two lines.
   Layout only — the chip's own styling is global.css's `.bet-status-chip`. */
.in-won-row .bet-status-chip { margin-top: auto; }

/* --- Rail cards --------------------------------------------------------- */
.in-card {
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-16);
  overflow: hidden;
  background: var(--kl-surface);
}
/* The bar itself and its h2 are global.css's `.kl-card-head` (COMP Step 3).
   The trailing link below is home-only. */
.kl-card-head > a {
  font: 600 var(--kl-fs-12) var(--kl-font-ui);
  color: var(--kl-text-2);
  text-decoration: none;
  white-space: nowrap;
}
.kl-card-head > a:hover { color: var(--kl-ink); }

.in-sponsor-tag {
  font: 500 var(--kl-fs-10) var(--kl-font-ui);
  color: var(--kl-text-disabled);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Bet Centar */
.in-bc-chips { display: flex; gap: var(--kl-sp-6); padding: var(--kl-sp-12) var(--kl-sp-16) 0; }
.in-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 0;
  border-radius: var(--kl-r-pill);
  background: var(--kl-surface-3);
  font: 600 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-2);
  cursor: pointer;
}
.in-chip.is-active { font-weight: 700; color: var(--kl-on-dark); background: var(--kl-blue); }
.in-chip--live { font-weight: 700; }
/* Live count on the Uživo chip — the one number in the card (owner 2026-08-06). */
.in-chip-count { font-weight: 700; opacity: 0.65; font-variant-numeric: tabular-nums; }
/* Blinking live dot on the Uživo chip (7a). Coral (not the dark --kl-red),
   so it stays visible on the blue active chip as well as the grey one. */
.in-chip--live i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--kl-red-light);
  animation: inLivePulse 1.6s ease-in-out infinite;
}
@keyframes inLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.in-bc-list { display: flex; flex-direction: column; gap: var(--kl-sp-10); padding: var(--kl-sp-12) var(--kl-sp-16) var(--kl-sp-16); }
.in-bc-list[hidden] { display: none; }
/* Row, mobile-first = 7a sub-card: eyebrow (league · country) + live minute /
   kickoff time on top, then home team | score pill | away team. The desktop
   block below re-flows the same markup into the 9a rail one-liner. */
.in-bc-row {
  display: flex;
  flex-direction: column;
  gap: var(--kl-sp-10);
  border: 1px solid var(--kl-border);
  border-radius: var(--kl-r-14);
  padding: var(--kl-sp-12) var(--kl-sp-14);
  text-decoration: none;
  transition: background var(--kl-dur-short) var(--kl-ease);
}
.in-bc-row:hover { background: var(--kl-surface-2); }
.in-bc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-8);
}
.in-bc-head small {
  font: 500 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* League eyebrow: country flag in front, matching the tipovi/nizovi cards
   (owner 2026-08-06). The country name is dropped — the flag carries it. */
.in-bc-meta { display: inline-flex; align-items: center; gap: var(--kl-sp-6); min-width: 0; overflow: hidden; }
.in-bc-flag {
  width: 14px; height: 14px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--kl-logo-ph);
}
.in-bc-league { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* International competitions show their own crest instead of the globe flag.
   Already object-fit: contain — just drop the placeholder disc, which a tall
   crest doesn't sit inside. Shared rule for all four home badge classes. */
.in-tip-flag.is-crest,
.in-trend-flag.is-crest,
.in-won-flag.is-crest,
.in-bc-flag.is-crest { border-radius: 0; background: transparent; }

.in-bc-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 700 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-red);
  white-space: nowrap;
}
.in-bc-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--kl-red);
  animation: inLivePulse 1.6s ease-in-out infinite;
}
.in-bc-time {
  flex-shrink: 0;
  font: 700 var(--kl-fs-11) var(--kl-font-ui);
  color: var(--kl-ink);
}
.in-bc-teams {
  display: flex;
  align-items: center;
  gap: var(--kl-sp-10);
  min-width: 0;
}
.in-bc-teams strong {
  flex: 1;
  min-width: 0;
  font: 700 var(--kl-fs-14) var(--kl-font-display);
  color: var(--kl-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.in-bc-teams strong.is-away { text-align: left; }
.in-bc-score {
  flex-shrink: 0;
  font: 800 var(--kl-fs-15) var(--kl-font-display);
  color: var(--kl-text-4);
  background: var(--kl-surface-3);
  border-radius: var(--kl-r-8);
  padding: var(--kl-sp-4) var(--kl-sp-10);
  white-space: nowrap;
}
.in-bc-score.is-live,
.in-bc-score.is-final { color: var(--kl-ink); }

/* Bonusi */
.in-bonus-list { display: flex; flex-direction: column; padding: var(--kl-sp-12) var(--kl-sp-16) var(--kl-sp-16); }
/* The bonus row, its text block and its CTA pill are now global.css's
   `.kl-bonus-row` / `.kl-bonus-text` / `.kl-bonus-cta` (COMP Step 2). This card
   uses the unplated logo, which is the shared default. */

/* Sponsor slot */
.in-sponsor-slot { display: block; }

/* --- Empty states + buttons --------------------------------------------- */
.in-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kl-sp-12);
  padding: var(--kl-sp-16);
  border: 1px dashed var(--kl-border-strong);
  border-radius: var(--kl-r-14);
}
.in-empty p { margin: 0; font: 400 var(--kl-fs-13) var(--kl-font-ui); color: var(--kl-text-2); }
.in-btn {
  display: inline-flex;
  align-items: center;
  padding: var(--kl-sp-8) var(--kl-sp-16);
  border-radius: var(--kl-r-10);
  font: 700 var(--kl-fs-13) var(--kl-font-ui);
  text-decoration: none;
  cursor: pointer;
}
.in-btn-outline { border: 1px solid var(--kl-border-strong); color: var(--kl-ink); background: var(--kl-surface); }
.in-btn-outline:hover { background: var(--kl-surface-2); }

/* --- Bookmakers strip (extra; brand-colored promo cards, as on the original
   index). The three background colors below are bookmaker BRAND colors, not
   design tokens — no --kl-* equivalent exists. ---------------------------- */
/* Owner 2026-08-02: the strip scrolls sideways like the live site's
   .bookmakers-section instead of stacking into three tall blocks. */
/* Owner 2026-08-03: the strip was inset inside .in-page's 16px gutter, so on a
   375px screen it was only 343px wide and cards were CLIPPED HARD at the
   container edge — which read as a harsh edge rather than a scrollable row.
   Fix is two parts:
   1. Full-bleed — cancel the page gutter with a negative inline margin and give
      it back as padding, so the row scrolls to the true screen edge while the
      first/last card still lines up with the gutter (scroll-padding keeps snap
      positions on the gutter too).
   2. The fade region is exactly the bleed region (0 → gutter), so a card is
      fully opaque everywhere it would have been visible before and only
      dissolves in the strip of screen the old layout never used. That is what
      makes it read as "almost invisible" rather than a vignette. */
.in-bookmakers {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--kl-sp-12);
  margin-top: var(--kl-sp-24);
  margin-inline: calc(var(--kl-sp-16) * -1);
  padding-inline: var(--kl-sp-16);
  scroll-padding-inline: var(--kl-sp-16);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--kl-sp-16), #000 calc(100% - var(--kl-sp-16)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--kl-sp-16), #000 calc(100% - var(--kl-sp-16)), transparent 100%);
}
.in-bookmakers::-webkit-scrollbar { display: none; }
.in-bk {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: var(--kl-sp-16);
  flex: 0 0 auto;
  width: min(78%, 300px);
  scroll-snap-align: start;
  padding: var(--kl-sp-20) var(--kl-sp-16) var(--kl-sp-16);
  border-radius: var(--kl-r-12);
  text-align: center;
}
/* Brand backgrounds — bookmaker colours, not theme tokens, so they stay literal.
   granawin/ybets/fairpari values carried over from main's home.css. */
.in-bk--22bet      { background: #065A61; }
.in-bk--spinbetter { background: #032621; }
.in-bk--wwin       { background: #E6002E; }
.in-bk--granawin   { background: #1A003E; }
.in-bk--ybets      { background: #000000; }
.in-bk--fairpari   { background: #020122; }
.in-bk-logo { height: 30px; max-width: 140px; object-fit: contain; }
.in-bk-offer { display: flex; flex-direction: column; align-items: center; gap: var(--kl-sp-10); }
.in-bk-text { margin: 0; font: 500 var(--kl-fs-13) var(--kl-font-ui); color: rgba(255, 255, 255, 0.85); }
.in-bk-amount {
  margin: 0;
  padding: var(--kl-sp-6) var(--kl-sp-16);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--kl-r-pill);
  font: 700 var(--kl-fs-16) var(--kl-font-display);
  color: var(--kl-on-dark);
}
.in-bk-actions { display: flex; flex-direction: column; gap: var(--kl-sp-8); width: 100%; }
.in-bk-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--kl-sp-8) var(--kl-sp-16);
  border-radius: var(--kl-r-8);
  font: 700 var(--kl-fs-13) var(--kl-font-ui);
  text-decoration: none;
}
.in-bk-btn--primary { background: var(--kl-on-dark); color: var(--kl-ink); }
.in-bk-btn--ghost { color: var(--kl-on-dark-90); text-decoration: underline; }
.in-bk-btn--ghost:hover { color: var(--kl-on-dark); }

/* ==========================================================================
   Mobile — screens 7a/7b/7c (max-width: 1023px). Placed after every base rule
   on purpose: the overrides win equal-specificity ties by cascade order.
   Section order: hero → Bet centar → Tipovi → banner → Najave → Najnovije →
   Nizovi i trendovi → sponsor; the desktop-rail-only Bonusi card is hidden, as
   on the pre-9a build. The main/rail wrappers dissolve so all sections become direct
   flex items of .in-grid and can be interleaved.
   ========================================================================== */
@media (max-width: 1023px) {
  .in-main, .in-rail, .in-top { display: contents; }
  .in-hero { order: 1; }
  .in-bc { order: 2; }
  .in-tips { order: 3; }
  .in-banner-main { order: 4; }
  .in-najave-col { order: 5; }
  .in-vijesti { order: 6; }
  .in-trendovi { order: 7; }
  .in-sponsor-slot { order: 8; }
  .in-bonusi { display: none; } /* desktop-rail only (7a–7c) */

  /* Bet centar (7a): plain section, not a bordered card — head styled like the
     other section heads (accent bar per owner), chips + sub-card rows below. */
  .in-bc {
    display: flex;
    flex-direction: column;
    gap: var(--kl-sp-12);
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
  }
  .in-bc .kl-card-head { padding: 0; border-bottom: 0; }
  .in-bc .kl-card-head h2 {
    display: flex;
    align-items: center;
    gap: var(--kl-sp-8);
    font: 800 18px var(--kl-font-display);
  }
  .in-bc .kl-card-head h2::before {
    content: '';
    width: 4px;
    height: 18px;
    border-radius: var(--kl-r-2);
    background: var(--kl-ink);
    flex-shrink: 0;
  }
  .in-bc .kl-card-head > a { font: 600 var(--kl-fs-13) var(--kl-font-ui); }
  .in-bc-chips { padding: 0; }
  .in-bc-list { padding: 0; }

  /* Tipovi: Analiza pill stays top-right on mobile too (owner 2026-08-01 —
     deliberate deviation from 7b's footer placement). */

  /* Najave (7c): borderless thumb rows, 84×62 thumbs. */
  .in-najave-list { gap: var(--kl-sp-12); }
  .in-najava { border: 0; border-radius: 0; padding: 0; }
  .in-najava:hover { background: none; }
  .in-najava:hover .in-najava-text strong { text-decoration: underline; }
  .in-najava-img { width: 84px; height: 62px; border-radius: var(--kl-r-12); }
  .in-najava-text strong { font-size: var(--kl-fs-14); line-height: 1.35; }

  /* Najnovije (7c): same thumb-row anatomy — thumb left, kicker + title right. */
  .in-news-grid { gap: var(--kl-sp-12); }
  .in-news {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: var(--kl-sp-12);
    row-gap: var(--kl-sp-4);
    align-content: center;
  }
  .in-news-imglink { grid-row: 1 / 3; align-self: center; }
  .in-news-img { width: 84px; height: 62px; border-radius: var(--kl-r-12); }

  /* Pogođeno jučer: three across doesn't fit a phone — back to stacked rows,
     match on the left and the outcome chip on the right. */
  .in-won-list { flex-direction: column; }
  .in-won-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--kl-sp-10);
    border-right: 0;
    border-bottom: 1px solid var(--kl-divider);
  }
  .in-won-row:last-child { border-bottom: 0; }
  .in-won-info { width: auto; }
  .in-won-row .bet-status-chip { margin-top: 0; }
}

/* ==========================================================================
   Desktop — screen 9a exact layout (min-width: 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .in-page { padding: var(--kl-sp-28) var(--kl-sp-40) 0; }

  /* Live ticker: full-width strip flush under the nav (9a). Negative margins
     cancel .in-page's top + side padding so the bar spans the whole frame. */
  .in-ticker {
    display: flex;
    align-items: center;
    gap: var(--kl-sp-14);
    margin: calc(-1 * var(--kl-sp-28)) calc(-1 * var(--kl-sp-40)) var(--kl-sp-20);
    padding: var(--kl-sp-10) var(--kl-sp-40);
    background: var(--kl-surface-2);
    border-bottom: 1px solid var(--kl-divider-2);
    overflow: hidden;
  }
  .in-ticker-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font: 700 var(--kl-fs-11) var(--kl-font-ui);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kl-red);
  }
  .in-ticker-label i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--kl-red);
    animation: inLivePulse 1.6s ease-in-out infinite;
  }
  .in-ticker-track { display: flex; align-items: center; gap: var(--kl-sp-10); min-width: 0; overflow: hidden; }
  .in-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: var(--kl-sp-6);
    padding: var(--kl-sp-6) var(--kl-sp-14);
    border: 1px solid var(--kl-border);
    border-radius: var(--kl-r-pill);
    background: var(--kl-surface);
    font: 600 var(--kl-fs-12) var(--kl-font-ui);
    color: var(--kl-ink);
    text-decoration: none;
    white-space: nowrap;
  }
  .in-ticker-item b { font: 800 var(--kl-fs-12) var(--kl-font-display); }
  .in-ticker-item small { font: 700 var(--kl-fs-11) var(--kl-font-ui); color: var(--kl-red); }
  /* The "Svi mečevi" link follows the pills (no margin-left:auto) so a quiet
     day with few live matches reads as a left-aligned bar with trailing space,
     not a hole punched in the middle of the strip. */
  .in-ticker-more {
    flex-shrink: 0;
    font: 600 var(--kl-fs-12) var(--kl-font-ui);
    color: var(--kl-text-2);
    text-decoration: none;
  }

  /* Main + rail grid (9a: 1fr / 380px) */
  .in-grid {
    display: grid;
    /* Rail shrinks fluidly with the page while the main column stays relatively
       fixed: 380px at ≥1360, ~320px at 1280, floored at 280px. */
    grid-template-columns: minmax(0, 1fr) clamp(280px, calc(380px - (1360px - 100vw) * 0.75), 380px);
    gap: var(--kl-sp-32);
    align-items: start;
  }
  .in-main { gap: var(--kl-sp-32); }
  .in-rail { gap: var(--kl-sp-20); position: sticky; top: 84px; }

  /* Desktop: the top ticker owns live — the Bet centar card never shows the
     Uživo chip/panel here (they're mobile-only, handoff 7a). */
  .in-chip--live, .in-bc [data-bc-panel="uzivo"] { display: none; }

  /* Bet centar rail rows: the 7a sub-card markup re-flows into the 9a
     one-liner — eyebrow + live label hidden, time | Home – Away inline. */
  .in-bc-list { gap: 0; }
  .in-bc-row {
    flex-direction: row;
    align-items: center;
    gap: var(--kl-sp-10);
    border: 0;
    border-radius: 0;
    padding: 9px 0;
  }
  .in-bc-row:hover { background: none; }
  .in-bc-row + .in-bc-row { border-top: 1px solid var(--kl-divider); }
  .in-bc-head { display: contents; }
  .in-bc-head small, .in-bc-live { display: none; }
  .in-bc-time { width: 40px; }
  .in-bc-teams { flex: 1; gap: var(--kl-sp-4); overflow: hidden; }
  .in-bc-teams strong { flex: 0 1 auto; font: 600 var(--kl-fs-13) var(--kl-font-ui); }
  .in-bc-teams strong.is-away { text-align: left; }
  .in-bc-row:hover .in-bc-teams strong { color: var(--kl-blue); }
  .in-bc-score {
    font: 600 var(--kl-fs-13) var(--kl-font-ui);
    color: var(--kl-ink);
    background: none;
    border-radius: 0;
    padding: 0;
  }
  /* Finished-match score sits a shade quieter on the desktop rail. */
  .in-bc-score.is-final { color: var(--kl-text-2); }

  /* Tips: two columns; the meta line hugs the title (no mobile gap here). */
  .in-tips-grid { grid-template-columns: 1fr 1fr; }
  .in-tip-top { margin-bottom: 0; }

  /* Hero + najave: side-by-side top row (1.6fr / 1fr) */
  .in-top {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--kl-sp-20);
    align-items: stretch;
  }
  .in-hero { min-height: 360px; height: 100%; }
  .in-hero-title { font-size: 22px; }

  /* Vijesti: three columns, shorter image */
  .in-news-grid { grid-template-columns: 1fr 1fr 1fr; }
  .in-news-img { height: 110px; }

  /* Nizovi i trendovi: two columns, same rhythm as the tips grid */
  .in-trend-grid { grid-template-columns: 1fr 1fr; }

  /* Bookmakers: all three fit side by side, so no scrolling is needed */
  /* Desktop: the three cards fit side by side, so drop the mobile full-bleed,
     the scroll padding and the edge fade — nothing overflows to soften. */
  .in-bookmakers {
    gap: var(--kl-sp-24);
    margin-top: var(--kl-sp-32);
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .in-bk { flex: 1 1 0; width: auto; }
}

/* Above the 1360 max-width the frame uses its full width — no side padding.
   Breakpoint is 1361 so 1360 itself still keeps its side padding.
   Only neutralize the ticker's negative bleed margins (there's no .in-page
   padding left to cancel); its own inner padding is left untouched. */
@media (min-width: 1361px) {
  .in-page { padding-left: 0; padding-right: 0; }
  .in-ticker { margin-left: 0; margin-right: 0; padding-left: var(--kl-sp-24); padding-right: var(--kl-sp-24); }
}

/* ==========================================================================
   EXPERIMENT (owner 2026-08-02): links + category labels in the primary blue,
   to preview the look. Scoped block — delete to revert.
   ========================================================================== */
/* Text / nav links */
.in-sechead > a,
.kl-card-head > a,
.in-ticker-more {
  color: var(--kl-blue);
}
.in-sechead > a:hover,
.kl-card-head > a:hover,
.in-ticker-more:hover {
  color: var(--kl-primary-legacy);
}

/* Category labels differ by behaviour, so they differ by look:
   - Najave (NOGOMET…) is a plain label inside the row link → left as the normal
     muted-grey kicker (no bespoke style to maintain across the other cards).
   - Najnovije (VIJESTI, VODIČ…) is its own link to the category listing →
     outlined blue chip, so the affordance reads as tappable. */
.in-news-cat {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--kl-blue-soft);
  border-radius: var(--kl-r-pill);
  color: var(--kl-blue);
  line-height: 1.5;
  vertical-align: 1px;
  transition: background var(--kl-dur-short) var(--kl-ease), border-color var(--kl-dur-short) var(--kl-ease);
}
.in-news-cat:hover {
  color: var(--kl-blue);
  background: var(--kl-blue-tint);
  border-color: var(--kl-blue);
  text-decoration: none;
}