/* ==========================================================================
   Erika Pastorakova — kandidatka na rektorku EU v Bratislave
   Dizajnovy system. Farebnost je odvodena od EUBA (navy #183768 / tyrkys
   #00ADBE), ale posunuta: tmavsia, teplejsia, s okrovym akcentom — aby bola
   prislusnost k univerzite citatelna, no stranka sa netvarila ako oficialny
   web EUBA.
   ========================================================================== */
/* ---------- Tokens ---------- */
:root{
  /* Zakladna paleta */
  --ink:        #0E2444;   /* hlboka navy — zaklad (EUBA #183768 stmavena)   */
  --ink-800:    #142E56;
  --ink-600:    #234C8A;
  --ink-400:    #4B72AE;
  --ink-200:    #A8BEDC;   /* svetla modra — bary grafov                    */

  --teal:       #0F8FA1;   /* institucionalny akcent (EUBA #00ADBE stlmeny) */
  --teal-600:   #0B7686;
  --teal-800:   #085C69;
  --teal-100:   #D6EDF0;

  --gold:       #A97A2C;   /* teply akcent — odlisujuci prvok               */
  --gold-400:   #C9A75E;
  --gold-100:   #F0E6D2;

  --paper:      #F5F7FA;   /* studeny papier — odtien odvodeny z navy       */
  --paper-2:    #ECF0F6;
  --paper-3:    #E1E8F1;
  --white:      #FFFFFF;

  /* Grafy — menit len tu, HTML pouziva iba tieto dve premenne */
  --chart-bar:  var(--ink-200);
  --chart-hi:   var(--ink);

  --text:       #17212E;
  --muted:      #5A6675;
  --line:       #D8E1EB;
  --line-soft:  #E8EDF4;

  /* Typografia */
  --serif: 'Literata', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-display: clamp(1.6rem, 2.9vw, 2.2rem);  /* hero drzi 2 riadky: dlhsi riadok ma ~18,3 x velkost pisma, stlpec max. 653 px */
  --fs-h1:      clamp(2.2rem, 4.6vw, 3.6rem);
  --fs-h2:      clamp(1.75rem, 3.2vw, 2.7rem);
  --fs-h3:      clamp(1.15rem, 1.7vw, 1.45rem);
  --fs-lead:    clamp(1.06rem, 1.35vw, 1.3rem);
  --fs-body:    1.125rem;   /* Work Sans ma nizsiu strednu vysku nez Inter - kompenzacia */
  --fs-small:   0.95rem;
  --fs-eyebrow: 0.75rem;

  /* Priestor */
  --wrap: 1220px;
  --wrap-narrow: 780px;
  --gutter: clamp(20px, 5vw, 64px);
  --sec-y: clamp(64px, 9vw, 132px);

  --radius: 2px;               /* takmer hranate — institucionalne, nie hravé */
  --shadow: 0 1px 2px rgba(14,36,68,.05), 0 12px 32px -18px rgba(14,36,68,.30);
  --shadow-lg: 0 2px 4px rgba(14,36,68,.06), 0 28px 60px -28px rgba(14,36,68,.38);
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;
}
img,svg,video{ max-width:100%; display:block; height:auto; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.12;
  letter-spacing:-0.018em; color:var(--ink); margin:0 0 .5em; }
h1{ font-size:var(--fs-h1); } h2{ font-size:var(--fs-h2); } h3{ font-size:var(--fs-h3); letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
a{ color:var(--teal-600); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--ink); }
ul,ol{ margin:0 0 1.1em; padding-left:1.15em; }
li{ margin-bottom:.4em; }
strong{ font-weight:650; color:var(--ink); }
hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
::selection{ background:var(--gold-100); color:var(--ink); }
:focus-visible{ outline:2.5px solid var(--teal); outline-offset:3px; border-radius:1px; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--wrap); }
.wrap--narrow > *{ max-width:var(--wrap-narrow); }
.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:clamp(44px,6vw,80px); }
.section--paper2{ background:var(--paper-2); }
.section--ink{ background:var(--ink); color:#DCE5F1; }
.section--ink h1,.section--ink h2,.section--ink h3{ color:var(--white); }
.section--ink a{ color:var(--teal-100); }
.grid{ display:grid; gap:clamp(24px,3vw,44px); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:12px; top:12px; z-index:200; background:var(--ink); color:#fff; padding:10px 16px; }

/* ---------- Drobne prvky ---------- */
.eyebrow{
  font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--teal-600); margin:0 0 1rem;
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--gold); flex:none; }
.section--ink .eyebrow{ color:var(--gold-400); }
.section--ink .eyebrow::before{ background:var(--teal); }

.lead{ font-size:var(--fs-lead); line-height:1.55; color:#33414F; }
.section--ink .lead{ color:#C7D4E6; }
.muted{ color:var(--muted); }
.serif{ font-family:var(--serif); }

.rule{ height:1px; background:var(--line); border:0; }

/* Tlacidla */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink);
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--sans); font-size:.94rem; font-weight:600; letter-spacing:.01em;
  padding:.85rem 1.55rem; border:1.5px solid var(--btn-bd); background:var(--btn-bg);
  color:var(--btn-fg); text-decoration:none; border-radius:var(--radius);
  cursor:pointer; transition:transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); color:var(--btn-fg); }
.btn:active{ transform:translateY(0); }
.btn .ar{ transition:transform .22s var(--ease); }
.btn:hover .ar{ transform:translateX(4px); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line); }
.btn--ghost:hover{ --btn-bd:var(--ink); }
.btn--light{ --btn-bg:var(--white); --btn-fg:var(--ink); --btn-bd:var(--white); }
.btn--outline-light{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.4); }
.btn--outline-light:hover{ --btn-bd:#fff; }
.btn--gold{ --btn-bg:var(--gold); --btn-fg:#fff; --btn-bd:var(--gold); }
.btn--sm{ padding:.6rem 1.1rem; font-size:.86rem; }

/* Odkaz so sipkou */
.arrow-link{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem;
  text-decoration:none; color:var(--ink); border-bottom:1.5px solid var(--gold);
  padding-bottom:2px; transition:gap .2s var(--ease), color .2s var(--ease);
}
.arrow-link:hover{ gap:.85rem; color:var(--teal-600); }
.section--ink .arrow-link{ color:#fff; border-color:var(--teal); }

/* ==========================================================================
   Hlavicka
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  /* Naviazané na --paper, aby hlavička nezostala pozadu pri zmene palety.
     Prvý riadok je záloha pre staršie prehliadače bez color-mix(). */
  background:rgba(245,247,250,.9);
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s, background .25s;
}
.site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px -20px rgba(14,36,68,.5); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  min-height:var(--header-h); transition:min-height .25s var(--ease);
}
.site-header.is-stuck .header-inner{ min-height:64px; }

/* Logotyp — rytmus s EUBA (jeden tyrkysovy bod), ale serifovy, nie modularny */
.brand{ display:flex; align-items:center; text-decoration:none; color:var(--ink); }
.brand__name{ display:flex; flex-direction:column; line-height:1.12; }
.brand__name b{ font-family:var(--serif); font-size:1.06rem; font-weight:600; letter-spacing:-.01em; }
.brand__name span{ font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:600; }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{
  position:relative; font-size:.93rem; font-weight:550; color:var(--ink);
  text-decoration:none; padding:.5rem .8rem; border-radius:var(--radius);
}
.nav a::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.28rem; height:1.5px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.nav a:hover::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); background:var(--teal); }

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--line); background:transparent;
  border-radius:var(--radius); cursor:pointer; padding:0; place-items:center;
}
.nav-toggle span{ display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:.2s var(--ease); }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:.22s var(--ease); }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width: 960px){
  .nav-toggle{ display:grid; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--paper); border-bottom:1px solid var(--line); padding:1rem var(--gutter) 1.6rem;
    gap:0; transform:translateY(-8px); opacity:0; pointer-events:none; transition:.24s var(--ease);
    max-height:calc(100dvh - var(--header-h)); overflow:auto;
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ padding:.85rem 0; border-bottom:1px solid var(--line-soft); font-size:1.05rem; }
  .nav a::after{ left:0; right:auto; width:26px; bottom:.5rem; }
}

/* Citanie — jemny progres (len na dlhych stranach) */
.progress{ position:fixed; top:0; left:0; height:2px; background:var(--teal); width:0; z-index:110; transition:width .1s linear; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{ position:relative; overflow:hidden; background:var(--paper); }
.hero::before{  /* jemna sietka — odkaz na modularnost EUBA znacky */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.85;
  background-image:linear-gradient(var(--line-soft) 1px, transparent 1px),linear-gradient(90deg,var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 70% at 78% 12%, #000 0%, transparent 68%);
  -webkit-mask-image:radial-gradient(80% 70% at 78% 12%, #000 0%, transparent 68%);
}
.hero__inner{
  position:relative; display:grid; grid-template-columns:1.28fr .72fr;
  gap:clamp(32px,4vw,72px); align-items:center;
  padding-block:clamp(44px,5.5vw,84px) clamp(52px,6vw,96px);
}
.hero__title{ font-size:var(--fs-display); font-weight:600; letter-spacing:-.032em; margin:0 0 1.1rem; }
.hero__title em{ font-style:normal; color:var(--teal); white-space:nowrap; }
/* Tri riadky zarovnané vľavo; odtieň zvýrazneného slova sa smerom nadol
   prehlbuje, takže pointa nesie najtmavší tón. */
.hero__title .hl{ display:block; }
.hero__title em:nth-of-type(2){ color:var(--teal-600); }
.hero__title em:nth-of-type(3){ color:var(--teal-800); }
.hero__lead{ max-width:33em; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }
.hero__figure{ position:relative; max-width:420px; margin:0 0 0 auto; width:100%; }
.hero__figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 18%;
  border-radius:var(--radius); position:relative; z-index:2;
  filter:saturate(.96) contrast(1.02);
}
.hero__figure::before{  /* navy blok za fotkou */
  content:""; position:absolute; z-index:1; left:-22px; top:26px; bottom:-22px; right:44px;
  background:var(--ink); border-radius:var(--radius);
}
.hero__badge{
  position:absolute; z-index:3; right:-14px; bottom:26px; background:var(--white);
  border:1px solid var(--line); border-left:3px solid var(--gold); padding:.85rem 1.15rem;
  box-shadow:var(--shadow); max-width:min(292px, 100%); border-radius:var(--radius);
}
.hero__badge b{ display:block; font-family:var(--serif); font-size:.9rem; letter-spacing:-.005em;
  color:var(--ink); white-space:nowrap; }   /* titul musí zostať na jednom riadku */
.hero__badge span{ font-size:.78rem; color:var(--muted); line-height:1.4; display:block; }

@media (max-width: 900px){
  .hero__inner{ grid-template-columns:1fr; gap:40px; }
  .hero__figure{ max-width:440px; }
  .hero__figure::before{ right:32px; }
  .hero__badge{ right:0; }
}

/* ==========================================================================
   Pasik s cislami
   ========================================================================== */
.stats{ background:var(--ink); color:#fff; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12); }
.stats__item{ background:var(--ink); padding:clamp(24px,3vw,40px) clamp(18px,2.4vw,32px); }
.stats__num{ font-family:var(--serif); font-size:clamp(2rem,3.4vw,2.9rem); font-weight:600; color:#fff; line-height:1; letter-spacing:-.02em; }
.stats__num sup{ font-size:.5em; color:var(--teal); top:-.7em; }
.stats__lbl{ margin-top:.6rem; font-size:.86rem; color:#A9BBD4; line-height:1.4; }
@media (max-width:820px){ .stats__grid{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   Karty / piliere
   ========================================================================== */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:clamp(18px,2vw,28px); }
.card{
  background:var(--white); border:1px solid var(--line-soft); border-top:3px solid var(--ink);
  padding:clamp(24px,2.6vw,34px); border-radius:var(--radius);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-top-color .28s var(--ease);
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-top-color:var(--teal); }
.card__num{ font-family:var(--serif); font-size:.95rem; font-weight:600; color:var(--gold); letter-spacing:.06em; margin-bottom:.9rem; }
.card h3{ margin-bottom:.55rem; }
.card p{ font-size:.97rem; color:#3C4855; margin-bottom:0; }
.card__link{ margin-top:auto; padding-top:1.2rem; }

/* Akordeon pilierov */
.pillars{ border-top:1px solid var(--line); }
.pillar{ border-bottom:1px solid var(--line); }
.pillar__btn{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(14px,2vw,28px);
  background:none; border:0; padding:clamp(20px,2.4vw,30px) 0; cursor:pointer; text-align:left;
  font-family:inherit; color:var(--ink);
}
.pillar__idx{ font-family:var(--serif); font-size:1rem; font-weight:600; color:var(--gold); width:2.2rem; }
.pillar__ttl{ font-family:var(--serif); font-size:clamp(1.2rem,2.2vw,1.75rem); font-weight:600; letter-spacing:-.015em; transition:color .2s var(--ease); }
.pillar__btn:hover .pillar__ttl{ color:var(--teal-600); }
.pillar__ico{ width:34px; height:34px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; flex:none; transition:.25s var(--ease); }
.pillar__ico::before,.pillar__ico::after{ content:""; position:absolute; background:var(--ink); transition:.25s var(--ease); }
.pillar__ico{ position:relative; }
.pillar__ico::before{ width:13px; height:1.5px; }
.pillar__ico::after{ width:1.5px; height:13px; }
.pillar[open] .pillar__ico,.pillar__btn[aria-expanded="true"] .pillar__ico{ background:var(--ink); border-color:var(--ink); transform:rotate(180deg); }
.pillar__btn[aria-expanded="true"] .pillar__ico::before{ background:#fff; }
.pillar__btn[aria-expanded="true"] .pillar__ico::after{ opacity:0; }
.pillar__panel{ overflow:hidden; height:0; transition:height .38s var(--ease); }
.pillar__inner{ padding:0 0 clamp(24px,3vw,38px) calc(2.2rem + clamp(14px,2vw,28px)); max-width:62ch; }
.pillar__inner ul{ list-style:none; padding:0; margin:1rem 0 0; }
.pillar__inner li{ position:relative; padding-left:1.6rem; margin-bottom:.7rem; font-size:.98rem; }
.pillar__inner li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  background:var(--teal); border-radius:var(--radius);
}
@media (max-width:640px){ .pillar__inner{ padding-left:0; } }

/* ==========================================================================
   Casova os
   ========================================================================== */
.timeline{ position:relative; display:grid; grid-template-columns:170px 1fr; gap:clamp(20px,4vw,60px); }
.timeline__rail{ position:sticky; top:calc(var(--header-h) + 24px); align-self:start; }
.timeline__year{
  font-family:var(--serif); font-size:clamp(3rem,7vw,5.5rem); font-weight:600; line-height:1;
  color:var(--ink); letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.timeline__phase{ font-size:.8rem; text-transform:uppercase; letter-spacing:.15em; color:var(--gold); font-weight:600; margin-top:.5rem; }
.timeline__list{ position:relative; padding-left:clamp(22px,3vw,40px); border-left:1px solid var(--line); }
.tl-item{ position:relative; padding:0 0 clamp(34px,4.5vw,58px); }
.tl-item::before{
  content:""; position:absolute; left:calc(-1 * clamp(22px,3vw,40px) - 5.5px); top:.5rem;
  width:11px; height:11px; background:var(--paper); border:2px solid var(--line); border-radius:50%;
  transition:.3s var(--ease);
}
.tl-item.is-active::before{ border-color:var(--teal); background:var(--teal); box-shadow:0 0 0 5px var(--teal-100); }
.tl-item__yr{ font-size:.82rem; font-weight:650; letter-spacing:.1em; color:var(--teal-600); text-transform:uppercase; }
.tl-item h3{ margin:.35rem 0 .5rem; }
.tl-item p{ max-width:56ch; color:#3C4855; margin-bottom:0; }
.tl-item__tag{
  display:inline-block; margin-top:.9rem; font-size:.76rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-100); background:var(--gold-100);
  padding:.25rem .7rem; border-radius:99px;
}
@media (max-width:820px){
  .timeline{ grid-template-columns:1fr; }
  .timeline__rail{ position:static; display:flex; align-items:baseline; gap:1rem; margin-bottom:1.5rem; }
  .timeline__year{ font-size:2.6rem; }
}

/* ==========================================================================
   CV
   ========================================================================== */
.cv-grid{ display:grid; grid-template-columns:220px 1fr; gap:clamp(18px,3vw,48px); align-items:start; }
.cv-block + .cv-block{ margin-top:clamp(34px,4vw,58px); padding-top:clamp(34px,4vw,58px); border-top:1px solid var(--line); }
.cv-block h2{ font-size:clamp(1.2rem,1.8vw,1.5rem); position:sticky; top:calc(var(--header-h) + 20px); }
.cv-row{ display:grid; grid-template-columns:130px 1fr; gap:clamp(12px,2vw,28px); padding:.85rem 0; border-bottom:1px dashed var(--line-soft); }
.cv-row:last-child{ border-bottom:0; }
.cv-row__when{ font-size:.88rem; font-weight:600; color:var(--teal-600); font-variant-numeric:tabular-nums; padding-top:.15rem; }
.cv-row__what b{ display:block; font-weight:650; color:var(--ink); font-size:1rem; }
.cv-row__what span{ display:block; font-size:.92rem; color:var(--muted); margin-top:.15rem; }
.cv-list{ list-style:none; padding:0; margin:0; }
.cv-list li{ padding-left:1.4rem; position:relative; font-size:.97rem; margin-bottom:.55rem; }
.cv-list li::before{ content:""; position:absolute; left:0; top:.68em; width:6px; height:6px; background:var(--gold); border-radius:50%; }
@media (max-width:820px){
  .cv-grid{ grid-template-columns:1fr; }
  .cv-block h2{ position:static; }
  .cv-row{ grid-template-columns:1fr; gap:.2rem; }
}

/* ==========================================================================
   Citát
   ========================================================================== */
.quote-feature{
  background:var(--white); border:1px solid var(--line); border-left:4px solid var(--gold);
  padding:clamp(26px,3vw,44px); border-radius:var(--radius);
}
.quote-feature blockquote{ margin:0; font-family:var(--serif); font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.42; color:var(--ink); letter-spacing:-.012em; }
.quote-feature figcaption{ margin-top:1.2rem; font-size:.9rem; color:var(--muted); }
.quote-feature figcaption b{ display:block; color:var(--ink); font-size:.98rem; }

/* ==========================================================================
   Kontaktne dlazdice
   ========================================================================== */
.contact-list{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.contact-list li{ border-bottom:1px solid var(--line); margin:0; }
.contact-list a,.contact-list .row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 0; text-decoration:none; color:var(--ink); transition:padding .22s var(--ease);
}
.contact-list a:hover{ padding-left:.6rem; color:var(--teal-600); }
.contact-list .k{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.contact-list .v{ font-family:var(--serif); font-size:1.08rem; font-weight:600; }

/* ==========================================================================
   Paticka
   ========================================================================== */
.site-footer{ background:#0A1B33; color:#93A6C2; padding-block:clamp(48px,6vw,80px) 2rem; font-size:.92rem; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(24px,4vw,56px); padding-bottom:2.6rem; border-bottom:1px solid rgba(255,255,255,.1); }
.site-footer h4{ color:#fff; font-family:var(--sans); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 1.1rem; font-weight:650; }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer li{ margin-bottom:.6rem; }
.site-footer a{ color:#93A6C2; text-decoration:none; transition:color .18s; }
.site-footer a:hover{ color:#fff; }
.footer-brand p{ max-width:34ch; margin-top:1rem; color:#8296B4; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:1.6rem; font-size:.82rem; color:#6E82A0; }
.social{ display:flex; gap:.6rem; margin-top:1.3rem; }
.social a{ width:38px; height:38px; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; border-radius:var(--radius); transition:.2s var(--ease); }
.social a:hover{ background:#fff; border-color:#fff; color:var(--ink); transform:translateY(-2px); }
.social svg{ width:17px; height:17px; }
@media (max-width:820px){ .footer-top{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1/-1; } }

/* ==========================================================================
   Hlavicka podstranky
   ========================================================================== */
.page-head{ background:var(--ink); color:#fff; padding-block:clamp(52px,7vw,96px) clamp(48px,6vw,84px); position:relative; overflow:hidden; }
.page-head::before{
  content:""; position:absolute; inset:0; opacity:.28;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(110% 100% at 88% 0%, #000 10%, transparent 70%);
  -webkit-mask-image:radial-gradient(110% 100% at 88% 0%, #000 10%, transparent 70%);
}
.page-head__inner{ position:relative; }
.page-head__inner > *{ max-width:46ch; }
.page-head__inner > h1{ max-width:18ch; }
.page-head h1{ color:#fff; font-size:var(--fs-h1); margin-bottom:.6rem; }
.page-head p{ color:#BFCDE2; font-size:var(--fs-lead); margin:0; }
.page-head .eyebrow{ color:var(--gold-400); }
.page-head .eyebrow::before{ background:var(--teal); }
.breadcrumb{ font-size:.8rem; color:#8FA5C4; margin-bottom:1.2rem; }
.breadcrumb a{ color:#8FA5C4; text-decoration:none; } .breadcrumb a:hover{ color:#fff; }

/* Poznamka pre redaktora */
.editor-note{
  border:1px dashed var(--gold-400); background:#FFFBF2; color:#6B4E17;
  padding:1rem 1.2rem; font-size:.86rem; border-radius:var(--radius); margin:0 0 2rem;
}
.editor-note b{ color:#6B4E17; }

/* ==========================================================================
   Animacie pri scrollovani
   ========================================================================== */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- Tlac ---------- */
@media print{
  .site-header,.site-footer,.nav-toggle,.progress{ display:none !important; }
  body{ background:#fff; font-size:11pt; }
  .section{ padding-block:1rem; }
  a{ color:#000; text-decoration:none; }
}

/* ---------- Doladenie pre malé displeje ---------- */
@media (max-width: 640px){
  .hero__badge{ position:relative; inset:auto; z-index:3; max-width:none; margin-top:14px; box-shadow:none; }
  /* nowrap na titule by na úzkych displejoch inak vytlačil stránku do šírky */
  .hero__badge b{ font-size:.82rem; }
  .hero__figure::before{ bottom:0; }
  .hero__actions .btn{ flex:1 1 auto; justify-content:center; }
  .quote-feature blockquote{ font-size:1.15rem; }
  .stats__num{ font-size:2rem; }
}

/* ==========================================================================
   Prepínač publika (študent / zamestnanec)
   ========================================================================== */
.tabs{ display:flex; gap:.4rem; margin:0 0 1.8rem; padding:.3rem; background:var(--paper-3); border-radius:99px; width:max-content; max-width:100%; flex-wrap:wrap; }
.tabs button{
  font:inherit; font-size:.9rem; font-weight:600; padding:.55rem 1.3rem; cursor:pointer;
  background:transparent; border:0; border-radius:99px; color:var(--muted); transition:.2s var(--ease);
}
.tabs button:hover{ color:var(--ink); }
.tabs button[aria-selected="true"]{ background:var(--white); color:var(--ink); box-shadow:0 1px 3px rgba(14,36,68,.14); }
.tabpanel[hidden]{ display:none; }
.tabpanel ul{ list-style:none; padding:0; margin:0; display:grid; gap:.1rem; }
.tabpanel li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline; padding:.85rem 0; border-bottom:1px solid var(--line-soft); margin:0; }
.tabpanel li b{ font-family:var(--serif); color:var(--gold); font-size:.9rem; }
.tabpanel li span{ font-size:1rem; color:var(--text); }
.tabpanel li span i{ display:block; font-style:normal; font-size:.9rem; color:var(--muted); margin-top:.15rem; }

/* ==========================================================================
   Poistka / princíp
   ========================================================================== */
.principle{
  border-left:4px solid var(--teal); background:var(--teal-100);
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px); border-radius:var(--radius);
}
.principle p{ font-family:var(--serif); font-size:clamp(1.05rem,1.7vw,1.35rem); line-height:1.45; color:var(--ink); margin:0; letter-spacing:-.01em; }
.principle p + p{ margin-top:.7rem; font-family:var(--sans); font-size:.95rem; color:#3C4855; letter-spacing:0; }

/* ==========================================================================
   Pás s faktami o voľbe
   ========================================================================== */
.factbar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.factbar div{ background:var(--paper); padding:1.1rem 1.3rem; }
.factbar dt{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:650; }
.factbar dd{ margin:.3rem 0 0; font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--ink); }
@media (max-width:760px){ .factbar{ grid-template-columns:1fr 1fr; } }

/* Miesto na doplnenie dát */
.todo{ border:1px dashed var(--gold-400); background:#FFFBF2; padding:1rem 1.2rem; border-radius:var(--radius); font-size:.9rem; color:#6B4E17; }
.todo b{ color:#6B4E17; }

/* ==========================================================================
   Výsledky „predtým → teraz"
   ========================================================================== */
.results{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.result{ background:var(--white); border:1px solid var(--line-soft); border-top:3px solid var(--gold); padding:clamp(22px,2.4vw,30px); border-radius:var(--radius); }
.result__k{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:650; }
.result__pair{ display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; margin:.8rem 0 .7rem; }
.result__from{ font-family:var(--serif); font-size:.92rem; color:var(--muted); }
.result__arr{ color:var(--gold); font-weight:700; }
.result__to{ font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.05rem); font-weight:600; color:var(--ink); letter-spacing:-.02em; line-height:1.05; }
.result p{ font-size:.93rem; color:#3C4855; margin:0; }
.result__yrs{ font-size:.76rem; color:var(--muted); margin-top:.9rem; letter-spacing:.04em; }
/* Legenda grafu — polozky sa lamu ako celky, nie uprostred frazy */
.chart-legend{ display:flex; flex-wrap:wrap; gap:.25rem 1rem; }
.chart-legend span{ white-space:nowrap; }
.chart-legend b{ font-weight:400; }
@media (max-width:860px){ .results{ grid-template-columns:1fr; } }
.source{ font-size:.8rem; color:var(--muted); margin-top:1.2rem; }

/* ==========================================================================
   Grafy (inline SVG)
   ========================================================================== */
.chart{ width:100%; height:auto; display:block; margin:.2rem 0 .9rem; overflow:visible; }
.chart .c-yr{ font-family:var(--sans); font-size:9px; font-weight:600; fill:var(--muted); letter-spacing:.04em; }
.chart .c-val{ font-family:var(--serif); font-size:11px; font-weight:600; fill:var(--ink); }
.chart .c-val--hi{ fill:var(--chart-hi); font-size:12.5px; }
.section--ink .chart .c-yr{ fill:#8FA5C4; }
.section--ink .chart .c-val{ fill:#fff; }

/* Zoznam partnerov */
.partners{ list-style:none; padding:0; margin:.2rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem; }
.partners li{ margin:0; font-size:.79rem; font-weight:600; color:var(--ink); border:1px solid var(--line); padding:.28rem .6rem; border-radius:99px; }
.partners li.is-new{ border-color:var(--gold); background:var(--gold-100); color:#6B4E17; }

/* Široký výsledok — hlavné zistenie nad ostatnými kartami */
.result--wide{
  grid-column:1/-1; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(20px,3vw,44px); align-items:center; border-top-color:var(--teal);
}
.result--wide .chart{ margin:0; }
.result--wide .result__pair{ margin:.2rem 0 .8rem; }
.result--wide .result__to{ font-size:clamp(1.8rem,3vw,2.5rem); }
.result--wide p + p{ margin-top:.7rem; }
@media (max-width:820px){ .result--wide{ grid-template-columns:1fr; } }

/* Dvojstĺpcové sekcie majú počet stĺpcov nastavený inline pri jednotlivých
   sekciách — na úzkych displejoch ich preto musíme prebiť takto. */
@media (max-width: 820px){
  .grid{ grid-template-columns:1fr !important; }
}

/* ==========================================================================
   Fotografie v obsahu
   ========================================================================== */
.photo{ margin:0; }
.photo img{ width:100%; height:auto; object-fit:cover; border-radius:var(--radius); display:block; }
.photo--portraitish img{ aspect-ratio:4/3; }
.photo--wide img{ aspect-ratio:16/9; object-position:50% 12%; }   /* nižšie číslo = viac hornej časti záberu (hlavy) */
.photo figcaption{ margin-top:.7rem; font-size:.84rem; color:var(--muted); line-height:1.45; }
.section--ink .photo figcaption{ color:#8FA5C4; }
@media (max-width:640px){ .photo--wide img{ aspect-ratio:4/3; } }
.photo--square img{ aspect-ratio:1/1; object-position:50% 30%; }

/* ==========================================================================
   Harmonogram voľby
   ========================================================================== */
.schedule{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.schedule li{
  display:grid; grid-template-columns:132px 1fr; gap:clamp(14px,2.4vw,32px);
  padding:1.05rem 0; border-bottom:1px solid var(--line); margin:0; align-items:baseline;
}
.schedule li.is-now{ background:linear-gradient(90deg, var(--teal-100), transparent 70%); }
.schedule__when{ font-family:var(--serif); font-weight:600; font-size:1rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.schedule__what{ font-size:.98rem; color:#3C4855; }
.schedule__what b{ display:block; color:var(--ink); font-weight:650; margin-bottom:.15rem; }
@media (max-width:640px){ .schedule li{ grid-template-columns:1fr; gap:.25rem; } }

/* ==========================================================================
   Fotografie v obsahu
   ========================================================================== */
.photo{ margin:0; }
.photo img{ width:100%; height:auto; object-fit:cover; border-radius:var(--radius); display:block; }
.photo--portraitish img{ aspect-ratio:4/3; }
.photo--wide img{ aspect-ratio:16/9; object-position:50% 12%; }   /* nižšie číslo = viac hornej časti záberu (hlavy) */
.photo figcaption{ margin-top:.7rem; font-size:.84rem; color:var(--muted); line-height:1.45; }
.section--ink .photo figcaption{ color:#8FA5C4; }
@media (max-width:640px){ .photo--wide img{ aspect-ratio:4/3; } }
.photo--square img{ aspect-ratio:1/1; object-position:50% 30%; }

/* ==========================================================================
   Harmonogram voľby
   ========================================================================== */
.schedule{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.schedule li{
  display:grid; grid-template-columns:132px 1fr; gap:clamp(14px,2.4vw,32px);
  padding:1.05rem 0; border-bottom:1px solid var(--line); margin:0; align-items:baseline;
}
.schedule li.is-now{ background:linear-gradient(90deg, var(--teal-100), transparent 70%); }
.schedule__when{ font-family:var(--serif); font-weight:600; font-size:1rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.schedule__what{ font-size:.98rem; color:#3C4855; }
.schedule__what b{ display:block; color:var(--ink); font-weight:650; margin-bottom:.15rem; }
@media (max-width:640px){ .schedule li{ grid-template-columns:1fr; gap:.25rem; } }

/* ==========================================================================
   Programové tézy — výzvy v pilieroch a body vízie
   ========================================================================== */
.challenge{
  font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--ink);
  line-height:1.3; letter-spacing:-.005em; margin:1.9rem 0 .1rem;
}
.challenge span{
  display:block; font-family:var(--sans); font-size:.68rem; font-weight:650;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.35rem;
}
.vlist{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }
.vlist li{
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:baseline;
  padding:1rem 0; border-bottom:1px solid var(--line); margin:0;
}
.vlist b{ font-family:var(--serif); color:var(--gold); font-size:.92rem; }
.vlist span{ font-family:var(--serif); font-size:1.14rem; font-weight:600; color:var(--ink); line-height:1.3; }
.vlist i{ display:block; font-style:normal; font-family:var(--sans); font-size:.94rem; font-weight:400; color:var(--muted); margin-top:.25rem; line-height:1.5; }
.closing-list{ list-style:none; padding:0; margin:0; }
.closing-list li{
  display:grid; grid-template-columns:auto 1fr; gap:1.2rem; padding:1.05rem 0; margin:0;
  border-top:1px solid rgba(255,255,255,.14);
}
.closing-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.closing-list b{ font-family:var(--serif); color:var(--gold-400); font-size:1.1rem; }

/* Štyri oblasti na domovskej stránke: 2 × 2 */
.cards--2x2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:700px){ .cards--2x2{ grid-template-columns:1fr; } }

/* <picture> je len obal pre AVIF/WebP varianty — rozloženie určuje vnútorný <img> */
picture{ display:contents; }

/* Značka EP z hlavičkového papiera kandidátky (zdroj: životopis) */
.brand__logo{ height:26px; width:auto; margin-left:.85rem; display:block; }
@media (max-width:480px){ .brand__logo{ height:22px; margin-left:.6rem; } }

/* Časová os: slovné označenie namiesto roka */
.timeline__year.is-word{ font-size:clamp(1.5rem,2.4vw,1.9rem); letter-spacing:-.01em; line-height:1.15; }
@media (max-width:820px){ .timeline__year.is-word{ font-size:1.6rem; } }

/* Moja cesta: posledný krok v podnadpise, jemne odlíšený */
.page-head__next{ color:var(--gold-400); font-family:var(--serif); font-style:italic; white-space:nowrap; }

/* Hero na jeden stĺpec (tablet, mobil): väčší nadpis, na tablete stále 2 riadky */
@media (max-width:900px){ .hero__title{ font-size:clamp(1.6rem, 4.6vw, 2.3rem); } }