/* =========================================================
   PS Poprad 2026
   Postavené podľa Dizajn manuálu KOMUNÁL 2026 (moredesign.studio)
   — 03/Farebnosť, 04/Typografia, 01/Menovka
   ========================================================= */

/* ---------- Písma (04/Typografia) -------------------------
   Súbory vložte do /assets/fonts/. Kým tam nie sú, použijú sa
   náhrady Oswald a Figtree z Google Fonts.
----------------------------------------------------------- */

@font-face {
  font-family: 'Kapra CE';
  src: url('/assets/fonts/KapraCE-Bold.woff2') format('woff2'),
       url('/assets/fonts/KapraCE-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Geomanist';
  src: url('/assets/fonts/Geomanist-Book.woff2') format('woff2'),
       url('/assets/fonts/Geomanist-Book.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Geomanist';
  src: url('/assets/fonts/Geomanist-Medium.woff2') format('woff2'),
       url('/assets/fonts/Geomanist-Medium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Geomanist';
  src: url('/assets/fonts/Geomanist-Bold.woff2') format('woff2'),
       url('/assets/fonts/Geomanist-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* 03/Farebnosť — primárne farby */
  --himmelblau: #00BCFF;
  --dark-blue:  #000080;
  --soft-blue:  #CCF2FF;
  --white:      #FFFFFF;
  --accent-red: #FF003A;

  /* 03/Farebnosť — Gradient Blue, presne podľa manuálu */
  --gradient-blue: radial-gradient(41.66% 135.29% at 59.1% -50.69%, #C8F0FF 0%, #00BCFF 100%);

  --font-display: 'Kapra CE', 'Oswald', 'Arial Narrow', sans-serif;
  --font-text:    'Geomanist', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* 04/Typografia — riadkovania sú záväzné */
  /* Manuál predpisuje pre Kapra riadkovanie .9. Platí to pre Kapra CE,
     ktorá má nízku diakritiku. Náhradná Oswald má akcenty až 1.08em nad
     účiarou (Á, Č), takže pri .9 zasahujú do riadku nad sebou. Kým nie sú
     v /assets/fonts/ ostré rezy Kapra CE, držíme 1.18 — pri ňom majú
     mäkčene a dĺžne nad riadkom čistú medzeru (1.12 je hranica, kde sa
     už len nedotýkajú). Po vložení Kapra CE sa dá vrátiť na .9. */
  --lh-kapra: 1.18;
  --lh-hdl:   1.05;
  --lh-text:  1.35;

  --sirka:   1200px;
  --radius:  16px;
  --medzera: clamp(3.5rem, 8vw, 7rem);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--himmelblau);
  color: var(--dark-blue);
  font-family: var(--font-text);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.obal { width: min(100% - 2.5rem, var(--sirka)); margin-inline: auto; }

.vp {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--white); color: var(--dark-blue);
  padding: .75rem 1.25rem; z-index: 100; font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 3px solid var(--dark-blue); outline-offset: 3px; }
.hlavicka :focus-visible, .pata :focus-visible { outline-color: var(--white); }

/* ---------- 04/Typografia ---------------------------------
   Kapra Bold  — len VERZÁLKY, max ~4 slová, nikdy Dark Blue
   Geomanist Bold — celé vety, riadkovanie 1.05
   Geomanist Book — text, riadkovanie 1.35, nikdy biela
----------------------------------------------------------- */

.hdl-kapra {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--lh-kapra);
  letter-spacing: .002em;
  color: var(--white);
  margin: 0;
}

.hdl-geo {
  font-family: var(--font-text);
  font-weight: 700;
  line-height: var(--lh-hdl);
  color: var(--dark-blue);
  margin: 0;
}

.hdl-kapra--xl { font-size: clamp(3rem, 1.6rem + 6.4vw, 6.2rem); }
.hdl-kapra--l  { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
.hdl-kapra--m  { font-size: clamp(1.4rem, 1.2rem + .8vw, 2rem); }

.hdl-geo--l { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); }
.hdl-geo--m { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); }

/* ---------- HDL sekcie (07/Digitálne aplikácie, str. 49) ---
   Nadpis Kapra na svetlom podklade: biela Kapra na tmavomodrom
   bloku, ostré rohy. Pri 90pt je odsadenie 12px vodorovne
   a 23px zvisle → .133em / .256em. Rovnaké riešenie je použité
   na letáku (str. 26). Dark Blue Kapra headline manuál zakazuje
   (str. 18) a Himmelblau na bielej má kontrast 2,18 : 1 — tento
   variant je podľa manuálu a zároveň má 16 : 1.
----------------------------------------------------------- */

.hdl-blok > span {
  display: table;                    /* jeden blok okolo celého nadpisu, ako na letáku */
  background: var(--dark-blue);
  color: var(--white);
  padding: .256em .133em;
  border-radius: 0;
}

/* ---------- 01/Menovka ------------------------------------
   Horizontálna: Kapra 87pt, odsadenie 20px, radius 38,57
   → padding .230em, radius .443em, dva protiľahlé rohy
   Tag: Kapra 43pt, odsadenie 11px / 20px
   → .494em veľkosť, padding .256em / .465em
----------------------------------------------------------- */

.menovka {
  display: inline-block;
  font-size: var(--menovka, 1.5rem);
}

.menovka__meno {
  display: block;
  background: var(--white);
  color: var(--dark-blue);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  padding: .230em .230em .185em;
  border-radius: .443em 0 .443em 0;
  white-space: nowrap;
}

/* Tag je podľa konštrukcie na str. 8 obyčajný obdĺžnik — bez zaoblenia. */
.menovka__tag {
  display: table;              /* šírka podľa obsahu, zarovnané vľavo */
  margin-top: .09em;
  background: var(--dark-blue);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .494em;
  line-height: 1;
  padding: .256em .465em .215em;
  border-radius: 0;
  white-space: nowrap;
}

/* Vertikálna menovka — Kapra 132,5pt priezvisko, Geomanist Book 72pt meno,
   medzera 27,65pt, odsadenie 18px / 22px, radius 34,53
   → .543em meno, medzera .209em, padding .136em / .166em, radius .261em */

.menovka--vert { font-size: var(--menovka, 2rem); }

/* Krstné meno je nad priezviskom vycentrované (str. 5 a 9). */
.menovka--vert .menovka__meno {
  padding: .136em .166em;
  border-radius: .261em 0 .261em 0;
  text-transform: none;
  text-align: center;
}
.menovka--vert .menovka__krstne {
  display: block;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: .543em;
  line-height: 1;
  margin-bottom: .209em;
}
.menovka--vert .menovka__priezvisko {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- 02/Grafické prvky — tagy ---------------------- */

.tag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .85rem;
  line-height: 1;
  padding: .45em .7em .38em;
  border-radius: .35em 0 .35em 0;
  background: var(--accent-red);
  color: var(--white);
}
.tag--modry { background: var(--dark-blue); }

/* ---------- Hlavička -------------------------------------- */

.hlavicka {
  position: sticky; top: 0; z-index: 50;
  background: var(--dark-blue);
}

.hlavicka__vnutro { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; }

.znacka { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.znacka img { width: 2.1rem; height: 2.1rem; }
.znacka__text {
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: 1.2rem; color: var(--white);
}

.menu ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: 1rem; letter-spacing: .02em;
  color: var(--white); text-decoration: none;
  padding: .35rem 0;
  border-bottom: 3px solid transparent;
}
.menu a:hover,
.menu a[aria-current="page"] { border-bottom-color: var(--himmelblau); }

.hamburger { display: none; background: none; border: 0; cursor: pointer; padding: .6rem; color: var(--white); }
.hamburger__ciary,
.hamburger__ciary::before,
.hamburger__ciary::after {
  display: block; width: 24px; height: 2.5px;
  background: currentColor; border-radius: 2px;
  transition: transform .2s ease;
}
.hamburger__ciary::before, .hamburger__ciary::after { content: ''; position: relative; }
.hamburger__ciary::before { top: -7px; }
.hamburger__ciary::after  { top: 4.5px; }
.hamburger[aria-expanded="true"] .hamburger__ciary { background: transparent; }
.hamburger[aria-expanded="true"] .hamburger__ciary::before { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__ciary::after  { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 880px) {
  .hamburger { display: block; }
  .menu {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--dark-blue); display: none;
    border-top: 1px solid rgba(255,255,255,.2);
  }
  .menu.je-otvorene { display: block; }
  .menu ul { flex-direction: column; gap: 0; padding: .5rem 1.25rem 1.25rem; }
  .menu li + li { border-top: 1px solid rgba(255,255,255,.15); }
  .menu a { display: block; padding: .9rem 0; font-size: 1.15rem; border-bottom: 0; }
}

/* ---------- Tlačidlá (Kapra ako dekoratívny prvok) --------- */

.tlacidlo {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: 1rem; letter-spacing: .02em;
  text-decoration: none;
  padding: .75em 1.2em .65em;
  border: 3px solid transparent;
  border-radius: .5em 0 .5em 0;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.tlacidlo:hover { transform: translateY(-2px); }

.tlacidlo--biele { background: var(--white); color: var(--dark-blue); }
.tlacidlo--tmavy { background: var(--dark-blue); color: var(--white); }
.tlacidlo--linka { border-color: var(--dark-blue); color: var(--dark-blue); }
.tlacidlo--linka:hover { background: var(--dark-blue); color: var(--white); }
.tlacidlo--linka-biela { border-color: var(--white); color: var(--white); }
.tlacidlo--linka-biela:hover { background: var(--white); color: var(--dark-blue); }

.akcie-riadok { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }

/* ---------- Hero ------------------------------------------ */

.hero, .uvod { background: var(--gradient-blue); }

.hero { padding-top: clamp(2.5rem, 5vw, 4rem); overflow: hidden; }

.hero__mriezka {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--dark-blue);
  margin: 0 0 1rem;
  font-size: clamp(1rem, .9rem + .5vw, 1.35rem);
}

.hero__nadpis { margin-bottom: 1.25rem; }

.hero__claim {
  font-weight: 700;
  font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
  line-height: var(--lh-hdl);
  color: var(--dark-blue);
  max-width: 20ch;
  margin: 0 0 2rem;
}

.hero__akcie { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.hero__tim { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 0; }

.portret { position: relative; margin: 0; }
.portret img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 6%; }

.portret .menovka {
  position: absolute;
  left: clamp(-.25rem, 1vw, .5rem);
  bottom: 7%;
  --menovka: clamp(.85rem, .5rem + 1.1vw, 1.45rem);
}

@media (max-width: 900px) {
  .hero__mriezka { grid-template-columns: 1fr; }
  .hero__tim { margin-inline: calc(50% - 50vw); }
  .portret .menovka { left: 4%; }
}

/* ---------- Úvodná stránka -------------------------------- */

.uvod { padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5rem); }
.uvod .hero__nadpis { max-width: 12ch; }

.sekcia { padding: var(--medzera) 0 0; }
.sekcia--dole { padding-bottom: var(--medzera); }

.sekcia__nadpis { margin-bottom: 1.5rem; }

/* ---------- Biely panel ----------------------------------- */

.panel {
  background: var(--white);
  color: var(--dark-blue);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 4rem);
}

.panel__stlpce {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 1.75rem;
}
.panel__telo p { margin: 0 0 1.1rem; max-width: 62ch; }
.panel__telo p:last-child { margin-bottom: 0; }
.panel__zaver { font-weight: 700; font-size: 1.1em; line-height: var(--lh-hdl); }

@media (max-width: 760px) { .panel__stlpce { grid-template-columns: 1fr; } }

/* ---------- Karty kandidátov ------------------------------ */

.karty {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.karta {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}

.karta__obal { position: relative; background: var(--gradient-blue); }
.karta__foto { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 6%; }

.karta__obal .menovka {
  position: absolute; left: 6%; bottom: 6%;
  --menovka: 1.6rem;
}

.karta__telo { padding: 1.35rem 1.35rem 1.6rem; }

/* Svit 2026 — jediný kandidát, aby sa portrét a karta neroztiahli
   cez celú šírku mriežky. */
.hero__tim--sam { grid-template-columns: minmax(0, 1fr); max-width: 26rem; margin-left: auto; }
.karty--sam { grid-template-columns: minmax(0, 26rem); }

/* Karta bez fotky — meno preberá blokový nadpis (HDL sekcie). */
.karta__nadpis { margin-bottom: .9rem; }

/* Volebný obvod — tag podľa 02/Grafické prvky, hneď pod fotkou.
   Manuál (01/Menovka) dáva do tagu pozíciu, na ktorú kandidát kandiduje. */
.karta__obvod { margin: 0 0 .75rem; }

/* Celé meno s akademickými titulmi. Do menovky tituly nepatria (01/Menovka),
   preto ich uvádzame v texte karty — Geomanist Bold, riadkovanie 1.05. */
.karta__meno {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: var(--lh-hdl);
  margin: 0 0 .3rem;
}

.karta__rola {
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: .85rem; letter-spacing: .04em;
  margin: 0 0 .8rem;
}
.karta__popis { margin: 0; font-size: .95rem; }

/* ---------- Program --------------------------------------- */

.temy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.tema {
  background: var(--white);
  color: var(--dark-blue);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.tema--siroka { grid-column: 1 / -1; }

.tema__nazov { margin-bottom: 1.1rem; }

.tema__text { margin: 0; max-width: 60ch; }

.body {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem 2rem;
}
.body h4 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  line-height: var(--lh-hdl);
  margin: 0 0 .35rem;
}
.body p { margin: 0; font-size: .95rem; }

/* ---------- Udalosti -------------------------------------- */

.udalosti { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }

.udalost {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 1rem 2rem;
  align-items: start;
}
.udalost__kedy { margin: 0; display: grid; gap: .25rem; justify-items: start; }
.udalost__datum {
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: 1.35rem; line-height: 1;
}
.udalost__den { font-weight: 700; text-transform: lowercase; }
.udalost__cas { font-weight: 700; }
.udalost__nazov { margin: 0 0 .3rem; }
.udalost__miesto { margin: 0 0 .5rem; font-weight: 700; }
.udalost__popis { margin: 0 0 .8rem; max-width: 62ch; }
.udalost__popis:last-child { margin-bottom: 0; }
.udalost__akcia { margin: 1.2rem 0 0; }

@media (max-width: 620px) { .udalost { grid-template-columns: 1fr; gap: .6rem; } }

/* ---------- Prázdny stav (Soft Blue, text nikdy biely) ----- */

.prazdne {
  background: var(--soft-blue);
  color: var(--dark-blue);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.prazdne .akcie-riadok { justify-content: center; }
.prazdne__text {
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem);
  line-height: var(--lh-hdl);
  max-width: 46ch;
  margin: 0 auto 1.75rem;
}

/* ---------- Výzva ----------------------------------------- */

.vyzva { background: var(--dark-blue); }
.vyzva__vnutro { padding: var(--medzera) 0; text-align: center; display: grid; justify-items: center; }
.vyzva__nadpis { margin-bottom: 1rem; }
.vyzva__text { max-width: 48ch; margin: 0 0 2rem; color: var(--soft-blue); }
.vyzva .akcie-riadok { justify-content: center; }

/* ---------- Podstránky ------------------------------------ */

.podstranka { padding-bottom: var(--medzera); }
.podstranka__hlava { padding: clamp(2.5rem, 6vw, 4.5rem) 0 2.5rem; }
.podstranka__lead {
  max-width: 52ch; margin: 1rem 0 0;
  font-weight: 700; font-size: 1.15rem; line-height: var(--lh-hdl);
  color: var(--dark-blue);
}

/* ---------- Oznámenie o transparentnosti ------------------ */

.oznam {
  background: var(--white);
  color: var(--dark-blue);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.oznam + .oznam { margin-top: 1.5rem; }

/* Názov reklamy je ľubovoľne dlhý text z configu — Kapra je podľa
   manuálu len do ~4 slov, preto je tu Geomanist Bold. */
.oznam__nazov {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 4px solid var(--himmelblau);
  color: var(--dark-blue);
}

.oznam__zoznam { margin: 0; }
.oznam__riadok {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: .25rem 2rem;
  padding: .8rem 0;
}
.oznam__riadok + .oznam__riadok { border-top: 1px solid var(--soft-blue); }
.oznam__riadok dt { font-weight: 700; }
.oznam__riadok dd { margin: 0; }
.oznam__chyba { color: var(--accent-red); font-weight: 700; }

@media (max-width: 680px) { .oznam__riadok { grid-template-columns: 1fr; } }

/* ---------- Päta ------------------------------------------ */

.pata { background: var(--dark-blue); padding: var(--medzera) 0 2.5rem; font-size: .95rem; }

.pata__vrch {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.25);
}

.pata__znacka img { width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; }

/* Biela je povolená pre Headline Geomanist Bold, nie pre text Geomanist Book
   (str. 17 a 18) — claim je preto bold. */
.pata__claim { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: var(--lh-hdl); }

.pata__nadpis {
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: .9rem; letter-spacing: .05em;
  color: var(--white);
  margin: 0 0 .75rem;
}

.pata__menu ul, .socialne { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pata__menu a, .socialne a { text-decoration: none; }
.pata__menu a:hover, .socialne a:hover { text-decoration: underline; }

.pata, .pata a { color: var(--soft-blue); }
.pata__claim, .znacka__text { color: var(--white); }

.pata__spod { padding-top: 2rem; display: grid; gap: .35rem; font-size: .85rem; }
.pata__spod p { margin: 0; }
.pata__copy { margin-top: .75rem !important; opacity: .8; }

@media (max-width: 800px) { .pata__vrch { grid-template-columns: 1fr; gap: 2rem; } }