/* =========================================================
   SNS — Slovenská národná strana
   Shared design system
   ========================================================= */

:root {
  /* Brand colours */
  --navy:        #0b2a5b;
  --navy-dark:   #071e42;
  --navy-light:  #14397a;
  --red:         #d4202a;
  --red-dark:    #b01a22;
  --gold:        #c8a24a;

  /* Neutrals */
  --white:       #ffffff;
  --bg:          #ffffff;
  --bg-alt:      #f4f6fa;
  --bg-alt-2:    #eef2f8;
  --text:        #16203a;
  --muted:       #5c6678;
  --border:      #e1e7f0;

  /* Typography */
  --font-heading: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Layout */
  --container:   1180px;
  --container-narrow: 820px;
  --radius:      14px;
  --radius-sm:   8px;
  --shadow-sm:   0 1px 3px rgba(11, 42, 91, 0.08);
  --shadow:      0 6px 24px rgba(11, 42, 91, 0.10);
  --shadow-lg:   0 16px 48px rgba(11, 42, 91, 0.16);
  --header-h:    72px;
  --transition:  0.2s ease;

  /* Motion system — jeden slovník pre celý web. Žiadne nové hodnoty:
     0.35s a obe krivky sú tie, ktoré už používajú filtre a hero. */
  --motion-dur:     .35s;
  --motion-enter:   cubic-bezier(0.22, 1, 0.36, 1);   /* prílet, spomaľuje */
  --motion-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* mikro-interakcie */
  --motion-stagger: 50ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;

  /* Sticky footer: every page is header + main + footer, so a column flex
     body with a full-viewport minimum lets <main> absorb any slack. The
     footer is never fixed/sticky — on long pages it just flows normally. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Takes the leftover height on short pages; never shrinks on long ones.
   Also a column flex container so the slack can be placed deliberately. */
main { flex: 1 0 auto; display: flex; flex-direction: column; }
.site-header, .site-footer { flex-shrink: 0; }

/* The newsletter sits INSIDE <main> (aktuality.html is the only page with
   one). Left alone, main's leftover height lands *below* it — opening a
   white band between the navy newsletter and the navy footer. margin-top:auto
   moves that slack above it instead, so newsletter and footer stay together
   at the bottom. On long pages there is no slack, so this is a no-op. */
main > .section--navy:last-child { margin-top: auto; }
img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--red); }
ul { margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--navy); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 .75rem; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.container-narrow { max-width: var(--container-narrow); }
.section { padding: 72px 0; }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: #dde6f5; }
.section--navy h2, .section--navy h3 { color: #fff; }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.section-head.left { text-align: left; margin-left: 0; }
.eyebrow {
  display: inline-block; font-family: var(--font-heading); font-weight: 600;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); margin-bottom: .6rem;
}
.section--navy .eyebrow { color: var(--gold); }
.lead { font-size: 1.12rem; color: var(--muted); }
.section--navy .lead { color: #cdd8ec; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-heading); font-weight: 600; font-size: .98rem;
  padding: 13px 26px; border-radius: var(--radius-sm); border: 2px solid transparent;
  cursor: pointer; transition: all var(--transition); text-align: center;
}
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; }
.btn-accent { background: var(--red); color: #fff; border-color: var(--red); }
.btn-accent:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline-light:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-lg { padding: 16px 34px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
/* Rozostrenie hlavičky až od 1280 px vyššie.
   Dôvod: backdrop-filter vytvára "containing block" pre potomkov s
   position: fixed. Mobilné off-canvas menu (.main-nav) sa tým prestane
   pozicionovať voči viewportu a jeho odsunutá poloha (translateX(100%))
   začne reálne rozširovať dokument — každá stránka sa potom dala vodorovne
   posúvať o celú šírku obrazovky.

   ⚠ Hranica 1280 px MUSÍ zodpovedať hranici mobilnej navigácie nižšie
   (max-width: 1279px). Keď sa posunie jedna, musí sa posunúť aj druhá,
   inak sa chyba s vodorovným posúvaním vráti v tom rozsahu, kde existuje
   fixed menu a zároveň je aktívne rozostrenie. */
@media (min-width: 1280px) {
  .site-header { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
.header-inner {
  height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .65rem; margin-right: 1rem; font-family: var(--font-heading); font-weight: 700; color: var(--navy); }
.brand img { height: 46px; width: auto; }
/* Trojriadkový podpis je ZNAČKA, nie dôsledok nedostatku miesta. Bez
   obmedzenia sa medzi ~431px a 1200px vyskladá do jedného riadku (tam je
   miesta dosť) a lockup vyzerá na každej šírke inak. max-width je nastavená
   tesne nad najdlhšie slovo ("SLOVENSKÁ"), takže na riadok padne vždy práve
   jedno slovo — pri desktopovej (.68rem) aj mobilnej (.62rem) veľkosti. */
.brand-text { display: flex; flex-direction: column; line-height: 1.05; max-width: 78px; }
/* Pod 1280px je .main-nav off-canvas (position: fixed), takže odsadenie
   loga od navigácie už nemá čo oddeľovať — a práve tam je miesto najdrahšie.
   Hranica je zámerne tá istá ako hranica hamburgeru; nemení ju, len sa na ňu
   viaže. */
@media (max-width: 1279px) { .brand { margin-right: 0; } }
.brand-text span { font-size: .68rem; color: var(--muted); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }

.main-nav > ul { display: flex; align-items: center; gap: 0; list-style: none; }
/* Vodorovný padding odkazu je zároveň šírkou farebnej "pilulky" aktívnej
   položky — pilulka začína na ľavej hrane <a>, nie na hrane textu. Pri 10px
   siahala pilulka až pod pretečený text loga (pozri poznámku pri .brand
   nižšie) a prekrývala slovo STRANA. 7px + nulová medzera medzi <li> vracia
   medzi logo a prvú pilulku ~20px čistého priestoru a zároveň ZMENŠUJE
   celkovú potrebnú šírku hlavičky o 62px. */
.main-nav a {
  display: block; padding: 10px 7px; font-family: var(--font-heading); font-weight: 500;
  font-size: .94rem; color: var(--navy); border-radius: 6px; white-space: nowrap;
}
.main-nav a:hover, .main-nav .current > a { color: var(--red); background: var(--bg-alt); }
.main-nav .current > a { font-weight: 600; }

/* Dropdown */
.has-dropdown { position: relative; }
.has-dropdown > a::after { content: "▾"; font-size: .7em; margin-left: .35rem; opacity: .7; }
.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 220px; list-style: none;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: all var(--transition);
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { padding: 9px 12px; font-size: .9rem; }

/* Header CTA + hamburger */
.header-actions { display: flex; align-items: center; gap: .5rem; }
/* Tlačidlo "Podporte nás" sa lámalo na dva riadky, čím narástlo na 77px vo
   výške pri 72px vysokej hlavičke — pretekalo hore aj dole cez jej okraj a
   pôsobilo ako privarený blok. Na jednom riadku má 53.5px a .header-inner
   (align-items: center) ho sám vycentruje, takže vznikne symetrický odstup
   ~9px hore aj dole. Výška hlavičky sa NEMENÍ, mení sa len výška tlačidla.
   min-height drží dotykový cieľ na 44px na telefónoch, kde je menší font. */
.header-actions .btn {
  white-space: nowrap; min-height: 44px;
  /* Zvislý padding je tu nižší než v základnom .btn (13px): dvojica tlačidiel
     v 72px vysokej hlavičke pôsobila pri 53.5px príliš mohutne. 10px dáva
     47.5px — stále nad 44px dotykovým cieľom, ktorý drží min-height nižšie.
     Vodorovný padding a font ostávajú z .btn, aby si každé tlačidlo objalo
     svoj vlastný text rovnakým odsadením (žiadna pevná šírka). */
  padding: 10px 26px;
  /* Odtieňovaný (červený) tieň, nie neutrálny sivý — tlačidlo tak ostáva
     červené aj po okrajoch a číta sa ako samostatná "nálepka". */
  border-radius: 10px; box-shadow: 0 2px 8px rgba(192, 57, 43, .28);
}
/* Rovnaký idióm pre navy tlačidlo "Podujatia" — tieň v jeho vlastnej farbe
   (--navy #0b2a5b), aby dvojica pôsobila ako jeden systém. Tvar, veľkosť,
   font aj radius dedí z .header-actions .btn, líši sa len farba. */
.header-actions .btn-podujatia { box-shadow: 0 2px 8px rgba(11, 42, 91, .28); }
/* "Podujatia" žije na dvoch miestach a vždy je viditeľné práve jedno:
   od 1280 px ako navy tlačidlo v hlavičke, pod 1280 px (kde sa navigácia
   zbalí do hamburgeru) ako bežná položka off-canvas menu. Dôvod pre ten
   návrat: dve tlačidlá vedľa seba potrebujú v hlavičke 397 px, na 375 px
   telefóne teda pretekajú. Hranica je zámerne tá istá ako hranica
   hamburgeru — nezavádza novú a mení sa spolu s ňou. */
@media (min-width: 1280px) {
  .main-nav .nav-item--menu-only { display: none; }
  /* Logo sa NESMIE stlačiť pod prvú položku menu. .brand je flex položka a
     trojriadkový podpis pretečie jej zmenšený box — s dvojicou tlačidiel
     vpravo pribudlo ~55 px tlaku a pilulka "Domov" sa navliekla na slovo
     STRANA. flex-shrink: 0 drží logo v jeho prirodzenej šírke; prípadný
     nedostatok miesta sa tak prejaví viditeľne, nie tichým prekrytím. */
  .brand { flex-shrink: 0; }
}
@media (max-width: 1279px) {
  .header-actions .btn-podujatia { display: none; }
}

.nav-toggle {
  display: none; width: 44px; height: 44px; border: none; background: transparent;
  flex-direction: column; justify-content: center; gap: 5px; padding: 0;
}
.nav-toggle span { display: block; height: 2.5px; width: 24px; background: var(--navy); border-radius: 2px; transition: all var(--transition); margin: 0 auto; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Mobile nav ---------- */
/* Tlačidlo „Podporte nás" ostáva viditeľné vo VŠETKÝCH šírkach.
   Predtým sa pod 920 px skrývalo, lebo rovnaký odkaz bol aj v menu. Odkaz
   z menu sme odstránili (bol duplicitný a menu bolo príliš široké), takže
   keby sa tlačidlo skrylo, na telefónoch by sa na stránku Podporte nás
   nedalo z hlavičky dostať vôbec. Na 375 px sa logo + tlačidlo + hamburger
   zmestia. */
@media (max-width: 560px) {
  .header-actions .btn { padding: 9px 14px; font-size: .86rem; }
}
/* Mobilná (off-canvas) navigácia platí až do 1279 px.
   Dôvod: bez tejto hranice sa vodorovné menu spolu s logom a
   tlačidlom „Podporte nás" jednoducho nezmestí a stránka sa dala posúvať do
   strany. Zmenšovať písmo by menu iba stlačilo. Tablety a menšie notebooky
   preto dostanú hamburger. Vedomá odchýlka od pôvodnej špecifikácie
   („hamburger pod 768 px“).

   ⚠ SPÄTÁ VÄZBA NA ROZOSTRENIE HLAVIČKY: `backdrop-filter` na .site-header
   vytvára containing block pre potomkov s position: fixed. Kým tu existuje
   fixed menu, rozostrenie sa NESMIE aplikovať — preto je hore obmedzené na
   (min-width: 1280px). Tieto dve media queries sa musia meniť SPOLU. */
@media (max-width: 1279px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: #fff; padding: 12px 0 40px; overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    /* visibility sa NEDÁ plynule animovať — prepína sa skokom. Bez nej v
       transition zmizlo menu pri zatváraní okamžite a odsun doprava nebolo
       vidieť. Preto je tu s nulovým trvaním a oneskorením .28s: pri zatváraní
       sa skryje až KEĎ odsun dobehne, pri otváraní (nižšie) hneď.
       Záruka ostáva rovnaká — v zatvorenom, ustálenom stave je menu
       visibility: hidden, teda nefokusovateľné a mimo stromu prístupnosti. */
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  body.nav-open .main-nav {
    transform: translateX(0); visibility: visible;
    transition: transform .28s ease, visibility 0s linear 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .main-nav, body.nav-open .main-nav { transition: none; }
  }
  body.nav-open { overflow: hidden; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li { border-bottom: 1px solid var(--border); }
  .main-nav a { padding: 15px 22px; font-size: 1.05rem; border-radius: 0; }
  .has-dropdown > a::after { float: right; transition: transform var(--transition); }
  .has-dropdown.open > a::after { transform: rotate(180deg); }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: none; border-radius: 0; padding: 0; background: var(--bg-alt);
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
  }
  .has-dropdown.open > .dropdown { max-height: 400px; }
  .dropdown a { padding-left: 38px; }
}
/* Obsahové pravidlo — zámerne ostáva na 768 px a NEPOSÚVA sa spolu
   s navigáciou vyššie. Filtre majú na tabletoch stále dosť miesta. */
@media (max-width: 768px) {
  .filter-bar { grid-template-columns: repeat(2, 1fr); }
  /* Rovnaké zmenšenie, aké má aktuality.html na .filter-bar--rows — presunuté
     na spoločnú lištu, aby ho mali všetky tri stránky.
     white-space: normal je tu to podstatné: základné .filter-btn má nowrap,
     čím sa min-content stĺpca rovná šírke najdlhšieho popisu. Na
     nasi-reprezentanti.html je to "Regionálni predstavitelia", takže dva
     stĺpce 1fr sa nedokázali zmenšiť a stránka pretekala o 223px pri 375px
     (38px pri 560px). Popis sa teraz zlomí do dvoch riadkov a lišta sa
     zmestí. Bez overflow-x: hidden. */
  .filter-bar .filter-btn { padding: 9px 8px; font-size: .8rem; white-space: normal; }
}
@media (max-width: 380px) {
  .filter-bar .filter-btn { padding: 9px 4px; font-size: .74rem; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative; color: #fff; text-align: center;
  background-image: url("../images/BG01.webp");
  background-size: cover; background-position: center;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-color: rgba(10, 22, 40, .5);
}
.hero::after {
  content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: radial-gradient(circle at 20% 20%, #fff 0, transparent 40%), radial-gradient(circle at 85% 70%, var(--gold) 0, transparent 45%);
}
.hero-inner { position: relative; z-index: 1; padding: 192px 22px; max-width: 860px; margin: 0 auto; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: .4em; }
.hero p { font-size: clamp(1.05rem, 2vw, 1.35rem); color: #d7e1f3; margin-bottom: 2rem; }
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.page-hero { background: linear-gradient(135deg, var(--navy-dark), var(--navy)); color: #fff; padding: 64px 0; }
.page-hero h1 { color: #fff; margin-bottom: .3em; }
.page-hero p { color: #cdd8ec; font-size: 1.1rem; max-width: 720px; margin: 0; }
.breadcrumb { font-size: .85rem; color: #9fb2d4; margin-bottom: .8rem; }
.breadcrumb a { color: #cdd8ec; }

/* =========================================================
   Cards & grids
   ========================================================= */
.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card .card-icon {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: var(--bg-alt); color: var(--red); font-size: 1.5rem; margin-bottom: 1rem;
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); margin-bottom: 1rem; }
.card .card-foot { margin-top: auto; }
.card-link { font-family: var(--font-heading); font-weight: 600; font-size: .9rem; color: var(--red); }
.card-link::after {
  content: " →"; display: inline-block;
  transition: transform var(--motion-dur) var(--motion-spring);
}
.card:hover .card-link::after,
.card-link:hover::after,
.card-link:focus-visible::after { transform: translateX(3px); }

a.card { color: inherit; }
a.card:hover h3 { color: var(--red); }

/* Result cards (Naše výsledky) */
.result-card { position: relative; transition: opacity .35s ease, border-color 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; transform: translateY(0) scale(1); will-change: opacity, transform; }
.result-card:hover { transform: translateY(-6px) scale(1.025); box-shadow: 0 12px 32px rgba(0,0,0,0.13); }
.result-card .tag {
  display: inline-block; align-self: flex-start; font-size: .72rem; font-weight: 600;
  font-family: var(--font-heading); letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy); background: var(--bg-alt-2); padding: 4px 10px; border-radius: 999px; margin-bottom: .8rem;
}
.result-card.is-match { border-color: var(--red); box-shadow: 0 0 0 2px rgba(212,32,42,.12), var(--shadow); }
.result-card.is-dim { opacity: .45; transform: scale(.96); }
/* transient state while filtering: faded + shrunk + nudged down */
.result-card.is-exiting { opacity: 0; transform: scale(.92) translateY(14px); }

/* Pillar cards */
.pillar-card {
  border-top: 3px solid #1a2a4a;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
  transform: translateY(0) scale(1);
}

.pillar-card:hover {
  border-top-color: var(--clr-accent, #c0152a);
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 12px 32px rgba(0,0,0,0.13);
}
.pillar-card ul { list-style: none; margin-top: .5rem; }
.pillar-card ul li { position: relative; padding-left: 1.4rem; margin-bottom: .4rem; color: var(--muted); font-size: .92rem; }
.pillar-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 700; }

/* Person cards */
.person-card { text-align: center; padding: 0; overflow: hidden; }
.person-photo { aspect-ratio: 3/3.4; background: var(--bg-alt-2); display: grid; place-items: center; color: var(--muted); }
.person-card .person-body { padding: 18px; }
.person-card h3 { margin-bottom: .15rem; }
.person-role { color: var(--red); font-weight: 600; font-size: .9rem; font-family: var(--font-heading); }

/* Krajské kontaktné karty (kontakt.html).
   Fotografický variant prevzatý z pôvodnej regiony.html, kde bol zapísaný
   priamo v inline style atribútoch. Presunutý sem, aby ostal spoločný
   stylesheet jediným zdrojom pravdy pre karty — základné selektory .card
   a .card h3 sa nepredefinujú, rozširuje sa len hlavička karty. */
.kraj-card__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.kraj-card__photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; flex-shrink: 0; }
.kraj-card__head h3 { margin: 0; font-size: 1rem; }

/* News cards */
.news-card { padding: 0; overflow: hidden; }

/* Filtrovací prechod pre Aktuality — rovnaká motion ako na Výsledkoch.
   Prečo to tam nefungovalo: karty sa pri filtrovaní NEPREKRESĽUJÚ (overené —
   0 mutácií DOM), wireResultsFilter() len prepína triedy. Trieda .is-exiting
   teda na .news-card dopadala správne, ale .news-card dedí z .card prechod
   len pre transform a box-shadow (0.2s) — opacity medzi nimi NIE JE, takže
   sa prepla skokom a odstupňované transition-delay nemalo čo odkladať.

   Hodnoty sú prevzaté 1:1 z .result-card: 0.35s (= EXIT v js/main.js),
   rovnaká krivka, rovnaký exit transform. STAGGER = 50ms rieši JS.
   Scope [data-async="sanity"] je len aktuality.html — vysledky.html má
   data-async="sanity-results" a nasi-reprezentanti.html nemá žiadny. */
[data-async="sanity"] .news-card {
  transition: opacity .35s ease,
              transform .35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow .35s ease;
  will-change: opacity, transform;
}
/* .card:hover má rovnakú špecificitu ako [data-async] .is-exiting, preto je
   tu navyše .news-card — inak by pri odchode vyhral hover transform. */
[data-async="sanity"] .news-card.is-exiting { opacity: 0; transform: scale(.92) translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  [data-async="sanity"] .news-card { transition: none; will-change: auto; }
  [data-async="sanity"] .news-card.is-exiting { opacity: 1; transform: none; }
}
.news-thumb { aspect-ratio: 16/9; background: var(--bg-alt-2); display: grid; place-items: center; color: var(--muted); }
.news-card .news-body { padding: 20px; }
.news-meta { font-size: .8rem; color: var(--muted); margin-bottom: .4rem; }

/* =========================================================
   Filter bar
   ========================================================= */
.filter-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 36px; }
.filter-btn {
  font-family: var(--font-heading); font-weight: 500; font-size: .9rem;
  padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--border);
  background: #fff; color: var(--navy); transition: all var(--transition); white-space: nowrap;
}
.filter-btn:hover { border-color: var(--navy); }
.filter-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* =========================================================
   Stat / fact figures
   ========================================================= */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; }

/* Štatistické karty (index.html, sekcia "Silní v regiónoch").
   Modifikátor .facts--cards, nie .facts — .facts sa používa aj na
   vysledok-*.html (varianta .facts--inline), tá musí ostať nedotknutá.
   Sekcia je navy, preto priesvitná výplň + priesvitný okraj namiesto bielej
   karty: rovnaký radius a padding ako .card, aby to bol ten istý dizajn. */
.facts--cards { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.facts--cards .fact {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  padding: 26px 18px;
  transition: background var(--transition), border-color var(--transition);
}
.facts--cards .fact:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); }
.facts--cards .num { line-height: 1.1; margin-bottom: .35rem; font-variant-numeric: tabular-nums; }
.facts--cards .label { line-height: 1.35; }

@media (max-width: 900px) { .facts--cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .facts--cards { gap: 14px; } .facts--cards .fact { padding: 20px 12px; } }

/* Nábeh kariet. Trieda .js-anim pridáva až JS — bez JS ostávajú karty
   viditeľné a čísla sú tie správne (sú priamo v HTML, JS ich len animuje). */
.facts--cards.js-anim .fact { opacity: 0; transform: translateY(14px); }
.facts--cards.js-anim .fact.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .facts--cards.js-anim .fact { opacity: 1; transform: none; transition: none; }
}
.fact .num { font-family: var(--font-heading); font-weight: 700; font-size: 2.4rem; color: var(--red); }
.fact .label { color: var(--muted); font-size: .92rem; }
.section--navy .fact .num { color: var(--gold); }
.section--navy .fact .label { color: #cdd8ec; }

/* =========================================================
   Timeline
   ========================================================= */
.timeline { position: relative; max-width: 760px; margin: 0 auto; padding-left: 32px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: 30px; }
.timeline-item::before { content: ""; position: absolute; left: -32px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--red); }
.timeline-item .year { font-family: var(--font-heading); font-weight: 700; color: var(--navy); }

/* =========================================================
   Testimonials
   ========================================================= */
.quote-card { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--navy); }
.quote-card blockquote { margin: 0 0 1rem; font-size: 1.05rem; font-style: italic; color: var(--text); }
.quote-author { font-family: var(--font-heading); font-weight: 600; color: var(--navy); font-size: .92rem; }
.quote-author span { display: block; color: var(--muted); font-weight: 400; font-size: .82rem; }

/* =========================================================
   Forms
   ========================================================= */
.form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-family: var(--font-heading); font-weight: 500; font-size: .88rem; color: var(--navy); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--text);
  transition: border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); }
.field textarea { min-height: 130px; resize: vertical; }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.checkbox-row { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--muted); }
.checkbox-row input { margin-top: .25rem; }

/* =========================================================
   Misc blocks
   ========================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.media-placeholder { background: var(--bg-alt-2); border-radius: var(--radius); display: grid; place-items: center; min-height: 320px; color: var(--muted); font-size: .9rem; text-align: center; padding: 20px; }
.doc-list { list-style: none; display: grid; gap: 12px; }
.doc-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; transition: box-shadow var(--transition); }
.doc-item:hover { box-shadow: var(--shadow-sm); }
.doc-item .doc-icon { font-size: 1.4rem; color: var(--red); }
.doc-item .doc-meta { font-size: .82rem; color: var(--muted); }
.doc-item .doc-dl { margin-left: auto; font-family: var(--font-heading); font-weight: 600; font-size: .85rem; color: var(--navy); }

.todo {
  display: inline-block; font-family: var(--font-heading); font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #8a6d00; background: #fff4cc;
  border: 1px dashed #d9b400; padding: 2px 8px; border-radius: 6px;
}
.note-box { background: var(--bg-alt); border-left: 4px solid var(--navy); border-radius: var(--radius-sm); padding: 16px 20px; color: var(--muted); font-size: .92rem; }

.checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
.checklist li { position: relative; padding-left: 1.7rem; margin-bottom: .55rem; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--red); font-weight: 700; }

.cta-band { background-color: #6b1212; background-image: linear-gradient(to bottom, rgba(107,18,18,0) 0%, rgba(26,42,74,0.6) 100%), url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E"); background-size: auto, 200px 200px; color: #fff; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #ffe2e3; }
/* Tri tlačidlá v páse "Ako môžete pomôcť" sa pod 560px aj tak lámu každé na
   vlastný riadok, len s rôznou šírkou podľa dĺžky popisu — čo pôsobí neupravene.
   Na celú šírku kontajnera sú rovnaké, majú väčšiu dotykovú plochu a sedí to
   k tlačidlu pod kartami výsledkov, ktoré je celo-šírkové tiež.
   Zámerne cez .cta-band .hero-cta — samotná .hero-cta je aj hero sekcia
   na index.html a tá sa meniť nemá. */
/* Hranica posunutá z 560px na 768px: medzi ~561 a ~800px sa tri tlačidlá
   lámali 2+1 v prirodzených šírkach, čo bolo rovnako neupravené ako pod 560px.
   768px je existujúca hranica v tomto súbore. Desktop ostáva nezmenený. */
@media (max-width: 768px) {
  .cta-band .hero-cta { flex-direction: column; align-items: stretch; }
  .cta-band .hero-cta .btn { width: 100%; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--navy-dark); color: #b9c6e0; padding: 56px 0 28px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 36px; }
.site-footer h4 { color: #fff; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: #b9c6e0; }
.site-footer a:hover { color: #fff; }
.footer-links { list-style: none; display: grid; gap: .5rem; }
.footer-brand img { height: 56px; margin-bottom: 1rem; }
.social-row { display: flex; gap: 12px; margin-top: 1rem; }
.social-row a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #fff; font-size: .85rem; font-weight: 600; }
.social-row a:hover { background: var(--red); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .82rem; color: #8497ba; }

/* =========================================================
   Utilities
   ========================================================= */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.center-btn { display: flex; justify-content: center; margin-top: 40px; }
.tag-pdf { color: var(--red); font-weight: 600; }
.qr-box { width: 160px; height: 160px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--muted); font-size: .8rem; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .section { padding: 52px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-inner { padding: 136px 22px; }
  /* Podpis sa na mobile predtým skrýval a v hlavičke ostávalo len slovo "SNS".
     Keďže "SNS" z lockupu odchádza, musí sa podpis naopak zobraziť — inak by
     na telefóne ostal holý emblém bez akéhokoľvek názvu strany. Pri 375px je
     medzi ním a červeným tlačidlom len ~3px, preto je tu o niečo menší a s
     užším prestrkom; ostáva trojriadkový ako na desktope. */
  .brand-text span { display: block; font-size: .62rem; letter-spacing: .08em; }
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero-spotlight {
  position: absolute;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180,210,255,0.12) 0%, rgba(100,160,255,0.06) 30%, transparent 65%);
  pointer-events: none;
  z-index: 2;
  animation: spotlight-drift 18s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  top: -200px;
  left: -200px;
  mix-blend-mode: screen;
}

@keyframes spotlight-drift {
  0%   { transform: translate(0%,   0%); }
  20%  { transform: translate(80%,  20%); }
  40%  { transform: translate(60%,  70%); }
  60%  { transform: translate(20%,  80%); }
  80%  { transform: translate(10%,  30%); }
  100% { transform: translate(0%,   0%); }
}

.hero-inner {
  position: relative;
  z-index: 3;
}

.page-hero--aurora {
  position: relative;
  overflow: hidden;
  background: #08142e;
}

.page-hero--aurora .breadcrumb,
.page-hero--aurora .breadcrumb a {
  color: rgba(255,255,255,0.5);
}

.page-hero--aurora h1 {
  color: #ffffff;
}

.page-hero--aurora p {
  color: rgba(255,255,255,0.75);
}

.page-hero--aurora .container {
  position: relative;
  z-index: 2;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 1;
  will-change: transform;
}

.aurora-blob--1 {
  width: 700px;
  height: 400px;
  background: rgba(30, 80, 200, 0.45);
  top: -80px;
  left: 52%;
  animation: aurora-drift-1 14s ease-in-out infinite alternate;
}

.aurora-blob--2 {
  width: 500px;
  height: 350px;
  background: rgba(70, 30, 170, 0.4);
  top: -60px;
  left: -150px;
  animation: aurora-drift-2 18s ease-in-out infinite alternate;
}

.aurora-blob--3 {
  width: 400px;
  height: 300px;
  background: rgba(0, 120, 180, 0.3);
  bottom: -100px;
  right: -50px;
  animation: aurora-drift-3 16s ease-in-out infinite alternate;
}

@keyframes aurora-drift-1 {
  0%   { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  33%  { transform: translate(100px, 38px) rotate(15deg) scale(1.13); }
  66%  { transform: translate(50px, 75px) rotate(-10deg) scale(0.94); }
  100% { transform: translate(150px, 25px) rotate(25deg) scale(1.06); }
}

@keyframes aurora-drift-2 {
  0%   { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  33%  { transform: translate(-75px, 50px) rotate(-19deg) scale(1.1); }
  66%  { transform: translate(-125px, 12px) rotate(13deg) scale(0.9); }
  100% { transform: translate(-50px, 63px) rotate(-25deg) scale(1.13); }
}

@keyframes aurora-drift-3 {
  0%   { transform: translate(0px, 0px) rotate(0deg) scale(1); }
  33%  { transform: translate(63px, -38px) rotate(10deg) scale(1.15); }
  66%  { transform: translate(-50px, -25px) rotate(-15deg) scale(0.88); }
  100% { transform: translate(38px, -63px) rotate(19deg) scale(1.08); }
}

/* ── Hero entrance animation sequence ── */
@keyframes hero-overlay-out {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-reveal-overlay {
  position: absolute;
  inset: 0;
  background: #050f22;
  z-index: 10;
  pointer-events: none;
  animation: hero-overlay-out 1.0s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}

#hero-img-wrap {
  animation: hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
  /* The inline script sizes this box from the hidden measuring heading
     (#hero-heading). That heading is position:absolute, so its shrink-to-fit
     width is capped by .hero-inner's PADDING box, while this box lives in the
     CONTENT box — 44px narrower. Below ~430px the heading text hits that cap,
     the script writes a width 22px wider than the container, `margin: 0 auto`
     can no longer centre an over-wide box, and the logo card hangs 11px to the
     right of the heading and buttons. Capping it here lets it shrink back into
     the content box at every width; above ~430px the measured width is already
     smaller, so desktop is untouched. */
  max-width: 100%;
}

.hero-inner > h1:not(#hero-heading) {
  animation: hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}

.hero-inner > p {
  animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.45s both;
}

.hero .hero-cta .btn:first-child {
  animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.75s both;
}

.hero .hero-cta .btn:last-child {
  animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.95s both;
}

/* ── Results teaser section entrance (continues hero sequence) ── */
#results-teaser .section-head {
  animation: hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.5s both;
}

#results-teaser .result-card:nth-child(1) {
  animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 2.8s both;
}

#results-teaser .result-card:nth-child(2) {
  animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 2.95s both;
}

#results-teaser .result-card:nth-child(3) {
  animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 3.1s both;
}

#results-teaser .result-card:nth-child(4) {
  animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 3.25s both;
}

#results-teaser .result-card:nth-child(5) {
  animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 3.4s both;
}

#results-teaser .result-card:nth-child(6) {
  animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 3.55s both;
}

#results-teaser .center-btn {
  animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) 3.75s both;
}

/* "Pozrite si VŠETKY naše úspechy" spans the card grid above it, so its edges
   line up with the first and last card. Scoped to this one section — the same
   .btn.btn-lg markup is used for "Všetky aktuality", the vysledok pagers and
   the CTA band, and none of those should change width. .center-btn is already
   a flex row, so flex-grow is enough; .btn keeps justify-content: center, so
   the label stays centred. When the grid collapses to one column the button
   matches a single card, which is the intended behaviour. */
#results-teaser .center-btn .btn { flex: 1 1 auto; }

/* Typeform embed — výška.
   Výšku už neurčujeme my. Embed je vytvorený cez tf.createWidget()
   (js/survey-embed.js) s autoResize:true + inlineOnMobile:true, takže si
   kontajneru nastavuje výšku sám Typeform podľa práve zobrazenej otázky.
   Pevná výška (520px na desktope, 680px pod 560px) bola presne to, čo
   spôsobovalo orezané tlačidlo OK na skutočnom iPhone: karta bola vyššia
   než použiteľný viewport, takže sa musela posúvať pod fixnú hlavičku.

   Necháme tu iba min-height, aby pred načítaním formulára nevznikol skok
   layoutu ani nulová výška; akonáhle Typeform pošle svoju výšku, jeho
   inline štýl toto pravidlo prebije. Na iframe žiadnu výšku nedávame. */
#survey-section .tf-survey { width: 100%; min-height: 520px; display: flex; }

/* Typeform si do kontajnera vloží vlastný wrapper, ktorý má height:auto —
   bez tohto by <iframe> spadol na svoju predvolenú výšku 150px. Kontajner je
   preto flex: wrapper sa roztiahne na jeho výšku (a tú riadi autoResize) a
   iframe ju vyplní na 100 %. Žiadna pevná hodnota v px tu už nie je. */
#survey-section .tf-survey > div { flex: 1 1 auto; min-width: 0; width: 100%; }
#survey-section .tf-survey iframe { display: block; width: 100%; height: 100%; }

#survey-section .container {
  position: relative;
  z-index: 2;
}

.survey-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  z-index: 1;
  will-change: transform;
}

.survey-blob--center {
  width: 720px;
  height: 280px;
  background: rgba(30, 80, 200, 0.38);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: survey-drift-center 14s ease-in-out infinite alternate;
}

.survey-blob--left {
  width: 480px;
  height: 420px;
  background: rgba(70, 30, 170, 0.35);
  top: -80px;
  left: -150px;
  animation: aurora-drift-2 18s ease-in-out infinite alternate;
}

.survey-blob--right {
  width: 420px;
  height: 360px;
  background: rgba(0, 120, 180, 0.28);
  bottom: -80px;
  right: -100px;
  animation: aurora-drift-3 16s ease-in-out infinite alternate;
}

@keyframes survey-drift-center {
  0%   { transform: translate(-50%, -50%) scale(1); }
  33%  { transform: translate(-50%, -42%) scale(1.06); }
  66%  { transform: translate(-50%, -56%) scale(0.96); }
  100% { transform: translate(-50%, -46%) scale(1.04); }
}

.vysledok-arrow {
  position: absolute;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  padding: 0.5rem;
  z-index: 3;
  top: 0;
}

.vysledok-arrow:hover { color: #fff; }
.vysledok-arrow--hidden { opacity: 0; pointer-events: none; }

/* =========================================================
   Aktuality — article detail pages (aktualita-*.html)
   All new selectors; nothing here overrides existing rules.
   Sidebar + prev/next markup is generated by injectArticleNav()
   in js/main.js from the ARTICLES array.
   ========================================================= */
.article-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }

/* Type chip in the hero */
.article-tag {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: .9rem;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 600; font-size: .75rem;
  letter-spacing: .05em; text-transform: uppercase;
}
.article-tag--press   { background: #fff; color: var(--navy); }
.article-tag--regiony { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.article-tag--video   { background: var(--red); color: #fff; }
.article-meta { color: #cdd8ec; font-size: .9rem; font-family: var(--font-heading); }

/* Media well */
.article-media { position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.75rem; background: var(--bg-alt-2); }
.article-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.article-media figcaption { padding: 10px 14px; font-size: .8rem; color: var(--muted); background: var(--bg-alt); }
.article-media--video::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(7,30,66,0) 50%, rgba(7,30,66,.55) 100%);
}
.article-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 76px; height: 76px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(212,32,42,.94); display: grid; place-items: center;
  box-shadow: 0 6px 26px rgba(0,0,0,.4); transition: transform .25s ease, background .25s ease;
}
.article-play:hover { transform: translate(-50%,-50%) scale(1.08); background: var(--red); }
.article-duration {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(7,30,66,.85); color: #fff; padding: 5px 10px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 600; font-size: .75rem; font-variant-numeric: tabular-nums;
}

/* Press: official document download block */
.article-doc {
  display: flex; align-items: center; gap: 14px; margin: 1.75rem 0;
  padding: 16px 18px; border: 1px solid var(--border); border-left: 4px solid var(--red);
  border-radius: var(--radius-sm); background: var(--bg-alt);
}
.article-doc .doc-icon { color: var(--red); flex-shrink: 0; }
.article-doc .doc-name { font-family: var(--font-heading); font-weight: 600; font-size: .92rem; }
.article-doc .doc-sub { font-size: .8rem; color: var(--muted); }
.article-doc .btn { margin-left: auto; }

/* Prev / next */
.article-prevnext {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border);
}
.article-nav-link {
  display: flex; flex-direction: column; gap: 5px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  text-decoration: none; background: #fff;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.article-nav-link:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.article-nav-link.is-empty { border: none; background: none; }
.article-nav-link--next { text-align: right; }
.article-nav-link .nav-dir { font-family: var(--font-heading); font-weight: 600; font-size: .75rem; color: var(--red); letter-spacing: .04em; }
.article-nav-link .nav-title { font-size: .9rem; color: var(--navy); font-weight: 500; line-height: 1.35; }

/* Sidebar */
.article-aside { position: sticky; top: calc(var(--header-h) + 20px); }
.aside-head {
  font-family: var(--font-heading); font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
  padding-bottom: .7rem; margin-bottom: .3rem; border-bottom: 2px solid var(--red);
}
.aside-list { list-style: none; margin: 0; padding: 0; }
.aside-list li { border-bottom: 1px solid var(--border); }
.aside-item { display: flex; gap: 12px; padding: 13px 0; text-decoration: none; align-items: flex-start; }
.aside-thumb { position: relative; width: 84px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-alt-2); }
.aside-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; transition: transform .3s ease; }
.aside-item:hover .aside-thumb img { transform: scale(1.07); }
.aside-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 22px; height: 22px; border-radius: 50%; background: rgba(212,32,42,.92);
}
.aside-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%);
  border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent #fff;
}
.aside-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aside-label { font-family: var(--font-heading); font-weight: 600; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; }
.aside-label--tlacove { color: var(--red); }
.aside-label--video   { color: var(--red); }
.aside-label--regiony { color: var(--navy); }
.aside-title { font-size: .84rem; line-height: 1.3; color: var(--text); font-weight: 500; }
.aside-item:hover .aside-title { color: var(--red); }
.aside-date { font-size: .72rem; color: var(--muted); }
.aside-all {
  display: inline-block; margin-top: 1rem;
  font-family: var(--font-heading); font-weight: 600; font-size: .82rem;
  color: var(--red); text-decoration: none;
}
.aside-all:hover { text-decoration: underline; }

@media (max-width: 960px) {
  .article-layout { grid-template-columns: 1fr; gap: 36px; }
  .article-aside { position: static; }
}
@media (max-width: 560px) {
  .article-prevnext { grid-template-columns: 1fr; }
  .article-nav-link--next { text-align: left; }
  .article-nav-link.is-empty { display: none; }
  .article-doc { flex-wrap: wrap; }
  .article-doc .btn { margin-left: 0; width: 100%; text-align: center; }
}

/* Aktuality — real video embed (replaces the .article-media placeholder on video posts) */
.article-embed { position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: 1.75rem; background: #000; }
.article-embed iframe { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }
.article-source {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -0.75rem 0 1.75rem; font-size: .8rem; color: var(--muted);
}
.article-source a { color: var(--red); text-decoration: none; font-weight: 500; }
.article-source a:hover { text-decoration: underline; }

/* Aktuality — by-line of the article text itself (distinct from the WP uploader) */
.article-byline {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-family: var(--font-heading); font-weight: 600; font-size: .88rem; color: var(--navy);
}

/* Aktuality — general news type (gold accent; the other four types own navy/white/red) */
.article-tag--aktuality { background: var(--gold); color: var(--navy); }
.aside-label--aktuality { color: #8a6d2f; }

/* =========================================================
   Aktuality — detail page layout refinements
   Replaces the earlier .article-layout / .article-nav-link rules below,
   which are still in the file above; these win by source order.
   ========================================================= */

/* Cap the measure at ~68ch for readability, and centre the whole
   main+sidebar pair in the container rather than letting main sprawl. */
.article-layout {
  grid-template-columns: minmax(0, 720px) 300px;
  gap: 56px;
  justify-content: center;
}
.article-main { min-width: 0; }
.article-main > p {
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0 0 1.15rem;
  color: var(--text);
}
.article-main > p.lead {
  font-size: 1.14rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 1.4rem;
}
.article-main > h3 { margin: 2.1rem 0 .8rem; }
.article-main > h3:first-child { margin-top: 0; }
/* .article-media is a <figure> on the press/regiony/aktuality templates, and
   the UA stylesheet gives every figure margin-inline: 40px — which inset the
   media 40px on both sides and made it read as centred against the flush-left
   title, body and buttons. The video templates use a <div> (.article-embed)
   and were already flush, so zeroing the inline margins aligns all four types
   on the same left edge. Vertical spacing is deliberately left alone. */
.article-media, .article-embed { margin-left: 0; margin-right: 0; margin-bottom: 2rem; }
.article-media img { width: 100%; display: block; }

/* Prev / next — thumbnail + direction + title, mirrored for "next" */
.article-nav-link {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px;
}
.article-nav-link--next { flex-direction: row-reverse; text-align: right; }
.article-nav-link .nav-thumb {
  width: 72px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-alt-2);
}
.article-nav-link .nav-thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.article-nav-link:hover .nav-thumb img { transform: scale(1.07); }
.article-nav-link .nav-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.article-nav-link .nav-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1080px) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 36px; }
}
@media (max-width: 960px) {
  .article-layout { grid-template-columns: minmax(0, 720px); justify-content: center; }
}
@media (max-width: 560px) {
  .article-nav-link--next { flex-direction: row; text-align: left; }
  .article-main > p { font-size: 1rem; line-height: 1.7; }
}

/* =========================================================
   Aktuality — article footer
   Order: grey divider, then the full-width "Späť na Aktuality" button,
   then the prev/next pair. The divider used to be .article-prevnext's own
   border-top, which forced the button to sit above the line; it now belongs
   to the wrapper so the button can sit below it.
   .center-btn is deliberately NOT reused here — it is shared with the 20
   vysledok-* pages and centres a natural-width button.
   ========================================================= */
.article-foot {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
/* Full width == the prev+next grid below it, since both share this wrapper. */
.article-back {
  display: flex;
  width: 100%;
  margin-bottom: 16px;
}
/* Divider + top spacing moved up to .article-foot. */
.article-prevnext { margin-top: 0; padding-top: 0; border-top: none; }


/* =========================================================
   Okresné kontakty (kontakt.html) — kompaktný zoznam v karte.
   Rovnaký vzhľad karty ako v "Regionálne kontakty", ale hustejší obsah:
   pri ~75 okresoch by plnohodnotné karty stránku neúmerne predĺžili.
   Vykresľuje js/okresne.js, ktorý je spoločný s nasi-reprezentanti.html.
   ========================================================= */
.okres-card { padding: 0; overflow: hidden; }
.okres-card:hover { transform: none; box-shadow: var(--shadow-sm); }
.okres-card h3 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0; padding: 14px 20px; background: var(--navy); color: #fff;
  border-bottom: 3px solid var(--red); font-size: 1rem;
}
.okres-card-count {
  font-size: .72rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.72); white-space: nowrap;
}
.okres-rows { list-style: none; margin: 0; padding: 0; }
.okres-row {
  display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 4px 14px;
  align-items: baseline; padding: 9px 20px; border-top: 1px solid var(--border);
}
.okres-row:first-child { border-top: 0; }
.okres-row-name { font-family: var(--font-heading); font-weight: 600; font-size: .88rem; color: var(--navy); }
.okres-row-person { font-size: .85rem; color: var(--muted); }
.okres-row-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.okres-row-contact a { font-size: .8rem; color: var(--red); text-decoration: none; white-space: nowrap; }
.okres-row-contact a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .okres-row { grid-template-columns: 1fr; }
  .okres-row-contact { align-items: flex-start; }
}

/* =========================================================
   TEASER CARDS — "Aktuálne dianie" (index.html) a
   "Lokálne aktuality a podujatia" (regiony.html)

   Tieto pravidlá boli pôvodne zdvojené v <style> bloku index.html, pretože
   regiony.html používalo tie isté triedy pre prázdny box „Foto" bez <img> a
   spoločné pravidlá by mu zmenili vzhľad. Odkedy regiony.html načítava karty
   zo Sanity rovnakým cardHtml(), tento dôvod zanikol — a tretia kópia toho
   istého CSS by bola horšia než presun sem.

   aktuality.html si naďalej drží vlastnú (rozšírenú) kópiu vo svojom <style>;
   tá je neskôr v poradí, takže na tej stránke vyhráva.
   ========================================================= */
/* Stav načítania / prázdny stav teaseru. Definujú si ho aj index.html a
   aktuality.html vo vlastnom <style> (rovnaké hodnoty); tu je preto, aby ho
   mala aj regiony.html. */
.grid-empty {
  grid-column: 1 / -1;
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-heading);
}

.news-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--bg-alt-2);
  z-index: 2; /* obrázok-odkaz zostáva nad klikacou vrstvou karty */
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.news-card:hover .news-thumb img { transform: scale(1.05); }
.news-card .news-body { display: flex; flex-direction: column; flex: 1; }
.news-card h3 { font-size: 1.02rem; line-height: 1.35; }
.news-card p { font-size: 0.9rem; line-height: 1.55; }
.news-card .card-link { margin-top: auto; }

/* Spoločný obal odznaku */
.news-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.news-badge svg { flex-shrink: 0; }

.news-badge--region { left: 10px; bottom: 10px; background: rgba(11, 42, 91, 0.86); color: #fff; }
.news-badge--press {
  left: 10px;
  top: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: var(--shadow-sm);
}
.news-badge--aktuality { left: 10px; bottom: 10px; background: var(--gold); color: var(--navy); }
.news-badge--duration {
  right: 10px;
  bottom: 10px;
  background: rgba(7, 30, 66, 0.85);
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Video: stmavenie, prehrávacie tlačidlo */
.news-card--video .news-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,30,66,0) 45%, rgba(7,30,66,0.6) 100%);
  z-index: 1;
}
.news-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(212, 32, 42, 0.92);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  transition: transform 0.25s ease, background 0.25s ease;
}
.news-play svg { margin-left: 3px; } /* optické vycentrovanie trojuholníka */
.news-card--video:hover .news-play {
  transform: translate(-50%, -50%) scale(1.09);
  background: var(--red);
}

/* Tlačová správa — riadok akcií a odkaz na PDF pod textom karty. */
.news-actions { margin-top: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.news-actions .card-link { margin-top: 0; }
.news-file {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition);
}
.news-file:hover { color: var(--red); }
.news-file .file-meta { opacity: 0.7; font-weight: 400; }

/* Klikateľná celá karta.
   CTA odkaz sa roztiahne cez celú kartu namiesto JS click handlera — zachová
   sa tak správanie skutočného odkazu (stredné tlačidlo, nová karta, fokus
   klávesnicou). Čokoľvek musí zostať samostatne klikateľné, sedí nad ním na
   z-index 2.

   Dve veci, ktoré toto pravidlo musí mať správne:
   1. .news-card potrebuje position:relative. Bez toho nemá prekrytie
      polohovaného predka, počíta sa voči úvodnému bloku a zakryje celé okno —
      spolkne každý klik na filtri aj v archíve.
   2. Použiť ::before, nie ::after. .card-link::after už vlastní šípku „ →"
      a prepísanie jeho content na "" by šípku potichu zmazalo. */
.news-card { position: relative; }
.news-card .card-link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.news-card:hover { cursor: pointer; }
/* Odkaz na PDF nesmie navigovať na článok. */
.news-file { position: relative; z-index: 2; }

/* Farebné odlíšenie typov — 3px linka hore a jemný tón tela karty.
   Podujatia a karta najbližšieho podujatia MUSIA byť v tomto zozname: každá
   stránka prepisuje .news-card { border-top: … transparent } a bez záznamu tu
   by ich červená linka nikdy nenabehla. */
.news-card { border-top: 3px solid transparent; }
.news-card--region     { border-top-color: var(--navy); }
.news-card--press      { border-top-color: var(--red); }
.news-card--video      { border-top-color: var(--navy-light); }
.news-card--aktuality  { border-top-color: var(--gold); }
.news-card--podujatie  { border-top-color: var(--red); }
.news-card--next-event { border-top-color: var(--red); }

.news-card--region .news-body    { background: rgba(11, 42, 91, 0.022); }
.news-card--press .news-body     { background: rgba(212, 32, 42, 0.022); }
.news-card--video .news-body     { background: rgba(20, 57, 122, 0.022); }
.news-card--aktuality .news-body { background: rgba(200, 162, 74, 0.05); }

/* =========================================================
   PODUJATIA — event cards, adaptive posters, generated placeholder
   Shared by aktuality.html (grid + detail), index.html and regiony.html,
   so it lives here rather than in any page's scoped <style>.
   ========================================================= */

/* ---------- Card accent ---------- */
.news-card--podujatie .news-body { background: rgba(212, 32, 42, 0.022); }

/* ---------- Media box ----------
   The poster decides the height, so the event thumb drops the shared 16/9
   aspect-ratio and lets its child size it. The child always carries an explicit
   aspect-ratio (from Sanity metadata), so the box is the right height on first
   paint — nothing reflows when the image arrives. */
.news-thumb--event { aspect-ratio: auto; display: block; position: relative; overflow: hidden; }
/* Event posters are shown whole on purpose (§10) — the shared hover zoom would
   crop the very edges we went to the trouble of keeping. Lives here rather than
   on aktuality.html so the homepage and Regióny event cards behave the same. */
.news-card:hover .news-thumb--event img { transform: none; }
.event-poster { display: block; position: relative; width: 100%; }
.event-poster--img { background: var(--navy-dark); }
.event-poster--img img { width: 100%; height: 100%; display: block; }
/* Square and vertical posters show whole; only wide ones are cropped to 16/9. */
.event-poster--img.is-wide img { object-fit: cover; }

/* ---------- Generated placeholder ----------
   Most events have no artwork. A stock photo on a real invitation could be read
   as a photograph OF the event, so this is deliberately typographic: navy
   panel, the word PODUJATIE, a red rule, the date. No uploaded asset. */
.event-poster--blank {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px;
  text-align: center;
}
.event-poster__word {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.6vw, 1.42rem);
  letter-spacing: 0.2em;
  text-indent: 0.2em; /* offset the trailing letter-space so it reads centred */
  color: #fff;
  line-height: 1;
}
.event-poster__rule { width: 44px; height: 3px; background: var(--red); border-radius: 2px; }
.event-poster__date {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Badges ---------- */
.news-badge--event {
  left: 10px;
  top: 10px;
  background: var(--red);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.news-badge--event-past {
  left: 10px;
  top: 10px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
/* Past events stay in the archive but read as finished rather than upcoming. */
.news-card.is-past-event .event-poster { filter: saturate(0.5) brightness(0.92); }

/* ---------- Card meta: date + location ---------- */
.news-meta--event {
  color: var(--navy);
  font-weight: 600;
  font-family: var(--font-heading);
  font-size: .82rem;
}

/* ---------- Ragged bottoms ----------
   Posters differ in height, so cards size to their own content instead of being
   stretched to the tallest in the row. A stretched square card with a large
   empty gap under it reads as broken; a ragged bottom reads as intended.

   Scoped to the Aktuality grid on purpose: [data-filter-grid] is also used by
   vysledky.html and nasi-reprezentanti.html, whose cards must keep their
   existing equal-height layout. */
[data-filter-grid][data-async="sanity"] { align-items: start; }

/* ---------- Detail page ---------- */
.event-detail__poster { margin: 0 0 22px; }
.event-detail__poster img { width: 100%; height: auto; border-radius: var(--radius-sm); }
/* A vertical A4 invitation at full column width is taller than the screen —
   hold portrait posters to a comfortable reading width instead. */
.event-detail__poster.is-portrait { max-width: 460px; }

.event-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 26px;
  padding: 18px 20px;
  background: var(--bg-alt);
  border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
}
.event-detail__row { display: flex; align-items: center; gap: 11px; }
.event-detail__icon { display: inline-flex; color: var(--red); flex-shrink: 0; }
.event-detail__val {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy);
}
.event-detail__past {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .04em;
}
.event-detail.is-past { border-left-color: var(--navy); }

/* Sidebar / prev-next stand-in for events with no poster. */
.mini-poster {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #fff;
}

/* =========================================================
   HOMEPAGE — "Najbližšie podujatie" card (4th cell)
   Navy body against three white article cards, so it reads as an event at a
   glance. Navy and red only — no new colour is introduced.
   ========================================================= */
.news-card--next-event .news-body {
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.news-card--next-event h3 { color: #fff; margin: 0; }
.news-card--next-event .card-link { color: #fff; margin-top: auto; padding-top: 6px; }
.news-card--next-event .card-link:hover { color: var(--gold); }
.next-event__eyebrow {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.next-event__row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: .88rem;
  color: rgba(255, 255, 255, 0.92);
}
.next-event__row svg { flex-shrink: 0; color: #fff; opacity: .75; }

/* =========================================================
   MOTION SYSTEM
   Odhaľovanie sekcií pri scrollovaní + mikro-interakcie.

   Princíp: bez JS sa NIČ neskrýva. Trieda .js-anim na <html> pridáva až JS
   (js/main.js -> initReveal), takže vypnutý JS, nefunkčný IntersectionObserver
   aj prefers-reduced-motion znamenajú, že je všetko rovno viditeľné.
   Nikdy sa nesmie do CSS dostať opacity: 0 bez tejto podmienky.
   ========================================================= */

/* ---- Signature: "pravítko sa nakreslí" ----
   2px linka v šírke nadpisového štítku, ktorá sa vykreslí zľava doprava.
   currentColor = červená na svetlých sekciách, zlatá na navy — teda existujúca
   akcentová logika webu, nie nová farba. Pokojový stav je scaleX(1), takže bez
   JS je to proste statická linka. */
.eyebrow::after,
.doc-category h2::after {
  content: ""; display: block; width: 100%; height: 2px;
  margin-top: .45rem; background: currentColor;
  transform: scaleX(1); transform-origin: left center;
}
/* Na .eyebrow funguje currentColor (štítok je už červený/zlatý). Nadpis
   kategórie je ale navy, takže by pravítko zdedilo navy a motív by sa
   stratil — tu je akcent určený explicitne. */
.doc-category h2::after { width: 34px; background: var(--red); }

/* ---- Reveal ---- */
html.js-anim [data-reveal] { opacity: 0; transform: translateY(14px); }
html.js-anim [data-reveal].is-revealed {
  opacity: 1; transform: none;
  transition: opacity var(--motion-dur) ease,
              transform var(--motion-dur) var(--motion-enter);
  transition-delay: var(--reveal-delay, 0ms);
}
/* Nad ohybom: viditeľné hneď pri prvom vykreslení, bez prechodu. */
html.js-anim [data-reveal].is-instant { transition: none; }

/* Pravítko sa kreslí až po prílete bloku (+140ms), aby to bolo gesto, nie šum. */
html.js-anim [data-reveal] .eyebrow::after,
html.js-anim [data-reveal].doc-category h2::after { transform: scaleX(0); }
html.js-anim [data-reveal].is-revealed .eyebrow::after,
html.js-anim [data-reveal].is-revealed.doc-category h2::after {
  transform: scaleX(1);
  transition: transform var(--motion-dur) var(--motion-enter);
  transition-delay: calc(var(--reveal-delay, 0ms) + 140ms);
}
html.js-anim [data-reveal].is-instant .eyebrow::after,
html.js-anim [data-reveal].is-instant.doc-category h2::after { transition: none; }

/* ---- Mikro-interakcia: stlačenie tlačidla ---- */
.btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  html.js-anim [data-reveal],
  html.js-anim [data-reveal].is-revealed { opacity: 1; transform: none; transition: none; }
  html.js-anim [data-reveal] .eyebrow::after,
  html.js-anim [data-reveal].doc-category h2::after { transform: scaleX(1); transition: none; }
  .card-link::after { transition: none; }
  .card:hover .card-link::after, .card-link:hover::after { transform: none; }
  .btn:active { transform: none; }
}