/* =====================================================================
   HotInfo — Modern skin (moderný tech / clean)
   Single source of truth for the Design4 visual language.
   Loaded globally in templates/base/layout.html.twig; component overrides
   are scoped under .hi-modern (applied on <main>). Non-destructive: layers
   on top of per-page styles via higher specificity. CSS-only (SEO freeze OK).
   Created 2026-06-05. Replaces the per-page inline skin duplication.
   ===================================================================== */

/* ---- Global font (Design4 pages only — admin uses a different layout) -- */
body{
    font-family:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---- Design tokens -------------------------------------------------- */
.hi-modern{
    --hp-bg:#f4f6fa;
    --hp-card:#ffffff;
    --hp-border:#e6e9f0;
    --hp-border-strong:#d4dae5;
    --hp-ink:#0f172a;
    --hp-ink-2:#1f2a3d;
    --hp-muted:#64748b;
    --hp-faint:#94a3b8;
    --hp-accent:#1f6bff;
    --hp-accent-ink:#0b4fd6;
    --hp-accent-tint:#eaf1ff;
    --hp-live:#ef2f4b;
    --hp-radius:14px;
    --hp-radius-sm:10px;
    --hp-shadow:0 1px 2px rgba(15,23,42,.05), 0 2px 8px rgba(15,23,42,.045);
    --hp-shadow-lift:0 10px 30px rgba(15,23,42,.13);
    --hp-font:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
[data-theme="dark"] .hi-modern{
    --hp-bg:#0b1220;
    --hp-card:#121b2c;
    --hp-border:#22304a;
    --hp-border-strong:#2c3c5a;
    --hp-ink:#f1f5f9;
    --hp-ink-2:#d7e0ee;
    --hp-muted:#9aa9bf;
    --hp-faint:#6b7a92;
    --hp-accent:#5b8bff;
    --hp-accent-ink:#85a8ff;
    --hp-accent-tint:#16243f;
    --hp-shadow:0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
    --hp-shadow-lift:0 14px 34px rgba(0,0,0,.55);
}

/* ---- Canvas + typography ------------------------------------------- */
.hi-modern{
    font-family:var(--hp-font);
    background:var(--hp-bg);
    padding-top:.6rem;
    padding-bottom:2.2rem;
    color:var(--hp-ink-2);
    letter-spacing:-.005em;
}
/* ---- Large-screen content cap -------------------------------------- */
/* <main> stays full-bleed (paints the canvas); only the page content
   container is capped + centered so layout doesn't sprawl on >1600px
   monitors. Below 1600px max-width is inert (container is 100%). */
.hi-modern > .container-fluid{
    max-width:1600px;
    margin-inline:auto;
}
.hi-modern h1, .hi-modern h2, .hi-modern h3, .hi-modern .h1, .hi-modern .h2, .hi-modern .h3{
    letter-spacing:-.02em;
}

/* ===================================================================
   BASE PRIMITIVES — harmonise common Bootstrap elements across pages
   =================================================================== */
/* Links */
.hi-modern a{ text-decoration:none; }
.hi-modern .text-primary{ color:var(--hp-accent-ink) !important; }
.hi-modern .text-muted{ color:var(--hp-muted) !important; }

/* Generic cards */
.hi-modern .card{
    border:1px solid var(--hp-border);
    border-radius:var(--hp-radius);
    background:var(--hp-card);
    box-shadow:var(--hp-shadow);
}
.hi-modern .card.border-0{ border:1px solid var(--hp-border) !important; }
.hi-modern .card.shadow-sm{ box-shadow:var(--hp-shadow) !important; }
/* Blue card headers → clean white with ink text (used on most listing pages) */
.hi-modern .card-header.bg-primary{
    background:var(--hp-card) !important;
    color:var(--hp-ink) !important;
    border-bottom:1px solid var(--hp-border) !important;
}
.hi-modern .card-header.bg-primary .h6,
.hi-modern .card-header.bg-primary h1,
.hi-modern .card-header.bg-primary h2,
.hi-modern .card-header.bg-primary h3{ color:var(--hp-ink) !important; font-weight:800; letter-spacing:-.01em; }
.hi-modern .card-header.bg-primary .badge.bg-light{
    background:var(--hp-accent-tint) !important; color:var(--hp-accent-ink) !important; border-radius:6px;
}
.hi-modern .card-footer{ background:var(--hp-card); border-top:1px solid var(--hp-border); }

/* Buttons */
.hi-modern .btn-primary{
    background:var(--hp-accent); border-color:var(--hp-accent); border-radius:999px; font-weight:600;
}
.hi-modern .btn-primary:hover{ background:var(--hp-accent-ink); border-color:var(--hp-accent-ink); }
.hi-modern .btn-outline-primary{
    border-color:var(--hp-accent); color:var(--hp-accent-ink); border-radius:999px; font-weight:600;
}
.hi-modern .btn-outline-primary:hover{ background:var(--hp-accent); border-color:var(--hp-accent); color:#fff; }
.hi-modern .btn-outline-danger{ border-radius:999px; font-weight:600; }
.hi-modern .btn-danger{ background:var(--hp-live); border-color:var(--hp-live); border-radius:999px; font-weight:600; }

/* Badges */
.hi-modern .badge.bg-primary{ background:var(--hp-accent) !important; }
.hi-modern .badge.bg-danger{ background:var(--hp-live) !important; }
.hi-modern .badge.bg-secondary{ background:#eef1f6 !important; color:var(--hp-muted) !important; font-weight:600; }
[data-theme="dark"] .hi-modern .badge.bg-secondary{ background:#1c2840 !important; color:var(--hp-muted) !important; }

/* Pagination */
.hi-modern .page-link{ color:var(--hp-accent-ink); border-color:var(--hp-border); }
.hi-modern .page-item.active .page-link{ background:var(--hp-accent); border-color:var(--hp-accent); }

/* ===================================================================
   SHARED PARTIALS — sidebars, carousels, live feed (all Design4 pages)
   =================================================================== */
/* Kicker labels above carousels */
.hi-modern .editorial-picks-section > .d-flex .fw-bold,
.hi-modern .briefings-carousel-section > .d-flex .fw-bold,
.hi-modern .top-stories-carousel-section > .d-flex .fw-bold{
    font-size:.72rem !important; font-weight:800 !important;
    letter-spacing:.09em; text-transform:uppercase; color:var(--hp-muted) !important;
}
.hi-modern .text-muted.small,
.hi-modern a.text-muted{ color:var(--hp-faint) !important; }
.hi-modern .text-muted.small:hover,
.hi-modern a.text-muted:hover{ color:var(--hp-accent-ink) !important; }

/* Trending pills */
.hi-modern .trending-pills-wrapper::after{ background:linear-gradient(to right,transparent,var(--hp-bg)); }
.hi-modern .trending-label{ color:var(--hp-muted); font-weight:800; }
.hi-modern .trending-pill{
    border-radius:999px; border:1px solid var(--hp-border); background:var(--hp-card);
    color:var(--hp-ink-2); font-weight:500; box-shadow:0 1px 2px rgba(15,23,42,.04); padding:6px 13px;
}
.hi-modern .trending-pill:hover{
    border-color:var(--hp-accent); color:var(--hp-accent-ink);
    box-shadow:0 4px 12px rgba(31,107,255,.18); transform:translateY(-1px);
}
.hi-modern .trending-pill-count{ background:var(--hp-accent-tint); color:var(--hp-accent-ink); font-weight:700; }
.hi-modern .trending-pill--per,
.hi-modern .trending-pill--loc,
.hi-modern .trending-pill--org{ background:var(--hp-card); border-color:var(--hp-border); }
.hi-modern .trending-pill--rising{ border-color:#ffd3d8; background:#fff4f5; color:var(--hp-live); font-weight:700; }
.hi-modern .trending-pill--rising .trending-pill-count{ background:#ffe1e5; color:var(--hp-live); }

/* Editorial carousel cards */
.hi-modern .editorial-card{
    border-radius:var(--hp-radius); border:1px solid var(--hp-border); background:var(--hp-card);
    box-shadow:var(--hp-shadow); transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.hi-modern .editorial-card:hover{ transform:translateY(-4px); box-shadow:var(--hp-shadow-lift); }
.hi-modern .editorial-card-img{ height:158px; }
.hi-modern .editorial-card-title{ font-size:.92rem; color:var(--hp-ink); letter-spacing:-.012em; }
.hi-modern .editorial-card-desc{ color:var(--hp-muted); }
.hi-modern .editorial-card-meta{ color:var(--hp-faint); }
.hi-modern .editorial-badge{
    background:var(--hp-accent); border-radius:6px; font-size:.58rem; letter-spacing:.06em;
    box-shadow:0 2px 8px rgba(31,107,255,.4);
}
.hi-modern .editorial-badge--updated{ background:#f59e0b; }
.hi-modern .editorial-arrow{
    border:1px solid var(--hp-border); background:var(--hp-card); color:var(--hp-ink-2); box-shadow:var(--hp-shadow);
}
.hi-modern .editorial-arrow:hover{ background:var(--hp-accent-tint); color:var(--hp-accent-ink); border-color:var(--hp-accent); }

/* Briefings carousel cards */
.hi-modern .briefings-carousel-section::after{ background:linear-gradient(to right,transparent,var(--hp-bg)); }
.hi-modern .briefing-card{
    border-radius:var(--hp-radius); border:1px solid var(--hp-border); background:var(--hp-card);
    box-shadow:var(--hp-shadow); transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.hi-modern .briefing-card:hover{ transform:translateY(-4px); box-shadow:var(--hp-shadow-lift); }
.hi-modern .briefing-card-img{ height:138px; }
.hi-modern .briefing-card-title{ color:var(--hp-ink); font-size:.85rem; letter-spacing:-.012em; }
.hi-modern .briefing-card-meta .text-muted{ color:var(--hp-faint) !important; }

/* Top stories carousel (mobile) */
.hi-modern .top-stories-carousel-section::after{ background:linear-gradient(to right,transparent,var(--hp-bg)); }
.hi-modern .top-story-card{
    border-radius:var(--hp-radius); border:1px solid var(--hp-border); background:var(--hp-card); box-shadow:var(--hp-shadow);
}
.hi-modern .top-story-card:hover{ transform:translateY(-3px); box-shadow:var(--hp-shadow-lift); }
.hi-modern .top-story-card-title{ color:var(--hp-ink); letter-spacing:-.01em; }
.hi-modern .top-story-card-badge{ border-radius:5px; font-weight:700; letter-spacing:.03em; }

/* Left sidebar: categories */
.hi-modern .categories-sidebar .card{
    border:1px solid var(--hp-border) !important; border-radius:var(--hp-radius);
    box-shadow:var(--hp-shadow) !important; background:var(--hp-card); overflow:hidden;
}
.hi-modern .categories-sidebar .card-header.bg-primary{
    background:var(--hp-card) !important; color:var(--hp-ink) !important; border-bottom:1px solid var(--hp-border);
}
.hi-modern .categories-sidebar .card-header .h6,
.hi-modern .categories-sidebar .card-header h2{ color:var(--hp-ink) !important; font-weight:800; }
.hi-modern .categories-sidebar .list-group-item{
    background:transparent !important; border:0 !important; padding:.5rem .7rem !important;
    margin:1px 6px; border-radius:9px; color:var(--hp-ink-2);
}
.hi-modern .categories-sidebar .list-group-item:hover{ background:var(--hp-accent-tint) !important; }
.hi-modern .categories-sidebar .list-group-item.active{
    background:var(--hp-accent-tint) !important; color:var(--hp-accent-ink) !important;
    box-shadow:inset 3px 0 0 var(--hp-accent);
}
.hi-modern .categories-sidebar .badge.bg-secondary{ background:#eef1f6 !important; color:var(--hp-muted) !important; font-weight:600; }
[data-theme="dark"] .hi-modern .categories-sidebar .badge.bg-secondary{ background:#1c2840 !important; }
.hi-modern .categories-sidebar .badge.bg-danger{ background:var(--hp-live) !important; }
.hi-modern .categories-sidebar .badge.bg-success{ background:#10b981 !important; }

/* Right sidebar: HotInfo live / top stories generic */
.hi-modern .hot-story-item{ border-bottom:1px solid var(--hp-border) !important; padding:.7rem .75rem !important; }
.hi-modern .hot-story-item:hover{ background:var(--hp-accent-tint); }
.hi-modern .hot-story-thumb{ width:66px; height:46px; border-radius:8px; }
.hi-modern .hot-story-item .text-dark{ color:var(--hp-ink-2) !important; font-weight:600; letter-spacing:-.008em; }
.hi-modern .hot-story-item a.text-dark:hover{ color:var(--hp-accent-ink) !important; }
.hi-modern .hot-story-item .badge{ border-radius:6px; font-weight:700; letter-spacing:.03em; }

/* Live feed rows */
.hi-modern .live-article-row{
    padding:.55rem .8rem; border-bottom:1px solid var(--hp-border); font-size:.85rem; gap:.35rem .55rem;
}
.hi-modern .live-row-odd{ background:transparent; }
.hi-modern .live-article-row:hover{ background:var(--hp-accent-tint); }
.hi-modern .live-time{ color:var(--hp-accent-ink); font-weight:700; font-size:.72rem; min-width:34px; }
.hi-modern .live-title{ color:var(--hp-ink-2); font-weight:500; }
.hi-modern .live-title:hover{ color:var(--hp-accent-ink); }
.hi-modern .live-source{ color:var(--hp-faint); }
.hi-modern .live-source-inline{ display:none; }  /* desktop: zdroj je pravý stĺpec; inline variant len mobile */
.hi-modern .live-article-row .badge.bg-primary{ background:var(--hp-accent) !important; border-radius:5px; }
.hi-modern .live-article-row .badge.bg-danger{ background:var(--hp-live) !important; border-radius:5px; }
.hi-modern .hotinfo-original{ background:linear-gradient(90deg, var(--hp-accent-tint) 0%, transparent 55%); }
.hi-modern .live-article-row.border-primary{ border-left-color:var(--hp-accent) !important; }
.hi-modern .live-article-row.border-danger{ border-left-color:var(--hp-live) !important; }
.hi-modern .entity-tag{ border-radius:999px; font-weight:600; opacity:.85; }
.hi-modern .entity-tag:hover{ opacity:1; }

/* Tinted colored category headers (keeps wayfinding, modern look) */
.hi-modern a[class*="category-header-"]{
    background:color-mix(in srgb, var(--_c,#64748b) 11%, var(--hp-card)) !important;
    border-bottom:1px solid var(--hp-border); border-left:4px solid var(--_c,#64748b);
    padding:.5rem .8rem !important; transition:background .15s;
}
.hi-modern a[class*="category-header-"]:hover{ background:color-mix(in srgb, var(--_c,#64748b) 18%, var(--hp-card)) !important; }
.hi-modern a[class*="category-header-"] small{
    color:color-mix(in srgb, var(--_c,#334155) 72%, var(--hp-ink)) !important;
    font-weight:800; letter-spacing:.005em; font-size:.8rem;
}
.hi-modern a[class*="category-header-"] .opacity-75{ opacity:1 !important; color:var(--hp-faint) !important; font-weight:600; }
.hi-modern a[class*="category-header-"] .cat-more{
    color:color-mix(in srgb, var(--_c,#64748b) 78%, var(--hp-ink)) !important;
    font-weight:700; font-size:.68rem; letter-spacing:.01em;
    white-space:nowrap; flex:none; opacity:.9;
    transition:opacity .15s, transform .15s;
}
.hi-modern a[class*="category-header-"]:hover .cat-more{ opacity:1; transform:translateX(2px); }
.hi-modern .category-header-politics{ --_c:var(--category-politics); }
.hi-modern .category-header-world,
.hi-modern .category-header-world_politics{ --_c:var(--category-world); }
.hi-modern .category-header-sport,
.hi-modern .category-header-sport_football,
.hi-modern .category-header-sport_hockey{ --_c:var(--category-sport); }
.hi-modern .category-header-economy,
.hi-modern .category-header-energia{ --_c:var(--category-economy); }
.hi-modern .category-header-tech,
.hi-modern .category-header-tech_ai,
.hi-modern .category-header-tech_gaming,
.hi-modern .category-header-tech_internet,
.hi-modern .category-header-tech_mobile{ --_c:var(--category-tech); }
.hi-modern .category-header-health{ --_c:var(--category-health); }
.hi-modern .category-header-culture,
.hi-modern .category-header-movie,
.hi-modern .category-header-music,
.hi-modern .category-header-book{ --_c:var(--category-culture); }
.hi-modern .category-header-crime{ --_c:var(--category-crime); }
.hi-modern .category-header-lifestyle,
.hi-modern .category-header-celebrity{ --_c:var(--category-lifestyle); }
.hi-modern .category-header-nature,
.hi-modern .category-header-weather{ --_c:var(--category-nature); }
.hi-modern .category-header-ukraine_russia_war,
.hi-modern .category-header-iran_israel_war,
.hi-modern .category-header-accidents,
.hi-modern .category-header-disasters{ --_c:var(--category-disasters); }
.hi-modern .category-header-czechia,
.hi-modern .category-header-slovakia,
.hi-modern .category-header-slovakia_regions{ --_c:var(--category-slovakia); }
.hi-modern .category-header-eu,
.hi-modern .category-header-germany_politics,
.hi-modern .category-header-poland_politics{ --_c:var(--category-eu); }
.hi-modern .category-header-auto{ --_c:var(--category-travel); }
.hi-modern .category-header-education{ --_c:var(--category-education); }
.hi-modern .category-header-religion{ --_c:var(--category-religion); }
.hi-modern .category-header-realestate{ --_c:var(--category-realestate); }
.hi-modern .category-header-travel,
.hi-modern .category-header-croatia_regional{ --_c:var(--category-travel); }
.hi-modern .category-header-cooking{ --_c:var(--category-cooking); }
.hi-modern .category-header-news,
.hi-modern .category-header-historia{ --_c:var(--category-historia); }
.hi-modern .category-header-design{ --_c:var(--category-design); }

/* ===================================================================
   HOMEPAGE-SPECIFIC (hook classes only present on home)
   =================================================================== */
.hi-modern .hp-live-head{
    border:1px solid var(--hp-border) !important; border-radius:var(--hp-radius);
    box-shadow:var(--hp-shadow) !important;
    background:linear-gradient(115deg, var(--hp-card) 60%, var(--hp-accent-tint));
    position:relative; overflow:hidden;
}
.hi-modern .hp-live-head::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
    background:linear-gradient(var(--hp-live), #ff7a45);
}
.hi-modern .hp-live-head .h4{
    color:var(--hp-ink) !important; font-weight:900; letter-spacing:-.025em;
    display:flex; align-items:center; gap:.55rem;
}
.hi-modern .hp-live-head .badge.bg-danger{ background:var(--hp-live) !important; border-radius:6px; letter-spacing:.05em; }
.hi-modern .hp-live-cat{
    border:1px solid var(--hp-border) !important; border-radius:var(--hp-radius);
    box-shadow:var(--hp-shadow) !important; background:var(--hp-card); overflow:hidden;
}
.hi-modern .hp-top-card{
    border:1px solid var(--hp-border) !important; border-radius:var(--hp-radius);
    box-shadow:var(--hp-shadow) !important; background:var(--hp-card); overflow:hidden;
}
.hi-modern .hp-top-card > .card-header.bg-primary{
    background:var(--hp-card) !important; color:var(--hp-ink) !important; border-bottom:1px solid var(--hp-border);
}
.hi-modern .hp-top-card > .card-header .h6,
.hi-modern .hp-top-card > .card-header h2{ color:var(--hp-ink) !important; font-weight:800; letter-spacing:-.01em; }
.hi-modern .hp-top-card .card-header .badge.bg-light{ background:var(--hp-accent-tint) !important; color:var(--hp-accent-ink) !important; border-radius:6px; }
.hi-modern .hp-top-card .btn-outline-primary{ border-color:var(--hp-accent); color:var(--hp-accent-ink); border-radius:999px; font-weight:600; }
.hi-modern .hp-top-card .btn-outline-primary:hover{ background:var(--hp-accent); color:#fff; }

/* ===================================================================
   LISTING TILES — category / search / person / location grids
   =================================================================== */
.hi-modern .featured-article,
.hi-modern .news-tile,
.hi-modern .secondary-article{
    border:1px solid var(--hp-border); border-radius:var(--hp-radius);
    background:var(--hp-card); box-shadow:var(--hp-shadow);
    transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.hi-modern .featured-article:hover,
.hi-modern .news-tile:hover{ transform:translateY(-4px); box-shadow:var(--hp-shadow-lift); }
.hi-modern .secondary-article:hover{ border-color:var(--hp-accent); background:var(--hp-accent-tint); transform:none; }
.hi-modern .featured-title,
.hi-modern .news-title,
.hi-modern .secondary-title{ color:var(--hp-ink); letter-spacing:-.012em; }
.hi-modern .featured-title a:hover,
.hi-modern .news-title a:hover,
.hi-modern .secondary-title a:hover{ color:var(--hp-accent-ink) !important; }
.hi-modern .featured-excerpt,
.hi-modern .news-excerpt{ color:var(--hp-muted); }
.hi-modern .featured-meta,
.hi-modern .news-meta,
.hi-modern .secondary-meta{ color:var(--hp-faint); }

/* ===================================================================
   ARTICLE PAGE (/clanok) — typography + card surfaces via tokens
   =================================================================== */
.hi-modern .article-title{
    color:var(--hp-ink); letter-spacing:-.025em; font-weight:900; line-height:1.12;
}
.hi-modern .article-content{ color:var(--hp-ink-2); }
.hi-modern .article-content a:not(.btn){ color:var(--hp-accent-ink); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.hi-modern .article-content h2,
.hi-modern .article-content h3{ color:var(--hp-ink); letter-spacing:-.02em; }
.hi-modern .article-source,
.hi-modern .article-source-note,
.hi-modern .quote-card,
.hi-modern .related-card-v,
.hi-modern .quotes-panel{
    border-radius:var(--hp-radius-sm);
}
.hi-modern .related-card-v{ border:1px solid var(--hp-border); background:var(--hp-card); box-shadow:var(--hp-shadow); transition:transform .18s, box-shadow .18s; }
.hi-modern .related-card-v:hover{ transform:translateY(-3px); box-shadow:var(--hp-shadow-lift); }
.hi-modern .entity-chip{ border-radius:999px; }
.hi-modern .tts-play-btn,
.hi-modern .article-tts .btn{ border-radius:999px; }

/* ---- Mobilná čitateľnosť (5.6.2026) -------------------------------------
   Hlavný spravodajský feed bol na mobile o ~15-25 % menší než CNN/BBC/ukr.net.
   Zdvíhame kľúčové reading surfaces na mobile/tablete (jednostĺpcový layout
   < 992px). Desktop ostáva nedotknutý. body base bump je v home <style>. */
@media (max-width: 991px) {
    /* čitateľnosť hlavného feedu */
    .hi-modern .live-article-row { font-size: 1rem; }    /* 13.6px → 16px (titulky feedu) */
    .hi-modern .live-time        { font-size: .84rem; margin-right: .15rem; }  /* 11.5px → 13.4px */
    .hi-modern .hot-story-title  { font-size: 1rem; }

    /* čas inline na začiatku názvu (nie samostatný ľavý stĺpec/„riadok vyššie"):
       riadok z flex-gutter → jeden inline odsek „20:04 Názov… ↗ zdroj" */
    .hi-modern .live-article-row { display: block; }

    /* feed declutter na mobile (Pavol 5.6.):
       – skryť entity tagy (omylom sa na ne klikalo)
       – zdroj NIE ako pravý stĺpec, ale nenápadný sivý text inline hneď za
         názvom (vedľa ↗ ikonky) — preto je .live-source-inline vnútri title linku */
    .hi-modern .entity-tags  { display: none; }
    .hi-modern .live-source  { display: none; }   /* pravý stĺpec preč na mobile */
    .hi-modern .live-source-inline {
        display: inline; font-size: .72rem; font-weight: 400; color: var(--hp-faint); opacity: .85;
    }
}

/* ── „Čo sleduje hotinfo" — checklist z article_followups (ArticleController::renderFollowupChecklist)
      Nahrádza ručnú prózu v tele článku, keď má článok origin followup. Panel
      article-followup-panel.html.twig sa vtedy neopakuje. ─────────────────── */
.hi-modern .article-watch {
    margin: 4px 0 26px;
    padding: 16px 18px;
    border: 1px solid var(--hp-border, #e4e7ec);
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    background: var(--hp-surface-2, #fcfcfd);
}
.hi-modern .article-watch-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .84rem;
    color: var(--hp-text-muted, #667085);
    margin-bottom: 8px;
}
.hi-modern .article-watch-progress { font-weight: 700; color: var(--hp-text, #1d2939); }
.hi-modern .article-watch-deadline { font-style: italic; }
.hi-modern .article-watch-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--hp-border, #e4e7ec);
    overflow: hidden;
    margin-bottom: 14px;
}
.hi-modern .article-watch-bar > span {
    display: block;
    height: 100%;
    background: #f59e0b;
    border-radius: 999px;
}
.hi-modern .article-watch-list { list-style: none; margin: 0; padding: 0; }
.hi-modern .article-watch-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 7px 0;
    border-top: 1px solid var(--hp-border, #e4e7ec);
    line-height: 1.5;
}
.hi-modern .article-watch-item:first-child { border-top: 0; }
.hi-modern .article-watch-mark { flex-shrink: 0; font-size: .95rem; line-height: 1.5; }
.hi-modern .article-watch-item.is-pending .article-watch-text { color: var(--hp-text-muted, #667085); }
.hi-modern .article-watch-item.is-done .article-watch-text { color: var(--hp-text, #1d2939); }
.hi-modern .article-watch-link {
    display: block;
    margin-top: 2px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--hp-accent, #1f6bff);
}
.hi-modern .article-watch-note {
    display: block;
    margin-top: 2px;
    font-size: .86rem;
    color: var(--hp-text-muted, #667085);
}
/* Odkaz na verejný tracker /sleduje/{slug} — sekcia v článku je snapshot k dátumu
   publikácie, tracker vedie tú istú tému ďalej. */
.hi-modern .article-watch-more {
    display: inline-block;
    margin-top: 12px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--hp-accent, #1f6bff);
    text-decoration: none;
}
.hi-modern .article-watch-more:hover { text-decoration: underline; }
[data-theme="dark"] .hi-modern .article-watch { background: var(--hp-surface-2, #16181d); }
.hi-modern .article-watch-item.is-failed .article-watch-text { color: var(--hp-text-muted, #667085); }
.hi-modern .article-watch-item.is-failed .article-watch-note { color: #b42318; }
/* Kredit k fotke, cross-link alebo poznámka, ktoré stáli vnútri sekcie „Čo sleduje hotinfo" — checklist ho nesmie
   zahodiť, pri CC BY/CC BY-SA je atribúcia licenčná podmienka. */
.hi-modern .article-watch-aside {
    margin: -14px 0 24px;
    font-size: .82rem;
    color: var(--hp-text-muted, #667085);
}

/* ═══════════════════════════════════════════════════════════════════════
   Národné desky v článkoch série „O čom píše…" (28.8.2026)
   Kód krajiny je primárny identifikátor, vlajka pod ním len farebná kotva:
   🇸🇮/🇸🇰 a 🇱🇻/🇱🇹 sa na veľkosti písma v tele nedajú rozoznať.
   Desktop = kód v ľavom stĺpci vedľa bulletov, mobil = hlavička karty.
   ═══════════════════════════════════════════════════════════════════════ */
.hi-modern .article-desk{
  display:grid; grid-template-columns:74px 1fr; gap:0 22px; align-items:start;
  padding:18px 0; border-top:1px solid var(--hp-border);
}
.hi-modern .article-desk .article-section-heading{
  display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  margin:0; padding:0; border-bottom:0; position:sticky; top:12px;
}
.hi-modern .article-desk .cc-code{
  font-size:1.31rem; font-weight:700; letter-spacing:.04em; line-height:1; color:var(--hp-ink);
}
.hi-modern .article-desk .cc-flag{ font-size:.94rem; line-height:1; opacity:.85; }
.hi-modern .article-desk .cc-name{
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--hp-muted); line-height:1.35;
}
.hi-modern .article-bullets{ list-style:none; margin:0; padding:0; }
.hi-modern .article-bullets>li{ margin:0 0 12px; font-size:.92rem; line-height:1.62; }
.hi-modern .article-bullets>li:last-child{ margin-bottom:0; }
/* Titulok bulletu nie je tučný — odlišuje ho tmavšia farba, nie váha.
   Bez toho bola stránka „stena tučného" (16,8/700 proti telu 16/400). */
.hi-modern .article-bullets>li>strong{ font-weight:400; color:var(--hp-ink); }
.hi-modern .article-bullets>li.art-bl-sub{
  margin-left:18px; padding-left:12px; border-left:2px solid var(--hp-border); font-size:.97rem;
}
/* Blok „Čo dnes hýbe Európou" a „Ďalšie krajiny": každá téma je karta.
   Odrážky sú preč — pri téme, ktorá nesie vlastné vetvy, mätie bodka aj odsadenie. */
.hi-modern .article-content>.article-bullets>li{
  background:var(--hp-card);
  border:1px solid var(--hp-border-strong);
  border-radius:var(--hp-radius);
  padding:14px 18px;
  margin:0 0 10px;
}
.hi-modern .article-content>.article-bullets>li:last-child{ margin-bottom:0; }
/* vnorené vetvy vnútri karty */
.hi-modern .art-branches{ list-style:none; margin:9px 0 0; padding:0; }
.hi-modern .art-branches>li{
  margin:0 0 7px; padding-left:12px;
  border-left:2px solid var(--hp-border);
  font-size:.87rem; line-height:1.55; color:var(--hp-muted);
}
.hi-modern .art-branches>li:last-child{ margin-bottom:0; }
.hi-modern .art-branches>li>strong{ font-weight:400; color:var(--hp-ink); }
/* v karte už netreba pôvodné odsadenie plochej vetvy */
.hi-modern .article-content>.article-bullets>li.art-bl-sub{
  margin-left:0; padding-left:18px; border-left:1px solid var(--hp-border-strong);
}
/* zdrojové odkazy ako tiché čipy — musí prebiť .hi-modern .article-content a:not(.btn) */
.hi-modern .article-content .article-bullets a.source-ref{
  display:inline-block; font-size:.72rem; font-weight:500; line-height:1.5;
  color:var(--hp-muted); background:var(--hp-accent-tint); border:1px solid var(--hp-border);
  border-radius:5px; padding:1px 6px; margin-left:4px;
  text-decoration:none; white-space:nowrap;
}
.hi-modern .article-content .article-bullets a.source-ref:hover{
  color:var(--hp-accent-ink); border-color:var(--hp-accent); background:var(--hp-accent-tint);
}
@media (max-width:720px){
  .hi-modern .article-desk{
    display:block; border:1px solid var(--hp-border); border-radius:12px; overflow:hidden;
    padding:0; margin-bottom:14px; background:var(--hp-card);
  }
  .hi-modern .article-desk .article-section-heading{
    flex-direction:row; align-items:center; gap:9px; position:static;
    padding:9px 14px; background:var(--hp-bg); border-bottom:1px solid var(--hp-border);
  }
  .hi-modern .article-desk .cc-code{ font-size:1.02rem; }
  .hi-modern .article-desk .cc-name{ font-size:.72rem; }
  .hi-modern .article-desk .article-bullets{ padding:6px 14px 12px; }
  .hi-modern .article-desk .article-bullets>li{
    padding:8px 0; margin:0; border-bottom:1px solid var(--hp-border); font-size:.97rem;
  }
  .hi-modern .article-desk .article-bullets>li:last-child{ border-bottom:0; }
  .hi-modern .article-bullets>li.art-bl-sub{ margin-left:8px; padding-left:10px; }
}

/* ── <header> vnútri stránky nie je hlavička webu ────────────────────────────
   `hotinfo-core.min.css` má HOLÝ selektor `header{background:linear-gradient(135deg,#007bff,#0056b3);color:#fff}`,
   ktorý zafarbí KAŽDÝ <header> element na stránke. Na Design4 stránkach, ktoré
   sekciu obsahu uvádzajú sémantickým <header>, to spraví modrý pruh, v ktorom
   je eyebrow aj lede (obe sivé, var(--hp-muted)) prakticky nečitateľné.
   Postihnuté sú `.trk-head` (verejný tracker /sleduje, nasadený 26.8.2026 —
   chyba tam bola od začiatku) a `.ctr-head` (krajinské rubriky, 29.8.2026).
   `.header-modern` je vyňatý — to JE hlavička webu a gradient tam patrí.
   Fix je tu, nie v core: core je minifikovaný, holý `header{}` môžu používať
   legacy stránky mimo `.hi-modern`, a skin má byť podľa CLAUDE.md single source. */
.hi-modern header:not(.header-modern){
  background:none !important; background-image:none !important; color:inherit !important;
  padding:0; border-radius:0; box-shadow:none;
}

/* ── Sidebary: sticky s vlastným scrollom (29.8.2026) ───────────────────────
   Stĺpec sidebaru je vysoký ako obsah stránky — na bežnom článku 4 727 px, kým
   karty v ňom mali 908 px (vľavo) a ~1 000 px (vpravo). Pod nimi tak zostávalo
   cez 3 500 px prázdneho miesta a čitateľ, ktorý dočítal článok, nemal po ruke
   žiadnu navigáciu. To bol aj dôvod, prečo 39 rubrík sedelo v <details> „Ďalšie
   rubriky" — toggle šetril dĺžku, ktorá stránke nechýbala.

   ⚠️ Pravidlo mieri na STĹPEC, nie na kartu v ňom. Sidebar má vlastnú značku len
   na 16 zo 26 Design4 stránok — `article`, `home`, `category`, `search`,
   `minuta-po-minute`, `briefings`, `quotes*` a `briefing-detail` majú stĺpec
   napísaný priamo v šablóne a partial neincludujú. Kombinácia
   `.col-lg-{2,3}.d-none.d-lg-block` je naopak zhodná na všetkých 17 výskytoch
   a nikde inde sa nepoužíva, takže jedno pravidlo pokryje aj tie stránky bez
   zásahu do desiatich šablón.

   ⚠️ `align-self: flex-start` je nutný, nie kozmetika. Bootstrap `.row` má
   `align-items: stretch`, takže stĺpec je natiahnutý na výšku celého riadku —
   a sticky prvok, ktorý je rovnako vysoký ako jeho posúvajúci sa kontajner,
   nemá kam sa prilepiť a nerobí NIČ.

   ⚠️ `max-height` je rovnako nutný: sticky prvok vyšší než okno sa prilepí hneď
   a jeho spodok zostane natrvalo pod okrajom — k posledným rubrikám by sa nedalo
   dostať vôbec.

   `top: 72px` = výška hlavičky (64) + 8. Na bb.hotinfo.eu je hlavička o 32 px
   nižšie kvôli BETA pruhu, tam teda horný okraj podlieza; na produkcii sedí. */
@media (min-width: 992px) {
  .hi-modern .col-lg-2.d-none.d-lg-block,
  .hi-modern .col-lg-3.d-none.d-lg-block {
    align-self: flex-start;
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .hi-modern .col-lg-2.d-none.d-lg-block::-webkit-scrollbar,
  .hi-modern .col-lg-3.d-none.d-lg-block::-webkit-scrollbar { width: 6px; }
  .hi-modern .col-lg-2.d-none.d-lg-block::-webkit-scrollbar-thumb,
  .hi-modern .col-lg-3.d-none.d-lg-block::-webkit-scrollbar-thumb {
    background: var(--hp-border-strong); border-radius: 3px;
  }
  .hi-modern .col-lg-2.d-none.d-lg-block::-webkit-scrollbar-track,
  .hi-modern .col-lg-3.d-none.d-lg-block::-webkit-scrollbar-track { background: transparent; }
}