/*
Theme Name: Спектра ТВ
Theme URI: https://spektra.com.mk
Author: Ultrasoft
Description: Класична WordPress тема (PHP шаблони) за Спектра ТВ — локален новински портал и ТВ станица од Струга. Само македонски. Mobile-first, фиксни рекламни слотови, админ панел „Спектра Опции“.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: spektra
*/

/* Self-hosted fonts (Macedonian Cyrillic localised forms need lang="mk") */
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url(assets/fonts/golos-text-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;src:url(assets/fonts/golos-text-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PT Serif";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/pt-serif-400-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Serif";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/pt-serif-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PT Serif";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/pt-serif-400i-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Serif";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/pt-serif-400i-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"PT Serif";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/pt-serif-700-cyrillic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"PT Serif";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/pt-serif-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* ==========================================================================
   Spektra TV — design tokens
   Drop this at the top of the theme's style.css (or @import it first).
   Every value below is taken from the approved design canvas.
   ========================================================================== */

:root {
  /* --- Ground & ink ----------------------------------------------------- */
  --ink-rgb:      32, 30, 29;           /* за rgba(var(--ink-rgb), .5) — се превртува во темна тема */
  --shadow-rgb:   32, 30, 29;           /* сенки остануваат темни и во темна тема */
  --bg-ink:       #201e1d;              /* цврст „темен“ панел (лента, мени, тикер) со бел текст — и во двете теми */
  --accent-fg:    var(--accent);        /* акцент како БОЈА НА ТЕКСТ (во темна тема е посветол) */
  --accent-fg-hover: var(--accent-dark);
  --page-bg:      #f6f5f3;              /* warm grey page ground */
  --surface:      #ffffff;              /* content bands / cards */
  --ink:          #201e1d;              /* text, 2px rules, dark bands */
  --ink-70:       rgba(var(--ink-rgb), .70);/* lead paragraphs */
  --ink-65:       rgba(var(--ink-rgb), .65);/* archive excerpts */
  --ink-50:       rgba(var(--ink-rgb), .66);/* timestamps, meta */
  --ink-45:       rgba(var(--ink-rgb), .62);/* inactive tabs, placeholders */
  --ink-25:       rgba(var(--ink-rgb), .25);/* "most read" numerals */
  --rule:         rgba(var(--ink-rgb), .14);/* 1px hairline */
  --rule-strong:  var(--ink);              /* 2px section rule */
  --border-chip:  rgba(var(--ink-rgb), .20);/* outlined chips */

  /* --- Action ----------------------------------------------------------- */
  --accent:       #de2d12;
  --accent-dark:  #b8250c;              /* link hover */
  --accent-tint:  rgba(222, 45, 18, .16); /* "now playing" schedule row */

  /* --- Ads -------------------------------------------------------------- */
  --ad-bg:        #f3f2f2;
  --ad-border:    rgba(var(--ink-rgb), .28);

  /* --- Video / dark surfaces -------------------------------------------- */
  --video-bg:     #3a3736;              /* video thumbnail placeholder */
  --stage-bg:     #141211;              /* livestream stage */
  --player-bg:    #000000;
  --scrim:        linear-gradient(transparent, rgba(20, 18, 17, .86));

  /* --- Category colours (from the logo's peacock) ----------------------- */
  --cat-struga:          #F2E335;
  --cat-struga-text:     #976D00;       /* yellow fails contrast — use for text */
  --cat-ohrid:           #E8531F;
  --cat-makedonija:      #D5136A;
  --cat-balkan:          #9B2F94;
  --cat-svet:            #0B6CB7;
  --cat-magazin:         #1478A6;
  --cat-sport:           #2E9440;
  --cat-video:           var(--bg-ink);
  --cat-lokalno:         #976D00;

  /* On dark backgrounds (video stage, livestream, mobile menu) */
  --cat-makedonija-dark: #F19A9A;
  --cat-balkan-dark:     #C79BE0;
  --cat-svet-dark:       #8FC7F2;
  --cat-sport-dark:      #9FD9A9;

  /* --- Type ------------------------------------------------------------- */
  --font-ui:    "Golos Text", system-ui, sans-serif;  /* UI + headlines */
  --font-body:  "PT Serif", Georgia, serif;           /* article body */

  /* --- Layout ----------------------------------------------------------- */
  --wrap:          1180px;
  --pad-desktop:   32px;
  --pad-mobile:    16px;
  --measure:       720px;   /* article column cap */
  --gap-section:   12px;    /* exposed ground between desktop sections */
  --gap-section-m: 8px;     /* …on mobile */
  --sidebar:       300px;

  /* --- Motion ----------------------------------------------------------- */
  --shrink-ease:   220ms ease;
  --ticker-speed:  38s;
  --ticker-speed-m: 26s;
}

/* No radius, no shadows, anywhere. Deliberate. */
* { border-radius: 0; box-shadow: none; }

/* --- Base ---------------------------------------------------------------- */
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-ui);
}
a         { color: var(--ink); text-decoration: none; }
a:hover   { color: var(--accent-fg); }
h1, h2, h3, p, li { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection { background: var(--cat-struga); color: var(--ink); }

/* --- Category theming ----------------------------------------------------
   Templates should never hard-code a category colour. Set --cat / --cat-text
   on the block wrapper (server-rendered from the admin options) and let the
   parts read them.
   ------------------------------------------------------------------------ */
.cat-tile {                       /* the solid section-title tile */
  display: inline-block;
  background: var(--cat, var(--bg-ink));
  color: #fff;
  padding: 7px 14px;
  font: 900 20px/1 var(--font-ui);
}
.cat-kicker {                     /* small uppercase label above a headline */
  display: flex;
  align-items: center;
  gap: 6px;
  font: 800 11px/1 var(--font-ui);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--cat-text, var(--cat, var(--ink)));
}
.cat-kicker::before {             /* the 16×3 swatch bar */
  content: "";
  width: 16px;
  height: 3px;
  background: var(--cat, var(--bg-ink));
}

/* Highlighted headline over a photo (Спорт / Магазин poster blocks) */
.poster-headline {
  color: #fff;
  background: var(--cat);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 4px 10px;
  font: 900 24px/1.62 var(--font-ui);
}
.poster-headline--sm {
  padding: 3px 8px;
  font: 800 16px/1.7 var(--font-ui);
}

/* --- Ad slots: always reserve height, never shift ------------------------ */
.ad {
  background: var(--ad-bg);
  border: 1px dashed var(--ad-border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ad-h, 120px);
}

/* --- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   Base
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body { line-height: 1.4; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video, iframe { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }
mark { background: var(--cat-struga); color: var(--ink); padding: 0 .08em; }
time { white-space: nowrap; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--bg-ink); color: #fff;
  padding: 12px 16px; font: 800 13px/1 var(--font-ui); letter-spacing: .06em;
}
.skip-link:focus { top: 8px; color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-mobile); }
@media (min-width: 1024px) { .wrap { padding-inline: var(--pad-desktop); } }

/* Hover: whole card/row shifts to accent; one stretched link per card */
.nl { position: relative; color: var(--ink); }
.nl a { color: inherit; }
.nl a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.nl:hover, .nl:hover a { color: var(--cat-text, var(--accent-fg)); } /* ховер = боја на рубриката на вестa */

/* Image placeholder / media */
.media { position: relative; overflow: hidden; background: var(--ad-bg); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.ph, .ph {
  background-image: repeating-linear-gradient(135deg, #dcd9d9 0 10px, #d3d0d0 10px 20px);
  display: flex; align-items: center; justify-content: center;
}
.media.ph::after, .ph::after {
  content: "ФОТО"; font: 800 10px/1 var(--font-ui); letter-spacing: .18em; color: rgba(var(--ink-rgb), .38);
}
.media--video { background: var(--video-bg); }
.media--video.ph { background-image: none; }
.media--video.ph::after { content: none; }
.play-tri {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-35%, -50%);
  border-left: 18px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
  pointer-events: none; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .35));
}
.media--video.is-sm .play-tri { border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; }

/* ==========================================================================
   Category theming helpers (vars come from wp_head: .cat--{key})
   ========================================================================== */
.cat-kicker { font-size: 10.5px; }
@media (min-width: 1024px) { .cat-kicker { font-size: 11px; } }
.on-dark .cat-kicker { color: var(--cat-dark, #fff); }
.on-dark .cat-kicker::before { background: var(--cat-dark, #fff); }
.cat-tile { padding: 6px 12px; font-size: 17px; background: var(--cat-tile, var(--cat, var(--bg-ink))); }
@media (min-width: 1024px) { .cat-tile { padding: 7px 14px; font-size: 20px; } }
.cat-tile--sm { font-size: 14px; padding: 6px 12px; }
.cat-tile--ink { background: var(--bg-ink); color: #fff; }
.cat-tile--white { background: var(--surface); color: var(--ink); }

.blk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 2px; }
.blk-head--pad { margin-bottom: 12px; }
.see-all { font: 800 11px/1 var(--font-ui); letter-spacing: .06em; color: var(--accent-fg); text-transform: uppercase; white-space: nowrap; }
.see-all:hover { color: var(--accent-fg-hover); }
@media (min-width: 1024px) { .see-all { font-size: 12px; letter-spacing: .08em; } }

.side-h {
  border-top: 2px solid var(--ink); padding-top: 12px; margin-bottom: 4px;
  font: 900 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
}

.chip {
  display: inline-block; border: 1px solid var(--border-chip); padding: 8px 12px;
  font: 700 12px/1 var(--font-ui); color: var(--ink); background: transparent;
}
.chip:hover { color: var(--accent-fg); border-color: var(--accent); }
.chip.is-solid { background: var(--bg-ink); color: #fff; border-color: var(--ink); }
.chip.is-solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   Header
   ========================================================================== */
.util {
  background: var(--surface); border-bottom: 1px solid var(--rule); color: rgba(var(--ink-rgb), .66);
  font: 600 11px/1 var(--font-ui);
}
.util .wrap { display: flex; align-items: center; justify-content: space-between; height: 28px; gap: 16px; }
.util__r { display: none; gap: 18px; }
.util a { color: inherit; }
.util a:hover { color: var(--accent-fg); }
.d-only { display: none; }
@media (min-width: 1024px) {
  .util { font-weight: 500; font-size: 12px; }
  .util .wrap { height: 34px; }
  .util__r { display: flex; }
  .d-only { display: inline; }
  .m-only { display: none; }
}

.masthead { display: none; background: var(--surface); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; padding-block: 18px 16px; gap: 24px; }
.masthead__logo img { height: 54px; width: auto; }
.masthead__tools { display: flex; align-items: center; gap: 10px; }
.search-mini {
  display: flex; align-items: center; gap: 8px; border: 1px solid rgba(var(--ink-rgb), .22); padding: 0 14px; width: 230px; height: 36px;
}
.search-mini svg { flex: none; color: var(--ink-45); }
.search-mini input { border: 0; outline: 0; background: transparent; width: 100%; font: 400 13px/1 var(--font-ui); color: var(--ink); min-width: 0; }
.search-mini input::placeholder { color: var(--ink-45); }
.search-mini:focus-within { border-color: var(--ink); }
.btn-live {
  display: inline-flex; align-items: center; background: var(--bg-ink); color: #fff; padding: 0 16px; height: 36px;
  font: 800 12px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
}
.btn-live:hover { background: var(--accent); color: #fff; }
@media (min-width: 1024px) { .masthead { display: block; } }
body:not(.home) .masthead, body:not(.home) .util { display: none; }
@media (min-width: 1024px) { body:not(.home) .util { display: none; } }

#header-sentinel { display: block; height: 1px; margin-bottom: -1px; pointer-events: none; }

.navbar {
  position: sticky; top: 0; z-index: 60; background: var(--surface); border-bottom: 2px solid var(--ink);
}
.admin-bar .navbar { top: 32px; }
@media (max-width: 782px) { .admin-bar .navbar { top: 46px; } }
/* Под 601px админ-лентата на WordPress не е залепена (се губи при скрол), па хедерот се лепи на самиот врв */
@media (max-width: 600px) { .admin-bar .navbar { top: 0; } }
.navbar__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding-block: 8px 0; }
.burger { order: 3; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 0 0 4px; color: var(--ink); }
.burger__bars { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 24px; }
.burger__bars i { display: block; height: 2px; background: currentColor; }
.burger__t { display: none; font: 800 12px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.burger:hover { color: var(--accent-fg); }
.tool-search { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--ink); }
.tool-search:hover { color: var(--accent-fg); }
.brand { order: 0; margin-right: auto; display: flex; align-items: center; gap: 14px; color: var(--ink); }
.brand img { height: 32px; width: auto; transition: height var(--shrink-ease); }
.brand__word { display: none; font: 900 15px/1 var(--font-ui); letter-spacing: .03em; }
.navbar__tools { order: 2; display: flex; align-items: center; gap: 4px 10px; }
.link-search { display: none; align-items: center; gap: 6px; font: 600 13px/1 var(--font-ui); color: var(--ink-70); }
.link-search:hover, .link-search.is-active { color: var(--accent-fg); }
.chip-live {
  display: inline-flex; background: var(--accent); color: #fff; padding: 6px 8px;
  font: 800 10px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
}
.chip-live:hover { background: var(--accent-dark); color: #fff; }

.primary-nav { order: 4; flex: 0 0 auto; width: calc(100% + var(--pad-mobile) * 2); min-width: 0; margin-inline: calc(var(--pad-mobile) * -1); border-top: 1px solid var(--rule); margin-top: 6px; }
.primary-nav ul {
  display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--pad-mobile);
  font: 700 13px/1 var(--font-ui); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
.primary-nav ul::-webkit-scrollbar { display: none; }
.primary-nav a { display: block; padding: 12px 0 10px; border-bottom: 2px solid transparent; color: var(--ink); }
.primary-nav a:hover { color: var(--accent-fg); }
.primary-nav .is-current a, .primary-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.navbar .progress {
  position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--accent);
  transform-origin: 0 50%; transform: scaleX(0); will-change: transform; pointer-events: none;
}

@media (min-width: 1024px) {
  .burger { order: 5; padding-left: 14px; border-left: 1px solid var(--rule); margin-left: 4px; height: 42px; }
  .burger__t { display: block; }
  .tool-search { display: none; }
  .navbar { border-top: 2px solid var(--ink); }
  body:not(.home) .navbar { border-top: 0; }
  .navbar__bar { padding-block: 0; min-height: 42px; height: 42px; flex-wrap: nowrap; gap: 0 12px; transition: height var(--shrink-ease); }
  .brand { max-width: 0; opacity: 0; overflow: hidden; transition: max-width var(--shrink-ease), opacity var(--shrink-ease); }
  .brand img { height: 34px; }
  .brand__word { display: block; }
  .primary-nav { order: 1; flex: 1 1 auto; width: auto; margin: 0; border-top: 0; }
  .navbar__tools { order: 2; }
  .brand { margin-right: 0; }
  .primary-nav ul { gap: 26px; overflow: visible; padding: 0; font-size: 13.5px; }
  .primary-nav a { padding: 15px 0 13px; border-bottom-width: 0; }
  .primary-nav .is-current a, .primary-nav a[aria-current] { color: var(--accent-fg); border-bottom-width: 0; }
  .navbar__tools { max-width: 0; opacity: 0; overflow: hidden; transition: max-width var(--shrink-ease), opacity var(--shrink-ease); }
  .link-search { display: inline-flex; }
  .chip-live { padding: 7px 12px; font-size: 13px; letter-spacing: .06em; }
  /* stuck (home) or inner pages (always compact) show brand + tools */
  .navbar.is-stuck .brand, body:not(.home) .brand { max-width: 220px; opacity: 1; }
  .navbar.is-stuck .navbar__tools, body:not(.home) .navbar__tools { max-width: 320px; opacity: 1; }
  .navbar.is-stuck .navbar__bar, body:not(.home) .navbar__bar { height: 52px; }
  body:not(.home) .primary-nav ul { gap: 22px; font-size: 13px; }
  body:not(.home) .primary-nav { margin-left: 8px; }
  .navbar.is-stuck .primary-nav ul { gap: 22px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand, .navbar__tools, .navbar__bar, .brand img { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Ticker */
.ticker { display: flex; align-items: center; background: var(--bg-ink); color: #fff; height: 32px; overflow: hidden; }
.ticker__tag {
  flex: none; display: flex; align-items: center; gap: 6px; background: var(--accent); height: 100%; padding: 0 10px;
  font: 800 10px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
}
.ticker__tag::before { content: ""; width: 5px; height: 5px; background: #fff; border-radius: 50%; }
.ticker__vp { flex: 1; overflow: hidden; white-space: nowrap; min-width: 0; }
.ticker__track {
  display: inline-flex; gap: 36px; padding-left: 12px; font: 500 12px/1 var(--font-ui);
  animation: tick 150s linear infinite; will-change: transform;
}
.ticker__track a { color: #fff; }
.ticker__track a:hover { color: var(--cat-struga); }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 1024px) {
  .ticker { height: 40px; }
  .ticker__tag { padding: 0 16px; gap: 8px; font-size: 12px; }
  .ticker__tag::before { width: 7px; height: 7px; }
  .ticker__track { gap: 44px; padding-left: 20px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none !important; overflow-x: auto; }
  .ticker__vp { overflow-x: auto; }
}

/* Mobile menu overlay */
body.menu-open { overflow: hidden; }
.menu { position: fixed; inset: 0; z-index: 200; background: var(--bg-ink); color: #fff; overflow-y: auto; display: flex; flex-direction: column; }
.menu[hidden] { display: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad-mobile); }
.menu__logo { background: #fff; padding: 6px 12px; display: block; }
.menu__logo img { height: 34px; width: auto; }
.menu__close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; }
.menu__list { padding: 6px var(--pad-mobile) 0; }
.menu__list li { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.menu__list a { display: flex; align-items: center; gap: 14px; padding: 16px 0; color: #fff; font: 800 22px/1 var(--font-ui); text-transform: uppercase; }
.menu__list a::before { content: ""; width: 18px; height: 4px; background: var(--cat-dark, var(--cat, #fff)); flex: none; }
.menu__list a::after { content: "›"; margin-left: auto; font: 400 28px/1 var(--font-ui); color: rgba(255, 255, 255, .45); }
.menu__search { display: flex; margin: 4px var(--pad-mobile) 10px; border: 2px solid #fff; }
.menu__search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; padding: 13px 14px; font: 600 16px/1 var(--font-ui); }
.menu__search input::placeholder { color: rgba(255, 255, 255, .55); }
.menu__search button { background: var(--accent); color: #fff; padding: 0 16px; display: flex; align-items: center; }
.menu__search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 1024px) {
  .menu { left: auto; width: 440px; border-left: 2px solid #fff; }
  body.menu-open { overflow: auto; }
  .menu__list a { font-size: 20px; padding: 14px 0; }
}
.menu__list a:hover { color: var(--cat-dark, var(--accent)); }
.menu__sec { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 22px var(--pad-mobile) 0; font: 700 14px/1 var(--font-ui); }
.menu__sec a { color: rgba(255, 255, 255, .8); }
.menu__social { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px var(--pad-mobile) 40px; }
.menu__social a { border: 1px solid rgba(255, 255, 255, .35); color: #fff; padding: 9px 13px; font: 700 12px/1 var(--font-ui); }
.menu__social a:hover { background: #fff; color: #201e1d; }

/* ==========================================================================
   Ads — always reserve height (CLS)
   ========================================================================== */
.ad { position: relative; min-height: var(--ad-h-m, 120px); overflow: hidden; }
.ad__label {
  position: absolute; left: 6px; top: 4px; font: 600 9px/1 var(--font-ui); letter-spacing: .14em; color: var(--ink-45);
  text-transform: uppercase; pointer-events: none;
}
.ad__inner { display: flex; align-items: center; justify-content: center; width: 100%; min-height: inherit; }
.ad__inner img { max-height: 100%; width: auto; }
.ad-slot--no-m { display: none; }
@media (min-width: 768px) {
  .ad { min-height: var(--ad-h-d, 120px); }
  .ad-slot--no-m { display: block; }
  .ad-slot--no-d { display: none; }
}
.ad--mobile_anchor {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; min-height: 0; height: var(--ad-h-m, 50px);
  background: var(--ad-bg); border-top: 1px solid rgba(var(--ink-rgb), .2);
}
.ad--mobile_anchor .ad__inner { height: 100%; }
@media (min-width: 768px) { .ad--mobile_anchor { display: none; } }
body.has-anchor { padding-bottom: 56px; }
@media (min-width: 768px) { body.has-anchor { padding-bottom: 0; } }
.ad-slot { margin-block: 8px; }
.ad-slot .ad { background: var(--ad-bg); border: 1px dashed var(--ad-border); }
.ad--sidebar_sticky { position: sticky; top: 20px; }
.admin-bar .ad--sidebar_sticky { top: 52px; }
.ad--on-dark { background: transparent; border-color: rgba(255, 255, 255, .28); }

/* ==========================================================================
   Sections / bands (homepage)
   ========================================================================== */
.bands { display: flex; flex-direction: column; gap: var(--gap-section-m); }
@media (min-width: 1024px) { .bands { gap: var(--gap-section); } }
.band { background: var(--surface); padding-block: 14px; }
.band--ground { background: transparent; }
.band--ink { background: var(--bg-ink); color: #fff; padding-block: 16px 20px; }
.band--tight { padding-block: 0; }
@media (min-width: 1024px) {
  .band { padding-block: 28px 24px; }
  .band--poster { padding-block: 30px 34px; }
  .band--ink { padding-block: 28px 32px; }
}

/* Hero */
.hero { display: block; }
.hero__stories { display: block; }
.hero-card { position: relative; display: block; }
.hero-card .media { aspect-ratio: 16 / 9; }
.hero-card__body { padding: 12px 14px 16px; }
.hero-card .cat-kicker { margin-bottom: 8px; }
.hero-card__t { font: 900 26px/1.1 var(--font-ui); letter-spacing: -.02em; margin-bottom: 8px; }
.hero-card__lead { font: 400 15px/1.5 var(--font-body); color: var(--ink-70); margin-bottom: 8px; }
.hero-card__time, .time { font: 500 12px/1 var(--font-ui); color: var(--ink-50); display: block; }
.hero-card--lg .hero-card__body { border-bottom: 2px solid var(--ink); }
.hero-card--sm { display: flex; flex-direction: row-reverse; gap: 12px; padding: 14px 14px; border-bottom: 1px solid var(--rule); }
.hero-card--sm:last-child { border-bottom: 0; }
.hero-card--sm .media { flex: none; width: 104px; height: 78px; aspect-ratio: auto; }
.hero-card--sm .hero-card__body { flex: 1; padding: 0; }
.hero-card--sm .hero-card__t { font: 700 15.5px/1.28 var(--font-ui); letter-spacing: 0; margin-bottom: 6px; }
.hero-card--sm .hero-card__lead { display: none; }
.hero-card--sm .hero-card__time { font-size: 11.5px; }
.hero-card:hover .hero-card__t { color: var(--accent-fg); }
.hero__rail { display: none; }
.band--hero { padding-block: 0 6px; }
.band--hero .wrap { padding-inline: 0; }
.band--hero .hero-ad { padding-inline: var(--pad-mobile); }

@media (min-width: 768px) {
  .band--hero { padding-block: 20px; }
  .band--hero .wrap { padding-inline: var(--pad-mobile); }
  .band--hero .hero-ad { padding-inline: 0; }
  .hero__stories { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 380px; }
  .hero-card { display: block; padding: 0; border: 0; }
  .hero-card--lg { grid-row: 1 / 3; }
  .hero-card .media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .hero-card { overflow: hidden; }
  .hero-card__body {
    position: absolute; inset: auto 0 0 0; padding: 12px; z-index: 2; pointer-events: none;
    background: var(--scrim); color: #fff;
  }
  /* линкот на насловот останува кликлив и ја покрива целата картичка (картичката ја сече overflow) */
  .hero-card__body a { pointer-events: auto; }
  .hero-card__body a::after { top: -420px; }
  .hero-card--lg .hero-card__body { padding: 18px; border: 0; }
  .hero-card .cat-kicker { color: var(--cat-dark, #fff); margin-bottom: 7px; }
  .hero-card .cat-kicker::before { background: var(--cat-dark, #fff); }
  .hero-card--lg .cat-kicker { margin-bottom: 10px; font-size: 11px; }
  .hero-card__t, .hero-card--sm .hero-card__t { color: #fff; font: 800 17px/1.2 var(--font-ui); letter-spacing: 0; margin: 0; }
  .hero-card--lg .hero-card__t { font: 900 30px/1.08 var(--font-ui); letter-spacing: -.02em; }
  .hero-card--lg .hero-card__time { margin-top: 8px; }
  .hero-card__time { color: rgba(255, 255, 255, .7); }
  .hero-card--sm .hero-card__time { margin-top: 5px; }
  .hero-card__lead { display: none; }
  .hero-card:hover .hero-card__t, .hero-card:hover a { color: #fff; }
  .hero-card a::after { z-index: 3; }
  .hero-card--sm { flex-direction: row; }
  .hero__rail { display: block; margin-top: 18px; }
}
@media (min-width: 1024px) {
  .band--hero { padding-block: 28px 20px; }
  .band--hero .wrap { padding-inline: var(--pad-desktop); }
  .hero { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: stretch; }
  .hero__main { display: flex; }
  .hero__stories { flex: 1; height: auto; min-height: 404px; } /* иста висина како „Најново“ */
  .hero-card--sm .hero-card__body { padding: 14px 16px 16px; } /* мали картички: простор во текстот */
  .hero-card--sm .cat-kicker { margin-bottom: 6px; }
  .hero__rail { margin-top: 0; border-left: 2px solid var(--ink); padding-left: 20px; }
}
.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.rail-h { font: 900 13px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.rail-row { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.rail-row__m { display: block; font: 500 11.5px/1 var(--font-ui); color: var(--ink-45); margin-bottom: 6px; text-transform: none; }
.rail-row__t { font: 700 16px/1.28 var(--font-ui); }
.rail-foot { font: 800 12px/1 var(--font-ui); letter-spacing: .08em; color: var(--accent-fg); white-space: nowrap; }
.rail-foot:hover { color: var(--accent-fg-hover); }

/* Cards */
.card { position: relative; }
.card .media { aspect-ratio: 3 / 2; }
.card__body { padding-top: 12px; }
.card .cat-kicker { margin-bottom: 8px; }
.card__t { font: 700 18px/1.22 var(--font-ui); }
.card .time { margin-top: 8px; }

/* Rows (thumb + headline) */
.row { position: relative; display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.row:last-child { border-bottom: 0; }
.row__body { flex: 1; min-width: 0; }
.row .cat-kicker { margin-bottom: 6px; }
.row__t { font: 700 15.5px/1.28 var(--font-ui); }
.row .time { margin-top: 6px; font-size: 11.5px; }
.row .media { flex: none; width: 104px; height: 78px; }
.row--list .media { width: 88px; height: 62px; }
.row--list .row__t { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.row--list:first-child { display: block; padding: 14px 0; }
.row--list:first-child .media { width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: 10px; }
.row--list:first-child .row__t { font-size: 17px; font-weight: 700; line-height: 1.24; }
.row--list:first-child .time { display: block; }
.row--plain { padding: 13px 0; }
.row--latest { padding: 13px 0; }
@media (min-width: 1024px) {
  .row { gap: 14px; }
  .row__t { font-size: 16px; line-height: 1.26; }
  .row .media { width: 104px; height: 70px; }
  .row .time { font-size: 12px; }
  .row .cat-kicker { font-size: 10.5px; }
  .row { flex-direction: row-reverse; }
  .row--list .media, .row--list:first-child .media { width: 104px; height: 70px; aspect-ratio: auto; margin: 0; }
  .row--list .row__t, .row--list:first-child .row__t { font-size: 16px; font-weight: 700; line-height: 1.26; }
  .row--list:first-child { display: flex; padding: 14px 0; }
}

/* Локално grid3 — rows on mobile, 3-up cards on tablet+ */
.subtabs { display: flex; gap: 10px; font: 700 12px/1 var(--font-ui); text-transform: uppercase; color: var(--ink-45); }
.subtabs a { color: inherit; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.subtabs a:hover { color: var(--ink); }
.subtabs a.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.blk-head--local { gap: 12px; }
.blk-head--local .see-all { margin-left: auto; }
.grid3 { display: block; }
.grid3 [data-panel][hidden] { display: none; }
.grid3 .card { display: flex; flex-direction: row-reverse; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.grid3 .card:last-child { border-bottom: 0; }
.grid3 .card .media { flex: none; width: 104px; height: 78px; aspect-ratio: auto; }
.grid3 .card__body { flex: 1; padding: 0; }
.grid3 .card__t { font: 700 15.5px/1.28 var(--font-ui); }
.grid3 .card .cat-kicker { margin-bottom: 6px; }
.grid3 .card .time { margin-top: 6px; font-size: 11.5px; }
@media (min-width: 768px) {
  .grid3 [data-panel]:not([hidden]) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 20px 0 4px; }
  .grid3 .card { display: block; padding: 0; border: 0; }
  .grid3 .card .media { width: auto; height: auto; aspect-ratio: 3 / 2; }
  .grid3 .card__body { padding-top: 12px; }
  .grid3 .card__t { font-size: 18px; line-height: 1.22; }
  .grid3 .card .cat-kicker { margin-bottom: 8px; }
  .grid3 .card .time { margin-top: 8px; font-size: 12px; }
  .blk-head--local { gap: 16px; }
  .subtabs { gap: 14px; font-size: 13px; }
}
@media (max-width: 767px) { .grid3 .card .time { display: block; } }

/* Video band */
.vgrid { display: grid; gap: 14px; }
.vgrid .vcard .media { aspect-ratio: 16 / 9; }
.vcard__t { margin-top: 10px; font: 600 15px/1.28 var(--font-ui); color: #fff; }
.vcard--lead .vcard__t { font-size: 16px; font-weight: 700; }
.vcard.nl { color: #fff; }
.vcard.nl:hover, .vcard.nl:hover a { color: var(--accent-fg); }
.vcard:not(.vcard--lead) { display: none; }
.band--ink .blk-head { border-bottom: 2px solid rgba(255, 255, 255, .35); padding-bottom: 10px; margin-bottom: 14px; }
.band--ink .see-all { color: rgba(255, 255, 255, .6); }
.band--ink .see-all:hover { color: #fff; }
@media (min-width: 768px) {
  .vgrid { grid-template-columns: 1.6fr 1fr 1fr; gap: 20px; }
  .vcard:not(.vcard--lead) { display: block; }
  .vcard--lead .vcard__t { font-size: 19px; line-height: 1.24; }
  .band--ink .blk-head { padding-bottom: 12px; margin-bottom: 20px; }
}

/* List columns band */
.cols3 { display: block; }
.cols3 .col + .col { margin-top: 18px; }
@media (min-width: 768px) {
  .cols3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .cols3 .col + .col { margin-top: 0; }
}
@media (min-width: 1024px) { .cols3 { grid-template-columns: repeat(3, 1fr); } }
.cols3--n1 { grid-template-columns: 1fr !important; }

/* Poster mosaic (Спорт / Магазин) */
.poster { display: block; }
.poster-headline {
  display: inline; color: #fff; background: var(--cat-tile, var(--cat));
  font: 800 17px/1.62 var(--font-ui); padding: 3px 8px; letter-spacing: 0;
}
.poster__item { position: relative; display: block; }
.poster__item .media { aspect-ratio: 16 / 10; }
.poster__txt { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; pointer-events: none; }
/* Текстот е „провиден“ за допир (pointer-events:none се наследува и на линкот), па линкот мора пак да е кликлив;
   неговото „протегање“ (.nl a::after) ја покрива целата картичка — ја сече overflow на картичката. */
.poster__txt a { pointer-events: auto; }
.poster__txt a::after { inset: -700px -60px; }
.poster__item { overflow: hidden; }
.poster__item--sm .media { position: relative; }
.poster__item--sm { display: block; }
.poster__item--sm .poster__txt { position: static; padding-top: 8px; }
.poster__item--sm .poster-headline {
  display: block; background: none; color: var(--ink); font: 600 13.5px/1.32 var(--font-ui); padding: 0;
}
.poster__item:hover .poster-headline { color: #fff; }
.poster__item--lg:hover .poster-headline { color: #fff; filter: brightness(.9); }
.poster__sm-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; }
.sixup { display: none; }
@media (min-width: 768px) {
  .poster__mosaic { display: grid; grid-template-columns: 1.62fr 1fr 1fr; gap: 14px; height: 340px; }
  .poster__sm-wrap { display: contents; }
  .poster__item { height: 100%; }
  .poster__item .media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
  .poster__txt { left: 12px; right: 12px; bottom: 12px; }
  .poster__item--lg .poster__txt { left: 14px; right: 14px; bottom: 14px; }
  .poster__item--sm .poster__txt { position: absolute; padding: 0; }
  .poster__item--sm .poster-headline {
    display: inline; background: var(--cat-tile, var(--cat)); color: #fff; font: 800 16px/1.7 var(--font-ui); padding: 3px 8px;
  }
  .poster__item--lg .poster-headline { font: 900 24px/1.62 var(--font-ui); padding: 4px 10px; }
  .poster__item:hover .poster-headline { color: #fff; filter: brightness(.9); }
  .sixup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 14px; }
}
@media (min-width: 1024px) { .sixup { grid-template-columns: repeat(6, 1fr); } }
.thumbcap .media { aspect-ratio: 16 / 10; }
.thumbcap__t { margin-top: 9px; font: 600 13.5px/1.32 var(--font-ui); }

/* Homepage archive tail */
.tail .blk-head { border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 4px; }

/* ==========================================================================
   Archive list (title + lead, no thumbs), loader, pagination
   ========================================================================== */
.arch-item { position: relative; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.arch-item .time { margin-bottom: 8px; }
.arch-item__t { font: 700 19px/1.22 var(--font-ui); margin-bottom: 8px; }
.arch-item__lead { font: 400 15px/1.5 var(--font-body); color: var(--ink-65); max-width: 78ch; }
.arch-item .cat-kicker { margin-bottom: 8px; }
@media (min-width: 1024px) {
  .arch-item { padding: 18px 0; }
  .arch-item__t { font-size: 22px; line-height: 1.2; }
  .arch-item__lead { font-size: 15.5px; }
}
.loader { display: none; align-items: center; gap: 12px; padding: 26px 0 4px; color: var(--ink-45); font: 600 12.5px/1 var(--font-ui); }
.loader.is-on { display: flex; }
.loader::before {
  content: ""; width: 16px; height: 16px; border: 2px solid var(--ink-25); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loader::before { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; } }
.more-btn {
  display: none; margin-top: 22px; background: var(--bg-ink); color: #fff; padding: 14px 22px; font: 800 13px/1 var(--font-ui);
  letter-spacing: .06em; text-transform: uppercase;
}
.more-btn:hover { background: var(--accent); }
.more-btn.is-on { display: inline-block; }
.pagination { padding-top: 22px; }
.pagination .page-numbers, .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .nav-links { gap: 8px; }
.pagination a.page-numbers, .pagination span.page-numbers {
  border: 1px solid var(--border-chip); padding: 10px 14px; font: 700 13px/1 var(--font-ui); color: var(--ink);
}
.pagination span.current { background: var(--bg-ink); color: #fff; border-color: var(--ink); }
.pagination a.page-numbers:hover { color: var(--accent-fg); border-color: var(--accent); }
.js .pagination--bots { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }

time.time-inline { font: inherit; color: inherit; display: inline; }
.hero-ad .ad-slot { margin-block: 16px 4px; }
@media (min-width: 1024px) { .hero-ad .ad-slot { margin-block: 28px 0; } }

.chip-live { white-space: nowrap; }
.link-search { white-space: nowrap; }
@media (min-width: 1024px) {
  body:not(.home) .nav-home { display: none; }
  .primary-nav { min-width: 0; }
  .primary-nav ul { gap: 22px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .primary-nav ul { gap: 16px; font-size: 12.5px; }
  .link-search { display: none; }
}

/* Mobile header: tight rhythm, centred fixed-size ВО ЖИВО chip, no stray white band under the row */
@media (max-width: 1023px) {
  .navbar__bar { padding-block: 4px 0; align-items: center; }
  .brand img { height: 36px; margin-block: -2px; }
  .navbar__tools { align-items: center; align-self: center; }
  .chip-live { padding: 0 10px; height: 28px; display: inline-flex; align-items: center; font-size: 10.5px; line-height: 1; }
  .tool-search, .burger { height: 36px; }
  .primary-nav { margin-top: 2px; }
  .primary-nav a { padding: 11px 0 9px; }
}

/* Homepage: the ticker sits directly under the nav, so СЕГА is flush with the bar (no dark 2px band above it).
   The rule comes back when the header sticks; the negative margin keeps layout from shifting. */
body.home .navbar { border-bottom-width: 0; }
body.home .navbar.is-stuck { border-bottom-width: 2px; margin-bottom: -2px; }
.ticker__tag { align-self: stretch; margin-top: 0; }

/* Mobile: no category strip — navigation lives only behind the hamburger. */
@media (max-width: 1023px) {
  .primary-nav { display: none; }
  .navbar__bar { padding-block: 6px; }
}

/* Publish date / time on every story card */
.poster__date {
  position: absolute; left: 10px; top: 10px; z-index: 2; background: rgba(20, 18, 17, .72); color: #fff;
  padding: 5px 8px; font: 700 10.5px/1 var(--font-ui); letter-spacing: .02em; pointer-events: none;
}
.poster__item--lg .poster__date { left: 14px; top: 14px; font-size: 11px; }
.thumbcap .time { margin-top: 5px; font-size: 11.5px; }
.vcard__time { margin-top: 6px; }
.band--ink .vcard__time { color: rgba(255, 255, 255, .6); }
.row--list .time { display: block; }

/* Phones: the homepage "Сите вести" stream is hidden (first page only; /page/N/ stays for crawlers) */
@media (max-width: 1023px) { .tail--hide-m { display: none; } .tail--hide-m:target { display: block; } } /* линкот „Сите вести“ ја отвора листата и на телефон */


/* ==========================================================================
   Inner pages — shared layout
   ========================================================================== */
.page-band { background: var(--surface); }
.layout { display: block; }
.layout__main { min-width: 0; }
.layout__side { display: none; }
@media (min-width: 1024px) {
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar); gap: 44px; }
  .layout__side { display: block; }
}
.sidebar > * + * { margin-top: 20px; }
.side-list .side-row { padding: 12px 0; border-bottom: 1px solid rgba(var(--ink-rgb), .12); font: 700 14.5px/1.28 var(--font-ui); position: relative; }
.side-list .side-row:last-child { border-bottom: 0; }
.mostread .mr-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(var(--ink-rgb), .12); position: relative; }
.mostread .mr-row:last-child { border-bottom: 0; }
.mr-num { font: 900 20px/1 var(--font-ui); color: var(--ink-25); min-width: 14px; }
.mr-t { font: 700 14.5px/1.28 var(--font-ui); }

/* Breadcrumb */
.crumbs { font: 500 12px/1.3 var(--font-ui); color: var(--ink-45); margin-bottom: 16px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.crumbs li + li::before { content: "›"; margin-right: 8px; }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--accent-fg); }

/* ==========================================================================
   Article
   ========================================================================== */
.article { max-width: var(--measure); }
.page-article { padding-block: 18px 28px; }
@media (min-width: 1024px) { .page-article { padding-block: 30px 34px; } }
.article .cat-kicker { margin-bottom: 12px; font-size: 10.5px; }
.entry-title { font: 900 27px/1.1 var(--font-ui); letter-spacing: -.025em; margin-bottom: 12px; }
.entry-lead { font: 400 17px/1.5 var(--font-body); color: rgba(var(--ink-rgb), .72); margin-bottom: 16px; }
@media (min-width: 768px) { .entry-title { font-size: 36px; line-height: 1.06; } .entry-lead { font-size: 19px; } }
@media (min-width: 1024px) { .entry-title { font-size: 44px; line-height: 1.05; } .entry-lead { font-size: 20px; margin-bottom: 18px; } .article .cat-kicker { font-size: 11px; } }

.meta-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-block: 1px solid var(--rule); margin-bottom: 18px;
}
.meta-strip__who { display: flex; align-items: center; gap: 10px; font: 500 12.5px/1.3 var(--font-ui); color: rgba(var(--ink-rgb), .66); }
.meta-strip__who img { width: 30px; height: 30px; object-fit: cover; flex: none; }
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share .chip { padding: 8px 12px; }
.entry-hero { margin-inline: calc(var(--pad-mobile) * -1); }
.entry-hero .media { aspect-ratio: 16 / 9; }
.entry-hero__cap { margin: 8px var(--pad-mobile) 20px; font: 400 11.5px/1.4 var(--font-ui); color: var(--ink-50); }
@media (min-width: 768px) { .entry-hero { margin-inline: 0; } .entry-hero__cap { margin-inline: 0; margin-bottom: 22px; } }

.entry-content { font: 400 18px/1.72 var(--font-body); overflow-wrap: break-word; }
@media (min-width: 1024px) { .entry-content { font-size: 19px; line-height: 1.75; } }
.entry-content > * + * { margin-top: 16px; }
.entry-content a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.entry-content a:hover { color: var(--accent-fg); }
.entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--font-ui); font-weight: 800; line-height: 1.2; margin-top: 28px; }
.entry-content h2 { font-size: 26px; }
.entry-content h3 { font-size: 21px; }
.entry-content ul, .entry-content ol { padding-left: 24px; list-style: revert; }
.entry-content li + li { margin-top: 6px; }
.entry-content blockquote {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; margin: 24px 0;
  font: italic 400 19px/1.5 var(--font-body);
}
@media (min-width: 1024px) { .entry-content blockquote { font-size: 22px; } }
.entry-content blockquote p + p { margin-top: 10px; }
.entry-content img, .entry-content video { height: auto; max-width: 100%; }
.entry-content figure { margin-block: 20px; }
.entry-content figcaption, .entry-content .wp-caption-text { font: 400 11.5px/1.4 var(--font-ui); color: var(--ink-50); margin-top: 8px; }
.entry-content .alignleft { float: left; margin: 4px 18px 10px 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: 4px 0 10px 18px; max-width: 50%; }
.entry-content .aligncenter { display: block; margin-inline: auto; }
.entry-content iframe { max-width: 100%; }
.entry-content .wp-block-embed__wrapper, .entry-content .video-wrap { position: relative; }
.entry-content table { border-collapse: collapse; width: 100%; font: 400 15px/1.4 var(--font-ui); display: block; overflow-x: auto; }
.entry-content td, .entry-content th { border: 1px solid var(--rule); padding: 8px 10px; }
.entry-content::after { content: ""; display: block; clear: both; }
.entry-content .ad-slot { margin-block: 24px; font-family: var(--font-ui); }

.tags { padding: 22px 0 4px; }
.related { border-top: 2px solid var(--ink); padding-top: 14px; margin-top: 28px; }
.related__h { font: 900 18px/1 var(--font-ui); text-transform: uppercase; margin-bottom: 4px; }
.related__grid { display: grid; gap: 16px; padding-top: 16px; }
.related__grid .card .media { aspect-ratio: 3 / 2; }
.related__grid .card__t { font-size: 16px; line-height: 1.24; margin-top: 0; }
.related__grid .card__body { padding-top: 10px; }
@media (min-width: 768px) { .related__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.nextbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--bg-ink); color: #fff; transform: translateY(110%);
  transition: transform .25s ease; padding: 12px 0;
}
.nextbar.is-on { transform: none; }
body.has-anchor .nextbar { bottom: 56px; }
@media (min-width: 768px) { body.has-anchor .nextbar { bottom: 0; } }
.nextbar .wrap { display: flex; align-items: center; gap: 14px; }
.nextbar__l { font: 800 10px/1 var(--font-ui); letter-spacing: .12em; color: var(--accent-fg); text-transform: uppercase; white-space: nowrap; }
.nextbar a { color: #fff; font: 700 14px/1.25 var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nextbar a:hover { color: var(--cat-struga); }
.nextbar__x { margin-left: auto; color: rgba(255, 255, 255, .7); }
@media (prefers-reduced-motion: reduce) { .nextbar { transition: none; } }

/* ==========================================================================
   Archive / category
   ========================================================================== */
.arch-head { background: var(--surface); border-bottom: 2px solid var(--ink); padding-block: 22px 16px; }
.arch-head .wrap { display: flex; flex-direction: column; gap: 16px; }
.arch-head__swatch { width: 60px; height: 6px; background: var(--cat, var(--ink)); margin-bottom: 14px; }
.arch-head__t { font: 900 38px/.98 var(--font-ui); letter-spacing: -.03em; text-transform: uppercase; margin-bottom: 8px; overflow-wrap: anywhere; }
.arch-head__d { font: 400 15px/1.5 var(--font-body); color: rgba(var(--ink-rgb), .66); }
.arch-head__sort { display: flex; gap: 8px; font: 700 12.5px/1 var(--font-ui); flex-wrap: wrap; }
.arch-head__sort .chip { padding: 9px 14px; font-size: 12.5px; }
@media (min-width: 768px) {
  .arch-head .wrap { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
@media (min-width: 1024px) { .arch-head { padding-block: 30px 18px; } .arch-head__t { font-size: 52px; } }
.page-arch { padding-block: 18px 30px; }
@media (min-width: 1024px) { .page-arch { padding-block: 26px 34px; } }
.arch-feature { display: block; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.arch-feature .media { aspect-ratio: 16 / 9; margin-bottom: 14px; }
.arch-feature .time { margin-bottom: 10px; }
.arch-feature__t { font: 900 26px/1.1 var(--font-ui); letter-spacing: -.02em; margin-bottom: 10px; }
.arch-feature__lead { font: 400 16px/1.5 var(--font-body); color: rgba(var(--ink-rgb), .68); }
@media (min-width: 768px) {
  .arch-feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: center; padding-bottom: 24px; }
  .arch-feature .media { margin-bottom: 0; }
  .arch-feature__t { font-size: 30px; line-height: 1.08; }
}
.arch-list { padding-top: 4px; }
.sibling-cats { margin-top: 20px; }

/* ==========================================================================
   Search
   ========================================================================== */
.search-head { background: var(--surface); border-bottom: 2px solid var(--ink); padding-block: 22px 18px; }
.search-form { display: flex; align-items: stretch; gap: 0; max-width: 720px; }
.search-form__field {
  flex: 1; display: flex; align-items: center; gap: 10px; border: 2px solid var(--ink); padding: 0 14px; min-width: 0; background: var(--surface);
}
.search-form__field svg { flex: none; color: var(--ink-45); }
.search-form__field input { border: 0; outline: 0; flex: 1; min-width: 0; padding: 13px 0; font: 600 16px/1 var(--font-ui); background: transparent; color: var(--ink); caret-color: var(--accent); }
.search-form__field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-form__btn { background: var(--accent); color: #fff; padding: 0 18px; font: 800 13px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.search-form__btn:hover { background: var(--accent-dark); }
@media (min-width: 1024px) { .search-form__field input { font-size: 18px; padding-block: 14px; } .search-form__btn { padding: 0 22px; } .search-head { padding-block: 30px 22px; } }
.search-form--lg { max-width: 480px; }
.search-form--lg .search-form__field input { font-size: 16px; font-weight: 500; padding-block: 13px; }
.search-meta { margin-top: 14px; font: 500 13px/1.4 var(--font-ui); color: rgba(var(--ink-rgb), .66); }
.search-layout { display: block; }
@media (min-width: 1024px) { .search-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 44px; } }
.facets { margin-bottom: 20px; }
.facets__h { font: 900 12px/1 var(--font-ui); letter-spacing: .12em; padding-bottom: 10px; border-bottom: 2px solid var(--ink); text-transform: uppercase; }
.facets__h--2 { padding-top: 22px; }
.facets a { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(var(--ink-rgb), .12); font: 600 14px/1 var(--font-ui); }
.facets a span { color: var(--ink-45); }
.facets a.is-active { color: var(--accent-fg); font-weight: 800; }
.facets a:hover { color: var(--accent-fg); }
@media (max-width: 1023px) {
  .facets { display: flex; flex-wrap: wrap; gap: 8px; }
  .facets__h { display: none; }
  .facets a { display: inline-flex; gap: 8px; border: 1px solid var(--border-chip); padding: 9px 12px; font-size: 12.5px; }
  .facets .facets__group { display: contents; }
}
.res { position: relative; display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.res:last-child { border-bottom: 0; }
.res .media { flex: none; width: 104px; height: 78px; }
.res__body { flex: 1; min-width: 0; }
.res .cat-kicker { margin-bottom: 8px; }
.res__t { font: 700 17px/1.22 var(--font-ui); margin-bottom: 8px; }
.res__ex { font: 400 14px/1.5 var(--font-body); color: var(--ink-65); display: none; }
@media (min-width: 768px) {
  .res { gap: 20px; }
  .res .media { width: 180px; height: 118px; }
  .res__t { font-size: 21px; }
  .res__ex { display: block; font-size: 15px; }
}
.noresult { border: 2px solid var(--ink); padding: 22px 20px; margin-bottom: 26px; }
.noresult__k { font: 900 11px/1 var(--font-ui); letter-spacing: .14em; color: var(--accent-fg); margin-bottom: 12px; text-transform: uppercase; }
.noresult__t { font: 900 26px/1.08 var(--font-ui); letter-spacing: -.02em; margin-bottom: 12px; }
.noresult p { font: 400 16px/1.6 var(--font-body); color: var(--ink-70); max-width: 60ch; }
.try-h { font: 900 12px/1 var(--font-ui); letter-spacing: .12em; color: var(--ink-50); margin-bottom: 12px; text-transform: uppercase; }
.chip--term { border-color: rgba(var(--ink-rgb), .25); padding: 10px 14px; font-size: 13px; }
@media (min-width: 1024px) { .noresult { padding: 26px 28px; } .noresult__t { font-size: 30px; } }

/* 404 */
.nf { display: grid; gap: 34px; padding-block: 32px 36px; }
.nf__num { font: 900 88px/.82 var(--font-ui); letter-spacing: -.05em; color: var(--accent-fg); margin-bottom: 20px; }
.nf__t { font: 900 28px/1.06 var(--font-ui); letter-spacing: -.02em; margin-bottom: 12px; max-width: 18ch; }
.nf__p { font: 400 17px/1.6 var(--font-body); color: var(--ink-70); margin-bottom: 22px; max-width: 52ch; }
.nf .chips { padding-top: 18px; }
@media (min-width: 1024px) {
  .nf { grid-template-columns: 1fr 1fr; gap: 44px; padding-block: 50px 42px; align-items: center; }
  .nf__num { font-size: 124px; }
  .nf__t { font-size: 34px; }
}

/* ==========================================================================
   Video article + livestream (dark stage)
   ========================================================================== */
.stage { background: var(--bg-ink); color: #fff; padding-block: 18px 26px; }
.stage--live { background: var(--stage-bg); }
.stage a { color: inherit; }
.stage-grid { display: grid; gap: 22px; align-items: start; }
@media (min-width: 1024px) {
  .stage { padding-block: 26px 30px; }
  .stage--live { padding-block: 24px 30px; }
  .stage-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; }
  .stage--live .stage-grid { grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; }
}
.player { position: relative; aspect-ratio: 16 / 9; background: var(--player-bg); overflow: hidden; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__btn { position: absolute; inset: 0; width: 100%; display: flex; align-items: center; justify-content: center; color: #fff; }
.player__btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.player__play { position: relative; width: 62px; height: 44px; background: var(--accent); display: flex; align-items: center; justify-content: center; z-index: 1; }
.player__play::after { content: ""; width: 0; height: 0; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 4px; }
.player__btn:hover .player__play { background: var(--accent-dark); }
@media (min-width: 768px) { .player__play { width: 78px; height: 54px; } .player__play::after { border-left-width: 22px; border-top-width: 14px; border-bottom-width: 14px; } }
.player__chip, .player__live {
  position: absolute; z-index: 2; top: 10px; left: 10px; background: rgba(0, 0, 0, .6); padding: 6px 10px;
  font: 800 10px/1 var(--font-ui); letter-spacing: .1em; color: #fff; text-transform: uppercase; pointer-events: none;
}
.player__live { background: var(--accent); display: flex; align-items: center; gap: 7px; font-weight: 900; letter-spacing: .12em; }
.player__live::before { content: ""; width: 6px; height: 6px; background: #fff; border-radius: 50%; }
.player__chip--r { left: auto; right: 10px; font-weight: 700; letter-spacing: .08em; }
.player__note { position: absolute; left: 14px; right: 14px; bottom: 12px; font: 500 12px/1.4 var(--font-ui); color: rgba(255, 255, 255, .7); z-index: 2; }
.vid-meta { margin-top: 18px; }
.vid-meta .cat-kicker { color: #fff; margin-bottom: 10px; }
.vid-meta .cat-kicker::before { background: #fff; }
.vid-title { font: 900 26px/1.08 var(--font-ui); letter-spacing: -.02em; margin-bottom: 12px; text-wrap: pretty; }
@media (min-width: 1024px) { .vid-title { font-size: 34px; line-height: 1.06; } }
.vid-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); }
.vid-sub__l { font: 500 13px/1.3 var(--font-ui); color: rgba(255, 255, 255, .6); }
.share--dark .chip { color: #fff; border-color: rgba(255, 255, 255, .3); }
.share--dark .chip:hover { color: var(--cat-struga); border-color: var(--cat-struga); }

.rail-dark__h { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 2px solid rgba(255, 255, 255, .35); }
.rail-dark__c { font: 600 11.5px/1 var(--font-ui); color: rgba(255, 255, 255, .55); text-transform: uppercase; }
.pl-row { position: relative; display: flex; gap: 12px; padding: 12px 10px; border-bottom: 1px solid rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .85); }
.pl-row:last-child { border-bottom: 0; }
.pl-row.is-active { background: rgba(255, 255, 255, .07); color: #fff; }
.pl-row .media { flex: none; width: 106px; height: 60px; background: var(--video-bg); }
.pl-row__t { font: 600 13.5px/1.26 var(--font-ui); }
.pl-row.is-active .pl-row__t { font-weight: 700; }
.pl-row__m { display: block; margin-top: 5px; font: 500 11px/1 var(--font-ui); color: rgba(255, 255, 255, .45); }
.pl-row__now { display: block; margin-top: 5px; font: 800 10px/1 var(--font-ui); letter-spacing: .08em; color: var(--accent-fg); text-transform: uppercase; }
.pl-row:hover, .pl-row:hover a { color: var(--cat-struga); }

.chapters { margin-top: 20px; }
.chapters__h { border-top: 2px solid var(--ink); padding-top: 12px; margin-bottom: 4px; font: 900 13px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.chapter { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); width: 100%; text-align: left; position: relative; }
.chapter:last-child { border-bottom: 0; }
.chapter__tc { font: 700 13px/1.3 var(--font-ui); color: var(--accent-fg); }
.chapter__t { font: 600 15px/1.3 var(--font-ui); }
button.chapter:hover .chapter__t { color: var(--accent-fg); }
.vid-summary { font: 400 18px/1.7 var(--font-body); }
@media (min-width: 1024px) { .vid-summary { font-size: 19px; line-height: 1.75; } }
.more-videos { margin-top: 28px; }
.more-videos__grid { display: grid; gap: 16px; }
.more-videos__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
@media (min-width: 768px) { .more-videos__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.more-videos .vcard__t { color: var(--ink); font-size: 15.5px; font-weight: 700; line-height: 1.24; }
.more-videos .vcard.nl { color: var(--ink); }
.more-videos .vcard.nl:hover, .more-videos .vcard.nl:hover a { color: var(--accent-fg); }
.more-videos .vcard:not(.vcard--lead) { display: block; }

/* Livestream */
.live-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; padding: 8px 14px; font: 900 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.live-pill::before { content: ""; width: 7px; height: 7px; background: #fff; border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .live-pill::before { animation: none; } }
.live-h1 { font: 900 20px/1.1 var(--font-ui); letter-spacing: -.01em; color: #fff; }
@media (min-width: 1024px) { .live-h1 { font-size: 24px; } }
.missed__grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .missed__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .missed__grid { grid-template-columns: repeat(4, 1fr); } }
.missed .vcard.nl { color: var(--ink); }
.missed .vcard__t { color: var(--ink); font-size: 15.5px; font-weight: 700; line-height: 1.24; }
.missed .vcard.nl:hover, .missed .vcard.nl:hover a { color: var(--accent-fg); }
.missed .vcard:not(.vcard--lead) { display: block; }
@media (max-width: 1023px) {
  .stage--live .player-sticky { position: sticky; top: 0; z-index: 2; background: var(--stage-bg); margin-inline: calc(var(--pad-mobile) * -1); }
  .admin-bar .stage--live .player-sticky { top: 46px; }
  @media (max-width: 600px) { .admin-bar .stage--live .player-sticky { top: 0; } }
  .stage--live .stage-grid { gap: 0; }
  .live-viewers { display: none; }
}
@media (max-width: 1023px) { body.page-live-body .navbar { position: static; } }

/* ==========================================================================
   Liveblog
   ========================================================================== */
.lb-head { background: var(--surface); border-bottom: 2px solid var(--ink); padding-block: 20px 18px; }
.lb-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.lb-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; padding: 7px 13px; font: 900 12px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.lb-pill::before { content: ""; width: 7px; height: 7px; background: #fff; border-radius: 50%; }
.lb-pill--end { background: var(--bg-ink); }
.lb-pill--end::before { display: none; }
.lb-upd { font: 600 13px/1 var(--font-ui); color: rgba(var(--ink-rgb), .66); }
.lb-h1 { font: 900 30px/1.05 var(--font-ui); letter-spacing: -.03em; max-width: 24ch; margin-bottom: 14px; }
.lb-lead { font: 400 17px/1.55 var(--font-body); color: rgba(var(--ink-rgb), .72); max-width: 70ch; }
@media (min-width: 1024px) { .lb-head { padding-block: 28px 20px; } .lb-h1 { font-size: 46px; line-height: 1.03; } .lb-lead { font-size: 19px; } }
.lb-main { max-width: 760px; }
.lb-sum { border: 2px solid var(--ink); padding: 16px 18px; margin-bottom: 26px; }
.lb-sum__k { font: 900 11px/1 var(--font-ui); letter-spacing: .14em; color: var(--accent-fg); margin-bottom: 12px; text-transform: uppercase; }
.lb-sum ul { list-style: disc; padding-left: 18px; font: 400 15.5px/1.65 var(--font-body); color: rgba(var(--ink-rgb), .85); }
.lb-day { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.lb-day::before, .lb-day::after { content: ""; height: 2px; flex: 1; background: var(--ink); }
.lb-day span { font: 800 11px/1 var(--font-ui); letter-spacing: .14em; color: var(--ink-50); text-transform: uppercase; }
.lb-feed { border-left: 2px solid rgba(var(--ink-rgb), .18); padding-left: 22px; margin-left: 8px; }
.lb-entry { position: relative; padding: 22px 0 4px; border-top: 1px solid var(--rule); }
.lb-entry:first-child { border-top: 0; padding-top: 20px; }
.lb-entry::before {
  content: ""; position: absolute; left: -31px; top: 28px; width: 12px; height: 12px; background: var(--surface); border: 3px solid rgba(var(--ink-rgb), .3);
}
.lb-entry.is-new::before { left: -31px; top: 26px; width: 14px; height: 14px; background: var(--accent); border: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--accent); }
.lb-entry__time { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font: 900 14px/1 var(--font-ui); color: rgba(var(--ink-rgb), .66); }
.lb-entry.is-new .lb-entry__time { color: var(--accent-fg); }
.lb-badge { background: var(--accent); color: #fff; padding: 4px 8px; font: 800 9.5px/1 var(--font-ui); letter-spacing: .1em; }
.lb-entry__t { font: 800 21px/1.16 var(--font-ui); margin-bottom: 10px; text-wrap: pretty; }
.lb-entry__body { font: 400 17px/1.7 var(--font-body); margin-bottom: 14px; }
.lb-entry__body > * + * { margin-top: 12px; }
.lb-entry__body a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.lb-entry blockquote { border-left: 3px solid var(--accent); padding: 2px 0 2px 16px; margin: 12px 0 14px; font: italic 400 19px/1.5 var(--font-body); }
.lb-entry .media { aspect-ratio: 16 / 8; }
.lb-entry__cap { margin: 7px 0 14px; font: 400 11.5px/1.4 var(--font-ui); color: var(--ink-50); }
.lb-entry .player { aspect-ratio: 16 / 8; margin-bottom: 14px; }
@media (min-width: 768px) { .lb-entry__t { font-size: 24px; } }
.lb-auto { border: 2px solid var(--accent); padding: 14px 16px; }
.lb-auto__k { font: 900 11px/1 var(--font-ui); letter-spacing: .12em; color: var(--accent-fg); margin-bottom: 10px; text-transform: uppercase; }
.lb-auto p { font: 500 13px/1.5 var(--font-ui); color: var(--ink-70); }
.lb-entry--flash { animation: flash 2.4s ease-out; }
@keyframes flash { from { background: rgba(236, 48, 19, .1); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .lb-entry--flash { animation: none; } }

/* Static page */
.page-static { padding-block: 24px 34px; }
.page-static .article { max-width: var(--measure); }

/* ==========================================================================
   Footer — klix.ba-inspired: link grid, "follow us" icons, copyright (the only centred element)
   ========================================================================== */
.footer { margin-top: var(--gap-section-m); background: var(--surface); border-top: 2px solid var(--ink); padding: 26px 0 0; }
.footer .wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.footer__logo img { height: 48px; width: auto; }
.footer__nav { width: 100%; }
.footer__nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; text-align: left; }
.footer__nav li { border-bottom: 1px solid var(--rule); }
.footer__nav a { display: flex; align-items: center; gap: 10px; padding: 12px 2px; font: 600 14px/1.2 var(--font-ui); color: var(--ink-70); }
.footer__nav a:hover { color: var(--accent-fg); }
.footer__cats a::before { content: ""; width: 14px; height: 3px; background: var(--cat, var(--ink)); flex: none; }
.footer__cats li:first-child a::before { background: var(--accent); }
.footer__nav--info a { font-weight: 500; font-size: 13.5px; color: var(--ink-50); }
.footer__follow { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 4px; }
.footer__follow-t { font: 800 11px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); }
.footer__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.footer__social a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border-chip); color: var(--ink); }
.footer__social a:hover { border-color: var(--accent); color: var(--accent-fg); }
.footer__bottom { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0 24px; border-top: 1px solid var(--rule); }
.footer__copy { font: 400 11.5px/1.6 var(--font-ui); color: rgba(var(--ink-rgb), .66); }
.footer__up { display: inline-flex; align-items: center; gap: 6px; font: 800 11px/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.footer__up:hover { color: var(--accent-fg); }
@media (min-width: 768px) {
  .footer__nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; }
  .footer__nav li { border-bottom: 0; }
  .footer__nav a { padding: 8px 12px; }
  .footer__nav--info a { font-size: 13px; }
}
@media (min-width: 1024px) {
  .footer { margin-top: var(--gap-section); padding-top: 34px; }
  .footer .wrap { gap: 20px; }
  .footer__logo img { height: 56px; }
  .footer__nav a { font-size: 14px; }
  .footer__bottom { flex-direction: row; justify-content: space-between; padding: 18px 0 26px; }
  .footer__copy { font-size: 12px; text-align: left; }
}
.pre-footer { padding-block: 8px 12px; }
@media (min-width: 1024px) { .pre-footer { padding-block: 20px 24px; } }

.meta-lines { display: flex; flex-direction: column; gap: 4px; }
.meta-date { font: 700 13px/1.3 var(--font-ui); color: var(--ink); }
.meta-sub { font: 500 12px/1.3 var(--font-ui); color: var(--ink-50); }
.meta-sub time { display: inline; font: inherit; color: inherit; }
.mr-b { min-width: 0; }
.mr-b .time { margin-top: 5px; font-size: 11.5px; }
.side-row .time { margin-top: 5px; font-size: 11.5px; }


/* ==========================================================================
   Smoother: soft hairlines instead of heavy black rules, gentle stuck-header shadow,
   scroll-reveal for sections/cards, small hover transitions.
   ========================================================================== */
html { scroll-padding-top: 76px; }

/* No line between the utility bar and the header (both white); hairline only where it separates real content. */
.util { border-bottom-color: transparent; }
@media (min-width: 1024px) { .util { border-bottom-color: var(--rule); } }

/* Header: hairline, and a soft shadow that fades in once it sticks */
.navbar { border-bottom: 1px solid var(--rule); transition: box-shadow .3s ease, border-color .3s ease; }
body.home .navbar { border-bottom-width: 0; }
body.home .navbar.is-stuck { border-bottom-width: 1px; margin-bottom: -1px; }
.navbar.is-stuck { box-shadow: 0 8px 22px rgba(var(--shadow-rgb), .09); border-bottom-color: rgba(var(--shadow-rgb), .10); }
@media (min-width: 1024px) { body.home .navbar { border-top-color: var(--rule); } }

/* Softer section rules (2px ink rules stay only on desktop headings where they carry structure) */
@media (max-width: 1023px) {
  .hero-card--lg .hero-card__body { border-bottom: 1px solid var(--rule); }
  .arch-head, .search-head, .lb-head { border-bottom-width: 1px; border-bottom-color: var(--rule); }
  .arch-feature { border-bottom-width: 1px; border-bottom-color: var(--rule); }
  .footer { border-top-width: 1px; border-top-color: var(--rule); }
  .related { border-top-width: 1px; border-top-color: var(--rule); }
  .side-h, .chapters__h { border-top-width: 1px; border-top-color: var(--rule); }
}

/* Hover transitions + subtle image zoom */
.nl, .nl a, .chip, .see-all, .footer a, .primary-nav a, .menu__list a, .btn-live, .chip-live { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.media img { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .nl:hover .media img { transform: scale(1.035); } }
.menu { animation: menu-in .22s ease both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Scroll reveal (class added by reveal.js; nothing is hidden if JS does not run) */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.2, .7, .2, 1), transform .65s cubic-bezier(.2, .7, .2, 1); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .rv.rv-now { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .menu { animation: none; }
  .media img, .nl:hover .media img { transition: none; transform: none; }
}


/* ==========================================================================
   Одделни секции (картички) + многу лесна сенка, подножје, летечко „Горе“, датум под сликата
   ========================================================================== */
:root { --card-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04), 0 8px 24px rgba(var(--shadow-rgb), .05); }

/* Секој блок е своја картичка на сивата подлога, со многу суптилна сенка */
.band, .page-band { box-shadow: var(--card-shadow); }
.band--ground { background: var(--surface); }          /* нема повеќе „прозирни“ секции што се слеваат со подлогата */
.bands { gap: 10px; }
@media (min-width: 1024px) { .bands { gap: 14px; } }

/* Рубрики со листа (Балкан / Свет / Македонија): на мобилен — секоја е своја картичка */
.band--cols { background: transparent; box-shadow: none; padding: 0; }
.band--cols .wrap { padding-inline: 0; }
.band--cols .cols3 { display: flex; flex-direction: column; gap: 10px; }
.band--cols .col { background: var(--surface); padding: 14px var(--pad-mobile) 6px; box-shadow: var(--card-shadow); }
.cols3 .col + .col { margin-top: 0; }
@media (min-width: 768px) {
  .band--cols { background: var(--surface); box-shadow: var(--card-shadow); padding-block: 22px 18px; }
  .band--cols .wrap { padding-inline: var(--pad-mobile); }
  .band--cols .cols3 { display: grid; gap: 28px; }
  .band--cols .col { background: none; padding: 0; box-shadow: none; }
}
@media (min-width: 1024px) {
  .band--cols { padding-block: 28px 24px; }
  .band--cols .wrap { padding-inline: var(--pad-desktop); }
}

/* Првата вест во секцијата: датумот е ПОД сликата (над насловот) */
.row--list:first-child { display: flex; flex-direction: column-reverse; }
.row--list:first-child .row__body { display: flex; flex-direction: column; }
.row--list:first-child .time { order: -1; margin: 0 0 8px; }
.row--list:first-child .media { margin-bottom: 8px; }
@media (min-width: 1024px) {
  .row--list:first-child { display: flex; flex-direction: row-reverse; }
  .row--list:first-child .row__body { display: block; }
  .row--list:first-child .time { order: 0; margin: 6px 0 0; }
  .row--list:first-child .media { margin: 0; }
}

/* Постер секции: слика → датум → (на мобилен за малите: наслов) */
.poster__item { display: flex; flex-direction: column; }
.poster__pic { position: relative; }
.poster__pic .media { aspect-ratio: 16 / 10; }
.poster__date {
  position: static; display: block; background: none; color: var(--ink-50); padding: 8px 0 0;
  font: 500 12px/1 var(--font-ui); letter-spacing: 0; pointer-events: none;
}
.poster__item--lg .poster__date { position: static; font-size: 12px; padding: 8px 0 0; }
/* мали картички на мобилен: слика → датум → наслов */
.poster__item--sm .poster__pic { display: contents; }
.poster__item--sm .poster__pic .media { order: 0; }
.poster__item--sm .poster__date { order: 1; }
.poster__item--sm .poster__txt { order: 2; position: static; padding-top: 6px; }
@media (min-width: 768px) {
  .poster__item { height: 100%; }
  .poster__pic { flex: 1 1 auto; min-height: 0; }
  .poster__pic .media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
  .poster__item--sm .poster__pic { display: block; }
  .poster__item--sm .poster__txt { order: 0; position: absolute; padding: 0; }
  .poster__item--sm .poster__date { order: 0; }
}

/* Видео секција: датумот под сликата на водечкото видео */
.vcard { display: flex; flex-direction: column; }
.vcard--lead .vcard__time { order: 1; margin: 8px 0 0; }
.vcard--lead .vcard__t { order: 2; margin-top: 6px; }

/* ==========================================================================
   Подножје: поблиску до секцијата над него, без категории
   ========================================================================== */
.footer { margin-top: 10px; padding-top: 24px; box-shadow: var(--card-shadow); border-top: 1px solid var(--rule); }
@media (min-width: 1024px) { .footer { margin-top: 14px; padding-top: 30px; border-top-width: 2px; border-top-color: var(--ink); } }
.footer__bottom { border-top: 1px solid var(--rule); }
.footer__follow { padding-top: 0; }
.pre-footer { padding-block: 0; }
.pre-footer .ad-slot { margin-block: 0; }

/* ==========================================================================
   Летечко копче „Назад горе“
   ========================================================================== */
.to-top {
  position: fixed; right: 14px; bottom: 16px; z-index: 85; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-ink); color: #fff;
  box-shadow: 0 6px 18px rgba(var(--shadow-rgb), .22);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background-color .18s ease;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--accent); }
body.has-anchor .to-top { bottom: 72px; }
body.single-post .to-top { bottom: 76px; }
body.single-post.has-anchor .to-top { bottom: 130px; }
@media (min-width: 768px) {
  .to-top { right: 24px; bottom: 24px; }
  body.has-anchor .to-top { bottom: 24px; }
  body.single-post .to-top { bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; transform: none; } }


/* ==========================================================================
   Подножје — минимално: без линии и рамки, групите се раздвоени само со простор
   (логото → линкови во еден ред → иконки → авторски права). Единствениот центриран елемент.
   ========================================================================== */
.footer { border-top: 0; padding: 34px 0 28px; }
.footer .wrap { gap: 22px; }
.footer__logo img { height: 50px; width: auto; }

/* линкови: две колони, еден под друг (првата половина лево, втората десно) */
.footer__nav { width: auto; max-width: 100%; }
.footer__nav ul { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 4), auto); grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; gap: 12px 44px; text-align: left; }
.footer__nav li, .footer__nav li:last-child { border: 0; }
.footer__nav a { display: inline; padding: 0; font: 600 14px/1.3 var(--font-ui); color: var(--ink-70); }
.footer__nav a:hover { color: var(--accent-fg); }
.footer__nav--info a { font-size: 14px; font-weight: 600; color: var(--ink-70); }
/* опција „Една линија“: центриран ред што се прелева */
.footer__nav.footer__nav--line { max-width: 560px; }
.footer__nav.footer__nav--line ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; text-align: center; }
@media (min-width: 1024px) { .footer__nav.footer__nav--line { max-width: 760px; } .footer__nav.footer__nav--line ul { gap: 12px 32px; } }

/* социјални мрежи: тивки пополнети плочки (без обрабка) */
.footer__follow { gap: 0; padding-top: 2px; }
.footer__follow-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.footer__social { gap: 10px; }
.footer__social a { width: 40px; height: 40px; border: 0; background: var(--page-bg); color: var(--ink-70); transition: background-color .18s ease, color .18s ease; }
.footer__social a:hover { background: var(--accent); color: #fff; }

/* авторски права: без линија над нив */
.footer__bottom { border-top: 0; padding: 4px 0 0; gap: 0; flex-direction: column; align-items: center; justify-content: center; }
.footer__copy { text-align: center; font: 400 12px/1.7 var(--font-ui); color: var(--ink-50); }

@media (min-width: 1024px) {
  .footer { padding: 42px 0 34px; border-top: 0; }
  .footer .wrap { gap: 26px; }
  .footer__logo img { height: 56px; }
  .footer__nav ul { gap: 12px 64px; }
  .footer__bottom { flex-direction: column; justify-content: center; padding-top: 6px; }
  .footer__copy { text-align: center; }
}


/* ==========================================================================
   Placeholder-и за рекламни слотови (кога нема активна креатива)
   ========================================================================== */
.ad--placeholder .ad__inner {
  font: 600 11px/1.4 var(--font-ui); letter-spacing: .14em; color: var(--ink-45); text-transform: uppercase; text-align: center; padding: 8px 12px;
}
.ad--placeholder .ph-d { display: none; }
.ad--placeholder .ph-m { display: inline; }
@media (min-width: 768px) {
  .ad--placeholder .ph-d { display: inline; }
  .ad--placeholder .ph-m { display: none; }
}
.ad--placeholder.ad--on-dark .ad__inner { color: rgba(255, 255, 255, .45); }
.ad--placeholder.ad--mobile_anchor .ad__inner { font-size: 10.5px; }

/* резервирана висина на мобилен за „fluid“ слот и слотови што се скриени на мобилен */
.ad--placeholder { min-height: var(--ad-h-m, 100px); }
@media (min-width: 768px) { .ad--placeholder { min-height: var(--ad-h-d, 90px); } }
.ad--placeholder.ad--mobile_anchor { min-height: 0; }

/* на страничните колони сивата кутија е дискретна, лепливиот слот останува sticky */
.ad-slot .ad--placeholder { background: var(--ad-bg); border: 1px dashed var(--ad-border); }
.ad-slot--article_inline { margin-block: 26px; }
.entry-content .ad-slot--article_inline .ad__inner { font-family: var(--font-ui); }


/* ==========================================================================
   Статија: лента „Следна вест“ (слика + наслов + икона за влез) и минималистички „Поврзани вести“
   ========================================================================== */

/* ---- Следна вест ---- */
.nextbar {
  background: var(--surface); color: var(--ink); padding: 0; border-top: 1px solid var(--rule);
  box-shadow: 0 -10px 30px rgba(var(--shadow-rgb), .12);
}
.nextbar .wrap.nextbar__in { position: relative; display: block; padding-block: 0; }
.nextbar__link { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--ink); min-width: 0; }
.nextbar__link:hover { color: var(--ink); }
.nextbar__img { flex: none; width: 60px; height: 60px; background: var(--ad-bg); overflow: hidden; display: block; }
.nextbar__img img { width: 100%; height: 100%; object-fit: cover; }
.nextbar__ph { display: block; width: 100%; height: 100%; background-image: repeating-linear-gradient(135deg, #dcd9d9 0 8px, #d3d0d0 8px 16px); }
.nextbar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.nextbar__l { font: 800 10px/1 var(--font-ui); letter-spacing: .12em; color: var(--accent-fg); text-transform: uppercase; }
.nextbar__t {
  font: 700 14.5px/1.28 var(--font-ui); color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nextbar__go {
  flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  background: var(--accent); color: #fff; transition: background-color .18s ease, margin-right .2s ease;
}
.nextbar__link:hover .nextbar__go { background: var(--bg-ink); margin-right: -3px; }
.nextbar__link:hover .nextbar__t { color: var(--accent-fg); }
/* затвори: мал јазиче над лентата */
.nextbar__x {
  position: absolute; right: var(--pad-mobile); top: -28px; width: 30px; height: 28px; margin: 0;
  display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--ink-70);
  border: 1px solid var(--rule); border-bottom: 0;
}
.nextbar__x:hover { color: var(--accent-fg); }
@media (min-width: 768px) {
  .nextbar__img { width: 68px; height: 68px; }
  .nextbar__t { font-size: 16px; }
  .nextbar__x { right: var(--pad-desktop); }
}
/* летечкото „Горе“ копче останува над лентата */
body.single-post .to-top { bottom: 98px; }
body.single-post.has-anchor .to-top { bottom: 154px; }
@media (min-width: 768px) {
  body.single-post .to-top { bottom: 104px; }
  body.single-post.has-anchor .to-top { bottom: 104px; }
}

/* ---- Поврзани вести: минималистички ---- */
.related { border-top: 1px solid var(--rule); padding-top: 18px; margin-top: 30px; }
.related__h { font: 800 12px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); margin-bottom: 6px; }
.related__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
.rel { min-width: 0; position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; }
.rel .media { flex: none; width: 84px; height: 60px; aspect-ratio: auto; }
.rel__b { min-width: 0; flex: 1; }
.rel__t { font: 600 14px/1.32 var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.rel .time { margin-top: 5px; font-size: 11.5px; }
@media (min-width: 768px) { .related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* старите правила за „.nextbar a“ (бела боја, nowrap) да не го прекршуваат новиот изглед */
.nextbar a.nextbar__link, .nextbar a.nextbar__link:hover { color: var(--ink); white-space: normal; overflow: visible; text-overflow: clip; font: inherit; }
.nextbar a.nextbar__link:hover .nextbar__t { color: var(--accent-fg); }


/* ==========================================================================
   Листање по рубрики: секоја вест има мала сличица лево, па датум, наслов и краток текст;
   видлива нумерирана пагинација
   ========================================================================== */
.arch-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; }
.arch-item .media { flex: none; width: 100px; height: 72px; aspect-ratio: auto; }
.arch-item__b { flex: 1; min-width: 0; }
.arch-item__b .time { margin-bottom: 6px; font-size: 11.5px; }
.arch-item__t { font: 700 16.5px/1.25 var(--font-ui); margin-bottom: 6px; }
.arch-item__lead {
  font: 400 14px/1.5 var(--font-body); color: var(--ink-65); max-width: 78ch;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 768px) {
  .arch-item { gap: 20px; padding: 18px 0; }
  .arch-item .media { width: 160px; height: 108px; }
  .arch-item__t { font-size: 20px; line-height: 1.22; margin-bottom: 8px; }
  .arch-item__lead { font-size: 15px; -webkit-line-clamp: 3; line-clamp: 3; }
  .arch-item__b .time { font-size: 12px; margin-bottom: 8px; }
}

/* ---- Пагинација ---- */
.pagination { padding-top: 26px; }
.pagination ul.page-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pagination li { display: block; }
.pagination .page-numbers { border: 0; }
.pagination a.page-numbers, .pagination span.page-numbers {
  display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px;
  background: var(--page-bg); border: 0; color: var(--ink); font: 700 14px/1 var(--font-ui);
  transition: background-color .18s ease, color .18s ease;
}
.pagination a.page-numbers:hover { background: var(--bg-ink); color: #fff; border: 0; }
.pagination span.page-numbers.current { background: var(--bg-ink); color: #fff; border: 0; }
.pagination span.page-numbers.dots { background: none; min-width: 20px; padding: 0; color: var(--ink-45); }
.pagination a.prev, .pagination a.next { background: var(--page-bg); }
.pagination__info { margin-top: 12px; font: 500 12px/1 var(--font-ui); color: var(--ink-50); }
@media (max-width: 480px) {
  .pagination a.page-numbers, .pagination span.page-numbers { min-width: 36px; height: 38px; padding: 0 8px; }
  .pagination ul.page-numbers { gap: 5px; }
}

/* Мобилен: пагинацијата е на средина од екранот */
@media (max-width: 767px) {
  .pagination { display: flex; flex-direction: column; align-items: center; }
  .pagination ul.page-numbers { justify-content: center; }
  .pagination__info { text-align: center; }
}

/* Плочката на секцијата е линк до рубриката, но изгледа исто како и без линк */
.cat-tile a, .cat-tile a:hover { color: inherit; text-decoration: none; }
.cat-tile a:hover { opacity: .88; }


/* Горна лента (датум + време): скоро невидлива линија што ја дели од редот со логото и хамбургер менито */
.util { border-bottom: 1px solid rgba(var(--ink-rgb), .07); }
@media (min-width: 1024px) { .util { border-bottom-color: rgba(var(--ink-rgb), .07); } }


/* ==========================================================================
   Мобилно мени: листа од категории што се скролира + закачена лента „Пријави вест“ на дното
   ========================================================================== */
.menu { overflow: hidden; }
.menu__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 14px; }
.menu__list { padding-bottom: 6px; }

/* „Пријави вест“ — секогаш на дното, посебна боја, икона и стрелка */
.menu__report {
  flex: none; display: flex; align-items: center; gap: 14px;
  background: var(--accent); color: #fff;
  padding: 16px var(--pad-mobile) calc(16px + env(safe-area-inset-bottom, 0px));
  transition: background-color .18s ease;
}
.menu__report:hover, .menu__report:focus-visible { background: var(--accent-dark); color: #fff; }
.menu__report-ic {
  flex: none; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--accent-fg);
}
.menu__report-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.menu__report-t strong { font: 900 20px/1.05 var(--font-ui); letter-spacing: .01em; text-transform: uppercase; }
.menu__report-t small { font: 500 12.5px/1.35 var(--font-ui); color: rgba(255, 255, 255, .88); }
.menu__report-go { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid rgba(255, 255, 255, .55); }
.menu__report:hover .menu__report-go { background: #fff; color: var(--accent-fg); border-color: #fff; }
@media (min-width: 1024px) {
  .menu__report { padding-inline: 24px; }
  .menu__body { padding-bottom: 20px; }
}

/* Помал фонт на категориите во менито */
.menu__list a { font-size: 17px; letter-spacing: .01em; padding: 14px 0; gap: 12px; }
.menu__list a::before { width: 16px; height: 3px; }
.menu__list a::after { font-size: 24px; }
@media (min-width: 1024px) { .menu__list a { font-size: 16px; padding: 13px 0; } }


/* Мени: група „Локално“ (Струга + Охрид) што се отвора/затвора */
.menu__group { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.menu__list .menu__group { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.menu__group details { display: block; }
.menu__group summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none;
  color: #fff; font: 800 17px/1 var(--font-ui); letter-spacing: .01em; text-transform: uppercase;
}
.menu__group summary::-webkit-details-marker { display: none; }
.menu__group summary::before { content: ""; width: 16px; height: 3px; background: var(--cat-dark, #fff); flex: none; }
.menu__group summary::after {
  content: "›"; margin-left: auto; font: 400 24px/1 var(--font-ui); color: rgba(255, 255, 255, .45);
  transform: rotate(90deg); transition: transform .2s ease;
}
.menu__group details[open] > summary::after { transform: rotate(-90deg); }
.menu__group summary:hover { color: var(--cat-dark, #fff); }
.menu__sub { padding: 0 0 8px 28px; }
.menu__list .menu__sub li { border: 0; }
.menu__list .menu__sub a { padding: 10px 0; font-size: 16px; font-weight: 700; text-transform: uppercase; opacity: .95; }
.menu__list .menu__sub a::after { font-size: 22px; }
@media (min-width: 1024px) {
  .menu__group summary { font-size: 16px; padding: 13px 0; }
  .menu__list .menu__sub a { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .menu__group summary::after { transition: none; } }


/* ==========================================================================
   Мени: мазно, заоблено поле за пребарување + без „светла лента“ на дното (Android)
   ========================================================================== */

/* Менито ја покрива целата видлива површина, и кога лентата на прелистувачот се менува */
.menu { height: 100%; height: 100dvh; }

/* Додека менито е отворено, позадината на страницата е во бојата на лентата „Пријави вест“.
   Chrome на Android со системската лента на дното ја презема бојата на позадината на страницата,
   па без ова под црвената лента се гледа тенка светла линија. */
html:has(body.menu-open), body.menu-open { background: var(--accent); }

/* Поле за пребарување: меко, заоблено, со кружно копче */
.menu__search {
  margin: 6px var(--pad-mobile) 16px; padding: 5px 5px 5px 18px; align-items: center;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.menu__search input { padding: 11px 0; font: 500 16px/1.2 var(--font-ui); color: #fff; caret-color: var(--accent); }
.menu__search input::placeholder { color: rgba(255, 255, 255, .5); }
.menu__search button {
  flex: none; width: 42px; height: 42px; padding: 0; background: var(--accent); color: #fff; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; transition: background-color .18s ease;
}
.menu__search button:hover { background: var(--accent-dark); }
.menu__search:focus-within {
  outline: 0; background: rgba(255, 255, 255, .13); border-color: rgba(236, 48, 19, .85);
  box-shadow: 0 0 0 3px rgba(236, 48, 19, .22);
}
@media (prefers-reduced-motion: reduce) { .menu__search, .menu__search button { transition: none; } }


/* ==========================================================================
   Лого: SVG знак (ливчиња) + „Спектра“ десно од него — без текст под знакот
   ========================================================================== */
.lockup { --mh: 34px; display: inline-flex; align-items: center; gap: calc(var(--mh) * .3); color: var(--ink); line-height: 1; }
.lockup__mark { height: var(--mh); width: auto; aspect-ratio: 1121 / 653; flex: none; display: block; }
.lockup__word { font: 900 calc(var(--mh) * .56)/1 var(--font-ui); letter-spacing: .075em; text-transform: uppercase; white-space: nowrap; }

.lockup--masthead { --mh: 46px; }
.lockup--nav { --mh: 28px; }
.lockup--menu { --mh: 32px; color: #fff; }
.lockup--footer { --mh: 44px; }

/* навигација: знакот и зборот се дел од линкот „почетна“ */
.brand { gap: 0; }
.brand .lockup:hover { color: var(--ink); }
.brand__word { display: none; }

/* мени: без бела подлога зад логото (знакот е светол на тамна подлога) */
.menu__logo--lockup { background: none; padding: 4px 0; }
.menu__logo--lockup:hover { color: #fff; }

/* подножје */
.footer__logo { display: inline-flex; }
.footer__logo:hover .lockup { color: var(--ink); }

@media (min-width: 1024px) {
  .lockup--nav { --mh: 30px; }
  .lockup--footer { --mh: 52px; }
}


/* Горна лента: икони кај датумот (календар) и временската прогноза (според времето) */
.util__l { display: flex; align-items: center; gap: 6px 20px; min-width: 0; }
.util__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.util__item svg { flex: none; color: var(--ink-45); }
.util__wx svg { color: var(--ink-70); }
.util__date svg { position: relative; top: -.5px; }

/* d-only / m-only мора да победат над display од .util__item */
.util__item.d-only { display: none; }
.util__item.m-only { display: inline-flex; }
@media (min-width: 1024px) {
  .util__item.d-only { display: inline-flex; }
  .util__item.m-only { display: none; }
  .util__item svg { width: 15px; height: 15px; }
  .util__wx svg { width: 17px; height: 17px; }
}


/* ==========================================================================
   Краток текст (со „…“ на крајот) кај вестите во категориските секции на почетната
   ========================================================================== */
.card__ex, .row__ex, .poster__ex, .thumbcap__ex {
  font: 400 13.5px/1.45 var(--font-body); color: var(--ink-65); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Локално: на мобилен ред со сличица десно (2 линии), на таблет/десктоп картичка (3 линии) */
.grid3 .card__ex { margin-top: 6px; }
@media (min-width: 768px) {
  .card__ex { font-size: 14.5px; margin-top: 8px; -webkit-line-clamp: 3; line-clamp: 3; }
}

/* Листа (Македонија / Балкан / Свет): првата вест е поголема, останатите се компактни */
.row--list .row__ex { margin-top: 5px; }
.row--list:first-child .row__ex { font-size: 14.5px; -webkit-line-clamp: 3; line-clamp: 3; }
@media (min-width: 1024px) {
  .row--list:first-child .row__ex { font-size: 13.5px; -webkit-line-clamp: 2; line-clamp: 2; }
}

/* Постер (Спорт / Магазин): слика → датум → наслов → текст */
.poster__ex { margin-top: 6px; font-size: 14px; }
.poster__item--lg .poster__ex { -webkit-line-clamp: 3; line-clamp: 3; font-size: 14.5px; }
.poster__item--sm .poster__ex { order: 3; }
@media (min-width: 768px) {
  .poster__mosaic { height: 410px; }          /* повеќе простор за текстот под сликите */
  .poster__item--sm .poster__ex { order: 0; font-size: 13.5px; }
}

/* Мали сличици со наслов */
.thumbcap__ex { font-size: 12.5px; margin-top: 5px; -webkit-line-clamp: 3; line-clamp: 3; }


/* Placeholder за реклама во темна сцена (ТВ во живо): провиден, не светла кутија */
.ad-slot .ad--on-dark.ad--placeholder { background: transparent; border-color: rgba(255, 255, 255, .28); }
.ad--on-dark.ad--placeholder .ad__inner { color: rgba(255, 255, 255, .5); }

/* ТВ во живо: простор меѓу плеерот и копчињата за споделување */
.live-share { margin-top: 20px; padding-bottom: 8px; }

/* ==========================================================================
   Лајв-блог: лента на насловната (наместо „Актуелно“), закачени/важни/исправки, линкови, вметнувања
   ========================================================================== */
.lbbar { display: flex; align-items: center; gap: 12px; background: var(--bg-ink); color: #fff; min-height: 38px; padding: 0 0 0 0; overflow: hidden; text-decoration: none; }
.lbbar:hover { color: #fff; background: #2b2827; }
.lbbar__tag { flex: none; display: flex; align-items: center; gap: 7px; align-self: stretch; padding: 0 12px; background: var(--accent); font: 900 11px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.lbbar__tag i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lbbar__tag i { animation: none; } }
.lbbar__t { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: baseline; gap: 10px; padding-block: 8px; font: 500 13px/1.25 var(--font-ui); }
.lbbar__t strong { flex: none; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.lbbar__last { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .72); }
.lbbar__more { flex: none; font: 700 11px/1 var(--font-ui); color: rgba(255, 255, 255, .7); }
.lbbar__go { flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 14px; background: rgba(255, 255, 255, .1); font: 800 11px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.lbbar:hover .lbbar__go { background: var(--accent); }
@media (max-width: 640px) {
  .lbbar__t { flex-direction: column; align-items: stretch; gap: 2px; padding-block: 6px; }
  .lbbar__t strong { max-width: 100%; }
  .lbbar__more { display: none; }
}

.lb-share { margin-top: 14px; }
.lb-bell { margin-left: auto; padding: 7px 12px; border: 1px solid var(--ink); background: var(--surface); color: var(--ink); font: 700 12px/1 var(--font-ui); cursor: pointer; }
.lb-bell:hover, .lb-bell.is-on { background: var(--bg-ink); color: #fff; }
.lb-pinned { margin-bottom: 22px; border: 2px solid var(--accent); padding: 4px 18px 0; background: var(--surface); }
.lb-pinned[hidden] { display: none; }
.lb-pinned .lb-entry { border-top: 0; padding-top: 16px; padding-bottom: 8px; }
.lb-pinned .lb-entry + .lb-entry { border-top: 1px solid var(--rule); }
.lb-pinned .lb-entry::before { display: none; }
.lb-feed .lb-day { margin: 14px 0 4px -32px; }
.lb-feed .lb-day:first-child { margin-top: 0; }

.lb-badge--pin { background: var(--bg-ink); }
.lb-badge--imp { background: #b8250c; }
.lb-badge--cor { background: #8a5a00; }
.lb-entry--important { background: linear-gradient(90deg, rgba(236, 48, 19, .07), transparent 60%); }
.lb-entry--important .lb-entry__t { color: var(--accent-fg-hover); }
.lb-entry--correction { background: rgba(214, 153, 0, .09); }
.lb-edited { font: 600 11px/1 var(--font-ui); color: var(--ink-50); }
.lb-byline { margin: -4px 0 8px; font: 600 12px/1.3 var(--font-ui); color: var(--ink-50); }

.lb-link { display: block; margin: 12px 0 14px; padding: 12px 14px; border: 1px solid var(--rule); border-left: 4px solid var(--accent); background: var(--surface); text-decoration: none; }
.lb-link:hover { background: var(--page-bg); }
.lb-link__k { display: block; margin-bottom: 5px; font: 900 10px/1 var(--font-ui); letter-spacing: .12em; color: var(--accent-fg); text-transform: uppercase; }
.lb-link__t { font: 800 16px/1.25 var(--font-ui); color: var(--ink); }
.lb-embed { margin: 12px 0 14px; padding: 12px 14px; border: 1px dashed var(--rule); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.lb-embed__btn { padding: 9px 14px; border: 0; background: var(--bg-ink); color: #fff; font: 800 12px/1 var(--font-ui); cursor: pointer; }
.lb-embed__btn:hover { background: var(--accent); }
.lb-embed__body { flex-basis: 100%; max-width: 100%; overflow-x: auto; }
.lb-extlink { margin: 8px 0 12px; font: 600 14px/1.4 var(--font-ui); }
.lb-entry__act { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.lb-act { padding: 6px 10px; border: 1px solid var(--rule); background: none; font: 700 11.5px/1 var(--font-ui); color: var(--ink-70); cursor: pointer; }
.lb-act:hover { border-color: var(--ink); color: var(--ink); }
.lb-act[hidden] { display: none; }
.lb-more-wrap { margin: 22px 0; }
.lb-more { width: 100%; padding: 14px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 800 14px/1 var(--font-ui); cursor: pointer; }
.lb-more:hover { background: var(--bg-ink); color: #fff; }
.lb-more:disabled { opacity: .6; cursor: progress; }
.lb-entry--updated { animation: flash 2.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .lb-entry--updated { animation: none; } }


/* ==========================================================================
   Мек премин (nav.js): лента за вчитување, нежно појавување, фокус без рамка
   ========================================================================== */
#spk-bar { position: fixed; z-index: 100000; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; pointer-events: none; }
#spk-bar.is-on { opacity: 1; }
.admin-bar #spk-bar { top: 32px; }
@media (max-width: 782px) { .admin-bar #spk-bar { top: 46px; } }
@media (max-width: 600px) { .admin-bar #spk-bar { top: 0; } }
#spk-view.spk-enter { animation: spk-in .26s ease-out; }
@keyframes spk-in { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #spk-view.spk-enter { animation: none; } #spk-bar { transition: none !important; } }
#main:focus { outline: none; }


/* ==========================================================================
   Темна тема — html[data-theme="dark"]. Светлата е стандардна (без атрибут/„light“).
   Сè е преку токени: површини, мастило, линии; цврстите „темни“ панели (--bg-ink) остануваат темни со бел текст.
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #121110;
  --surface: #1b1918;
  --ink: #f0eeec;
  --ink-rgb: 240, 238, 236;
  --bg-ink: #2a2827;
  --accent-fg: #ff6b4f;
  --accent-fg-hover: #ff8f78;
  --ad-bg: #222020;
  --video-bg: #3a3736;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
}
html[data-theme="light"] { color-scheme: light; }

/* категориски бои како ТЕКСТ: посветли варијанти на темна површина (плочките остануваат со цврстата боја) */
html[data-theme="dark"] [class*="cat--"] { --cat-text: var(--cat-dark, var(--cat-text)); }
html[data-theme="dark"] .cat--default { --cat-text: var(--ink); }

html[data-theme="dark"] ::selection { background: var(--cat-struga); color: #201e1d; }

/* линии што во светла тема се „црни“ (2px) не смеат да светат — потивки */
html[data-theme="dark"] .navbar { border-bottom-color: rgba(var(--ink-rgb), .22); }
html[data-theme="dark"] .footer { border-top-color: rgba(var(--ink-rgb), .22); }
html[data-theme="dark"] .navbar.is-stuck { border-bottom-color: rgba(var(--ink-rgb), .22); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }

/* фотографии: малку потемни за да не „бијат“ на темна површина */
html[data-theme="dark"] .media img,
html[data-theme="dark"] .poster__pic img,
html[data-theme="dark"] .entry-content img { filter: brightness(.9); }

/* ---- копче за префрлување на темата ---- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-chip); background: transparent;
  color: var(--ink); cursor: pointer; transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.theme-toggle:hover { color: var(--accent-fg); border-color: var(--accent-fg); }
.theme-toggle { order: 3; }
.theme-toggle span { display: flex; }
.theme-toggle .i-sun { display: none; }
html[data-theme="dark"] .theme-toggle .i-sun { display: flex; }
html[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.theme-toggle svg { display: block; }
@media (min-width: 1024px) { .theme-toggle { order: 4; width: 34px; height: 34px; margin-left: 6px; } }
@media (max-width: 1023px) { .theme-toggle { width: 32px; height: 32px; } }
/* кратка мазна промена на боите само кога читателот го притиска копчето */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .25s ease, color .25s ease, border-color .25s ease !important; }
/* без JavaScript нема смисла од копчето */
html:not(.js) .theme-toggle { display: none; }


/* ==========================================================================
   Галерија (лајтбокс) за слики во текст на вест
   ========================================================================== */
.is-zoomable { cursor: zoom-in; }
html.lbx-on { overflow: hidden; }
.lbx { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; background: rgba(10, 9, 9, .94); }
.lbx[hidden] { display: none; }
.lbx__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 64px 64px; box-sizing: border-box; width: 100%; height: 100%; }
.lbx__fig img { max-width: 100%; max-height: calc(100% - 44px); width: auto; height: auto; object-fit: contain; transition: opacity .2s ease; flex: 0 1 auto; min-height: 0; }
.lbx__fig img.is-loading { opacity: .25; }
.lbx__fig figcaption { margin-top: 12px; max-width: 900px; color: rgba(255, 255, 255, .86); font: 500 14px/1.45 var(--font-ui); text-align: center; }
.lbx__x, .lbx__nav { position: absolute; border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .15s ease; }
.lbx__x:hover, .lbx__nav:hover { background: rgba(255, 255, 255, .25); }
.lbx__x { top: 12px; right: 12px; width: 44px; height: 44px; font-size: 30px; line-height: 1; }
.lbx__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 72px; font-size: 44px; line-height: 1; }
.lbx__nav--prev { left: 8px; }
.lbx__nav--next { right: 8px; }
.lbx__nav[hidden], .lbx__count[hidden], .lbx__fig figcaption[hidden] { display: none; }
.lbx__count { position: absolute; left: 16px; top: 22px; color: rgba(255, 255, 255, .8); font: 700 13px/1 var(--font-ui); letter-spacing: .06em; }
.lbx button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 700px) {
  .lbx__fig { padding: 56px 8px 56px; }
  .lbx__nav { width: 40px; height: 56px; font-size: 36px; background: rgba(0, 0, 0, .35); }
}
@media (prefers-reduced-motion: reduce) { .lbx__fig img { transition: none; } }

/* ==========================================================================
   Десктоп: РИТАМ НА СЕКЦИИ — full-width ленти со различна позадина (без линии и без сива подлога):
   hero (темно) → Локално (бело) → Видео (темно) → рубрики (топла тонска) → Спорт (бледо во боја на рубриката)
   → Магазин (бело) → Сите вести (топла тонска)
   ========================================================================== */
@media (min-width: 1024px) {
  .bands { gap: 0; background: var(--surface); box-shadow: none; }
  .bands > .band, .bands > .band--cols { box-shadow: none; border-radius: 0; }
  .bands > .band--poster, .bands > .band--cols, .bands > .grid3, .bands > .blk, .bands > .tail { padding-block: 28px 36px; }
  /* помазни слики и картички */
  .bands .grid3 .media, .bands .poster .media, .bands .cols3 .media, .bands .arch-list .media { border-radius: 10px; overflow: hidden; }
  .bands .nl .media img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .bands .nl:hover .media img { transform: scale(1.04); }
}

/* ==========================================================================
   Десктоп: HERO на цела ширина — тамна лента од раб до раб, мозаик од 5 топ вести
   (1 голема + 4 мали) и „Најново“; внатрешноста е центрирана (макс. 1680px)
   ========================================================================== */
.hero-card--x { display: none; }
@media (min-width: 1024px) {
  .band--hero { padding-block: 0 20px; overflow-x: clip; }
  .band--hero .wrap { max-width: none; padding-inline: 0; }
  .hero {
    --rail-pr: 40px;
    grid-template-columns: minmax(0, 1fr) calc(360px + var(--rail-pr)); gap: 0; background: var(--bg-ink); color: #fff;
  }
  .hero__stories { grid-template-columns: 1.75fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; height: auto; min-height: 640px; }
  .hero-card--x { display: block; }
  .hero-card--sm .hero-card__t { font-size: 18px; }
  .hero-card--sm .hero-card__body { padding: 16px 18px 18px; }
  .hero-card--lg .hero-card__body { padding: 28px 30px 30px; }
  .hero-card--lg .hero-card__t { font-size: 34px; }
  .hero__rail {
    margin: 0; border: 0; padding: 30px var(--rail-pr) 26px 34px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  }
  .hero__rail .rail-head { border-bottom-color: rgba(255, 255, 255, .28); padding-bottom: 16px; }
  .hero__rail .rail-h { color: #fff; font-size: 26px; letter-spacing: .06em; }
  .hero__rail .rail-row { border-bottom-color: rgba(255, 255, 255, .12); }
  .hero__rail .rail-row__m { color: rgba(255, 255, 255, .55); }
  .hero__rail .rail-row__t a { color: #fff; }
  .hero__rail .rail-row:hover .rail-row__t a { color: #ff8a73; }
  .hero__rail .rail-foot { color: #ff8a73; font-size: 13px; }
  .hero__rail { display: flex; flex-direction: column; }
  .hero__rail .rail-row { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .hero__rail .rail-row:last-of-type { border-bottom: 0; }
  .band--hero .hero-ad { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-desktop); }
}

/* ==========================================================================
   Насловна (десктоп): само hero е од раб до раб; сите секции се во иста потесна рамка.
   „Сите вести“ = тамна временска линија: лево лепливо претставување со рубрики, десно хронолошки тек со точки во боја на рубриката.
   ========================================================================== */
.tail__side { display: none; }
@media (min-width: 1024px) {
  .bands > .tail { padding-block: 44px 52px; }
  .tail .blk-head { display: none; }
  .tail__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 72px; align-items: start; }
  .tail__side { display: block; position: sticky; top: 96px; }
  .tail__t { font: 900 64px/.92 var(--font-ui); letter-spacing: -.035em; text-transform: uppercase; margin: 0 0 22px; }
  .tail__live { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.45 var(--font-body); color: rgba(var(--ink-rgb), .65); margin: 0 0 26px; }
  .tail__dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 0 0 rgba(255, 90, 60, .6); animation: tail-pulse 1.8s ease-out infinite; }
  @keyframes tail-pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 90, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 60, 0); } }
  .tail__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .tail__chip { font: 800 12px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; padding: 9px 13px; border-radius: 999px; color: var(--ink); background: rgba(var(--ink-rgb), .08); border: 1px solid rgba(var(--ink-rgb), .14); transition: background-color .2s, border-color .2s, transform .2s; }
  .tail__chip:hover { background: var(--cat, #fff); border-color: var(--cat, #fff); color: #fff; transform: translateY(-2px); }
  /* временска линија */
  .tail .arch-list { position: relative; padding: 0 0 0 36px; }
  .tail .arch-list::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, rgba(var(--ink-rgb), .28), rgba(var(--ink-rgb), .06)); border-radius: 2px; }
  .tail .arch-item { position: relative; gap: 22px; padding: 22px 0 24px; border-bottom: 1px solid rgba(var(--ink-rgb), .09); align-items: flex-start; }
  .tail .arch-item::before { content: ""; position: absolute; left: -36px; top: 30px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px var(--tail-bg, var(--surface)), 0 0 0 7px rgba(255, 90, 60, .55); }
  .tail .arch-item:first-child::before { background: #ff5a3c; }
  .tail .arch-item .media { order: 2; width: 220px; height: 140px; border-radius: 12px; overflow: hidden; }
  .tail .arch-item__b { order: 1; flex: 1; min-width: 0; }
  .tail .arch-item .time { color: rgba(var(--ink-rgb), .55); }
  .tail .arch-item__t { font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
  .tail .arch-item__t a { color: var(--ink); }
  .tail .arch-item:hover .arch-item__t a { color: var(--cat-dark, #ffb199); }
  .tail .arch-item__lead { color: rgba(var(--ink-rgb), .62); }
  .tail .pager a, .tail .pagination a { color: var(--ink); }
}

/* ==========================================================================
   ТОНОВИ НА СЕКЦИИ (светла / топла сива / темна) — се бираат од Админ → Насловна → Блокови
   ========================================================================== */
:root { --tone: color-mix(in srgb, var(--surface) 95%, var(--ink)); }
.tone--light { background: var(--surface); }
.tone--tint { background: var(--tone); }
.tone--dark {
  /* темна површина: токените се препишуваат локално (изведените вредности не се пресметуваат одново во потомците) */
  background: var(--bg-ink); color: #f0eeec;
  --ink: #f0eeec; --ink-rgb: 240, 238, 236;
  --ink-70: rgba(240, 238, 236, .72); --ink-65: rgba(240, 238, 236, .66); --ink-50: rgba(240, 238, 236, .62); --ink-45: rgba(240, 238, 236, .58); --ink-25: rgba(240, 238, 236, .25);
  --rule: rgba(240, 238, 236, .14); --rule-strong: rgba(240, 238, 236, .5); --border-chip: rgba(240, 238, 236, .24);
  --surface: #2a2827; --accent-fg: #ff8a73; --accent-fg-hover: #ffb199;
}
.tone--dark [class*="cat--"], .tone--dark.cat--sport, .tone--dark[class*="cat--"] { --cat-text: var(--cat-dark, #fff); }
.tone--dark .cat-tile--white { background: #f0eeec; color: #201e1d; }
.tone--dark .media img { filter: brightness(.94); }
.tone--dark .see-all { color: rgba(255, 255, 255, .7); }

/* ==========================================================================
   НОВИ РАСПОРЕДИ НА СЕКЦИИ: во центар · bento · дуо · лента · топ 5 · наслови
   ========================================================================== */
/* заеднички картички */
.ovl { position: relative; overflow: hidden; border-radius: 12px; background: var(--video-bg); isolation: isolate; }
.ovl .media { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.ovl .media img { width: 100%; height: 100%; object-fit: cover; }
.ovl__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 16px 18px 18px; background: var(--scrim); color: #fff; }
.ovl .cat-kicker { color: #fff; margin-bottom: 7px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.ovl .cat-kicker::before { background: var(--cat-dark, #fff); }
.ovl__t { font: 800 18px/1.2 var(--font-ui); letter-spacing: -.005em; color: #fff; margin: 0; }
.ovl__t a { color: #fff; }
.ovl__t a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.ovl__ex { display: none; font: 400 15px/1.5 var(--font-body); color: rgba(255, 255, 255, .78); margin-top: 10px; }
.ovl__time { display: block; margin-top: 8px; font: 500 11.5px/1 var(--font-ui); color: rgba(255, 255, 255, .7); }
.ovl--xl { aspect-ratio: 16 / 10; } .ovl--xl .ovl__t { font-size: 26px; line-height: 1.12; letter-spacing: -.02em; }
.ovl--md { aspect-ratio: 4 / 3; } .ovl--tall { aspect-ratio: 3 / 4; }
.ovl:hover .media img { transform: scale(1.05); }
.trow { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.trow .media { flex: none; width: 96px; height: 72px; aspect-ratio: auto; border-radius: 8px; overflow: hidden; }
.trow__b { flex: 1; min-width: 0; }
.trow__m { display: flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--font-ui); letter-spacing: .06em; color: var(--ink-50); margin-bottom: 6px; }
.trow__m .time, .trow__time { font: 500 11.5px/1 var(--font-ui); letter-spacing: 0; color: inherit; text-transform: none; display: inline; }
.trow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat-dark, var(--cat, currentColor)); flex: none; }
.trow__t { font: 700 16.5px/1.28 var(--font-ui); }
.trow__t a::after { content: ""; position: absolute; inset: 0; }
.trow:hover .trow__t a { color: var(--accent-fg); }
.trow__n { flex: none; width: 46px; font: 900 44px/.9 var(--font-ui); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--ink-45); }
.blk__grid, .blk__duo, .blk__strip, .blk__bento, .blk__heads { display: grid; gap: 14px; }
.blk__txt { display: grid; margin-top: 8px; }
.blk__strip { grid-template-columns: 1fr 1fr; }
.blk__bento { grid-template-columns: 1fr 1fr; }
.blk__bento .ovl--xl { grid-column: 1 / -1; }

@media (min-width: 1024px) {
  .blk__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 36px; align-items: stretch; }
  .blk__lead .ovl--xl { height: 100%; min-height: 420px; aspect-ratio: auto; }
  .ovl--xl .ovl__body { padding: 28px 30px 30px; } .ovl--xl .ovl__t { font-size: 34px; } .ovl--xl .ovl__ex { display: block; max-width: 56ch; }
  .blk__side { display: flex; flex-direction: column; justify-content: space-between; }
  .blk__side .trow { padding: 16px 0; flex: 1; align-items: center; } .blk__side .trow:first-child { padding-top: 0; } .blk__side .trow:last-child { border-bottom: 0; padding-bottom: 0; }
  .blk__side .trow .media { width: 132px; height: 92px; border-radius: 10px; } .blk__side .trow__t { font-size: 18px; }
  .blk--numbered .trow__n { width: 64px; font-size: 62px; }
  .blk__duo { grid-template-columns: 1fr 1fr; gap: 36px; }
  .blk__duo .card .media { aspect-ratio: 16 / 9; }
  .blk__txt { grid-template-columns: repeat(3, 1fr); gap: 0 36px; margin-top: 28px; border-top: 2px solid var(--rule-strong); padding-top: 4px; }
  .blk__txt .trow { border-bottom: 0; padding-top: 18px; }
  .blk__strip { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .blk__strip .ovl--tall .ovl__t { font-size: 20px; }
  .blk__strip .ovl--tall { transition: transform .35s cubic-bezier(.2, .7, .2, 1); } .blk__strip .ovl--tall:hover { transform: translateY(-6px); }
  .blk__bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 230px); gap: 16px; }
  .blk__bento .ovl { aspect-ratio: auto; } .blk__bento .ovl--xl { grid-column: 1 / 3; grid-row: 1 / 3; }
  .blk__bento .ovl--md .ovl__t { font-size: 17px; }
  .blk__bento .ovl--xl .ovl__t { font-size: 27px; }
  .blk__bento .ovl--xl .ovl__ex { display: none; }
  .blk__heads { grid-template-columns: 1fr 1fr; gap: 0 56px; }
  .blk__heads .trow__t { font-size: 20px; }
}
@media (max-width: 1023px) {
  .blk__side .trow:last-child { border-bottom: 0; }
  .blk__txt { grid-template-columns: 1fr; }
  .blk__lead .ovl--xl { aspect-ratio: 16 / 10; }
}

/* „Сите вести“ (темна лента): пагинација во истиот стил — стаклени кружни копчиња, активната страница светла */
@media (min-width: 1024px) {
  .tail .pagination { padding: 30px 0 0 36px; }
  .tail .pagination a.page-numbers, .tail .pagination span.page-numbers {
    background: rgba(var(--ink-rgb), .07); color: var(--ink); border: 1px solid rgba(var(--ink-rgb), .16);
    min-width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    font: 800 14px/1 var(--font-ui); transition: background-color .2s, border-color .2s, color .2s, transform .2s;
  }
  .tail .pagination a.page-numbers:hover { background: var(--ink); color: var(--tail-bg, var(--surface)); border-color: var(--ink); transform: translateY(-2px); }
  .tail .pagination span.page-numbers.current { background: var(--ink); color: var(--tail-bg, var(--surface)); border-color: var(--ink); }
  .tail .pagination span.page-numbers.dots { background: none; border-color: transparent; color: rgba(var(--ink-rgb), .5); min-width: 24px; }
  .tail .pagination a.prev, .tail .pagination a.next { background: rgba(var(--ink-rgb), .07); }
  .tail .pagination svg { stroke: currentColor; }
  .tail .pagination__info { color: rgba(var(--ink-rgb), .55); }
  .tail .more-btn { background: rgba(var(--ink-rgb), .08); color: var(--ink); border: 1px solid rgba(var(--ink-rgb), .2); }
}

/* „Сите вести“: пагинацијата е на средина од колоната со вести */
@media (min-width: 1024px) {
  .tail .pagination { padding-left: 36px; text-align: center; } /* центар на колоната со вести (по линијата) */
  .tail .pagination ul.page-numbers { justify-content: center; }
  .tail .pagination__info { text-align: center; }
}

/* „Најново“: 6. вест само на десктоп; „Сите вести“ скролува под лепливото мени */
@media (max-width: 1023px) { .hero__rail .rail-row:nth-of-type(n+6) { display: none; } }
.tail { scroll-margin-top: 64px; }

/* Насловна (десктоп): последната секција и подножјето се споени — без празнина што ја покажува позадината */
@media (min-width: 1024px) {
  body.home .footer { margin-top: 0; border-top: 0; box-shadow: none; }
}

/* Подгрупи (Локално: Струга | Охрид): две колони одделени со линија, секоја со наслов во боја на рубриката */
.blk__subs { display: grid; gap: 34px; }
.sub__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 3px solid var(--cat, var(--ink)); }
.sub__t { font: 900 28px/1 var(--font-ui); letter-spacing: -.02em; text-transform: uppercase; color: var(--cat-text, var(--ink)); }
.sub__t a { color: inherit; }
.sub__all { font: 800 12px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-70); }
.sub__all:hover { color: var(--accent-fg); }
.sub__rows { margin-top: 6px; }
.sub__rows .trow:last-child { border-bottom: 0; }
.ovl--lg { aspect-ratio: 16 / 10; } .ovl--lg .ovl__t { font-size: 22px; line-height: 1.15; }
@media (min-width: 1024px) {
  .blk__subs { grid-template-columns: 1fr 1fr; gap: 0; }
  .blk__subs .sub { padding-right: 36px; } .blk__subs .sub + .sub { padding-right: 0; padding-left: 36px; border-left: 1px solid var(--rule); }
  .ovl--lg .ovl__t { font-size: 26px; } .ovl--lg .ovl__ex { display: block; font-size: 14.5px; }
  .sub__rows .trow .media { width: 120px; height: 84px; }
  /* Локално има исто растојание како останатите секции (hero-то нема дополнителен простор под себе) */
  .band--hero { padding-bottom: 0; }
}
.trow__ex { margin: 6px 0 0; font: 400 14px/1.45 var(--font-body); color: var(--ink-65); }
.blk--subcats { padding-top: 8px; }
@media (min-width: 1024px) { .bands > .blk--subcats { padding-block: 34px 36px; } }

/* Лепливо мени (десктоп, при скролање): само лого, навигација и „Барај“ — без „Во живо“, прекинувач на тема и мени (премногу елементи се мешаа) */
@media (min-width: 1024px) {
  .navbar.is-stuck .chip-live, .navbar.is-stuck .theme-toggle, .navbar.is-stuck .burger { display: none; }
  .navbar.is-stuck .primary-nav { flex: 1; min-width: 0; }
  .navbar.is-stuck .primary-nav ul { justify-content: flex-start; }
}

/* Блокови на цела ширина (избор од Админ → Блокови → Ширина; само десктоп): содржината се протега до рабовите со тенки маргини */
@media (min-width: 1024px) {
  .bands > .band.is-full .wrap { max-width: 2200px; padding-inline: clamp(24px, 2.4vw, 56px); }
}

/* „Во центар“ со табови по подгрупа: големи табови во заглавието, панелите се менуваат без превчитување */
.blk-head--tabbed { align-items: flex-end; flex-wrap: wrap; gap: 14px 28px; }
.subtabs--lg { gap: 6px; font-size: 13px; }
.subtabs--lg a { padding: 9px 16px; border: 1px solid var(--border-chip); border-radius: 999px; border-bottom-width: 1px; color: var(--ink-70); letter-spacing: .06em; transition: background-color .2s, color .2s, border-color .2s; }
.subtabs--lg a:hover { border-color: var(--cat, var(--ink)); color: var(--ink); }
.subtabs--lg a.is-active { background: var(--cat-tile, var(--cat, var(--ink))); border-color: var(--cat-tile, var(--cat, var(--ink))); color: #fff; }
.blk__panel[hidden] { display: none; }
.blk__panel:not([hidden]) { animation: panel-in .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .blk__panel:not([hidden]) { animation: none; } }

/* Видео лента: ист изглед како останатите секции — плочка во боја (не линија), заоблени слики, исто растојание */
.band--ink .blk-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
.band--ink .cat-tile { background: var(--accent); color: #fff; }
.vgrid .vcard .media { border-radius: 12px; overflow: hidden; }
.vcard .media img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.vcard:hover .media img { transform: scale(1.04); }
@media (min-width: 1024px) {
  .band--ink .blk-head { margin-bottom: 14px; padding-bottom: 0; }
  .bands > .band--ink { padding-block: 28px 36px; }
  .vgrid { gap: 18px; }
  .vcard__t { margin-top: 12px; }
}

/* ХОВЕР во боја на рубриката: текстуални картички на светла површина → потемна варијанта; на темна (hero „Најново“, темна секција, темна тема) → посветла варијанта */
.vcard.nl:hover, .vcard.nl:hover a { color: var(--cat-dark, #fff); }          /* видео: секогаш на темно */
.vcard.cat--video, .hero__rail .rail-row.cat--default { --cat-dark: #ff8a73; }       /* без своја боја → акцент */
.hero__rail .rail-row:hover .rail-row__t a { color: var(--cat-dark, #ff8a73); }
.trow:hover .trow__t a { color: var(--cat-text, var(--accent-fg)); }
.tone--dark .nl:hover, .tone--dark .nl:hover a, .tone--dark .trow:hover .trow__t a { color: var(--cat-dark, #fff); }
html[data-theme="dark"] .nl:hover, html[data-theme="dark"] .nl:hover a, html[data-theme="dark"] .trow:hover .trow__t a { color: var(--cat-dark, var(--accent-fg)); }
.ovl.nl:hover .ovl__t a, html[data-theme="dark"] .ovl.nl:hover, html[data-theme="dark"] .ovl.nl:hover a, .hero-card:hover a, .poster__item:hover .poster-headline { color: #fff; } /* наслов врз слика останува бел */
.poster__item:hover .poster-headline { color: #fff; }
.more-videos .vcard.nl:hover, .more-videos .vcard.nl:hover a, .missed .vcard.nl:hover, .missed .vcard.nl:hover a { color: var(--cat-text, var(--accent-fg)); }

/* ==========================================================================
   Мобилен/таблет: ист ритам како на десктоп — нема празнини меѓу секциите; секциите ја користат позадината
   од Админ → Блокови (светла / топла сива / темна). Hero-то на мобилен останува непроменет.
   ========================================================================== */
@media (max-width: 1023px) {
  .bands { gap: 0; background: var(--surface); }
  .bands > .band:not(.band--hero), .bands > .band--cols { box-shadow: none; border-radius: 0; }
  .bands > .band--poster, .bands > .band--cols, .bands > .grid3, .bands > .blk, .bands > .band--ink, .bands > .tail { padding-block: 24px 28px; }
  .bands > .band--hero { box-shadow: none; }
  .bands > .band--cols { background: var(--tone); }
  .band--cols .cols3 { gap: 26px; }
  .band--cols .col { background: none; padding: 0; box-shadow: none; }
  .band--cols .wrap { padding-inline: var(--pad-mobile); }
  .band--ink .blk-head { margin-bottom: 12px; }
  body.home .footer { margin-top: 0; border-top: 0; box-shadow: none; }
}
@media (max-width: 1023px) {
  .ovl--xl .ovl__t { font-size: 22px; line-height: 1.16; }
  .blk__bento .ovl--xl, .blk__lead .ovl--xl { aspect-ratio: 4 / 3; }
  .ovl--md .ovl__t { font-size: 15px; }
}
@media (max-width: 1023px) {
  .ovl--md { aspect-ratio: 1 / 1.05; } .ovl--md .ovl__t { font-size: 14px; line-height: 1.2; }
  .ovl--md .ovl__body { padding: 12px 12px 14px; } .ovl--md .cat-kicker { display: none; }
}

/* Видливост на блокови по уред (Админ → Блокови → „Прикажи на“) и на „Сите вести“ */
@media (max-width: 1023px) { .only-d { display: none !important; } }
@media (min-width: 1024px) { .only-m, .tail--hide-d { display: none !important; } .hero__rail--no-tail .rail-foot { display: none; } }
/* кога секцијата е скриена, не се прикажува ни нејзиниот простор */
@media (max-width: 1023px) {
  .hero__rail .rail-foot { display: inline; }
  /* мобилен: нема линија помеѓу hero и првата секција */
  .band--hero { padding-bottom: 0 !important; box-shadow: none; }
  .hero-card--sm:nth-child(3) { border-bottom: 0; }
  .hero, .hero__stories, .hero__main { border-bottom: 0; }
}

/* „Сите вести“: позадина по избор (Админ → Блокови → Последна секција); --tail-bg = боја на подлогата (за точки/активна страница) */
.tail.tone--light { --tail-bg: var(--surface); }
.tail.tone--tint { --tail-bg: var(--tone); }
.tail.tone--dark { --tail-bg: var(--bg-ink); }

/* „Сите вести“: пагинација во стил на секцијата и на мобилен/таблет (во боја на избраната позадина), центрирана */
@media (max-width: 1023px) {
  .tail .pagination { padding: 22px 0 0; text-align: center; }
  .tail .pagination ul.page-numbers { justify-content: center; }
  .tail .pagination a.page-numbers, .tail .pagination span.page-numbers {
    background: rgba(var(--ink-rgb), .07); color: var(--ink); border: 1px solid rgba(var(--ink-rgb), .16);
    min-width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font: 800 14px/1 var(--font-ui);
  }
  .tail .pagination a.page-numbers:hover { background: var(--ink); color: var(--tail-bg, var(--surface)); border-color: var(--ink); }
  .tail .pagination span.page-numbers.current { background: var(--ink); color: var(--tail-bg, var(--surface)); border-color: var(--ink); }
  .tail .pagination span.page-numbers.dots { background: none; border-color: transparent; color: rgba(var(--ink-rgb), .5); min-width: 24px; }
  .tail .pagination a.prev, .tail .pagination a.next { background: rgba(var(--ink-rgb), .07); }
  .tail .pagination svg { stroke: currentColor; }
  .tail .pagination__info { color: rgba(var(--ink-rgb), .55); text-align: center; }
  .tail .more-btn { background: rgba(var(--ink-rgb), .08); color: var(--ink); border: 1px solid rgba(var(--ink-rgb), .2); }
}

/* Сите слики во секциите се заоблени (мобилен, таблет и десктоп); hero остава без заоблување */
.bands > .band:not(.band--hero) .media, .bands .poster__pic, .bands .poster__item, .bands .thumbcap .media, .bands .card .media, .bands .row .media, .bands .arch-item .media, .bands .vcard .media, .bands .trow .media, .bands .ovl {
  border-radius: 12px; overflow: hidden;
}
.bands .thumbcap .media, .bands .row .media, .bands .arch-item .media, .bands .trow .media { border-radius: 10px; }
.bands .poster__pic { position: relative; }