/* ═══════════════════════════════════════════════════════════════════
   MAREK PRISTACH — kandidát na starostu obce Veľké Kostoľany
   Farebná paleta prevzatá z kampaňových plagátov.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --navy-950:#04152F;
  --navy-900:#072347;
  --navy-800:#0B2E5E;
  --navy-700:#103A73;
  --navy:#0E3468;

  --blue-700:#0F58B0;
  --blue-600:#1668C9;
  --blue-500:#2A80E0;
  --blue-400:#4E9BEF;
  --blue-300:#8CC2F7;

  /* aqua z loga MP — presne odmerané z logo-mp.png (#04A7B5), okolité
     odtiene sú svetlejšie a viac do aqua */
  --teal-700:#067C89;
  --teal-600:#0595A4;
  --teal-500:#04A7B5;
  --teal-400:#2FC6D6;
  --teal-300:#7BDEEA;
  --teal-200:#B6ECF3;

  /* limetková — zámerne len na termíne volieb v dolnom páse */
  --lime:#8CC63F;
  --lime-dark:#6EA52B;
 

  /* svetlé pozadia s náznakom aqua */
  --sky-50:#F3FBFD;
  --sky-100:#E3F5FA;
  --sky-200:#CBEAF3;

  /* zlatá — jediné miesto, kde ju web používa, sú sviatky v kalendári */
  --zlata:#D6A82C;
  --zlata-tmava:#6B4E06;

  --cervena:#D22630;
  --cervena-tmava:#A81B24;

  --ink:#0A1B33;
  --ink-2:#20344F;
  --muted:#5C718E;

  --white:#fff;

  /* aqua je dominantná — modrá už len dobieha na konci */
  --grad-brand:linear-gradient(100deg,var(--teal-400) 0%,var(--teal-500) 38%,var(--teal-600) 68%,var(--blue-600) 100%);
  --grad-text:linear-gradient(100deg,var(--teal-300) 0%,var(--teal-400) 45%,var(--blue-400) 100%);

  --f-display:'Montserrat',system-ui,sans-serif;
  /* užší a ľahší rez pre veľké headline (meno v hlavičke, „TVORME PROGRAM SPOLU“) */
  --f-display-alt:'Barlow Condensed','Montserrat',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
  --f-script:'Dancing Script',cursive;

  --wrap:1240px;
  /* šírka kompozície hlavičky. Bežne kopíruje --wrap; na veľmi širokom
     okne sa zastaví, aby sa text s postavou neroztiahli od seba. */
  --hero-wrap:var(--wrap);
  --nav-h:78px;
  /* výška info pásika pod lištou; používa ju aj odsadenie hero sekcie */
  --pas-h:clamp(28px,5.4vw,34px);
  /* výška vlnového pásu — používa ju aj portrét, aby doňho presne zapadol */
  --wave-h:clamp(90px,12vw,180px);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  --sh-sm:0 2px 10px rgba(10,40,80,.06);
  --sh-md:0 14px 40px -12px rgba(10,45,90,.22);
  --sh-lg:0 40px 90px -30px rgba(8,40,85,.42);

  /* ── jednotná mierka zaoblenia ── */
  --r-sm:14px;      /* odznaky, drobné prvky */
  --r-md:20px;      /* karty */
  --r-lg:26px;      /* veľké panely */
  --r-pill:100px;

  /* ── jednotný malý verzálkový štítok ── */
  --label-size:.68rem;
  --label-track:.14em;
}

/* ───────── reset ───────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--sky-50);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden;padding-right:var(--posuvnik,0px)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
svg{display:block}
::selection{background:var(--teal-500);color:#fff}

.wrap{width:min(100% - 3rem,var(--wrap));margin-inline:auto}
@media(max-width:640px){.wrap{width:min(100% - 2rem,var(--wrap))}}

/* ═══════════════════ TYPOGRAFIA ═══════════════════ */
.h2{
  font-family:var(--f-display);
  font-weight:900;
  font-size:clamp(2rem,4.6vw,3.6rem);
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--navy-800);
  text-wrap:balance;
}
.h2--light{color:#fff}
.h2--giant{
  font-family:var(--f-display-alt);font-weight:700;
  font-size:clamp(3rem,10vw,8.6rem);
  line-height:.94;
  letter-spacing:.005em;
}
.h2--giant > span{display:block}
.sig{
  font-family:var(--f-script);
  font-weight:700;
  color:var(--navy-800);
  font-size:clamp(1.7rem,3.4vw,2.9rem);
  line-height:1.1;
}
.sig--sm{font-size:1.35rem}

.kicker{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--f-display);font-weight:800;
  font-size:var(--label-size);letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--teal-600);margin-bottom:1.1rem;
}
.kicker span{
  width:34px;height:3px;border-radius:3px;
  background:var(--grad-brand);
  display:block;transform-origin:left;
}
.kicker--light{color:var(--teal-200)}
.kicker--light span{background:linear-gradient(90deg,var(--teal-400),var(--blue-300))}

.sec{position:relative;padding:clamp(5rem,10vw,9rem) 0}
.sec__head{max-width:760px;margin-bottom:clamp(2.6rem,5vw,4.2rem)}
.sec__head--center{max-width:900px;margin-inline:auto;text-align:center}
.sec__head--center .kicker{justify-content:center}
.sec__sub{
  margin-top:1.1rem;font-size:clamp(1rem,1.35vw,1.16rem);
  color:var(--muted);max-width:60ch;text-wrap:pretty;
}
.sec__head--center .sec__sub{margin-inline:auto}
.sec__sub--light{color:rgba(230,243,255,.9)}

/* ═══════════════════ BUTTONS ═══════════════════ */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.65rem;
  padding:1.02rem 1.85rem;border-radius:var(--r-pill);
  font-family:var(--f-display);font-weight:800;font-size:.92rem;
  letter-spacing:.045em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  will-change:transform;
}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.btn--primary{color:#fff;background:var(--grad-brand);box-shadow:0 14px 34px -12px rgba(21,100,200,.65)}
.btn--primary::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--blue-600),var(--teal-500));
  opacity:0;transition:opacity .45s var(--ease);
}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 22px 46px -14px rgba(21,100,200,.72)}
.btn--primary:hover::after{opacity:1}
.btn--primary:hover svg{transform:translateY(4px)}
.btn--ghost{
  color:var(--navy-800);
  box-shadow:inset 0 0 0 2px rgba(14,52,104,.22);
  background:rgba(255,255,255,.6);backdrop-filter:blur(8px);
}
.btn--ghost:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px var(--teal-500);color:var(--teal-700)}

/* ═══════════════════ PRELOADER ═══════════════════ */
.loader{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--sky-100) 55%,var(--sky-200) 100%);
}
.loader__box{display:grid;justify-items:center;gap:1.4rem;transition:opacity .5s ease,transform .5s ease}
.loader__logo{position:relative;width:132px;height:132px;display:grid;place-items:center}
.loader__logo img{width:104px;height:104px;object-fit:contain;opacity:0;animation:pop .75s var(--ease) .15s forwards}
.loader__arc{position:absolute;inset:0;width:100%;height:100%;animation:spin 1.5s linear infinite}
.loader__arc circle{
  fill:none;stroke:var(--teal-400);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:70 290;
}
@keyframes pop{0%{opacity:0;transform:scale(.65)}100%{opacity:1;transform:scale(1)}}
.loader__word{
  font-family:var(--f-script);font-weight:700;font-size:1.75rem;color:var(--navy-800);
  opacity:0;animation:fadeUp .7s var(--ease) .85s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.loader__bar{width:190px;height:3px;border-radius:3px;background:rgba(14,52,104,.12);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--grad-brand);animation:barFill 1.5s var(--ease) .2s forwards}
@keyframes barFill{to{width:100%}}
.loader__curtain{position:absolute;inset:0;background:var(--navy-800);transform:scaleY(0);transform-origin:bottom}
.loader.is-done .loader__box{opacity:0;transform:translateY(-18px)}
.loader.is-done .loader__curtain{transform:scaleY(1);transform-origin:bottom;transition:transform .55s var(--ease-io)}
.loader.is-gone{opacity:0;pointer-events:none;transition:opacity .35s ease .55s}

/* ═══════════════════ SCROLL PROGRESS ═══════════════════ */
.scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:900;background:transparent;pointer-events:none}
.scrollbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal-400),var(--blue-500),var(--navy-700));box-shadow:0 0 14px rgba(23,162,184,.7)}

/* ═══════════════════ CURSOR ═══════════════════ */
.cursor,.cursor-ring{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.cursor{width:7px;height:7px;background:var(--teal-500);margin:-3.5px 0 0 -3.5px}
.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.6px solid rgba(23,162,184,.55);transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s}
body.cursor-on .cursor,body.cursor-on .cursor-ring{opacity:1}
body.cursor-lg .cursor-ring{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(23,162,184,.1);border-color:rgba(23,162,184,.8)}
@media(hover:none),(pointer:coarse){.cursor,.cursor-ring{display:none}}

/* ═══════════════════ NAV ═══════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  height:var(--nav-h);display:flex;align-items:center;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),height .4s var(--ease),backdrop-filter .5s;
}
.nav.is-stuck{
  height:64px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.6) blur(18px);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
  box-shadow:0 8px 30px -16px rgba(10,45,90,.32);
}
.nav__in{width:min(100% - 3rem,1400px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
@media(max-width:640px){.nav__in{width:min(100% - 1.6rem,1400px)}}

.brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.brand__mark{width:46px;height:46px;flex:none;object-fit:contain;transition:transform .6s var(--ease)}
.brand:hover .brand__mark{transform:rotate(-8deg) scale(1.06)}
.brand__mark--lg{width:76px;height:76px}
/* v pätičke je tmavé pozadie — logo dostane biely terčík, aby bolo modré „P“ čitateľné */
.foot__brand .brand__mark{background:#fff;border-radius:50%;padding:7px;box-shadow:0 10px 26px -12px rgba(0,0,0,.7)}
.brand__txt{display:grid;line-height:1.12}
.brand__txt b{font-family:var(--f-display);font-weight:800;font-size:1.02rem;color:var(--navy-800);letter-spacing:-.01em}
.brand__txt em{font-style:normal;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-600)}

.nav__links{display:flex;align-items:center;gap:.35rem}
.nav__link{
  position:relative;padding:.5rem .62rem;border-radius:var(--r-pill);white-space:nowrap;
  font-weight:600;font-size:.875rem;color:var(--navy-800);
  transition:color .3s var(--ease),background .3s var(--ease);
}
.nav__link::after{
  content:'';position:absolute;left:.62rem;right:.62rem;bottom:.3rem;height:2px;border-radius:2px;
  background:var(--grad-brand);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);transform-origin:left}
.nav__link.is-active{color:var(--teal-700)}
.nav__link--cta{
  margin-left:.6rem;color:#fff;background:var(--grad-brand);
  padding:.7rem 1.4rem;font-family:var(--f-display);font-weight:800;
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 10px 24px -12px rgba(21,100,200,.7);
  /* transform aj tieň musia byť v zozname, inak by hover „skočil“ */
  transition:color .3s var(--ease),background .3s var(--ease),
             transform .38s var(--ease),box-shadow .38s var(--ease);
}
.nav__link--cta::after{display:none}
.nav__link--cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(21,100,200,.85)}

.burger{display:none;flex:none;width:44px;height:44px;position:relative;z-index:1000}
.burger span{
  position:absolute;left:11px;width:22px;height:2px;border-radius:2px;background:var(--navy-800);
  transition:transform .45s var(--ease),opacity .3s,background .3s;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:27px}
.burger.is-open span{background:#fff}
.burger.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* pribudla položka „Aktuálne“ — odkazy sa pod 1100 px už nezmestia vedľa loga */
@media(max-width:1100px){
  .nav__links{display:none}
  .burger{display:block}
}

/* full-screen menu */
.menu{position:fixed;inset:0;z-index:950;visibility:hidden;pointer-events:none}
.menu.is-open{visibility:visible;pointer-events:auto}
.menu__bg{
  position:absolute;inset:0;
  background:linear-gradient(150deg,var(--navy-900),var(--teal-700) 48%,var(--teal-500));
  clip-path:circle(0% at calc(100% - 44px) 40px);
  transition:clip-path .8s var(--ease);
}
.menu.is-open .menu__bg{clip-path:circle(150% at calc(100% - 44px) 40px)}
.menu__list{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:0 8vw}
.menu__list a{
  display:flex;align-items:baseline;gap:1rem;
  font-family:var(--f-display);font-weight:900;
  font-size:clamp(1.9rem,7vw,3.4rem);line-height:1.22;
  color:#fff;opacity:0;transform:translateY(28px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;
}
.menu__list a i{font-style:normal;font-size:.8rem;font-weight:800;letter-spacing:.16em;color:var(--teal-400);opacity:.85}
.menu__list a:hover{color:var(--teal-400)}
.menu.is-open .menu__list a{opacity:1;transform:none}
.menu.is-open .menu__list a:nth-child(1){transition-delay:.22s}
.menu.is-open .menu__list a:nth-child(2){transition-delay:.28s}
.menu.is-open .menu__list a:nth-child(3){transition-delay:.34s}
.menu.is-open .menu__list a:nth-child(4){transition-delay:.40s}
.menu.is-open .menu__list a:nth-child(5){transition-delay:.46s}
.menu.is-open .menu__list a:nth-child(6){transition-delay:.52s}
.menu.is-open .menu__list a:nth-child(7){transition-delay:.58s}
.menu__sig{
  position:absolute;bottom:8vh;left:8vw;
  font-family:var(--f-script);font-weight:700;font-size:1.8rem;color:var(--teal-200);
  opacity:0;transition:opacity .6s var(--ease) .65s;
}
.menu.is-open .menu__sig{opacity:1}

/* ═══════════════════ HERO ═══════════════════ */
.hero{
  position:relative;
  /* Na veľmi vysokých obrazovkách sekcia ďalej nerastie — inak by sa
     nadpis (zvislo vycentrovaný) vzďaľoval od postavy ukotvenej dole
     a postava by musela byť obrovská, aby ho dobehla. */
  min-height:min(100svh, 1000px);
  /* stretch (nie center): obsah vyplní celú výšku, takže spodok portrétu
     sedí na presne danom mieste voči vlnám nezávisle od výšky okna */
  display:flex;align-items:stretch;
  padding:calc(var(--nav-h) + 3rem) 0 clamp(7rem,14vw,11rem);
  overflow:hidden;isolation:isolate;
}
.sky{position:absolute;inset:0;z-index:-2;overflow:hidden}
.sky__grad{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 60% at 78% 6%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 55%),
    linear-gradient(178deg,#A8DCEC 0%,#CFEDF6 32%,#E8F7FC 62%,#F5FCFE 100%);
}
.sky__sun{
  position:absolute;top:-12%;right:6%;width:46vw;height:46vw;max-width:640px;max-height:640px;
  background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(210,236,255,.55) 42%,rgba(210,236,255,0) 70%);
  border-radius:50%;animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.09);opacity:1}}

/* obal nesie parallax (transform), vnútro nesie CSS animáciu — inak by si prekážali */
.clouds-layer{position:absolute;inset:0;will-change:transform}
.clouds{position:absolute;left:0;width:300%;height:100%;background-repeat:repeat-x;background-position:0 0;opacity:.9}
.clouds--far{
  top:6%;height:34%;
  background-image:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,0) 100%);
  background-size:34% 100%;animation:drift 78s linear infinite;opacity:.75;
}
.clouds--mid{
  top:2%;height:26%;
  background-image:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0) 100%);
  background-size:22% 100%;animation:drift 52s linear infinite reverse;opacity:.85;
}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}

/* skutočná fotografia kostola, ukotvená k spodku hero a hore zjemnená do oblohy */
.photo-scene{
  position:absolute;left:0;right:0;bottom:0;height:86%;
  background:url("../assets/img/kostol-hero-1800.jpg?v=202610061431") 58% top/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 9%,#000 20%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 9%,#000 20%,#000 100%);
  will-change:transform;
}

.sky__veil{
  position:absolute;inset:0;
  /* slabší závoj => fotografia kostola je výraznejšia a pôsobí prirodzenejšie;
     vľavo ostáva dosť krytia, aby bol text čitateľný */
  background:linear-gradient(97deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.82) 30%,rgba(255,255,255,.44) 52%,rgba(255,255,255,.04) 76%,rgba(255,255,255,0) 100%);
}
@media(max-width:900px){
  .sky__veil{background:linear-gradient(180deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.62) 45%,rgba(255,255,255,.08) 100%)}
}

.hero__in{
  width:min(100% - 3rem,var(--wrap));margin-inline:auto;
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
/* container-type => nadpis sa škáluje podľa šírky STĹPCA, nie okna,
   takže „PRISTACH“ sa nikdy nezalomí */
.hero__copy{container-type:inline-size}
@media(min-width:901px){
  .hero__in{grid-template-rows:1fr}
  .hero__copy{align-self:center}
}

@media(max-width:900px){
  .hero__in{grid-template-columns:1fr;text-align:center;width:min(100% - 2rem,var(--wrap))}
}

/* flex (nie inline-flex): inak by sa bublina „Kandidujem…“ priradila
   na ten istý riadok vedľa názvu obce namiesto pod neho */
.crest-row{display:flex;align-items:center;gap:.85rem;margin-bottom:1.5rem}
@media(max-width:900px){.crest-row{justify-content:center}}
.crest-row__mp{height:58px;width:auto;flex:none;filter:drop-shadow(0 6px 14px rgba(9,40,85,.18))}
.crest-row__sep{width:1px;height:46px;background:rgba(14,52,104,.22);flex:none}
/* dvojriadkový blok — obe časti rovnako široké, text netrčí do strany */
.crest-row__txt{display:grid;text-align:left;line-height:1.14}
/* veľkosti zladené tak, aby „NAŠA BUDÚCNOSŤ“ nebolo širšie než „KOSTOĽANY“ */
.crest-row__txt b{font-family:var(--f-display);font-weight:800;font-size:1.02rem;letter-spacing:.02em;color:var(--navy-800);text-transform:uppercase}
.crest-row__txt span{margin-top:.2rem;font-size:.63rem;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--teal-600)}

/* flex:none — inak sa bodka pri zalomení textu stlačí do ovcálu */

.hero__name{font-family:var(--f-display-alt);font-weight:700;line-height:.88;letter-spacing:0;margin-bottom:.5rem}
.hero__name .ln{display:block;font-size:clamp(2.6rem,10vw,7.4rem)}
@supports (font-size:1cqw){
  .hero__name .ln{font-size:clamp(2.6rem,21cqw,8.6rem)}
}
.ln--1{color:var(--navy-800)}
.ln--2{color:var(--blue-600)}

.sig-wrap{position:relative;display:inline-block;padding-bottom:.9rem;margin-bottom:1.4rem}
.sig-line{position:absolute;left:0;bottom:0;width:100%;height:16px;overflow:visible}
.sig-line__p{fill:none;stroke:var(--teal-500);stroke-width:3;stroke-linecap:round;stroke-dasharray:440;stroke-dashoffset:440;transition:stroke-dashoffset 1.4s var(--ease) .3s}
.sig-wrap.is-in .sig-line__p{stroke-dashoffset:0}

.hero__lead{max-width:52ch;font-size:clamp(1rem,1.4vw,1.16rem);color:var(--ink-2);margin-bottom:2rem;text-wrap:pretty}
@media(max-width:900px){.hero__lead{margin-inline:auto}}
.hero__lead b{color:var(--teal-700);font-weight:700}

.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem}
@media(max-width:900px){.hero__cta{justify-content:center}}

/* portrét — orezaná postava ukotvená k spodku, ako na plagáte */
.hero__photo{
  position:relative;z-index:0;justify-self:end;align-self:end;
  width:100%;max-width:500px;
  margin-bottom:calc(var(--wave-h) * -0.94);
}
.cutout{
  width:100%;height:auto;
  filter:drop-shadow(0 18px 30px rgba(9,40,85,.26)) saturate(1.04) contrast(1.03);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Na počítači je postava umiestnená absolútne voči .hero, takže jej spodný
   okraj vieme dať POD spodok sekcie — pri overflow:hidden sa oreže a nikdy
   sa neukáže, ani keď sa vlna pri animácii miestami prepadne nižšie.
   Výšku určuje rám a šírka sa dopočíta z pomeru strán — tým nad postavou
   nikdy nevznikne prázdne miesto (na 1920×1080 ho bolo 113 px a hlava
   klesla 82 px pod nadpis). */
@media(min-width:901px){
  .hero__photo{
    position:absolute;
    /* rovnaký odstup od pravého okraja, aký má text zľava */

    right:calc((100% - min(100% - 3rem, var(--wrap))) / 2);
    bottom:-2.5rem;
    height:calc(70% + 2.5rem);
    width:auto;max-width:none;margin:0;
  }
  .cutout{height:100%;width:auto;max-width:none;display:block}
}

@media(max-width:900px){
  /* to isté na telefóne: spodok pod spodkom sekcie => orez je skrytý */
  .hero__photo{
    justify-self:center;margin-top:1.2rem;
    /* siroky skoro ako napis PRISTACH: ten ma ~0,75 sirky stlpca, kym
       nenarazi na svoj strop (potom ~493px) */
    max-width:clamp(300px, 76%, 505px);
    margin-bottom:calc(var(--wave-h) * -1.45);
  }
}

.badge{
  position:absolute;display:grid;gap:.1rem;
  padding:.75rem 1.15rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  box-shadow:0 18px 40px -14px rgba(9,40,85,.45),inset 0 0 0 1px rgba(21,100,200,.14);
  text-align:left;
}
.badge b{font-family:var(--f-display);font-weight:900;font-size:1.02rem;color:var(--navy-800);line-height:1.1}
.badge span{font-size:var(--label-size);font-weight:700;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-600)}
.badge--b{bottom:26%;right:-2%;animation:float 7.5s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:520px){.badge--b{right:-1%}.badge b{font-size:.88rem}}

/* vlny */
.waves{position:absolute;left:0;right:0;bottom:0;line-height:0;z-index:1;pointer-events:none}
.waves svg{width:100%;height:var(--wave-h);display:block}
.waves--flip{bottom:-1px;z-index:3}
.waves--flip .w1{fill:rgba(255,255,255,.10)}
.waves--flip .w2{fill:rgba(255,255,255,.20)}
.waves--flip .w3{fill:var(--sky-50)}
/* Tvary presahujú viewBox o 240 jednotiek (16,7 %), takže si môžu dovoliť
   výrazný posun bez toho, aby sa na okraji odhalila medzera.
   Tri vrstvy sa hýbu rôznou rýchlosťou a smerom => efekt hĺbky. */
.w{transform-origin:center}
.w1{fill:rgba(23,162,184,.24);animation:waveA 13s ease-in-out infinite}
.w2{fill:rgba(21,100,200,.30);animation:waveB 18s ease-in-out infinite}
.w3{fill:var(--navy-800);animation:waveC 23s ease-in-out infinite}
@keyframes waveA{0%,100%{transform:translate(0,0)}50%{transform:translate(-8%,4px)}}
@keyframes waveB{0%,100%{transform:translate(-5%,0)}50%{transform:translate(3%,-5px)}}
@keyframes waveC{0%,100%{transform:translate(0,3px)}50%{transform:translate(-10%,-3px)}}

/* ═══════════════════ MARQUEE ═══════════════════ */
.marquee{background:var(--navy-800);overflow:hidden;padding:1.05rem 0;position:relative;z-index:4}
.marquee::before,.marquee::after{
  content:'';position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--navy-800),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--navy-800),transparent)}
.marquee__row{display:flex;width:max-content;animation:march 34s linear infinite}
.marquee:hover .marquee__row{animation-play-state:paused}
.marquee__grp{display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem}
.marquee__grp span{
  font-family:var(--f-display);font-weight:800;font-size:clamp(.85rem,1.5vw,1.05rem);
  letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap;
}
.marquee__grp i{color:var(--teal-400);font-size:.7rem;font-style:normal}
@keyframes march{to{transform:translateX(-50%)}}

/* ═══════════════════ PILIERE ═══════════════════ */
.piliere{background:
  radial-gradient(70% 50% at 10% 0%,rgba(23,162,184,.08),transparent 60%),
  radial-gradient(60% 60% at 95% 60%,rgba(21,100,200,.07),transparent 62%),
  var(--sky-50);
}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.2vw,1.8rem)}
@media(max-width:900px){.pillars{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

.pillar{
  position:relative;padding:clamp(1.9rem,3vw,2.6rem);border-radius:var(--r-lg);
  background:linear-gradient(165deg,#fff,#F6FBFF);
  box-shadow:var(--sh-md),inset 0 0 0 1px rgba(21,100,200,.08);
  overflow:hidden;isolation:isolate;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
  transform-style:preserve-3d;
}
.pillar::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(165deg,var(--navy-800),var(--teal-700) 55%,var(--teal-600));
  transition:opacity .55s var(--ease);
}
.pillar:hover{box-shadow:var(--sh-lg),inset 0 0 0 1px rgba(21,100,200,.2)}
.pillar:hover::before{opacity:1}
.pillar:hover h3,.pillar:hover p{color:#fff}
.pillar:hover .pillar__no{color:rgba(255,255,255,.14)}
.pillar:hover .pillar__ico{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.pillar:hover .pillar__ico svg .dr,.pillar:hover .pillar__ico svg .dot{stroke:#fff;fill:none}
.pillar:hover .pillar__ico svg .dot{fill:#fff}

.pillar__no{
  position:absolute;top:.6rem;right:1.2rem;
  font-family:var(--f-display);font-weight:900;font-size:5.2rem;line-height:1;
  color:rgba(21,100,200,.07);transition:color .55s var(--ease);pointer-events:none;
}
.pillar__ico{
  width:74px;height:74px;border-radius:var(--r-md);display:grid;place-items:center;margin-bottom:1.4rem;
  background:linear-gradient(150deg,rgba(23,162,184,.14),rgba(21,100,200,.12));
  box-shadow:inset 0 0 0 1px rgba(21,100,200,.14);
  transition:background .55s var(--ease),box-shadow .55s var(--ease),transform .55s var(--ease);
}
.pillar:hover .pillar__ico{transform:translateY(-4px) rotate(-5deg)}
.pillar__ico svg{width:40px;height:40px}
.pillar__ico svg .dr{fill:none;stroke:var(--teal-600);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);transition:stroke .55s var(--ease)}
.pillar__ico svg .dot{fill:var(--teal-600);opacity:0;transition:fill .55s var(--ease)}
.pillar.is-in .pillar__ico svg .dr{animation:drawIn 1.5s var(--ease) forwards}
.pillar.is-in .pillar__ico svg .dot{animation:dotIn .4s ease forwards}
.pillar.is-in .pillar__ico svg .dot:nth-of-type(1){animation-delay:.9s}
.pillar.is-in .pillar__ico svg .dot:nth-of-type(2){animation-delay:1.05s}
.pillar.is-in .pillar__ico svg .dot:nth-of-type(3){animation-delay:1.2s}
@keyframes drawIn{to{stroke-dashoffset:0}}
@keyframes dotIn{to{opacity:1}}

.pillar h3{
  font-family:var(--f-display);font-weight:900;font-size:clamp(1.5rem,2.4vw,1.95rem);
  line-height:1.06;letter-spacing:-.02em;color:var(--navy-800);margin-bottom:.85rem;
  transition:color .55s var(--ease);
}
.pillar p{color:var(--muted);font-size:.97rem;transition:color .55s var(--ease);text-wrap:pretty}
.pillar__glow{
  position:absolute;left:-30%;bottom:-60%;width:160%;height:120%;border-radius:50%;
  background:radial-gradient(circle,rgba(23,162,184,.35),transparent 62%);
  opacity:0;transition:opacity .6s var(--ease);pointer-events:none;filter:blur(30px);
}
.pillar:hover .pillar__glow{opacity:.55}

/* ═══════════════════ O MNE ═══════════════════ */
.omne{background:linear-gradient(180deg,var(--sky-50),#fff 40%,var(--sky-50))}
.omne__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.omne__grid{grid-template-columns:1fr}}

/* z-index:0 vytvorí stacking context, aby ::before (z-index:-1) nezmizol
   za pozadím sekcie */
.omne__media{position:relative;z-index:0}
.frame{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg)}
.frame img{width:100%;aspect-ratio:4/4.6;object-fit:cover;object-position:50% 18%;transition:transform 1.2s var(--ease)}
.omne__media:hover .frame img{transform:scale(1.04)}
.frame__edge{position:absolute;inset:0;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  background:linear-gradient(200deg,rgba(23,162,184,.18) 0%,transparent 40%,rgba(11,46,94,.28) 100%)}
.omne__media::before{
  content:'';position:absolute;inset:auto -18px -18px auto;width:62%;height:62%;
  border-radius:var(--r-lg);border:2px solid rgba(23,162,184,.35);z-index:-1;
}
/* na úzkych displejoch má .wrap len 16px okraj — 18px presah by spôsobil
   vodorovné pretekanie stránky */
@media(max-width:640px){
  .omne__media::before{inset:auto -6px -6px auto}
}
.quote-chip{
  position:absolute;left:-1.4rem;bottom:2.2rem;max-width:270px;
  display:flex;gap:.8rem;padding:1.05rem 1.25rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.92);backdrop-filter:blur(14px);
  box-shadow:var(--sh-md),inset 0 0 0 1px rgba(255,255,255,.8);
}
.quote-chip svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--teal-500);stroke-width:1.7;stroke-linejoin:round}
.quote-chip p{font-size:.9rem;font-weight:600;color:var(--navy-800);line-height:1.45}
@media(max-width:560px){.quote-chip{left:auto;right:0;bottom:-1rem;max-width:230px}}

.prose p{color:var(--muted);font-size:1.03rem;margin-top:1.05rem;max-width:60ch;text-wrap:pretty}
.prose b{color:var(--navy-800);font-weight:700}

/* ─── príbeh „Kto som?“ — bloky s ikonou a jemnou osou ─── */
.pribeh{position:relative;margin-top:1.6rem;display:grid;gap:1.1rem}

.pribeh__blok{
  position:relative;display:grid;grid-template-columns:40px 1fr;gap:.9rem;align-items:start;
}
@media(max-width:560px){
  .pribeh__blok{grid-template-columns:1fr;gap:.4rem}
}

.pribeh__ico{
  position:relative;z-index:1;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  /* ciarove ikony v znackovej aqua, rovnako ako pri pilieroch */
  background:#fff;box-shadow:0 0 0 2px rgba(4,167,181,.25),var(--sh-sm);
}
.pribeh__blok p{grid-column:2;color:var(--muted);font-size:1rem;line-height:1.65;text-wrap:pretty}
.pribeh__blok p + p{margin-top:.7rem}
.pribeh__blok b{color:var(--navy-800);font-weight:700}
@media(max-width:560px){.pribeh__blok p{grid-column:1}}

/* ─── podpis pod príbehom ─── */
.podpis{
  margin-top:1.8rem;padding:1.3rem 1.5rem;border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(4,167,181,.1),rgba(21,100,200,.07));
  box-shadow:inset 0 0 0 1px rgba(4,167,181,.22);
}
.podpis__dik{color:var(--ink-2);font-size:1rem;margin-bottom:.7rem}
.podpis .sig{color:var(--navy-800);line-height:1.1}
.podpis em{
  display:block;margin-top:.15rem;font-style:normal;
  font-size:var(--label-size);font-weight:700;letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--teal-700);
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.6rem}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{
  padding:1.3rem 1rem;border-radius:var(--r-sm);background:#fff;
  box-shadow:var(--sh-sm),inset 0 0 0 1px rgba(21,100,200,.1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.stat:hover{transform:translateY(-5px);box-shadow:var(--sh-md),inset 0 0 0 1px rgba(23,162,184,.35)}
.stat b{
  display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(2rem,3.6vw,2.7rem);
  line-height:1;letter-spacing:-.03em;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{display:block;margin-top:.35rem;font-size:var(--label-size);font-weight:700;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--muted)}

/* ═══════════════════ PROGRAM ═══════════════════ */
/* BEZ overflow:hidden! Predok s overflow:hidden ruší position:sticky
   u vnorených hlavičiek kapitol (tie by sa prestali pripínať pod navigáciu). */
.program{
  background:linear-gradient(168deg,var(--navy-900) 0%,var(--navy-700) 22%,var(--teal-700) 55%,var(--teal-700) 88%,var(--teal-600) 112%);
  color:#fff;
  padding-bottom:clamp(7rem,13vw,11rem);
}
@keyframes meshMove{from{transform:scale(1) translateY(0)}to{transform:scale(1.12) translateY(-3%)}}
.program .wrap{position:relative;z-index:2}
.program__body{position:relative;margin-top:clamp(2rem,5vw,4rem)}


.chapter{position:relative;margin-bottom:clamp(3rem,6vw,5rem)}
.chapter__head{position:relative;padding:0 0 1.4rem;margin-bottom:1.6rem}
.chapter__headin{display:flex;align-items:flex-start;gap:clamp(1rem,2.4vw,1.9rem)}
.chapter__no{
  /* line-height:.8 orezávalo číslice: background-clip:text maľuje pozadie
     len v rámci content boxu, ktorý bol nižší než samotné glyfy */
  font-family:var(--f-display);font-weight:900;line-height:1;
  padding:.06em .05em .12em;
  font-size:clamp(3.4rem,7.5vw,6rem);letter-spacing:-.03em;
  background:linear-gradient(160deg,var(--teal-400),rgba(78,155,239,.35));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  flex:none;
}
.chapter__head h3{
  font-family:var(--f-display);font-weight:900;
  font-size:clamp(1.6rem,3.5vw,2.7rem);line-height:1.06;letter-spacing:-.02em;color:#fff;
}
.chapter__head p{margin-top:.4rem;color:rgba(214,234,255,.72);font-size:clamp(.95rem,1.3vw,1.06rem);max-width:52ch}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.8vw,1.4rem)}
@media(max-width:1080px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.cards{grid-template-columns:1fr}}

.card{
  position:relative;padding:1.7rem 1.5rem 1.6rem;border-radius:var(--r-md);
  background:linear-gradient(160deg,rgba(3,26,54,.44),rgba(3,26,54,.30));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease);
}
.card::after{
  content:'';position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--teal-400),var(--blue-400));
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.card:hover{
  transform:translateY(-7px);
  background:linear-gradient(160deg,rgba(3,26,54,.54),rgba(3,26,54,.38));
  box-shadow:0 26px 50px -22px rgba(0,0,0,.6),inset 0 0 0 1px rgba(58,192,212,.45);
}
.card:hover::after{transform:scaleX(1)}
.card__n{
  display:inline-block;font-family:var(--f-display);font-weight:900;font-size:.74rem;
  letter-spacing:.12em;color:var(--teal-400);margin-bottom:.7rem;
}
.card h4{font-family:var(--f-display);font-weight:800;font-size:1.12rem;line-height:1.24;color:#fff;margin-bottom:.55rem;letter-spacing:-.01em}
.card p{font-size:.93rem;color:rgba(216,236,255,.92);text-wrap:pretty}

/* ═══════════════════ 100 DNÍ ═══════════════════ */
.days{background:var(--sky-50);padding-top:clamp(7rem,13vw,11rem)}
.days__pin{position:relative;height:520vh}
/* Záložná hodnota — presné povytiahnutie počíta main.js podľa skutočnej
   výšky karty a okna (inline style ju prebije). */
@media(min-width:901px){
  .days__pin{margin-top:calc(-1 * min(210px,26vh))}
}
.days__sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
/* flex:none => položka si drží max-content šírku, takže offsetWidth v JS
   vráti skutočnú šírku celej dráhy (inak by ju flexbox zmrštil na viewport) */
.days__track{
  display:flex;flex:none;gap:clamp(1rem,2vw,1.6rem);
  padding-inline:max(2rem,calc((100vw - var(--wrap))/2));will-change:transform;
}
.day{
  position:relative;flex:none;width:min(78vw,380px);
  padding:2.2rem 1.9rem 2.4rem;border-radius:var(--r-lg);
  background:linear-gradient(165deg,#fff,#F3F9FF);
  box-shadow:var(--sh-md),inset 0 0 0 1px rgba(21,100,200,.09);
  overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.day:hover{transform:translateY(-8px);box-shadow:var(--sh-lg),inset 0 0 0 1px rgba(23,162,184,.35)}
.day__badge{
  display:inline-block;padding:.42rem .95rem;border-radius:var(--r-pill);margin-bottom:1.2rem;
  font-family:var(--f-display);font-weight:800;font-size:var(--label-size);letter-spacing:var(--label-track);text-transform:uppercase;
  color:#fff;background:var(--grad-brand);
}
.day__badge--lime{background:linear-gradient(100deg,var(--teal-400),var(--teal-600));color:#fff}
.day h4{font-family:var(--f-display);font-weight:900;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.1;letter-spacing:-.02em;color:var(--navy-800);margin-bottom:.75rem}
.day p{color:var(--muted);font-size:.97rem;text-wrap:pretty}
.day__no{
  position:absolute;right:1.1rem;bottom:.2rem;
  font-family:var(--f-display);font-weight:900;font-size:5.4rem;line-height:1;
  color:rgba(21,100,200,.07);pointer-events:none;
}
.day--end{background:linear-gradient(160deg,var(--navy-800),var(--teal-700) 58%,var(--teal-600))}
.day--end h4{color:#fff}
.day--end p{color:rgba(214,234,255,.78);margin-bottom:1.5rem}
/* ukazovateľ je vnútri sticky rámca a je absolútne umiestnený,
   takže počas pripnutia stojí na mieste (predtým „stúpal“ cez stránku) */
.days__prog{
  position:absolute;bottom:9vh;
  left:max(2rem,calc((100vw - var(--wrap))/2));
  right:max(2rem,calc((100vw - var(--wrap))/2));
  height:4px;border-radius:4px;background:rgba(21,100,200,.14);
}
.days__prog i{display:block;height:100%;width:0;border-radius:4px;background:var(--grad-brand);box-shadow:0 0 14px rgba(23,162,184,.6)}

@media(max-width:900px){
  .days__pin{height:auto}
  .days__sticky{position:static;height:auto;display:block;overflow:visible}
  .days__track{
    flex-direction:column;transform:none!important;padding-inline:0;
    width:min(100% - 2rem,var(--wrap));margin-inline:auto;gap:1rem;
  }
  .day{width:100%}
  .days__prog{display:none}
}

/* ═══════════════════ CTA BAND ═══════════════════ */
.cta-band{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(3.4rem,7vw,5.4rem) 0;
  background:linear-gradient(105deg,var(--navy-800) 0%,var(--teal-700) 45%,var(--teal-600) 100%);
  color:#fff;
}
.cta-band::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:8px;
  background:linear-gradient(90deg,var(--teal-400),var(--blue-400),var(--teal-300),var(--teal-400));
  background-size:220% 100%;animation:slide 9s linear infinite;
}
@keyframes slide{to{background-position:220% 0}}
.cta-band__glow{
  position:absolute;inset:-30% -10%;z-index:-1;opacity:.5;
  background:radial-gradient(38% 60% at 20% 40%,rgba(47,198,214,.32),transparent 60%),
             radial-gradient(40% 60% at 80% 60%,rgba(58,192,212,.35),transparent 62%);
  animation:meshMove 14s ease-in-out infinite alternate;
}
.cta-band__in{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(max-width:860px){.cta-band__in{grid-template-columns:1fr;text-align:center}}
.cta-band h2{font-family:var(--f-display);font-weight:900;font-size:clamp(1.8rem,4.6vw,3.2rem);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
.cta-band p{margin-top:1rem;color:rgba(220,239,255,.8);max-width:56ch;font-size:1.03rem;text-wrap:pretty}
@media(max-width:860px){.cta-band p{margin-inline:auto}}
.deadline{
  display:grid;gap:.35rem;padding:1.5rem 1.7rem;border-radius:var(--r-md);text-align:center;
  background:linear-gradient(150deg,var(--lime),var(--lime-dark));
  box-shadow:0 24px 50px -22px rgba(0,0,0,.55);
  transform-origin:center;animation:tick 5s ease-in-out infinite;
}
@keyframes tick{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}

.deadline span{font-family:var(--f-display);font-weight:800;font-size:var(--label-size);letter-spacing:var(--label-track);text-transform:uppercase;color:rgba(18,40,10,.72);line-height:1.4}
.deadline b{font-family:var(--f-display);font-weight:900;font-size:clamp(1.4rem,3vw,2rem);color:#0F2A08;letter-spacing:-.02em}
.deadline i{display:block;margin-top:.25rem;font-family:var(--f-display);font-weight:800;font-size:var(--label-size);letter-spacing:var(--label-track);text-transform:uppercase;color:rgba(214,234,255,.75);font-style:normal}

/* ═══════════════════ AKTUALITY — VLASTNÉ PRÍSPEVKY ═══════════════════
   Príspevky sem plní kandidát cez /admin.html. Predtým tu bola galéria
   plagátov a príspevky z Facebooku; obidve nahradila táto sekcia, aby web
   nezávisel od cudzej služby ani od prístupových tokenov. */
.aktuality{background:linear-gradient(180deg,#fff,var(--sky-50))}
.aktuality[hidden]{display:none}

/* Mriežka je užšia ako obsah stránky — aktuality sú doplnok, karty
   s obrázkami nemajú prebíjať kandidátov ani program. Začína pod
   nadpisom sekcie, nie na stred, aby s ním lícovala. */
.nastenka__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);
  max-width:1040px;
  /* karty v jednom rade sú rovnako vysoké — rad tak drží líniu */
  align-items:stretch;
}
@media(max-width:900px){.nastenka__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.nastenka__grid{grid-template-columns:1fr;max-width:420px}}

.nastenka__viac{margin:clamp(1.6rem,3vw,2.2rem) auto 0;display:flex;width:max-content}
.nastenka__viac[hidden]{display:none}

/* ─── jedna karta ─── */
.prispevok{
  display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
  border-radius:var(--r-md);background:linear-gradient(165deg,#fff,#F4FAFE);
  box-shadow:var(--sh-md),inset 0 0 0 1px rgba(21,100,200,.09);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  color:inherit;text-decoration:none;
}
.prispevok:hover{transform:translateY(-6px);box-shadow:var(--sh-lg),inset 0 0 0 1px rgba(4,167,181,.35)}

/* Rám je štvorec (na telefóne 4:3), aby obrázky neboli obrovské, a fotka
   sa doň zmestí celá — nič sa neoreže. Prázdne miesto po stranách vyplní
   tá istá fotka rozmazaná na pozadí, aby karta nepôsobila ako diera. */
.prispevok__media{
  position:relative;overflow:hidden;
  aspect-ratio:1;background:var(--sky-100);
}
@media(max-width:600px){.prispevok__media{aspect-ratio:4/3}}
.prispevok__media::before{
  content:'';position:absolute;inset:-10%;
  background-image:var(--foto);background-size:cover;background-position:50% 50%;
  filter:blur(24px) saturate(1.3) brightness(.96);
  transform:scale(1.08);opacity:.55;
}
.prispevok__media img{
  position:relative;width:100%;height:100%;
  /* scale-down = ako contain, ale malú fotku nikdy nenafúkne do rozmazana */
  object-fit:scale-down;display:block;
  /* fotka sa ukáže až keď je načítaná — inak by presvitalo len rozmazané
     pozadie a karta by „zabliakala“ */
  opacity:0;transition:opacity .45s var(--ease),transform 1s var(--ease);
}
.prispevok__media img.je-nacitana{opacity:1}
.prispevok:hover .prispevok__media img.je-nacitana{transform:scale(1.04)}

.prispevok__telo{padding:1.15rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex:1;gap:.55rem}
.prispevok--text .prispevok__telo{padding-top:1.35rem}

/* dátum, značka „Nové“ a spinka pri príspevku s odkazom */
.prispevok__hlavicka{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.prispevok__datum{
  font-family:var(--f-display);font-weight:800;font-size:.68rem;
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-700);
}
.prispevok__novy{
  font-family:var(--f-display);font-weight:900;font-size:.6rem;
  letter-spacing:var(--label-track);text-transform:uppercase;color:#123;
  background:var(--lime);border-radius:var(--r-pill);padding:.16rem .5rem;
  line-height:1.4;
}
.prispevok__spinka{margin-left:auto;display:grid;place-items:center}
.prispevok__spinka svg{
  width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:1.9;stroke-linecap:round;
}
.prispevok:hover .prispevok__spinka svg{stroke:var(--teal-600)}

/* Na karte je text len ochutnávka — celý je v okne po kliknutí. */
.prispevok__text{
  color:var(--ink-2);font-size:.94rem;line-height:1.55;
  text-wrap:pretty;white-space:pre-line;overflow-wrap:break-word;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;
}

/* Príspevok bez fotky by inak vyzeral ako poloprázdna karta. Dostane
   preto väčšie písmo, viac riadkov a jemný podpis obce v pozadí. */
.prispevok--text{
  background:linear-gradient(160deg,#fff 0%,var(--sky-50) 55%,var(--sky-100) 100%);
}
.prispevok--text .prispevok__text{
  font-size:1.06rem;line-height:1.55;color:var(--ink);
  -webkit-line-clamp:10;
}
.prispevok--text .prispevok__telo{
  position:relative;min-height:230px;gap:.7rem;
}
.prispevok--text .prispevok__telo::before{
  content:'';position:absolute;right:-.4rem;bottom:-.6rem;width:96px;height:96px;
  background:var(--grad-brand);opacity:.07;border-radius:50%;pointer-events:none;
}


/* ─── kostra, kým sa príspevky načítavajú ─── */
.prispevok--kostra{pointer-events:none;box-shadow:var(--sh-md),inset 0 0 0 1px rgba(21,100,200,.06)}
.prispevok--kostra .prispevok__media{background:var(--sky-100)}
.prispevok--kostra .prispevok__media::before{display:none}
.prispevok--kostra .prispevok__telo{gap:.7rem;padding-top:1.3rem}
.kostra{
  display:block;height:12px;border-radius:99px;
  background:linear-gradient(90deg,var(--sky-100) 0%,#EFF7FB 35%,var(--sky-100) 70%);
  background-size:220% 100%;animation:kostraLesk 1.4s linear infinite;
}
.kostra--datum{width:38%;height:9px}
.kostra--riadok{width:100%}
.kostra--kratky{width:62%}
@keyframes kostraLesk{to{background-position:-220% 0}}
@media(prefers-reduced-motion:reduce){.kostra{animation:none}}

/* ─── tlačidlo „Zobraziť viac“ so šípkou ─── */
.prispevok__viac{
  align-self:flex-start;margin-top:auto;padding:.3rem 0 0;border:0;background:none;
  cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--f-display);font-weight:800;font-size:.76rem;
  letter-spacing:.06em;color:var(--teal-700);
  transition:color .3s var(--ease),gap .3s var(--ease);
}
.prispevok__viac svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.prispevok:hover .prispevok__viac{color:var(--teal-500);gap:.6rem}

/* ─── dlaždica s odkazom na Facebook ─── */
.prispevok--fb{
  justify-content:center;align-items:flex-start;gap:.5rem;
  padding:clamp(1.4rem,3vw,2rem);min-height:220px;
  background:linear-gradient(150deg,var(--navy-800) 0%,var(--teal-700) 78%,var(--teal-600) 100%);
  color:#fff;text-decoration:none;
  box-shadow:var(--sh-md),inset 0 0 0 1px rgba(255,255,255,.12);
}
.prispevok--fb:hover{box-shadow:var(--sh-lg),inset 0 0 0 1px rgba(123,222,234,.55)}
.prispevok__fbico{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);margin-bottom:.3rem;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.prispevok__fbico svg{width:24px;height:24px;fill:#fff}
.prispevok--fb:hover .prispevok__fbico{background:rgba(255,255,255,.24);transform:translateY(-2px)}
.prispevok--fb b{
  font-family:var(--f-display);font-weight:900;line-height:1.2;
  font-size:clamp(1.02rem,1.8vw,1.18rem);
}
.prispevok__fbpopis{color:rgba(226,244,250,.86);font-size:.9rem;line-height:1.5}
.prispevok__fbviac{
  margin-top:.5rem;font-family:var(--f-display);font-weight:800;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--teal-300);
  transition:color .3s var(--ease);
}
.prispevok--fb:hover .prispevok__fbviac{color:#fff}

/* ═══════════════════ OKNO S CELÝM PRÍSPEVKOM ═══════════════════ */

/* ─── ovládanie okna: počítadlo, šípky, krížik ─── */
.okno__ovladanie{
  position:absolute;top:.6rem;right:.7rem;z-index:3;
  display:flex;align-items:center;gap:.4rem;
}
.okno__pocitadlo{
  margin-right:.15rem;padding:.3rem .65rem;border-radius:var(--r-pill);
  background:rgba(4,21,47,.5);backdrop-filter:blur(6px);color:#fff;
  font-family:var(--f-display);font-weight:800;font-size:.72rem;letter-spacing:.04em;
}
.okno__ovladanie--sam .okno__pocitadlo,
.okno__ovladanie--sam .okno__krok{display:none}

.okno__krok{
  width:38px;height:38px;border:none;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(4,21,47,.5);backdrop-filter:blur(6px);
  transition:background .25s var(--ease),transform .25s var(--ease),opacity .25s;
}
.okno__krok svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.okno__krok:hover:not([disabled]){background:var(--teal-600);transform:scale(1.08)}
.okno__krok:active:not([disabled]){transform:scale(.95)}
.okno__krok[disabled]{opacity:.3;cursor:default}
.okno__krok:focus-visible{outline:3px solid var(--teal-300);outline-offset:3px}

/* Pri prechode na susedný príspevok obsah jemne pricestuje z tej strany,
   ktorou smerom sa ide — inak by len bez varovania preblikol. */
@keyframes oknoZlava{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes oknoZprava{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.okno__ram--vlavo .okno__telo,.okno__ram--vlavo .okno__foto{animation:oknoZlava .3s var(--ease)}
.okno__ram--vpravo .okno__telo,.okno__ram--vpravo .okno__foto{animation:oknoZprava .3s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .okno__ram--vlavo .okno__telo,.okno__ram--vlavo .okno__foto,
  .okno__ram--vpravo .okno__telo,.okno__ram--vpravo .okno__foto{animation:none}
}

/* ─── hlavička a akcie v texte ─── */
.okno__hlavicka{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
/* Nad hlavičkou textu sedí pásik s ovládaním — necháme mu miesto, nech
   sa dátum ani značka nikdy nedostanú pod tlačidlá. */
@media(min-width:821px){
  .okno__hlavicka{padding-right:210px;min-height:42px}
}
.okno__novy{
  font-family:var(--f-display);font-weight:900;font-size:.62rem;
  letter-spacing:var(--label-track);text-transform:uppercase;color:#123;
  background:var(--lime);border-radius:var(--r-pill);padding:.18rem .55rem;
}
.okno__novy[hidden]{display:none}
.okno__text[hidden]{display:none}
/* text, ktorý ešte nedorazil — tichší ako skutočný obsah */
.okno__text--caka{opacity:.55}
/* odkaz priamo v texte príspevku */
.okno__vtexte{
  color:var(--blue-600);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px;
  overflow-wrap:break-word;
  transition:color .2s var(--ease);
}
.okno__vtexte:hover{color:var(--teal-600)}
.okno__vtexte:focus-visible{outline:2px solid var(--teal-400);outline-offset:2px;border-radius:3px}

.okno__akcie{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.5rem}
.okno__zdielaj{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid var(--sky-200);background:#fff;border-radius:var(--r-pill);
  padding:.5rem .95rem;cursor:pointer;color:var(--navy-800);
  font-family:var(--f-display);font-weight:800;font-size:.76rem;letter-spacing:.04em;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.okno__zdielaj svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.okno__zdielaj:hover{border-color:var(--teal-400);color:var(--teal-700);background:var(--sky-50)}
.okno__zdielaj:focus-visible{outline:3px solid var(--teal-300);outline-offset:2px}
.okno{
  position:fixed;inset:0;z-index:9990;display:grid;place-items:center;
  padding:clamp(.8rem,3vw,3rem);
  background:rgba(4,21,47,.93);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility .32s;
}
.okno.is-open{opacity:1;visibility:visible}

.okno__ram{
  position:relative;width:min(100%,1180px);max-height:92svh;
  /* text dostane širší stĺpec ako fotka — čím širší riadok, tým menej
     sa pôvodné zalomenie príspevku rozbije do ďalších riadkov */
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  /* Riadok musí byť zviazaný s výškou okna. Bez toho si ho dlhý text
     natiahne, koľko potrebuje: okno ho oreže, rolovať sa nedá a fotka
     vo vedľajšom stĺpci sa v tej pretečenej výške posunie nadol. */
  grid-template-rows:minmax(0,1fr);
  background:#fff;border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 40px 90px -30px #000;
  transform:translateY(22px) scale(.965);
  /* jemné doskočenie — okno na konci ešte kúsok „dosadne" */
  transition:transform .5s cubic-bezier(.2,.85,.25,1.06);
}
.okno.is-open .okno__ram{transform:none}
.okno__ram--bezfoto{grid-template-columns:minmax(0,1fr);width:min(100%,760px)}

/* Pri krátkom texte by sa okno s fotkou zrazilo do úzkeho pásika a fotka
   by bola menšia než na karte. Dolná hranica výšky tomu zabráni. */
@media(min-width:821px){
  .okno__ram:not(.okno__ram--bezfoto){min-height:min(62svh,520px)}
}

.okno__foto{
  position:relative;margin:0;overflow:hidden;min-height:0;
  background:var(--navy-900);display:grid;place-items:center;
}
.okno__foto::before{
  content:'';position:absolute;inset:-10%;
  background-image:var(--foto);background-size:cover;background-position:50% 50%;
  filter:blur(30px) brightness(.7);transform:scale(1.1);
}
.okno__foto img{
  position:relative;width:100%;height:100%;
  max-height:92svh;object-fit:scale-down;display:block;
  /* fotka sa pri otvorení nenápadne dotiahne do svojej veľkosti */
  transform:scale(1.05);opacity:0;
  transition:transform .7s var(--ease),opacity .5s var(--ease);
}
.okno.is-open .okno__foto img{transform:none;opacity:1}
/* bez fotky sa obrázok musí naozaj skryť — display:block vyššie by prebilo [hidden] */
.okno__foto img[hidden]{display:none}

.okno__telo{
  /* dole je zámerne viac miesta, nech posledný riadok nekončí
     natesno pri hrane okna. Rovnakú hodnotu potrebuje aj závoj nižšie,
     preto je v premennej. */
  --spodok:clamp(2.4rem,5vw,3.4rem);
  padding:clamp(1.3rem,3vw,2.1rem) clamp(1.3rem,3vw,2.1rem) var(--spodok);
  display:flex;flex-direction:column;gap:.85rem;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;
}

/* ── posuvník ──────────────────────────────────────────────────────
   Systémový je na počítači tenký sivý prúžok, ktorý sa v bielom okne
   stratí a nie je vidieť, že sa dá rolovať. Tento drží farbu značky
   a je vidieť stále. */
.okno__telo::-webkit-scrollbar{width:12px}
.okno__telo::-webkit-scrollbar-track{
  background:rgba(11,46,94,.07);border-radius:99px;
  margin:.5rem 0 1.1rem;
}
.okno__telo::-webkit-scrollbar-thumb{
  border-radius:99px;border:3px solid #fff;
  background:linear-gradient(180deg,var(--teal-400),var(--teal-600));
  background-clip:padding-box;
}
.okno__telo::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--teal-500),var(--blue-600));
  background-clip:padding-box;
}
@supports (-moz-appearance:none){
  .okno__telo{scrollbar-width:thin;scrollbar-color:var(--teal-500) rgba(11,46,94,.07)}
}

/* Kým je dole ešte text, stráca sa do bielej — hneď je vidieť, že sa
   dá rolovať ďalej. Na konci závoj zmizne. Prvok je „sticky", takže sa
   drží spodnej hrany okna, nie konca textu — a to platí aj na telefóne,
   kde roluje celé okno namiesto samotného textu. */
.okno__telo::after{
  content:'';position:sticky;bottom:calc(var(--spodok) * -1);
  flex:none;height:clamp(3rem,6vw,4.2rem);margin-top:auto;
  margin-bottom:calc(var(--spodok) * -1);
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 78%);
  pointer-events:none;transition:opacity .3s var(--ease);
}
.okno__telo.je-na-konci::after{opacity:0}
.okno__datum{
  font-family:var(--f-display);font-weight:800;font-size:.72rem;
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-700);
}
/* pre-wrap = riadky, prázdne riadky aj odsadenie ostanú presne tak,
   ako ich kandidát napísal; break-word láme slovo len vtedy, keď sa
   inak na riadok nezmestí (napríklad dlhá adresa) */
.okno__text{
  color:var(--ink-2);font-size:1.02rem;line-height:1.6;
  white-space:pre-wrap;overflow-wrap:break-word;margin:0;
}
.okno__odkaz{align-self:flex-start;margin-top:.4rem}
.okno__odkaz[hidden]{display:none}

/* ── to isté okno v režime „človek z tímu" ────────────────────────
   Namiesto dátumu je meno a rola, namiesto odkazu a zdieľania nič.
   Kto nemá fotku, dostane veľký monogram cez celý fotostĺpec. */
/* číslo na hlasovacom lístku — v okne dostane priestor, je to údaj,
   s ktorým človek ide k urne */
.okno__cislo{
  display:inline-flex;align-items:center;gap:.8rem;margin:0 0 .35rem;
}
.okno__cislo[hidden]{display:none}
.okno__cislo b{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:clamp(3.1rem,5.2vw,3.6rem);height:clamp(3.1rem,5.2vw,3.6rem);padding:0 .8rem;
  border-radius:var(--r-sm);background:var(--grad-brand);color:#fff;
  font-family:var(--f-display);font-weight:900;font-size:clamp(1.55rem,2.7vw,1.95rem);line-height:1;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(7,35,71,.3);
  box-shadow:0 14px 28px -12px rgba(4,167,181,.95),
             inset 0 1px 0 rgba(255,255,255,.35),
             0 0 0 4px rgba(47,198,214,.14);
}
/* „č." pred číslom — rovnako ako v zozname kandidátov */
.okno__cislo b::before{content:'č.';font-size:.48em;font-weight:800;opacity:.85;margin-right:.16em}
.okno__cislo span{
  font-family:var(--f-display);font-weight:800;font-size:.76rem;
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-700);
}
.okno__meno{
  font-family:var(--f-display);font-weight:900;line-height:1.14;
  font-size:clamp(1.45rem,3.2vw,2.1rem);letter-spacing:-.01em;
  color:var(--ink);margin:0;text-wrap:balance;
}
.okno__meno[hidden]{display:none}
.okno__rola{
  font-family:var(--f-display);font-weight:800;font-size:.72rem;
  letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--teal-700);margin:0;
}
.okno__rola[hidden]{display:none}
.okno__hlavicka[hidden]{display:none}
.okno__akcie[hidden]{display:none}

.okno__monogram{
  position:relative;display:grid;place-items:center;
  width:min(58%,230px);aspect-ratio:1;border-radius:50%;
  background:var(--grad-brand);color:#fff;
  font-family:var(--f-display);font-weight:900;
  font-size:clamp(2.2rem,6.5vw,3.8rem);letter-spacing:.02em;
  box-shadow:0 0 0 1px rgba(255,255,255,.28),0 28px 60px -26px rgba(0,0,0,.95);
}
.okno__monogram[hidden]{display:none}
/* bez fotky je stĺpec čistý — rozmazaná predloha by nebola z čoho */
.okno__foto:has(.okno__monogram:not([hidden]))::before{display:none}
.okno__foto:has(.okno__monogram:not([hidden])){
  background:radial-gradient(circle at 50% 44%,#20609F,#10365F);
}

/* Krížik je kreslený, nie písmeno. Znak „×" má vlastné optické stredy
   a pri otáčaní sa v tlačidle vykláňal; ťahy z jedného stredu nie. */
.okno__x{
  width:42px;height:42px;border:none;border-radius:50%;padding:0;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(4,21,47,.5);
  backdrop-filter:blur(6px);
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.okno__x svg{
  width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;
}
.okno__x:hover{
  background:var(--cervena);transform:scale(1.08);
  box-shadow:0 8px 20px -6px rgba(210,38,48,.7);
}
.okno__x:active{transform:scale(.96)}
.okno__x:focus-visible{outline:3px solid var(--teal-300);outline-offset:3px}

/* Na užších obrazovkách je okno na výšku: fotka hore, text pod ňou,
   a roluje sa celý obsah naraz. */
@media(max-width:820px){
  .okno__ram{
    grid-template-columns:minmax(0,1fr);
    /* na výšku: fotka hore, text pod ňou a roluje sa celé okno naraz */
    grid-template-rows:auto auto;
    width:min(100%,560px);overflow-y:auto;overscroll-behavior:contain;
  }
  .okno__foto img{max-height:46svh}
  /* tu roluje celé okno, takže text nie je vlastný posuvný rám a miesto
     pre posuvník netreba — závoj ale ostáva, „sticky" ho drží pri
     spodnej hrane okna aj pri rolovaní celého rámu */
  .okno__telo{overflow:visible;scrollbar-gutter:auto}
  /* tu je spodnou hranou rovno spodok okna, závoj teda netreba
     posúvať pod odsadenie */
  .okno__telo::after{bottom:0}
  /* Ovládanie je tu ukotvené k obrazovke, nie k obsahu — pri dlhom texte
     by inak odrolovalo preč a okno by sa nedalo zavrieť inak než gestom. */
  .okno__ovladanie{position:fixed;top:.7rem;right:.7rem}
  .okno__krok{width:36px;height:36px}
  .okno__x{width:40px;height:40px}
}

/* Na telefóne je každý bod šírky vzácny: čím širší riadok, tým menej sa
   pôvodné zalomenie príspevku rozpadne. Preto tenšie okraje. */
@media(max-width:560px){
  .okno{padding:.5rem}
  .okno__telo{--spodok:2.1rem;padding:1.15rem 1.05rem var(--spodok)}
}


/* ── plynulé otváranie ────────────────────────────────────────────
   Okno prichádza v troch krokoch, ktoré na seba nadväzujú: pozadie sa
   prelína, rám dosadne a obsah sa po ňom vysype zdola nahor.

   Je to animácia, nie prechod — dá sa tak prehrať znova pri každom
   prepnutí na ďalšieho človeka. Triedu je-vstup skript vždy odoberie
   a hneď pridá, čím animáciu spustí od začiatku. Bez tej triedy je
   obsah normálne viditeľný, takže sa nemá ako stratiť. */
@keyframes oknoVstup{
  from{opacity:0;translate:0 14px}
  to{opacity:1;translate:none}
}
.okno.je-vstup .okno__foto{animation:oknoVstup .5s var(--ease) .04s both}
.okno.je-vstup .okno__hlavicka{animation:oknoVstup .5s var(--ease) .12s both}
.okno.je-vstup .okno__meno{animation:oknoVstup .5s var(--ease) .14s both}
.okno.je-vstup .okno__rola{animation:oknoVstup .5s var(--ease) .2s both}
.okno.je-vstup .okno__text{animation:oknoVstup .55s var(--ease) .26s both}
.okno.je-vstup .okno__akcie{animation:oknoVstup .5s var(--ease) .34s both}

@media(max-width:820px){
  /* Rám na telefóne nesmie mať transform. Ovládanie v ňom je
     position:fixed a transformovaný predok mu prepíše súradnice —
     tlačidlá sedeli podľa rámu a v okamihu, keď animácia dobehla
     a transform zmizol, odskočili na iné miesto. Preto sa tu hýbe
     obsah rámu, nie rám samotný. */
  .okno__ram{transform:none}
  /* rozmazanie celej obrazovky je na telefóne drahé a pri prelínaní
     sa prepočítava v každom snímku — tmavšie sklo vyjde nastejno */
  .okno{backdrop-filter:none;background:rgba(4,21,47,.965)}
}

@media(prefers-reduced-motion:reduce){
  .okno,.okno__ram,.okno__foto,.okno__foto img{transition:none}
  .okno.je-vstup .okno__foto,
  .okno.je-vstup .okno__hlavicka,
  .okno.je-vstup .okno__meno,
  .okno.je-vstup .okno__rola,
  .okno.je-vstup .okno__text,
  .okno.je-vstup .okno__akcie{animation:none}
}
/* ═══════════════════ AKTUÁLNE: PÁS + POČASIE ═══════════════════ */
.aktualne{background:linear-gradient(180deg,var(--sky-100),#fff 55%,var(--sky-50))}

/* červený spravodajský pás hneď pod modrým sloganovým pásom */
.ticker{
  position:relative;z-index:4;
  display:flex;align-items:stretch;overflow:hidden;
  background:var(--cervena);color:#fff;
}
.ticker__label{
  flex:none;display:flex;align-items:center;gap:.6rem;
  padding:.9rem clamp(1rem,2.5vw,1.6rem);
  background:var(--cervena-tmava);
  font-family:var(--f-display);font-weight:900;font-size:.78rem;
  letter-spacing:var(--label-track);text-transform:uppercase;white-space:nowrap;z-index:2;
}
.ticker__view{position:relative;flex:1;overflow:hidden;display:flex;align-items:center}
.ticker__view::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:70px;pointer-events:none;
  background:linear-gradient(270deg,var(--cervena),transparent);
}
.ticker__row{display:flex;width:max-content;animation:march 46s linear infinite}
.ticker:hover .ticker__row{animation-play-state:paused}
.ticker__grp{display:flex;align-items:center;gap:1.4rem;padding-right:1.4rem}
.ticker__grp a{
  font-size:.95rem;font-weight:500;color:#fff;white-space:nowrap;transition:opacity .25s;
}
.ticker__grp a:hover{opacity:.75;text-decoration:underline}
.ticker__grp i{color:rgba(255,255,255,.55);font-style:normal;font-size:.6rem}

.weather{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:center;
  padding:clamp(1.6rem,3.4vw,2.4rem);border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--navy-800),var(--teal-700) 55%,var(--teal-500));
  color:#fff;box-shadow:var(--sh-lg);
}
@media(max-width:760px){.weather{grid-template-columns:1fr;text-align:center;justify-items:center}}
.weather__loading{color:rgba(214,234,255,.8);font-size:.95rem;grid-column:1/-1;text-align:center}
.weather__now{display:flex;align-items:center;gap:1.1rem}
.weather__ico{width:74px;height:74px;flex:none}
.weather__ico svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.weather__ico .sun{fill:#FFD75E;stroke:#FFD75E}
.weather__ico .drop{stroke:var(--teal-200)}
.weather__temp{font-family:var(--f-display);font-weight:900;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;letter-spacing:-.03em}
.weather__meta b{display:block;font-family:var(--f-display);font-weight:800;font-size:1.02rem;margin-bottom:.15rem}
.weather__meta span{display:block;font-size:.82rem;color:rgba(214,234,255,.72)}
.weather__place{
  display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.5rem;
  font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--teal-200);
}
.weather__stats{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:.7rem}
.weather__stats span{font-size:.85rem;color:rgba(214,234,255,.78)}
.weather__stats b{color:#fff;font-weight:700}
.weather__days{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
@media(max-width:480px){.weather__days{grid-template-columns:1fr}}
.weather__day{
  padding:.9rem .7rem;border-radius:var(--r-sm);text-align:center;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.weather__day em{display:block;font-style:normal;font-size:var(--label-size);font-weight:800;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-200);margin-bottom:.35rem}
.weather__day b{display:block;font-family:var(--f-display);font-weight:900;font-size:1.15rem}
.weather__day i{display:block;font-style:normal;font-size:.78rem;color:rgba(214,234,255,.65)}

.aktualne__note{margin-top:1.1rem;text-align:center;font-size:.78rem;color:var(--muted)}
.aktualne__note a{color:var(--teal-700);border-bottom:1px solid rgba(23,162,184,.4)}
.aktualne__note a:hover{color:var(--teal-500)}

/* ═══════════════════ KONTAKT ═══════════════════ */
.kontakt{
  background:linear-gradient(160deg,var(--navy-900) 0%,var(--teal-700) 50%,var(--teal-600) 104%);
  color:#fff;overflow:hidden;
}
.kontakt__bg{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(44% 40% at 82% 18%,rgba(58,192,212,.34),transparent 62%),
             radial-gradient(40% 44% at 10% 80%,rgba(21,100,200,.42),transparent 64%);
  animation:meshMove 16s ease-in-out infinite alternate;
}
.kontakt__in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.kontakt__in{grid-template-columns:1fr}}

.fb-card{
  position:relative;display:inline-flex;align-items:center;gap:1.1rem;margin-top:2rem;
  padding:1.1rem 1.9rem 1.1rem 1.1rem;border-radius:var(--r-pill);overflow:hidden;isolation:isolate;
  background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  backdrop-filter:blur(10px);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease);
}
.fb-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.16);box-shadow:0 22px 44px -20px rgba(0,0,0,.6),inset 0 0 0 1px rgba(58,192,212,.5)}
.fb-card__ico{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;background:#1877F2;box-shadow:0 10px 24px -10px rgba(24,119,242,.9)}
.fb-card__ico svg{width:26px;height:26px;fill:#fff}
.fb-card__txt{display:grid;gap:.1rem;text-align:left}
.fb-card__txt b{font-family:var(--f-display);font-weight:800;font-size:1.06rem;color:#fff}
.fb-card__txt em{font-style:normal;font-size:.82rem;color:var(--teal-200)}
.fb-card__shine{
  position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{0%,65%{left:-60%}100%{left:130%}}

.kontakt__list{margin-top:2rem;display:grid;gap:.85rem}
.kontakt__list li{display:flex;align-items:center;gap:.75rem;color:rgba(214,234,255,.8);font-size:.98rem}
.kontakt__list svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--teal-400);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kontakt__list a{border-bottom:1px solid rgba(58,192,212,.4);transition:color .3s,border-color .3s}
.kontakt__list a:hover{color:var(--teal-400);border-color:var(--teal-400)}

.pledge{
  position:relative;padding:clamp(2rem,4vw,3rem);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(3,26,54,.30),rgba(3,26,54,.16));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 34px 70px -30px rgba(0,0,0,.6);
  backdrop-filter:blur(14px);
}
.pledge__q{width:38px;height:38px;fill:none;stroke:var(--teal-400);stroke-width:1.6;stroke-linejoin:round;margin-bottom:1.1rem}
.pledge__txt{font-family:var(--f-display);font-weight:800;font-size:clamp(1.2rem,2.2vw,1.55rem);line-height:1.3;color:#fff;letter-spacing:-.01em}
.pledge__sig{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);display:grid;gap:.2rem}
.pledge__sig .sig{color:var(--teal-200)}
.pledge__sig em{font-style:normal;font-size:var(--label-size);font-weight:700;letter-spacing:var(--label-track);text-transform:uppercase;color:rgba(214,234,255,.6)}
.pledge__thanks{
  margin-top:1.6rem;padding:.85rem 1.2rem;border-radius:var(--r-pill);text-align:center;
  font-family:var(--f-display);font-weight:900;font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--grad-brand);box-shadow:0 14px 30px -14px rgba(23,162,184,.8);
}

/* ═══════════════════ FOOTER ═══════════════════ */
.foot{background:var(--navy-950);color:#fff;padding-top:clamp(3rem,6vw,4.5rem)}
.foot__in{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:2.5rem;align-items:start;padding-bottom:3rem}
@media(max-width:860px){.foot__in{grid-template-columns:1fr;gap:2rem}}
.foot__brand{display:flex;gap:1.1rem;align-items:flex-start}
.foot__brand .bm-p{fill:#fff}
.foot__brand b{display:block;font-family:var(--f-display);font-weight:900;font-size:1.3rem;letter-spacing:-.01em}
.foot__brand span{display:block;font-size:.8rem;color:rgba(190,216,244,.62);margin-top:.15rem}
.foot__brand .sig{color:var(--teal-400);margin-top:.6rem}
.foot__nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-content:start}
.foot__nav a{font-size:.92rem;color:rgba(200,222,248,.72);position:relative;transition:color .3s}
.foot__nav a:hover{color:var(--teal-400)}
.foot__crest{display:flex;align-items:center;gap:.9rem}
.foot__crest span{font-family:var(--f-display);font-weight:800;font-size:.9rem;line-height:1.4}
.foot__crest i{font-style:normal;font-weight:600;font-size:.74rem;color:var(--teal-400);letter-spacing:.04em}
.foot__bar{
  border-top:1px solid rgba(255,255,255,.08);padding:1.2rem 0;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  width:min(100% - 3rem,var(--wrap));margin-inline:auto;
  font-size:.78rem;color:rgba(180,205,235,.5);
}

/* ═══════════════════ TO TOP ═══════════════════ */
.totop{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:700;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;box-shadow:0 16px 34px -14px rgba(21,100,200,.8);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.85);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{transform:translateY(-4px)}
.totop svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════════ GRAIN ═══════════════════ */
.grain{
  position:fixed;inset:-60%;z-index:8000;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}
  50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(0,0)}
}

/* ═══════════════════ REVEAL SYSTEM ═══════════════════ */
[data-reveal]{--d:0ms}
[data-reveal="fade-up"]{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease) var(--d),transform .9s var(--ease) var(--d)}
/* POZOR: pôvodne tu bolo clip-path:inset(0 0 100%) na samotnom prvku.
   IntersectionObserver však orezanému prvku vráti intersectionRatio 0,
   takže sa nikdy neodhalil (fotka v „O mne“ aj celá galéria zostali neviditeľné).
   Namiesto toho prvok necháme neorezaný a stiahneme z neho „oponu“ (::after). */
[data-reveal="clip"]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease) var(--d),transform 1.1s var(--ease) var(--d)}
[data-reveal="clip"]::after{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:var(--sky-50);transform-origin:bottom;
  transition:transform 1.05s var(--ease) var(--d);
}
[data-reveal="clip"].is-in::after{transform:scaleY(0)}
[data-reveal="photo"]{opacity:0;transform:translateY(30px) scale(.94);transition:opacity 1.1s var(--ease) var(--d),transform 1.2s var(--ease) var(--d)}
[data-reveal].is-in{opacity:1;transform:none}

.sw{
  display:inline-block;overflow:hidden;vertical-align:top;
  /* priestor pre diakritiku (ľ, ť, Ď) a dolné dotiahnutia (j, y) */
  padding:.14em .04em .16em;margin:-.14em -.04em -.16em;
}
.sw > i{display:inline-block;font-style:inherit;transform:translateY(110%) rotate(4deg);opacity:0;
  transition:transform .95s var(--ease),opacity .7s var(--ease)}
/* neviaže sa na [data-reveal], lebo ten atribút po dobehnutí animácie
   odstraňujeme (viď main.js) — inak by text skočil späť do skrytého stavu */
.is-in .sw > i{transform:none;opacity:1}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  [data-reveal="clip"]::after{display:none!important}
  .sw > i{transform:none!important;opacity:1!important}
  .days__pin{height:auto!important}
  .days__sticky{position:static!important;height:auto!important;display:block!important;overflow:visible!important}
  .days__track{flex-direction:column!important;transform:none!important;padding-inline:0!important;width:min(100% - 2rem,var(--wrap));margin-inline:auto}
  .day{width:100%!important}
  .days__prog{display:none!important}
}

/* Text „Kto som?“ je dlhý — fotka preto na počítači ostáva prilepená
   a putuje popri ňom, namiesto aby plávala v strede prázdneho stĺpca. */
@media(min-width:901px){
  .omne__grid{align-items:start}
  .omne__media{position:sticky;top:calc(var(--nav-h) + 1.5rem)}
}

/* ═══════════════════ PÁS S ODPOČÍTAVANÍM DO VOLIEB ═══════════════════ */
.volby{
  position:relative;z-index:4;overflow:hidden;isolation:isolate;
  padding:clamp(1.6rem,3.5vw,2.6rem) 0;
  background:linear-gradient(105deg,var(--navy-900) 0%,var(--navy-700) 45%,var(--teal-700) 100%);
  color:#fff;
}
.volby__zaria{
  position:absolute;inset:-40% -10%;z-index:-1;opacity:.5;pointer-events:none;
  background:radial-gradient(38% 60% at 18% 50%,rgba(47,198,214,.35),transparent 62%),
             radial-gradient(42% 65% at 82% 50%,rgba(47,198,214,.4),transparent 64%);
  animation:meshMove 14s ease-in-out infinite alternate;
}
.volby__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.2rem,3vw,2.5rem);flex-wrap:wrap;
}
@media(max-width:760px){.volby__in{justify-content:center;text-align:center}}

.volby__kedy{display:grid;gap:.25rem}
@media(max-width:760px){.volby__kedy{justify-items:center}}
.volby__stitok{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--f-display);font-weight:800;font-size:.68rem;
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-200);
}
.volby__datum{
  font-family:var(--f-display-alt);font-weight:700;
  font-size:clamp(2.2rem,5.5vw,3.6rem);line-height:1;letter-spacing:.005em;
  color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.35);
}
.volby__den{font-size:.82rem;color:rgba(214,234,255,.75)}

/* samotné číslice */
.odpocet{display:grid;justify-items:center;gap:.55rem}
.odpocet__nadpis{
  font-family:var(--f-display);font-weight:800;font-size:.68rem;
  letter-spacing:var(--label-track);text-transform:uppercase;color:rgba(214,234,255,.72);
}
.odpocet__cisla{display:flex;align-items:flex-start;gap:clamp(.35rem,1.2vw,.8rem)}
.odpocet__pol{
  display:grid;justify-items:center;min-width:clamp(64px,8vw,92px);
  padding:.55rem .4rem .5rem;border-radius:var(--r-sm);
  background:linear-gradient(165deg,rgba(47,198,214,.28),rgba(4,167,181,.12));
  box-shadow:inset 0 0 0 1px rgba(123,222,234,.4),0 12px 30px -14px rgba(4,167,181,.7);
  position:relative;overflow:hidden;
  backdrop-filter:blur(8px);
}
.odpocet__pol b{
  font-family:var(--f-display-alt);font-weight:700;
  font-size:clamp(2.4rem,5.5vw,3.4rem);line-height:.95;
  color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 4px 16px rgba(3,26,54,.55),0 0 28px rgba(123,222,234,.35);
}
.odpocet__pol span{
  margin-top:.15rem;font-family:var(--f-display);font-weight:800;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-200);
}
.odpocet__odd{
  align-self:center;font-family:var(--f-display-alt);font-weight:700;
  font-size:clamp(1.6rem,3.5vw,2.4rem);color:rgba(255,255,255,.35);
  margin-top:-.6rem;
}
/* po voľbách sa čísla schovajú */
.odpocet--po .odpocet__cisla{display:none}

/* ikony v životnom príbehu — čiarová kresba v značkovej aqua */
.pribeh__ico svg{
  width:20px;height:20px;fill:none;stroke:var(--teal-600);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.podpis__dik{display:flex;align-items:flex-start;gap:.55rem}
.podpis__srdce{
  width:19px;height:19px;flex:none;margin-top:.18rem;
  fill:none;stroke:#D22630;stroke-width:1.9;stroke-linejoin:round;
}

/* svetlá hrana navrchu dlaždice — dodá odpočtu farbu bez zelenej */
.odpocet__pol::before{
  content:'';position:absolute;top:0;left:18%;right:18%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--teal-300),transparent);
}
.odpocet__odd{color:var(--teal-400)}

/* ═══════════════════ VÝRAZNEJŠÍ PREDEL KAPITOL PROGRAMU ═══════════════════ */
/* číslo dostane svetelný kruh a plnú aqua, aby nezanikalo */
.chapter__no{
  position:relative;
  background:linear-gradient(160deg,var(--teal-300),var(--teal-500) 55%,var(--blue-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 22px rgba(47,198,214,.45));
}
.chapter__no::before{
  content:'';position:absolute;z-index:-1;
  left:50%;top:50%;translate:-50% -50%;
  width:1.55em;height:1.55em;border-radius:50%;
  background:radial-gradient(circle,rgba(47,198,214,.28),transparent 68%);
}

/* tenká svietiaca linka pod hlavičkou — jasne oddelí pilier od kariet */
.chapter__head::after{
  content:'';position:absolute;left:0;right:0;bottom:-.5rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--teal-400),rgba(78,155,239,.55) 45%,transparent);
}

/* jemné odsadenie textu od čísla zvislou aqua čiarou */
.chapter__headin > div{
  position:relative;padding-left:clamp(1rem,2vw,1.5rem);
}
.chapter__headin > div::before{
  content:'';position:absolute;left:0;top:.35rem;bottom:.35rem;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--teal-400),transparent);
}
@media(max-width:600px){
  .chapter__headin > div{padding-left:0}
  .chapter__headin > div::before{display:none}
}

/* ═══════════════════ ŽIVOTNÝ PRÍBEH — bohatší vzhľad ═══════════════════ */
/* každá kapitola je jemná karta, ktorá pri prejdení myšou ožije */
.pribeh__blok{
  grid-template-columns:52px 1fr;gap:1.1rem;
  padding:1.1rem 1.3rem 1.2rem;border-radius:var(--r-md);
  background:linear-gradient(165deg,rgba(255,255,255,.9),rgba(240,250,254,.75));
  box-shadow:0 10px 30px -20px rgba(9,40,85,.35),inset 0 0 0 1px rgba(4,167,181,.12);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.pribeh__blok:hover{
  transform:translateX(4px);
  box-shadow:0 18px 40px -22px rgba(9,40,85,.45),inset 0 0 0 1px rgba(4,167,181,.4);
}
.pribeh__blok p{grid-column:2}

/* menovka kapitoly */
.pribeh__kedy{
  grid-column:2;align-self:end;
  font-family:var(--f-display);font-weight:800;
  font-size:var(--label-size);letter-spacing:var(--label-track);text-transform:uppercase;
  color:var(--teal-700);
}

/* ikona v aqua kruhu s prstencom */
.pribeh__ico{
  grid-row:1 / span 2;align-self:start;
  width:52px;height:52px;
  background:linear-gradient(150deg,#fff,var(--sky-100));
  box-shadow:0 0 0 2px rgba(4,167,181,.35),0 8px 20px -10px rgba(4,167,181,.7);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.pribeh__blok:hover .pribeh__ico{
  transform:scale(1.06) rotate(-6deg);
  box-shadow:0 0 0 3px rgba(4,167,181,.5),0 12px 26px -10px rgba(4,167,181,.85);
}
.pribeh__ico svg{width:24px;height:24px}

/* os posunieme do stredu ikon a zjemníme */
.pribeh{gap:1.3rem}

@media(max-width:560px){
  .pribeh__blok{grid-template-columns:1fr;gap:.5rem;padding:1rem 1.1rem 1.15rem}
  .pribeh__blok p,.pribeh__kedy{grid-column:1}
  .pribeh__ico{grid-row:auto}
}

/* ═══════════════════ PREDEL KAPITOL — bez tmavých pásov ═══════════════════ */
/* Hlavička už nie je pripnutá, takže nepotrebuje tmavé podfarbenie.
   Piliere oddeľuje vzdušný priestor, veľké číslo a svetelná linka. */
.chapter{margin-bottom:clamp(4rem,8vw,7rem)}
.chapter:last-of-type{margin-bottom:0}

.chapter__head{
  position:relative;padding:0 0 1.5rem;margin-bottom:1.8rem;
}
.chapter__headin{align-items:center}

/* číslo v presvietenom aqua kruhu */
.chapter__no{
  position:relative;display:grid;place-items:center;
  width:clamp(84px,11vw,124px);height:clamp(84px,11vw,124px);flex:none;
  font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;padding:0;
  border-radius:50%;
  background:linear-gradient(150deg,rgba(47,198,214,.3),rgba(21,100,200,.14));
  box-shadow:inset 0 0 0 2px rgba(123,222,234,.45),0 16px 40px -18px rgba(4,167,181,.9);
  -webkit-background-clip:border-box;background-clip:border-box;
  color:#fff;filter:none;
}
.chapter__no::before{display:none}

/* linka pod hlavičkou s aqua nábehom */
.chapter__head::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--teal-300),rgba(123,222,234,.35) 38%,rgba(255,255,255,.08));
}

/* ═══════════════════ PRÍBEH — os, ktorá nekríži karty ═══════════════════ */
/* Predtým viedla cez celú výšku jedna čiara a prechádzala priamo cez karty.
   Teraz je os súčasťou ľavej hrany každej karty a v medzerách ju spája
   svetlý článok s guľôčkou — čiara sa už s obsahom nikde nepretína. */
.pribeh__blok{
  background:
    linear-gradient(180deg,var(--teal-400),rgba(4,167,181,.28)) left top / 3px 100% no-repeat,
    linear-gradient(165deg,rgba(255,255,255,.92),rgba(240,250,254,.78));
}
/* článok osi v medzere pod kartou */
.pribeh__blok::before{
  content:'';position:absolute;z-index:0;
  left:0;top:100%;width:3px;height:1.3rem;
  background:linear-gradient(180deg,rgba(4,167,181,.55),rgba(4,167,181,.18));
  transform:scaleY(0);transform-origin:top;
  transition:transform .55s var(--ease) .1s;
}
/* guľôčka presne v strede článku */
.pribeh__blok::after{
  content:'';position:absolute;z-index:1;
  left:-4.5px;top:calc(100% + .28rem);
  width:12px;height:12px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 2px rgba(4,167,181,.5),0 0 18px rgba(4,167,181,.45);
  transform:scale(0);
  transition:transform .45s var(--ease) .4s;
}
.pribeh__blok.is-in::before{transform:scaleY(1)}
.pribeh__blok.is-in::after{transform:scale(1)}
.pribeh__blok:last-child::before,
.pribeh__blok:last-child::after{display:none}
@media(max-width:560px){
  .pribeh__blok::before,.pribeh__blok::after{display:none}
}

/* ═══════════════════ KARTY 100 DNÍ — odseky a zoznam ═══════════════════ */
.day p + p{margin-top:.75rem}
.day__zoznam{
  list-style:none;margin:.85rem 0 .9rem;display:grid;gap:.42rem;
}
.day__zoznam li{
  position:relative;padding-left:1.4rem;
  color:var(--navy-800);font-size:.95rem;font-weight:600;
}
.day__zoznam li::before{
  content:'';position:absolute;left:0;top:.5em;
  width:7px;height:7px;border-radius:50%;
  background:var(--teal-500);box-shadow:0 0 0 3px rgba(4,167,181,.16);
}
.day__doraz{
  font-weight:700;color:var(--teal-700) !important;
}
/* dlhšie texty potrebujú o niečo širšiu kartu */
.day{width:min(80vw,420px)}

/* ═══════════════════ E-MAIL V PÄTIČKE ═══════════════════ */
.foot__mail a{
  color:var(--teal-300);text-decoration:none;
  border-bottom:1px solid rgba(123,222,234,.35);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.foot__mail a:hover{color:#fff;border-color:rgba(255,255,255,.6)}

/* na nízkych oknách sa karty 100 dní zmestia aj s odrážkami */
@media(min-width:901px) and (max-height:760px){
  .day{padding:1.7rem 1.6rem 1.9rem}
  .day h4{font-size:1.3rem;margin-bottom:.55rem}
  .day p{font-size:.92rem}
  .day__zoznam{gap:.32rem;margin:.7rem 0 .75rem}
  .day__zoznam li{font-size:.9rem}
  .day__no{font-size:4.4rem}
}

/* ═══════════════════════════════════════════════════════════════════
   PLÁN A VÍZIA — zapečatená obálka
   Kým nepríde dátum, na stránke stojí zapečatený spis s odpočtom.
   V určený moment pečať praskne, klopa sa otvorí a obsah sa vynorí.
   ═══════════════════════════════════════════════════════════════════ */
.vizia{
  /* clip orezáva rovnako ako hidden, ale nevypne prilepené guličky bodov
     (hidden by zo sekcie spravil vlastný posuvný rám a sticky by nefungoval) */
  position:relative;background:var(--sky-50);overflow:hidden;overflow:clip;
  padding-top:clamp(4.5rem,9vw,7.5rem);padding-bottom:clamp(5rem,10vw,8.5rem);
}
.vizia .wrap{position:relative;z-index:1}
.vizia__aura{
  position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:min(1150px,150vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(47,198,214,.20),rgba(47,198,214,.06) 45%,transparent 70%);
  animation:viziaDych 9s ease-in-out infinite;
}
@keyframes viziaDych{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}

.trezor{
  display:grid;justify-items:center;margin-top:clamp(2rem,4.5vw,3.4rem);
  perspective:1600px;transition:min-height .85s var(--ease);
}
.obalka,.odhalene{grid-area:1/1;width:min(100%,600px)}

/* ─────────── obálka ─────────── */
.obalka{
  --klopa:clamp(108px,22vw,164px);
  position:relative;transform-style:preserve-3d;
  transition:opacity .65s var(--ease),transform .75s var(--ease),filter .65s var(--ease);
}
.obalka__ziara{
  position:absolute;inset:-14% -8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(4,167,181,.4),transparent 62%);
  filter:blur(26px);animation:viziaDych 6.5s ease-in-out infinite;
}
.obalka__telo{
  position:relative;z-index:2;overflow:hidden;text-align:center;color:#fff;
  border-radius:var(--r-lg);
  padding:calc(var(--klopa) + clamp(2.9rem,7vw,4.1rem)) clamp(1.3rem,4vw,2.6rem) clamp(1.9rem,4vw,2.5rem);
  background:linear-gradient(162deg,var(--navy-950),var(--navy-800) 58%,var(--navy-700));
  box-shadow:0 44px 96px -36px rgba(4,21,47,.85),inset 0 0 0 1px rgba(123,222,234,.18);
}
/* jemné šrafovanie „spisu“ */
.obalka__raster{
  position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(135deg,rgba(123,222,234,.05) 0 2px,transparent 2px 10px);
}
/* svetelný sken, ktorý prechádza cez spis */
.obalka__sken{
  position:absolute;left:0;right:0;top:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(123,222,234,.14),transparent);
  animation:viziaSken 6s var(--ease-io) infinite;
}
@keyframes viziaSken{0%{transform:translateY(-110%)}60%,100%{transform:translateY(330%)}}

.obalka__hlava{
  position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;
  gap:.8rem;flex-wrap:wrap;
  font-family:var(--f-display);font-weight:800;
  font-size:var(--label-size);letter-spacing:var(--label-track);text-transform:uppercase;
  color:rgba(182,236,243,.68);
}
.obalka__stav{display:inline-flex;align-items:center;gap:.45rem;color:var(--teal-300)}

.obalka__nazov{
  position:relative;z-index:1;margin-top:1.35rem;
  font-family:var(--f-display-alt);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.85rem,5.4vw,2.8rem);line-height:1.02;color:rgba(255,255,255,.92);
}
.obalka__nazov b{
  display:block;font-weight:700;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* zacenzurované riadky */
.cenzura{position:relative;z-index:1;display:grid;gap:.55rem;justify-items:center;margin:1.5rem 0 1.9rem}
.cenzura span{
  display:block;width:var(--w);height:11px;border-radius:4px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.17),rgba(255,255,255,.07));
}
.cenzura span::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(123,222,234,.55),transparent);
  animation:cenzuraSvit 3.8s var(--ease-io) infinite;
}
.cenzura span:nth-child(2)::after{animation-delay:.35s}
.cenzura span:nth-child(3)::after{animation-delay:.7s}
.cenzura span:nth-child(4)::after{animation-delay:1.05s}
.cenzura span:nth-child(5)::after{animation-delay:1.4s}
@keyframes cenzuraSvit{0%{transform:translateX(-100%)}55%,100%{transform:translateX(115%)}}

.obalka__btn{
  position:relative;z-index:1;margin-top:1.7rem;cursor:pointer;border:0;
  display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.55rem;
  border-radius:var(--r-pill);
  font-family:var(--f-display);font-weight:800;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--navy-950);
  background:linear-gradient(100deg,var(--teal-300),var(--teal-400));
  box-shadow:0 14px 30px -14px rgba(47,198,214,.95);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.obalka__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.obalka__btn:hover{transform:translateY(-2px);box-shadow:0 22px 42px -16px rgba(47,198,214,1)}
.obalka__btn:active{transform:translateY(0)}
.obalka__sepot{
  position:relative;z-index:1;min-height:1.5em;margin-top:.85rem;
  font-family:var(--f-script);font-size:1.2rem;color:var(--teal-200);
  opacity:0;transform:translateY(5px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.obalka__sepot.vidno{opacity:.92;transform:none}

/* klopa */
.obalka__klopa{
  position:absolute;z-index:3;left:0;right:0;top:0;height:var(--klopa);
  transform-origin:50% 0;transform:rotateX(0deg);transform-style:preserve-3d;
  transition:transform 1.05s var(--ease-io) .38s;pointer-events:none;
}
.obalka__klopa span{
  position:absolute;inset:0;
  clip-path:polygon(0 0,100% 0,50% 100%);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:linear-gradient(176deg,#10386D,#0A2C58 58%,#061F43);
  filter:drop-shadow(0 2px 0 rgba(123,222,234,.28));
}

/* vosková pečať */
.pecat{
  position:absolute;z-index:4;left:50%;top:var(--klopa);translate:-50% -50%;
  width:clamp(74px,13vw,102px);aspect-ratio:1;pointer-events:none;
}
.pecat::after{
  content:'';position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(123,222,234,.45);animation:pecatPuls 3.4s ease-out infinite;
}
@keyframes pecatPuls{0%{transform:scale(.9);opacity:.85}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}
.pecat__pol{
  position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 30%,var(--teal-300),var(--teal-500) 42%,var(--teal-700) 78%,#04606B);
  box-shadow:0 12px 28px -8px rgba(4,96,107,.9),inset 0 0 0 3px rgba(255,255,255,.18);
  transition:transform .95s var(--ease-io),opacity .8s ease .12s;
}
.pecat__pol--l{clip-path:inset(0 50% 0 0)}
.pecat__pol--r{clip-path:inset(0 0 0 50%)}
.pecat__pol i{
  font-family:var(--f-display);font-style:normal;font-weight:900;
  font-size:clamp(1.45rem,2.7vw,1.95rem);color:rgba(255,255,255,.94);
  text-shadow:0 2px 3px rgba(0,60,70,.55);
}
.pecat__lesk{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:.5;
  background:conic-gradient(from 0turn,transparent 0 11%,rgba(255,255,255,.55) 17%,transparent 25% 100%);
  mix-blend-mode:screen;animation:pecatLesk 7s linear infinite;
}
@keyframes pecatLesk{to{transform:rotate(1turn)}}

/* ─────────── otvorenie ───────────
   celý priebeh je v bloku OTVORENIE OBÁLKY — CHOREOGRAFIA nižšie */
.trezor.hned .obalka{display:none}
.obalka.trasie{animation:viziaTrask .55s var(--ease-io)}
@keyframes viziaTrask{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-10px) rotate(-.5deg)}
  32%{transform:translateX(9px) rotate(.5deg)}
  50%{transform:translateX(-6px)}
  68%{transform:translateX(5px)}
  85%{transform:translateX(-2px)}
}

/* ─────────── odhalený obsah ─────────── */
/* Obálka je úzka, plán sa po otvorení rozloží do šírky: hlavička na
   stred, pod ňou guličky bodov a strana ako A4 z prezentácie. */
.odhalene{
  position:relative;z-index:1;width:min(100%,1060px);text-align:center;
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .8s var(--ease),transform .9s var(--ease);
}
.odhalene.vidno{opacity:1;transform:none}
.odhalene>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.odhalene.vidno>*{opacity:1;transform:none}
.odhalene.vidno>*:nth-child(1){transition-delay:.18s}
.odhalene.vidno>*:nth-child(2){transition-delay:.28s}
.odhalene.vidno>*:nth-child(3){transition-delay:.38s}
.odhalene.vidno>*:nth-child(4){transition-delay:.48s}
.odhalene.vidno>*:nth-child(5){transition-delay:.62s}
.odhalene.vidno>*:nth-child(6){transition-delay:.72s}
.odhalene.vidno>*:nth-child(7){transition-delay:.8s}

.odhalene__zn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .95rem;border-radius:var(--r-pill);
  font-family:var(--f-display);font-weight:800;font-size:var(--label-size);
  letter-spacing:var(--label-track);text-transform:uppercase;color:#fff;
  background:var(--grad-brand);box-shadow:0 12px 26px -12px rgba(4,167,181,.9);
}
.odhalene__h{
  margin-top:1.15rem;font-family:var(--f-display);font-weight:900;
  font-size:clamp(1.5rem,3.5vw,2.15rem);line-height:1.1;letter-spacing:-.02em;color:var(--navy-800);
}
.odhalene__lead{margin:.9rem auto 0;max-width:64ch;color:var(--muted);font-size:1.02rem;line-height:1.65;text-wrap:pretty}

/* ─────────── guličky bodov ───────────
   Každý bod plánu je jedna modrá gulička s číslom. Klik otvorí jeho
   stranu. Zakrytý bod je zamlžená, svetlá gulička. */
/* Pri čítaní dlhej strany sa rad guličiek drží pod hlavičkou webu —
   na iný bod sa dá prejsť odkiaľkoľvek, bez rolovania späť hore. */
.gulicky{
  list-style:none;margin:clamp(1.6rem,3.5vw,2.3rem) auto 0;max-width:820px;width:fit-content;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.75rem clamp(.4rem,1.8vw,1.1rem);
  position:sticky;top:calc(64px + var(--pas-h) + .6rem);z-index:6;
  padding:.5rem .75rem;border-radius:var(--r-pill);
  background:rgba(243,251,253,.88);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 12px 28px -20px rgba(9,40,85,.55),inset 0 0 0 1px rgba(4,167,181,.14);
}
.gulicky[hidden]{display:none}
.gulicky li{position:relative;display:flex}
.gulicka{
  /* na telefóne menšie, nech sa bežný počet bodov zmestí do riadku */
  --d:clamp(32px,8.6vw,48px);
  width:var(--d);height:var(--d);border-radius:50%;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:900;font-size:calc(var(--d) * .36);line-height:1;color:#fff;
  text-shadow:0 1px 2px rgba(7,35,71,.45);
  background:radial-gradient(circle at 34% 28%,#fff 0 6%,#9DEAF3 17%,#2FC6D6 44%,#1564C8 94%);
  box-shadow:inset 0 -4px 8px rgba(7,35,71,.28),0 10px 20px -10px rgba(21,100,200,.8);
  transition:transform .4s cubic-bezier(.3,1.5,.5,1),box-shadow .35s var(--ease),filter .35s var(--ease);
}
.gulicka:hover{transform:translateY(-3px) scale(1.07)}
.gulicka:focus-visible{outline:3px solid var(--teal-300);outline-offset:3px}
.gulicka.je-aktivna{
  transform:scale(1.18);
  box-shadow:inset 0 -4px 8px rgba(7,35,71,.28),
             0 0 0 4px #fff,0 0 0 7px rgba(47,198,214,.55),
             0 16px 28px -10px rgba(21,100,200,.9);
}
.gulicka--zakryta{
  color:rgba(11,46,94,.5);text-shadow:none;
  background:radial-gradient(circle at 34% 28%,#fff 0 10%,#E8F6FB 42%,#C9E5F0 100%);
  box-shadow:inset 0 0 0 1.5px rgba(4,167,181,.35),inset 0 -3px 6px rgba(11,46,94,.08);
}
.gulicka--zakryta.je-aktivna{
  box-shadow:inset 0 0 0 1.5px rgba(4,167,181,.5),0 0 0 4px #fff,0 0 0 7px rgba(4,167,181,.28);
}
/* na telefóne je lišta úzka: väčšie medzery a jemnejšie zvýraznenie
   aktívnej guličky, nech nezasahuje do susedných */
@media(max-width:560px){
  .gulicky{padding:.42rem .5rem;gap:.5rem .55rem}
  .gulicka.je-aktivna{
    transform:scale(1.1);
    box-shadow:inset 0 -4px 8px rgba(7,35,71,.28),0 0 0 3px #fff,0 0 0 5px rgba(47,198,214,.6);
  }
  .gulicka--zakryta.je-aktivna{box-shadow:inset 0 0 0 1.5px rgba(4,167,181,.5),0 0 0 3px #fff,0 0 0 5px rgba(4,167,181,.3)}
}

/* ─────────── strana plánu ───────────
   Pozadie je obrázok z prezentácie (assets/img/program-pozadie.jpg,
   16:9). Strana je presne taká dlhá ako jej text, preto sa obrázok
   nepreťahuje: jeho horná časť s bodkovanými rohmi sedí hore a stráca
   sa do bielej, dole je len úzky pás so spodkom vĺn a podpisom
   „Spolu pre lepšiu obec" (spodných 20 % šírky strany). Text končí
   tesne nad ním — pod textom nezostáva prázdne miesto. */
.strany{
  position:relative;margin-top:clamp(1.3rem,3vw,2rem);
  container-type:inline-size;
}
.strana{
  position:relative;isolation:isolate;overflow:hidden;text-align:left;
  border-radius:var(--r-lg);
  padding:clamp(1.5rem,4.2cqw,3.1rem) clamp(1.15rem,7.5cqw,5rem) calc(14cqw + .6rem);
  background:linear-gradient(180deg,#F1FAFD 0%,#fff 20%,#fff 60%,#EAF7FC 100%);
  box-shadow:0 44px 90px -44px rgba(9,40,85,.55),0 0 0 1px rgba(4,167,181,.14);
}
.strana::before,.strana::after{
  content:'';position:absolute;left:0;right:0;z-index:-1;aspect-ratio:1672/941;pointer-events:none;
  background:url("../assets/img/program-pozadie.jpg?v=202610061431") center/100% auto no-repeat;
}
/* hore bodkované rohy, ktoré sa stratia do bielej */
.strana::before{
  top:0;background-position:top center;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 10%,transparent 36%);
          mask-image:linear-gradient(180deg,#000 0,#000 10%,transparent 36%);
}
/* dole úzky pás: spodok vĺn a podpis */
.strana::after{
  bottom:0;aspect-ratio:100/20;background-position:bottom center;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 55%);
          mask-image:linear-gradient(180deg,transparent 0,#000 55%);
}
@media(max-width:700px){
  .strana::before,.strana::after{background-image:url("../assets/img/program-pozadie-900.jpg?v=202610061431")}
}

.strana__hlava{
  display:flex;align-items:center;gap:clamp(.8rem,2vw,1.25rem);
  margin-bottom:clamp(1rem,2.6vw,1.6rem);
}
/* veľká gulička s číslom bodu — ako „1." v prezentácii */
.strana__cislo{
  flex:none;width:clamp(46px,6.2cqw,64px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:900;font-size:clamp(1rem,2.1cqw,1.35rem);color:#fff;
  text-shadow:0 1px 2px rgba(7,35,71,.45);
  background:radial-gradient(circle at 34% 28%,#fff 0 6%,#9DEAF3 17%,#2FC6D6 44%,#1564C8 94%);
  box-shadow:inset 0 -5px 10px rgba(7,35,71,.28),0 14px 26px -12px rgba(21,100,200,.85);
}
.strana__h{
  margin:0;font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.05rem,2.5cqw,1.6rem);line-height:1.18;letter-spacing:.01em;
  color:var(--navy-800);text-wrap:balance;
}

.strana__telo{
  display:grid;gap:clamp(.8rem,1.7cqw,1.1rem);max-width:78ch;
  font-size:clamp(.97rem,1.6cqw,1.07rem);line-height:1.62;color:var(--ink-2);
}
.strana__telo strong{color:var(--navy-800);font-weight:700}
.strana__telo em{color:var(--navy-800)}
.strana__odsek{margin:0;text-wrap:pretty}
.strana__nadpis{
  margin:.35rem 0 0;font-family:var(--f-display);font-weight:800;font-size:.8rem;
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-700);
}
.strana__zoznam{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.strana__zoznam li{position:relative;padding-left:1.9rem;text-wrap:pretty}
/* modrá gulička namiesto bodky */
.strana__zoznam li::before{
  content:'';position:absolute;left:.12rem;top:.4em;width:.84em;height:.84em;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0 9%,#9DEAF3 21%,#2FC6D6 47%,#1564C8 96%);
  box-shadow:0 3px 7px -2px rgba(21,100,200,.6);
}

/* Bod, ktorý ešte nie je odhalený. Text sme zo servera ani nedostali —
   na mieste riadkov sú len zamlžené prúžky, takže niet čo prečítať. */
.strana--zakryta .strana__cislo{
  color:rgba(11,46,94,.5);text-shadow:none;
  background:radial-gradient(circle at 34% 28%,#fff 0 10%,#E8F6FB 42%,#C9E5F0 100%);
  box-shadow:inset 0 0 0 1.5px rgba(4,167,181,.35),0 12px 24px -14px rgba(9,40,85,.35);
}
/* nadpis zakrytého bodu nemá text — bez flex:1 by sa zúžil na nulu */
.strana--zakryta .strana__h{flex:1}
.strana__h .strana__pruh{height:1em;margin:.12em 0;width:min(var(--w),420px)}
.strana__pruh{
  display:block;width:var(--w,80%);height:.7em;margin:.5em 0;border-radius:6px;
  background:linear-gradient(90deg,rgba(4,167,181,.22),rgba(21,100,200,.14));
  filter:blur(2px);
}
.strana__zamok{
  justify-self:start;display:inline-flex;align-items:center;gap:.5rem;margin:0;
  padding:.45rem .95rem;border-radius:var(--r-pill);background:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(4,167,181,.3);
  font-family:var(--f-display);font-weight:800;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal-700);
}
.strana__zamok svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* hmlou pomaly prebehne svetlo — tu niečo čaká */
.strana__hmla{position:relative}
.strana__hmla::after{
  content:'';position:absolute;inset:-6px -12px;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.8) 50%,transparent 65%);
  background-size:250% 100%;animation:hmlaLesk 4.5s ease-in-out infinite;
}
@keyframes hmlaLesk{0%{background-position:130% 0}60%,100%{background-position:-40% 0}}

/* ─────────── prechod medzi stranami ───────────
   Ako otočenie strany: stará strana (ležiaca navrchu, orezaná na výšku
   novej) krátko zmizne a nová sa objaví s malým posunom zo smeru, ktorým
   sa ide (--smer: 1 ďalej, −1 späť). Len priehľadnosť a posun — žiadne
   rozmazanie ani animovaná výška, tie sa na telefóne sekali. */
.strana--odchadza{
  position:absolute;left:0;right:0;top:0;overflow:hidden;pointer-events:none;
  animation:stranaOdchod .22s ease-out both;
}
.strana--prichadza{animation:stranaPrichod .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes stranaOdchod{to{opacity:0}}
@keyframes stranaPrichod{
  from{opacity:0;transform:translateX(calc(var(--smer,1) * 28px))}
}
.strana--prichadza .strana__hlava,
.strana--prichadza .strana__telo > :not(ul),
.strana--prichadza .strana__zoznam li{
  animation:stranaRiadok .42s var(--ease) both;
  animation-delay:calc(.08s + min(var(--i,0) * .03s, .4s));
}
@keyframes stranaRiadok{from{opacity:0;transform:translateY(8px)}}

/* ─────────── šípky pod stranou ─────────── */
/* Tri stĺpce s rovnako širokými krajmi — „Predchádzajúci bod" je širší
   ako „Ďalší bod", pri space-between by číslo medzi nimi nesedelo v strede. */
.strany__krok{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;
  margin-top:clamp(1rem,2.4vw,1.4rem);
}
.strany__krok .strany__sipka{justify-self:start}
.strany__krok .strany__sipka--dalej{justify-self:end}
.strany__krok[hidden]{display:none}
.strany__sipka{
  display:inline-flex;align-items:center;gap:.5rem;border:0;cursor:pointer;
  padding:.72rem 1.15rem;border-radius:var(--r-pill);background:#fff;color:var(--navy-800);
  font-family:var(--f-display);font-weight:800;font-size:.82rem;
  box-shadow:0 10px 24px -14px rgba(9,40,85,.5),inset 0 0 0 1px rgba(4,167,181,.2);
  transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.strany__sipka svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.strany__sipka:hover:not(:disabled){background:var(--grad-brand);color:#fff;transform:translateY(-2px)}
.strany__sipka:focus-visible{outline:3px solid var(--teal-300);outline-offset:3px}
.strany__sipka:disabled{opacity:.4;cursor:default}
.strany__pocet{
  font-family:var(--f-display-alt);font-weight:700;font-size:1.1rem;letter-spacing:.06em;color:var(--teal-700);
}
@media(max-width:560px){
  .strany__sipka span{display:none}
  .strany__sipka{padding:.8rem}
}
@media(prefers-reduced-motion:reduce){
  .strana--odchadza{display:none}
  .strana--prichadza,.strana--prichadza .strana__hlava,.strana--prichadza .strana__telo > *,
  .strana--prichadza .strana__zoznam li,.strana__hmla::after{animation:none}
  .strana__pruh{filter:blur(1px)}
}

.odhalene__zaver{
  margin-top:1.7rem;padding-top:1.25rem;border-top:1px solid rgba(4,167,181,.2);
  font-family:var(--f-script);font-size:clamp(1.15rem,2.7vw,1.5rem);
  color:var(--teal-700);text-align:center;
}

@media(max-width:560px){
  .obalka__hlava{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .vizia__aura,.obalka__ziara,.obalka__sken,.pecat__lesk,.pecat::after,
  .cenzura span::after{animation:none}
  .obalka__klopa,.pecat__pol,.obalka{transition:none}
}

/* ─────────── pečať z červeného vosku ───────────
   Nepravidelné zaoblenie a dva vrstvené prechody dávajú kvapke vosku
   objem; monogram je do nej vtlačený, nie namaľovaný. */
.pecat__pol{
  border-radius:47% 53% 51% 49% / 52% 47% 53% 48%;
  background:
    radial-gradient(circle at 70% 76%,rgba(117,14,22,.6),transparent 46%),
    radial-gradient(circle at 33% 27%,#F0666F,#D22630 40%,#A81B24 74%,#750E16);
  box-shadow:
    0 14px 30px -8px rgba(117,14,22,.85),
    inset 0 -6px 12px rgba(117,14,22,.75),
    inset 0 5px 10px rgba(255,190,195,.3);
}
/* vtlačený monogram */
.pecat__pol i{
  color:#8C1019;
  text-shadow:0 1px 0 rgba(255,170,176,.45),0 -1px 1px rgba(90,8,14,.65);
}
/* rozliaty vosk pod pečaťou */
.pecat::before{
  content:'';position:absolute;z-index:-1;inset:-7px -5px -4px;
  border-radius:54% 46% 49% 51% / 47% 53% 46% 54%;
  background:radial-gradient(circle at 50% 45%,rgba(168,27,36,.85),rgba(117,14,22,.35) 62%,transparent 78%);
  filter:blur(1.5px);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
.trezor.je-otvorene .pecat::before{opacity:0;transform:scale(.55)}
/* pulzujúci prstenec a lesk v tóne vosku */
.pecat::after{border-color:rgba(210,38,48,.5)}
.pecat__lesk{opacity:.3}

/* ─────────── starodávny vosk: zrno, škvrny, ryhovaný okraj ───────────
   Vosk skladáme z viacerých vrstiev: náhodné body a mikroštruktúra dodajú
   nerovnosť, tmavý prstenec pri okraji opotrebovanie, spodný prechod tvar.
   Zrno navrchu robí SVG filter (#voskZrno) — keby ho prehliadač nepodporil,
   pečať aj tak ostane textúrovaná. */
.pecat__pol{
  background:
    radial-gradient(circle at 22% 62%,rgba(84,7,13,.55) 0 1.5px,transparent 2.1px),
    radial-gradient(circle at 63% 21%,rgba(255,196,200,.34) 0 1.2px,transparent 1.9px),
    radial-gradient(circle at 78% 57%,rgba(84,7,13,.5) 0 1.8px,transparent 2.5px),
    radial-gradient(circle at 41% 84%,rgba(84,7,13,.45) 0 1.4px,transparent 2.1px),
    radial-gradient(circle at 35% 36%,rgba(255,196,200,.28) 0 1px,transparent 1.7px),
    radial-gradient(circle at 57% 72%,rgba(255,196,200,.2) 0 .9px,transparent 1.6px),
    repeating-radial-gradient(circle at 30% 28%,rgba(110,13,20,.17) 0 1px,transparent 1px 4px),
    repeating-conic-gradient(from 12deg at 52% 48%,rgba(110,13,20,.13) 0 3deg,transparent 3deg 9deg),
    radial-gradient(circle at 50% 50%,transparent 50%,rgba(70,6,12,.6) 88%),
    radial-gradient(circle at 70% 76%,rgba(110,13,20,.6),transparent 46%),
    radial-gradient(circle at 33% 27%,#E86A72,#C9252F 40%,#9C1A22 74%,#6E0D14);
  box-shadow:
    0 14px 30px -8px rgba(70,6,12,.9),
    inset 0 -7px 14px rgba(70,6,12,.8),
    inset 0 5px 11px rgba(255,196,200,.26);
}
/* jemné zrno navrchu, cestuje s polovicou pri prasknutí */
.pecat__pol::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:#fff;filter:url(#voskZrno);
  mix-blend-mode:overlay;opacity:.42;
}
/* vytlačený vosk okolo pečate — ryhy od razidla */
.pecat::before{
  inset:-8px;
  border-radius:52% 48% 50% 50% / 49% 52% 48% 51%;
  background:
    repeating-conic-gradient(from 3deg at 50% 50%,#8E1119 0 6.5deg,#6C0C13 6.5deg 13deg),
    radial-gradient(circle,#8E1119,#5E0A11);
  filter:blur(.4px);opacity:.92;
}
/* monogram vyzerá vtlačený a rokmi ohladený */
.pecat__pol i{
  color:#5E0A11;opacity:.92;
  text-shadow:0 1px 0 rgba(255,178,184,.42),0 -1px 1px rgba(56,3,7,.7);
}
.pecat__lesk{opacity:.22}

/* ─────────── doladenie vosku: menej pravidelnosti, viac zrna ───────────
   Predchádzajúca vrstva kreslila lúče cez celú pečať a pôsobilo to ako
   slnko. Ryhy od razidla teraz zostávajú len pri okraji, plocha dostáva
   zrno cez SVG filter a farba je tmavšia, do starého vosku. */
.pecat__pol{
  border-radius:45% 55% 51% 49% / 54% 45% 55% 46%;
  background:
    radial-gradient(circle at 22% 62%,rgba(62,4,9,.5) 0 1.6px,transparent 2.3px),
    radial-gradient(circle at 63% 21%,rgba(255,186,192,.3) 0 1.2px,transparent 1.9px),
    radial-gradient(circle at 78% 57%,rgba(62,4,9,.46) 0 1.9px,transparent 2.6px),
    radial-gradient(circle at 41% 84%,rgba(62,4,9,.42) 0 1.5px,transparent 2.2px),
    radial-gradient(circle at 35% 36%,rgba(255,186,192,.24) 0 1px,transparent 1.7px),
    radial-gradient(circle at 57% 72%,rgba(255,186,192,.18) 0 .9px,transparent 1.6px),
    radial-gradient(circle at 15% 44%,rgba(62,4,9,.34) 0 1.2px,transparent 1.9px),
    radial-gradient(circle at 86% 34%,rgba(62,4,9,.3) 0 1.1px,transparent 1.8px),
    radial-gradient(ellipse 62% 48% at 38% 30%,rgba(255,186,192,.16),transparent 70%),
    radial-gradient(circle at 50% 50%,transparent 44%,rgba(62,4,9,.6) 94%),
    radial-gradient(circle at 33% 27%,#D9575E,#A8232C 42%,#7A1219 76%,#4E080E);
  box-shadow:
    0 14px 30px -8px rgba(62,4,9,.9),
    inset 0 -8px 15px rgba(62,4,9,.8),
    inset 0 5px 12px rgba(255,186,192,.22);
}
/* ryhy od razidla — len pri okraji, nie cez celú plochu */
.pecat__pol::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.65;
  background:repeating-conic-gradient(from 4deg at 50% 50%,rgba(62,4,9,.4) 0 2.4deg,transparent 2.4deg 6deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 56%,#000 80%);
  mask-image:radial-gradient(circle at 50% 50%,transparent 56%,#000 80%);
}
/* zrno vosku */
.pecat__pol::after{
  mix-blend-mode:soft-light;opacity:.9;
}
.pecat__pol i{
  color:#6B0E15;opacity:.95;
  text-shadow:0 1px 0 rgba(255,182,188,.5),0 2px 3px rgba(50,3,6,.55);
}
.pecat::before{
  background:
    repeating-conic-gradient(from 3deg at 50% 50%,#7E1018 0 6.5deg,#5C0A11 6.5deg 13deg),
    radial-gradient(circle,#7E1018,#4E080E);
}

/* ═══════════════ PEČAŤ Z FOTOGRAFIE ═══════════════
   Namiesto vosku kresleného v CSS je tu skutočná odfotená pečať s razidlom
   MP. Delenie na dve polovice ostáva — každá nesie ten istý obrázok
   a je orezaná na svoju polovicu, takže pri prasknutí sa razidlo roztrhne
   presne v strede. Všetky pomocné vrstvy predchádzajúceho vosku sa vypínajú. */
.pecat{
  width:clamp(92px,15vw,128px);
  filter:drop-shadow(0 12px 20px rgba(60,4,10,.5));
}
.pecat__pol{
  border-radius:0;
  background:url('../assets/img/pecat-mp.png?v=202610061431') center/contain no-repeat;
  box-shadow:none;
}
.pecat__pol::before,
.pecat__pol::after,
.pecat::before,
.pecat__lesk{content:none;display:none}
.pecat__pol i{display:none}
/* prstenec okolo pečate v tóne vosku */
.pecat::after{
  inset:-11px;border-color:rgba(210,38,48,.42);
}

/* koncová karta 100 dní má viac odsekov — posledný drží odstup od tlačidla */
.day--end p{margin-bottom:0}
.day--end p:last-of-type{margin-bottom:1.4rem}
.day--end .day__doraz{color:var(--teal-200) !important}

/* ═══════════════ LOGO MP VEDĽA NÁZVU OBCE ═══════════════
   Logo má v PNG okolo seba priehľadný okraj (obsah tvorí 88 % výšky).
   Výšku preto zväčšujeme o ten okraj, aby viditeľná značka mala 58 px. */
.crest-row__mp{height:66px}
/* ═══════════════ MOBIL: 100 DNÍ A HLAVIČKY KAPITOL ═══════════════
   Samotné karty ostávajú v strede stĺpca (dráha má rovnaké okraje
   z oboch strán), ale text vnútri nich je zarovnaný doľava, aby sa
   dobre čítal. To isté platí pre hlavičky kapitol v programe. */
@media(max-width:900px){
  .day{text-align:left}
  .day__badge{margin-inline:0}
  .day__zoznam{width:auto;margin-inline:0;text-align:left}
  .day--end .btn{margin-inline:0}
  .chapter__headin{justify-content:flex-start;text-align:left}
  .chapter__headin > div{padding-left:0}
  .chapter__headin > div::before{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   OBÁLKA V PAPIEROVEJ BIELEJ
   Tmavý spis vystriedala klasická poštová obálka. Aby sa nestratila na
   svetlom pozadí sekcie, pozadie pod ňou o niečo stmavne, obálka dostane
   zreteľnú hranu a hlbší tieň a klopa je o odtieň tmavšia ako telo.
   ═══════════════════════════════════════════════════════════════════ */
/* pozadie sekcie sa v strede prehĺbi, hore aj dole ostáva sky-50,
   aby vlny nad ňou a sekcia pod ňou nadväzovali bez švíka */
.vizia{
  background:linear-gradient(180deg,var(--sky-50) 0%,#DCEBF4 46%,#E4F2F8 74%,var(--sky-50) 100%);
}
.vizia__aura{
  background:radial-gradient(circle,rgba(4,167,181,.16),rgba(21,100,200,.07) 46%,transparent 70%);
}

/* ─── telo obálky ─── */
.obalka__ziara{
  background:radial-gradient(circle,rgba(9,40,85,.22),transparent 62%);
  filter:blur(30px);
}
.obalka__telo{
  color:var(--navy-800);
  background:linear-gradient(168deg,#FFFFFF 0%,#FAFDFF 46%,#EFF7FC 100%);
  box-shadow:
    0 44px 90px -34px rgba(9,40,85,.5),
    0 6px 18px -8px rgba(9,40,85,.18),
    inset 0 0 0 1px rgba(4,167,181,.28);
}
/* šrafovanie papiera */
.obalka__raster{
  opacity:.5;
  background:repeating-linear-gradient(135deg,rgba(11,46,94,.045) 0 2px,transparent 2px 10px);
}
.obalka__sken{
  background:linear-gradient(180deg,transparent,rgba(4,167,181,.13),transparent);
}

.obalka__hlava{color:var(--muted)}
.obalka__stav{color:var(--teal-600)}

.obalka__nazov{color:var(--navy-800)}
.obalka__nazov b{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* začiernené riadky na bielom papieri */
.cenzura span{background:linear-gradient(90deg,rgba(11,46,94,.2),rgba(11,46,94,.1))}
.cenzura span::after{background:linear-gradient(90deg,transparent,rgba(4,167,181,.5),transparent)}

.obalka__btn{
  color:#fff;background:var(--grad-brand);
  box-shadow:0 16px 32px -14px rgba(4,167,181,.85);
}
.obalka__btn:hover{box-shadow:0 24px 44px -16px rgba(4,167,181,.95)}
.obalka__sepot{color:var(--teal-700)}

/* ─── klopa: o odtieň tmavšia, nech je vidieť preloženie ─── */
.obalka__klopa span{
  background:linear-gradient(176deg,#EAF4FA 0%,#DCEBF4 55%,#CDE2EE 100%);
  filter:drop-shadow(0 2px 0 rgba(4,167,181,.32)) drop-shadow(0 8px 14px rgba(9,40,85,.16));
}
/* prstenec okolo pečate na bielom papieri */
.pecat::after{border-color:rgba(210,38,48,.32)}

/* adresát na obálke — kam list smeruje */
.obalka__adresa{
  position:relative;z-index:1;margin-top:1.1rem;display:grid;gap:.15rem;
}
.obalka__adresa span{
  font-family:var(--f-display);font-weight:800;font-size:var(--label-size);
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--muted);
}
.obalka__adresa b{
  font-family:var(--f-script);font-weight:700;
  font-size:clamp(1.5rem,4.2vw,2.05rem);line-height:1.1;color:var(--teal-700);
}
/* ═══════════════════════════════════════════════════════════════════
   BEZ BLIKAJÚCICH BODIEK (okrem pásu správ)
   Pulzujúce svetielka v hero, pri termíne volieb a na obálke sú preč.
   Bodka ostala len pri „Správy TASR“, kde znamená „vysiela sa“.
   ═══════════════════════════════════════════════════════════════════ */
/* pulzujúci prstenec okolo pečate preč */
.pecat::after{content:none;display:none}

/* ═══════════════ MOBIL: KARTY 100 DNÍ CEZ CELÚ ŠÍRKU ═══════════════
   Neskoršie pravidlo .day{width:min(80vw,420px)} prebíjalo mobilné
   width:100%, takže karty držali 300 px a tlačili sa k ľavému okraju. */
@media(max-width:900px){
  .day{width:100%}
}

/* ═══════════════ MOBIL: ŠIRŠÍ PORTRÉT ═══════════════
   Portrét bol užší ako blok s menom. Teraz presahuje stĺpec s textom,
   ale stále sa zmestí do okna. */
@media(max-width:900px){
  .hero__photo{
    max-width:none;
    width:calc(min(100% + 2rem, 100vw - 1rem, 520px) * .95);
  }
}

/* ═══════════════ PEČAŤ BEZ ŠVÍKA V STREDE ═══════════════
   Polovice sa orezávali presne na 50 %, kde vyhladzovanie nechávalo
   tenkú čiaru. Teraz sa o kúsok prekrývajú, takže spoj nie je vidieť;
   pri prasknutí sa presah stratí. */
.pecat__pol--l{clip-path:inset(0 49.4% 0 0)}
.pecat__pol--r{clip-path:inset(0 0 0 49.4%)}

/* linka namiesto pulzujúcej bodky pri termíne volieb */
/* ═══════════════════════════════════════════════════════════════════
   INFO PÁSIK POD HORNOU LIŠTOU
   Dátum, meniny, najbližší sviatok a počasie. Nahradil tlačidlo
   kalendára, ktoré sa na úzkych telefónoch tlačilo na značku.
   Rozmery sú v clamp(), takže pásik rastie plynulo od najmenšieho
   telefónu po širokú obrazovku; položky ustupujú v poradí podľa
   dôležitosti, nie naraz.
   ═══════════════════════════════════════════════════════════════════ */
.infopas{
  position:fixed;left:0;right:0;top:var(--nav-h);z-index:790;
  background:linear-gradient(90deg,rgba(7,35,71,.94),rgba(6,124,137,.94) 55%,rgba(4,167,181,.94));
  color:#fff;
  box-shadow:0 6px 22px -14px rgba(4,21,47,.8);
  transition:top .4s var(--ease);
}
.nav.is-stuck ~ .infopas{top:64px}

.infopas__in{
  width:min(100% - 1.4rem,1400px);margin-inline:auto;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.45rem,2.2vw,1.8rem);
  height:var(--pas-h);overflow:hidden;
}
.infopas__pol{
  display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-size:clamp(.66rem,1.9vw,.78rem);line-height:1;min-width:0;
}
.infopas__pol em{
  font-style:normal;font-family:var(--f-display);font-weight:700;
  font-size:clamp(.54rem,1.5vw,.63rem);letter-spacing:.11em;text-transform:uppercase;
  color:rgba(182,236,243,.8);
}
.infopas__pol b{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(.68rem,2vw,.8rem);color:#fff;
}
.infopas__pol > svg{
  width:clamp(12px,3vw,15px);height:clamp(12px,3vw,15px);flex:none;
  fill:none;stroke:var(--teal-300);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
/* oddeľovače medzi položkami */
.infopas__pol + .infopas__pol::before{
  content:'';width:4px;height:4px;border-radius:50%;flex:none;
  background:rgba(182,236,243,.45);margin-right:.3rem;
}
.infopas__pol--pocasie .wchip__ico{
  width:clamp(14px,3.4vw,17px);height:clamp(14px,3.4vw,17px);flex:none;display:block;
}
.infopas__pol--pocasie .wchip__ico svg{
  width:100%;height:100%;fill:none;stroke:var(--teal-200);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.infopas__pol--pocasie .wchip__ico .sun{fill:#FFD466;stroke:#FFD466}
.infopas__pol--pocasie .wchip__ico .drop{stroke:var(--teal-200)}

/* Ako sa miesto míňa, ustupuje najprv sviatok, potom menovky
   a nakoniec deň v týždni. Dátum, meniny a počasie ostanú vždy. */
@media(max-width:900px){
  .infopas__pol--sviatok{display:none}
}
@media(max-width:470px){
  .infopas__pol em{display:none}
  .infopas__pol + .infopas__pol::before{margin-right:.15rem}
}
@media(max-width:370px){
  .infopas__den{display:none}
  .infopas__in{gap:.5rem}
}

/* obsah sa musí zmestiť pod lištu aj pod pásik */
.hero{padding-top:calc(var(--nav-h) + var(--pas-h) + 3rem)}

/* ═══════════════ HORNÁ LIŠTA NA TELEFÓNOCH ═══════════════
   Značka sa smie zmenšiť, podnadpis na najužších displejoch ustúpi,
   burger si drží svoju veľkosť. Nič sa už neprekrýva. */
@media(max-width:900px){
  .nav__in{gap:.75rem}
  .brand{flex:1 1 auto;min-width:0}
  .brand__txt{min-width:0}
  .brand__txt b,.brand__txt em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:380px){
  .brand__txt em{display:none}
  .brand__mark{width:32px;height:32px}
}

/* pulzujúca bodka ostáva len pri správach, kde dáva zmysel „vysiela sa" */
.ticker__dot{
  width:9px;height:9px;border-radius:50%;background:#fff;
  animation:ping 2s ease-out infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}
  70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* ═══════════════ KLOPA OBÁLKY: PRIRODZENEJŠÍ TVAR ═══════════════
   Plytký a široký trojuholník s tvrdou aqua linkou pôsobil, akoby
   z obálky niečo trčalo. Klopa je teraz hlbšia, má mäkký tieň pod
   hrotom a tón, ktorý plynulo prechádza do tela obálky. */
.obalka{--klopa:clamp(140px,29vw,224px)}
.obalka__klopa span{
  background:linear-gradient(180deg,#F7FBFE 0%,#ECF5FA 46%,#DCEBF4 82%,#D2E5F1 100%);
  filter:drop-shadow(0 10px 16px rgba(9,40,85,.16));
}
/* jemný záhyb po oboch šikmých hranách */
.obalka__klopa span::after{
  content:'';position:absolute;inset:0;
  clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(180deg,transparent 62%,rgba(4,167,181,.16) 100%);
}

/* ═══════════════ IKONA HRY V HORNEJ LIŠTE ═══════════════ */
.nav__akcie{display:flex;align-items:center;gap:.55rem;flex:none}
.hraIko{
  flex-direction:column;gap:1px;
  display:flex;align-items:center;justify-content:center;width:48px;height:46px;flex:none;
  border-radius:14px;
  background:rgba(4,167,181,.1);box-shadow:inset 0 0 0 1px rgba(4,167,181,.32);
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.hraIko svg{
  width:21px;height:21px;fill:none;stroke:var(--teal-700);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.hraIko svg circle{fill:var(--teal-700);stroke:none}
.hraIko:hover{
  background:rgba(4,167,181,.22);transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px rgba(4,167,181,.6),0 12px 24px -14px rgba(4,167,181,.9);
}
@media(max-width:380px){
  .hraIko{width:38px;height:38px;border-radius:12px}
  .hraIko svg{width:20px;height:20px}
}
.hraIko__txt{
  font-family:var(--f-display);font-weight:800;font-size:.52rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal-700);line-height:1;
}
@media(max-width:380px){
  .hraIko__txt{font-size:.48rem}
}

/* ═══════════════════════════════════════════════════════════════════
   OPTIMALIZÁCIA PRE TELEFÓNY
   Rozmazávanie pozadia (backdrop-filter), veľké rozostrené žiary a
   celoobrazovkové zrno stoja mobilné grafické čipy najviac výkonu.
   Na úzkych displejoch ich preto vypíname a nahrádzame plnou farbou.
   Vzhľad ostáva rovnaký, len sa nič neprepočítava pri každom snímku.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* karty programu: namiesto rozmazania pevné pozadie */
  .card{
    backdrop-filter:none;-webkit-backdrop-filter:none;
    background:linear-gradient(160deg,rgba(3,26,54,.72),rgba(3,26,54,.6));
  }
  .card:hover{background:linear-gradient(160deg,rgba(3,26,54,.78),rgba(3,26,54,.66))}

  .fb-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.16)}
  .nav.is-stuck{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.95)}

  /* zrno cez celú obrazovku je na telefóne zbytočná vrstva navyše */
  .grain{display:none}

  /* žiara za obálkou: bez rozostrenia a bez dýchania */
  .obalka__ziara{filter:none;animation:none;opacity:.5}
  .vizia__aura{animation:none}

  /* vlny v hlavičke sa hýbu pomalšie, menej prekresľovania */
  .w1{animation-duration:20s}
  .w2{animation-duration:26s}
  .w3{animation-duration:32s}
}

/* Na dotykových zariadeniach nemá zmysel počítať efekty pre kurzor
   ani jemné naklápanie dlaždíc; prst ich aj tak nevyvolá. */
@media(hover:none){
  .cursor,.cursor-ring{display:none}
  .tilt{transform:none !important}
  .card::after{display:none}
}

/* ═══════════════ PORTRÉT: JEDEN OBRÁZOK S PRIEHĽADNOSŤOU ═══════════════
   Predtým to bola fotografia v JPEG a k nej samostatná maska v PNG. Maska
   sa naťahovala cez mask-size a oproti fotografii sedela o pixel vedľa,
   takže po obryse postavy vznikal lem. Teraz je to jediný súbor: PNG
   s priehľadným pozadím, orezaný presne na postavu — niet čo rozladiť.
   Tieň drží rodič, aby kopíroval obrys postavy, nie obdĺžnik obrázka. */
.cutout{
  filter:saturate(1.04) contrast(1.03);
}
.hero__photo{filter:drop-shadow(0 18px 30px rgba(9,40,85,.26))}

/* ═══════════════ BOČNÉ ZÁHYBY OBÁLKY ═══════════════
   Samotná klopa pôsobila ako trojuholník prilepený na hladkú plochu a
   v horných rohoch to bilo do očí. Skutočná obálka má po stranách klopy
   ešte dva zahnuté cípy. Doplnili sme ich, takže vrch drží pokope. */
.obalka__telo::before,
.obalka__telo::after{
  content:'';position:absolute;left:0;right:0;top:0;height:var(--klopa);
  pointer-events:none;z-index:0;
  background:linear-gradient(180deg,#EFF6FB,#DFEBF4);
}
.obalka__telo::before{clip-path:polygon(0 0,50% 100%,0 100%)}
.obalka__telo::after{clip-path:polygon(100% 0,50% 100%,100% 100%)}
/* obsah spisu musí ostať nad cípmi */
.obalka__hlava,.obalka__nazov,.obalka__adresa,.cenzura,.obalka__btn,.obalka__sepot{z-index:2}

/* ═══════════════ KLOPA BEZ PRESAHU ═══════════════
   Tieň klopy kopíroval tvar trojuholníka, takže pri horných rohoch
   presvitol von z obálky. Namiesto neho robí hĺbku rozdiel odtieňov
   a jemný záhyb kreslený vnútri orezaného tvaru. Nič už neprečnieva. */
.obalka__klopa span{
  filter:none;
  background:linear-gradient(180deg,#F4FAFE 0%,#E6F1F9 44%,#D3E6F2 82%,#C7DFEE 100%);
}
.obalka__klopa span::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.6) 0 14%,transparent 42%),
    linear-gradient(180deg,transparent 58%,rgba(9,40,85,.1) 88%,rgba(4,167,181,.22) 100%);
}
/* bočné cípy o odtieň tmavšie, aby klopa nad nimi vystúpila */
.obalka__telo::before,
.obalka__telo::after{
  background:linear-gradient(180deg,#E7F1F8,#D5E5F0);
}

/* ═══════════════ OBÁLKA: ČISTÁ KLOPA ═══════════════
   Bočné cípy nechávali cez celú obálku vodorovný šev, preto sú preč.
   Ostáva klasický tvar: jedna klopa od horných rohov do špice, kde drží
   pečať. Prehyb kreslíme ako tenký lem vnútri orezaného trojuholníka,
   takže sa nemôže dostať mimo obálku. */
.obalka__telo::before,
.obalka__telo::after{content:none}

.obalka__klopa span{
  background:rgba(9,40,85,.22);           /* lem prehybu */
  filter:none;
}
.obalka__klopa span::after{
  content:'';position:absolute;inset:0;
  clip-path:polygon(.45% 0,99.55% 0,50% 99.2%);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.75) 0 12%,transparent 40%),
    linear-gradient(180deg,#F6FBFE 0%,#E7F2F9 46%,#D6E7F3 100%);
}

/* ═══════════════ KLOPA: DOLADENIE VRCHU ═══════════════
   Vrch obálky dostal jemnejší prehyb v znackovej aqua namiesto tmavého
   lemu, zaoblenú špicu pod pečaťou, rovnaké šrafovanie papiera ako telo
   a mäkký svetelný pruh, akoby naň dopadalo svetlo. Všetko sa kreslí
   vnútri orezaného trojuholníka, takže nič nemôže vytŕčať z obálky. */
.obalka__klopa span{
  background:rgba(4,167,181,.34);          /* tenký prehyb po okraji klopy */
  clip-path:polygon(0 0,100% 0,53% 95%,50% 100%,47% 95%);
}
.obalka__klopa span::after{
  clip-path:polygon(.5% 0,99.5% 0,52.4% 94.2%,50% 98.8%,47.6% 94.2%);
  background:
    /* svetlo dopadajúce zľava zhora */
    linear-gradient(118deg,transparent 14%,rgba(255,255,255,.6) 33%,transparent 54%),
    /* rovnaké šrafovanie ako na tele obálky, nech je to jeden papier */
    repeating-linear-gradient(135deg,rgba(11,46,94,.05) 0 2px,transparent 2px 10px),
    /* podklad papiera */
    linear-gradient(180deg,#F9FCFE 0%,#EDF5FA 52%,#E0EDF6 100%);
}

/* ═══════════════ INFO PÁSIK: ZAROVNANIE NA ÚČIARU ═══════════════
   Menovka „Meniny má“ je menšia ako samotné meno, takže pri zarovnaní
   na stred boxov sedeli písmená v inej výške. Text sa preto zarovnáva
   na spoločnú účiaru a ikonky ostávajú na strede. */
.infopas__pol{align-items:baseline}
.infopas__pol > svg,
.infopas__pol--pocasie .wchip__ico,
.infopas__pol + .infopas__pol::before{align-self:center}

/* Aby na jednej účiare sedel všetok text pásika, nielen dvojice v rámci
   položky, je riadok mriežka: stĺpce sa zarovnajú na spoločnú účiaru
   a celý riadok sa vycentruje na výšku pásika. */
.infopas__in{
  display:grid;grid-auto-flow:column;
  justify-content:center;align-content:center;align-items:baseline;
  column-gap:clamp(.45rem,2.2vw,1.8rem);
}

/* Písmo má hore vyšší dosah ako dole, takže riadok zarovnaný na účiaru
   pôsobí posunutý nahor. Malé odsadenie zhora ho posadí opticky do
   stredu pásika; hodnota rastie spolu s veľkosťou písma. */
.infopas__in{padding-top:clamp(.17rem,.5vw,.2rem)}

/* ═══════════════════════════════════════════════════════════════════
   MIERKA NA TELEFÓNOCH
   Väčšina prvkov mala v clamp() spodnú hranicu nastavenú pre počítač,
   takže pod istou šírkou sa prestali zmenšovať a na telefóne pôsobili
   obrovsky. Spodné hranice sú preto nižšie a hodnoty rastú so šírkou
   obrazovky, aby všetko drželo rovnaký pomer od 320 px nahor.
   ═══════════════════════════════════════════════════════════════════ */

/* logo v hlavičke hero sekcie rastie so šírkou obrazovky */
.crest-row__mp{height:clamp(45px,12.45vw,66px)}
.crest-row__sep{height:clamp(32px,9vw,46px)}

/* ikony pilierov */
.pillar__ico{width:clamp(54px,15vw,74px);height:clamp(54px,15vw,74px)}

/* ikony v životnom príbehu */
.pribeh__ico{width:clamp(40px,11vw,52px);height:clamp(40px,11vw,52px)}
@media(min-width:561px){
  .pribeh__blok{grid-template-columns:clamp(40px,11vw,52px) 1fr}
}
.pribeh__ico svg{width:clamp(19px,5.2vw,24px);height:clamp(19px,5.2vw,24px)}

/* čísla kapitol v programe */
.chapter__no{
  width:clamp(60px,14vw,124px);height:clamp(60px,14vw,124px);
  font-size:clamp(1.5rem,5.4vw,3rem);
}

/* dlaždice odpočtu do volieb */
.odpocet__pol{min-width:clamp(52px,15vw,92px)}

/* pečať na obálke */
.pecat{width:clamp(62px,17vw,128px)}

/* ikona Facebooku v kontakte */
.fb-card__ico{width:clamp(42px,12vw,52px);height:clamp(42px,12vw,52px)}
.fb-card__ico svg{width:clamp(21px,6vw,26px);height:clamp(21px,6vw,26px)}

/* vlny ostávajú v pôvodnej mierke clamp(90px,12vw,180px), tá sa osvedčila */

/* veľké nadpisy sekcií na telefóne o niečo pokojnejšie */
@media(max-width:560px){
  .h2{font-size:clamp(1.55rem,7.6vw,2.4rem)}
  .h2--giant{font-size:clamp(2.2rem,13vw,4rem)}
  .sec{padding:clamp(3.4rem,13vw,6rem) 0}
}

/* ═══════════════ NÁZOV OBCE NA TELEFÓNE ═══════════════
   Názov obce aj motto ostávajú na dvoch riadkoch tak, ako boli navrhnuté.
   Písmo sa zmenšuje so šírkou obrazovky, takže sa všetky štyri riadky
   zmestia vedľa loga a blok neprerastie jeho výšku. */
@media(max-width:560px){
  .crest-row__txt{line-height:1.08}
  .crest-row__txt b{font-size:clamp(.68rem,3.05vw,.92rem);line-height:1.08}
  .crest-row__txt span{margin-top:.1rem;font-size:clamp(.4rem,1.8vw,.54rem);line-height:1.08;letter-spacing:.05em}
  .crest-row{gap:.55rem}
}
/* podnadpis značky v lište ustúpi až na naozaj úzkych displejoch */
@media(max-width:380px){
  .brand__txt em{display:block}
}
/* podnadpis značky ostáva viditeľný na každej šírke, len sa zmenšuje */
.brand__txt em{display:block;font-size:clamp(.5rem,1.9vw,.68rem);letter-spacing:.06em}

/* Oddeľovacie bodky sa centrovali v rámci svojej položky, a keďže položka
   s počasím je kvôli ikonke vyššia, jej bodka sedela nižšie. Teraz visia
   od horného okraja riadku, takže sú všetky v rovnakej výške. */
.infopas__pol + .infopas__pol::before{
  align-self:flex-start;
  margin-top:.35em;
}

/* aj na počítači nech je názov obce s mottom nižší ako logo vedľa neho */
@media(min-width:561px){
  .crest-row__txt{line-height:1.06}
  .crest-row__txt span{margin-top:.1rem;line-height:1.06}
}

/* ═══════════════ PONOR PORTRÉTU NA TELEFÓNE ═══════════════
   Ponor bol naviazaný na výšku vlnového pásu, a keď sa pás na telefónoch
   zúžil, postava zrazu stála takmer nad vodou. Teraz sa ponor odvíja od
   šírky stĺpca, takže je v každej veľkosti rovnako hlboký. */
@media(max-width:900px){
  .hero__photo{margin-bottom:-46%}
}
/* ═══════════════ PORTRÉT ZAROVNANÝ S MENOM (POČÍTAČ) ═══════════════
   Hlava sedí na riadku s menom (hodnotu --foto-top meria skript, lebo
   nadpis je zvislo vycentrovaný). Spodok postavy je ukotvený hlboko do
   vlnového pásu, takže odrezané telo nie je vidieť pri žiadnej veľkosti
   okna. Keďže pás rastie so šírkou obrazovky, ponorená časť vychádza
   všade približne na štvrtinu postavy. */
@media(min-width:901px){
  .hero__photo{
    --foto-top:calc(var(--nav-h) + var(--pas-h) + 3rem + 66px + 1.5rem);
    --hladina:-28px;   /* postava presahuje pod sekciu, rez teda oreže overflow */
    top:var(--foto-top);
    bottom:auto;
    height:calc(100% - var(--hladina) - var(--foto-top));
  }
}


/* ═══════════════ FOTOGRAFIA KOSTOLA: POLOHA ═══════════════
   Nová predloha je orezaná tak, aby veža stála v medzere medzi textom
   a portrétom. Scéna je o niečo vyššia, takže kostol vystúpi vyššie
   a nekryje ho postava. */
.photo-scene{
  height:95%;
  background-position:center 42%;
}

/* ═══════════════════════════════════════════════════════════════════
   PANEL POD INFO PÁSIKOM
   Kliknutie na dátum otvorí kalendár mesiaca, kliknutie na počasie
   predpoveď na tri dni. Panel visí pod pásikom a posunie sa spolu s ním,
   keď sa horná lišta pri scrollovaní zmenší.
   ═══════════════════════════════════════════════════════════════════ */
/* ikonka počasia opticky na výšku textu so stupňami */
.infopas__pol--pocasie .wchip__ico{position:relative;top:.05em}

/* klikateľné položky pásika */
.infopas__pol--klik{
  border:0;background:none;cursor:pointer;color:inherit;font:inherit;
  padding:0;border-radius:8px;
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.infopas__pol--klik:hover,
.infopas__pol--klik[aria-expanded="true"]{background:rgba(255,255,255,.18);box-shadow:0 0 0 .32rem rgba(255,255,255,.18)}
.infopas__pol--klik:focus-visible{outline:2px solid var(--teal-200);outline-offset:2px}

.paspanel__tien{position:fixed;inset:0;z-index:795;background:transparent}
.paspanel{
  position:fixed;z-index:796;
  top:calc(var(--nav-h) + var(--pas-h) + .5rem);
  left:50%;translate:-50% 0;
  width:min(100% - 1.6rem,420px);
  padding:1.1rem 1.2rem 1.2rem;
  border-radius:var(--r-md);
  background:linear-gradient(168deg,#fff,var(--sky-50));
  box-shadow:0 34px 70px -28px rgba(9,40,85,.55),inset 0 0 0 1px rgba(4,167,181,.22);
  transition:top .4s var(--ease);
  animation:paspanelIn .3s var(--ease);
}
.nav.is-stuck ~ .paspanel{top:calc(64px + var(--pas-h) + .5rem)}
@keyframes paspanelIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.paspanel__x{
  position:absolute;top:.5rem;right:.6rem;border:0;background:none;cursor:pointer;
  font-size:1.5rem;line-height:1;color:var(--muted);
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.paspanel__x:hover{color:var(--navy-800);transform:rotate(90deg)}

/* ─────────── spoločná hlavička panela ─────────── */
.pp__hlava{margin-bottom:.9rem;padding-right:1.4rem}
.pp__hlava b{
  display:block;font-family:var(--f-display);font-weight:800;
  font-size:1.02rem;color:var(--navy-800);line-height:1.2;
}
.pp__hlava span{
  display:block;margin-top:.12rem;font-family:var(--f-display);font-weight:700;
  font-size:var(--label-size);letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--teal-600);
}

/* ─────────── predpoveď počasia ─────────── */
.pp__dni{display:grid;gap:.4rem}
.pp__den{
  display:grid;grid-template-columns:auto 30px 1fr auto;align-items:center;gap:.7rem;
  padding:.55rem .7rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(4,167,181,.14);
}
.pp__den--dnes{background:linear-gradient(120deg,rgba(4,167,181,.14),rgba(21,100,200,.08));box-shadow:inset 0 0 0 1px rgba(4,167,181,.35)}
.pp__den em{
  font-style:normal;font-family:var(--f-display);font-weight:800;font-size:.78rem;
  color:var(--navy-800);min-width:4.2rem;
}
.pp__ico{width:28px;height:28px;display:block}
.pp__ico svg{width:100%;height:100%;fill:none;stroke:var(--teal-600);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pp__ico .sun{fill:#EFAE1E;stroke:#EFAE1E}
.pp__ico .drop{stroke:var(--teal-500)}
.pp__popis{font-size:.82rem;color:var(--muted)}
.pp__teploty{font-family:var(--f-display);font-weight:800;font-size:.9rem;color:var(--navy-800);white-space:nowrap}
.pp__teploty i{font-style:normal;font-weight:600;color:var(--muted);margin-left:.25rem}

/* ─────────── kalendár mesiaca ─────────── */
.pp__mriezka{display:grid;grid-template-columns:repeat(7,1fr);gap:.2rem;text-align:center}
.pp__dow{
  font-family:var(--f-display);font-weight:800;font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:.25rem;
}
.pp__d{
  border:0;background:none;cursor:pointer;
  aspect-ratio:1;display:grid;place-items:center;border-radius:9px;
  font-family:var(--f-display);font-weight:700;font-size:.82rem;color:var(--ink-2);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.pp__d:hover{background:rgba(4,167,181,.14)}
.pp__d--prazdny{visibility:hidden}
.pp__d--vikend{color:var(--cervena)}
.pp__d--dnes{background:var(--grad-brand);color:#fff;box-shadow:0 8px 18px -8px rgba(4,167,181,.9)}
.pp__d--vybrany{box-shadow:inset 0 0 0 2px var(--teal-500)}
.pp__d--volby{box-shadow:inset 0 0 0 2px var(--cervena);color:var(--cervena)}
/* sviatok je len jemne podsvietený — deň volieb aj dnešok ostávajú silnejšie */
.pp__d--sviatok{
  background:linear-gradient(160deg,rgba(214,168,44,.30),rgba(214,168,44,.15));
  box-shadow:inset 0 0 0 1px rgba(160,120,18,.38);
  color:var(--zlata-tmava);font-weight:800;
}
.pp__d--sviatok:hover{background:linear-gradient(160deg,rgba(214,168,44,.46),rgba(214,168,44,.24))}
.pp__d--dnes.pp__d--sviatok{
  background:var(--grad-brand);color:#fff;
  box-shadow:0 8px 18px -8px rgba(4,167,181,.9),inset 0 0 0 2px var(--zlata);
}
.pp__d--volby.pp__d--sviatok{color:var(--cervena);box-shadow:inset 0 0 0 2px var(--cervena)}
.pp__pata{
  margin-top:.9rem;padding-top:.75rem;border-top:1px solid rgba(4,167,181,.2);
  font-size:.86rem;color:var(--ink-2);
}
.pp__pata b{color:var(--navy-800);font-family:var(--f-display);font-weight:800}
.pp__pata span{display:block;margin-top:.25rem;font-size:.78rem;color:var(--muted)}

/* ═══════════════ FOTOGRAFIA KOSTOLA: CELÁ PLOCHA POD PÁSIKOM ═══════════════
   Scéna začína presne pod info pásikom, takže nad fotografiou nezostáva
   svetlý pruh. Ukotvená je hore: keď je obrazovka veľmi široká, oreže sa
   spodok so stromami, nie veža. Na úzkych displejoch sa výška vyplní celá
   a oreže sa šírka, kde kostol ostáva v strede záberu. */
.photo-scene{
  height:calc(100% - var(--nav-h) - var(--pas-h));
  background-size:cover;
  background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.7) 1.2%,#000 3.5%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.7) 1.2%,#000 3.5%,#000 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   INFO PÁSIK: JEDNOTNÝ RYTMUS
   Predtým mala každá položka iný tvar: niekde ikonka, inde verzálková
   menovka, medzi nimi bodky. Teraz je každá rovnaká, ikonka plus údaj,
   rovnaké medzery a rovnaká veľkosť písma. Význam nesie ikonka, celé
   znenie je v bublinke pri prejdení myšou.
   ═══════════════════════════════════════════════════════════════════ */
.infopas__in{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
  gap:clamp(.85rem,3vw,2.2rem);
  padding-top:0;
}
.infopas__pol{
  display:inline-flex;align-items:center;gap:.42rem;white-space:nowrap;
  min-width:0;line-height:1;
}
.infopas__pol + .infopas__pol::before{content:none}
.infopas__pol em{display:none}
.infopas__pol b{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(.68rem,1.85vw,.8rem);color:#fff;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;
}
.infopas__ico{
  width:clamp(14px,3vw,17px);height:clamp(14px,3vw,17px);flex:none;display:block;
  fill:none;stroke:var(--teal-200);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  position:static;
}
.infopas__pol--pocasie .wchip__ico svg{width:100%;height:100%;fill:none;stroke:var(--teal-200);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.infopas__pol--pocasie .wchip__ico .sun{fill:#FFD466;stroke:#FFD466}
.infopas__pol--pocasie .wchip__ico .drop{stroke:var(--teal-200)}

/* klikateľné položky: jemná bublina, ktorá nemení rytmus riadku */
.infopas__pol--klik{
  border:0;background:none;cursor:pointer;color:inherit;font:inherit;padding:0;
  border-radius:8px;
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.infopas__pol--klik:hover,
.infopas__pol--klik[aria-expanded="true"]{
  background:rgba(255,255,255,.18);
  box-shadow:0 0 0 .34rem rgba(255,255,255,.18);
}

/* na užších displejoch ustúpi sviatok, ostatné sa len zmenšia */
@media(max-width:820px){
  .infopas__pol--sviatok{display:none}
}

/* fotografia začína hneď pod pásikom, bez svetlého prechodu */
.photo-scene{-webkit-mask-image:none;mask-image:none}
/* jedna veľkosť pre všetky ikonky v pásiku, nech nič nevytŕča */
.infopas__pol .infopas__ico,
.infopas__pol--pocasie .wchip__ico{
  width:clamp(13px,3.2vw,16px);height:clamp(13px,3.2vw,16px);
}

/* ═══════════════ ZÁVOJ NAD FOTOGRAFIOU ═══════════════
   Biely závoj má robiť čitateľné pozadie pod textom, nie prekrývať
   kostol. Doteraz siahal až za polovicu šírky a veža za ním blednutá.
   Teraz je krytie sústredené k ľavému okraju a od 40 % šírky je už
   fotografia takmer čistá. */
.sky__veil{
  background:linear-gradient(97deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.86) 22%,
    rgba(255,255,255,.5) 34%,
    rgba(255,255,255,.12) 42%,
    rgba(255,255,255,0) 50%);
}
@media(max-width:900px){
  .sky__veil{background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.55) 38%,rgba(255,255,255,.05) 72%,rgba(255,255,255,0) 100%)}
}

/* ═══════════════ FOTOGRAFIA A PORTRÉT VIAC DOPRAVA ═══════════════
   Biely pruh pri pravom okraji vznikal z rozplynutia okraja fotografie.
   Rozplynutie je preč, scéna je opäť cez celú šírku a záber aj postava
   sú posunuté doprava, takže vpravo nezostáva svetlé miesto. */
.photo-scene{
  aspect-ratio:auto;
  width:auto;left:0;right:0;translate:none;max-width:none;
  background-position:58% top;
  -webkit-mask-image:none;mask-image:none;
}
@media(min-width:901px){
  .hero__photo{
    right:max(0px, calc((100% - min(100% - 3rem, var(--wrap))) / 2 - 3.5rem));
  }
}

/* ═══════════════ VLNOVÝ PÁS ═══════════════   Pás ostáva výrazný ako v pôvodnom návrhu. Výrez postavy končí na   hrudi, ale spodná hrana je pod spodkom sekcie, takže ju oreže   overflow a nikdy nie je vidieť, nech je pás akokoľvek vysoký. */

/* ═══════════════════════════════════════════════════════════════════
   PORTRÉT: HLADINA ODVODENÁ OD TMAVEJ VLNY
   Doteraz sa spodok postavy zapichoval hlboko pod sekciu a vlnový pás
   ho zjedol takmer do polovice hrude. Tmavá vlna (w3) pritom podľa
   svojej krivky kryje spodných ~25 % pásu na každej šírke. Stačí teda
   položiť spodnú hranu výrezu kúsok POD hornú hranu tmavej vlny: rez
   zmizne v nepriehľadnej modrej, ale trup ostane celý nad ňou.
   Hodnota --hladina je vzdialenosť spodku postavy od spodku sekcie.
   ═══════════════════════════════════════════════════════════════════ */
:root{--wave-h:clamp(90px,12vw,180px)}

@media(min-width:901px){
  .hero__photo{
    --hladina:calc(var(--wave-h) * .12);
    top:var(--foto-top);
    bottom:auto;
    height:calc(100% - var(--hladina) - var(--foto-top));
  }
}

@media(max-width:900px){
  .hero__photo{
    margin-bottom:calc(var(--wave-h) * -1.10);
  }
}

/* bublina sa musí zmestiť do sekcie aj vtedy, keď je postava tesne
   pri pravom okraji, inak jej roh ukrojí orez sekcie */
@media(min-width:901px){
  .badge--b{right:0}
}

/* ═══════════════ ZÁVOJ NA ŠIROKÝCH OBRAZOVKÁCH ═══════════════
   Závoj sa meria od okraja okna, ale text stojí v strednom stĺpci, takže
   na širokej obrazovke vyblednul ešte skôr, než sa k písmenám dostal.
   Teraz sa celý prechod posunie presne o odsadenie stĺpca a končí v
   pevnej vzdialenosti od jeho ľavého okraja. Prechod je kruhový, takže
   sa vpravo neuzatvára rovnou čiarou, ale oblúkom. V polovici výšky
   dobehne do nuly 560 px od stĺpca: text končí najneskôr na 488 px a
   veža začína najskôr na 572 px, takže sa kostola nedotkne. */
@media(min-width:1420px){
  .sky__veil{
    --stlpec:calc((100vw - min(100vw - 3rem, var(--wrap))) / 2);
    background:radial-gradient(830px 150% at calc(var(--stlpec) - 70px) 44%,
      rgba(255,255,255,.80)   0%,
      rgba(255,255,255,.76)  38%,
      rgba(255,255,255,.60)  60%,
      rgba(255,255,255,.34)  76%,
      rgba(255,255,255,.10)  90%,
      rgba(255,255,255,0)   100%);
  }
}

/* ═══════════════ DROBNÉ ÚPRAVY OVLÁDANIA ═══════════════
   1. Tlačidlo „Zapojte sa“ je plne biele. Predtým bolo priesvitné a
      menilo odtieň podľa toho, čo bolo za ním, takže vedľa tmavšieho
      miesta fotografie pôsobilo špinavo.
   2. Ikona hry má dlhšiu menovku, tak sa rozšíri podľa textu namiesto
      pevných 48 px. */
.btn--ghost{
  background:#fff;
  backdrop-filter:none;
}
.hraIko{
  width:auto;min-width:48px;padding:0 .6rem;
}
.hraIko__txt{letter-spacing:.05em;white-space:nowrap}
@media(max-width:380px){
  .hraIko{min-width:38px;padding:0 .45rem}
}

/* na telefóne smie byť postava hlbšie vo vlne, pás je tam nízky a
   samotný výrez tak pôsobí pevnejšie usadený */
@media(max-width:900px){
  .hero__photo{margin-bottom:calc(var(--wave-h) * -1.38)}
}

/* ═══════════════ CELÝ KOSTOL V ZÁBERE (POČÍTAČ) ═══════════════
   Kostol zaberá v predlohe pás od 49 % do 80 % šírky. Pri zábere
   posunutom na 58 % sa jeho pravé krídlo na užších monitoroch orezalo.
   Posun na 70 % drží celú stavbu vrátane lode v okne od 900 px vyššie. */
@media(min-width:901px){
  .photo-scene{background-position-x:70%}
}


/* ═══════════════════════════════════════════════════════════════════
   CELÝ KOSTOL NAD HLADINOU (POČÍTAČ)
   Predchádzajúca predloha bola úzky pás okolo kostola: stavba v nej
   siahala od 2 % do 90 % výšky, takže pod ňou nezostalo nič, čím by sa
   dala vyplniť plocha za vlnami. Preto tam musela byť dokreslená farba,
   a to je ten zelený obdĺžnik.
   Nová predloha je širší záber z rovnakej fotografie. Kostol je v nej
   od 1,5 % do 70 % výšky a pod ním je pás stromov, ktorý plochu za
   vlnami vyplní sám. Fotografia sa preto opäť vykresľuje cez „cover“,
   žiadna farba sa nedopĺňa a záber je využitý celý.
   Aby veža ostala v okne aj vtedy, keď o mierke rozhoduje šírka, musí
   byť sekcia aspoň 31 % šírky okna plus vlnový pás a hlavička (päta
   kostola je v predlohe na 73,2 % výšky, pomer strán je 2,5). Na
   bežnom notebooku to nič nemení, na širokouhlom monitore sekcia o
   toľko narastie.
   ═══════════════════════════════════════════════════════════════════ */
@media(min-width:901px){
  .hero{
    min-height:max(
      min(100svh, 850px),
      calc(31vw + var(--wave-h) + var(--nav-h) + var(--pas-h))
    );
  }
  .photo-scene{
    background-image:url("../assets/img/kostol-hero-1800.jpg?v=202610061431");
    background-size:cover;
    background-position:58% top;
    background-color:transparent;
  }
}
@media(min-width:1440px){
  .photo-scene{background-image:url("../assets/img/kostol-hero-2600.jpg?v=202610061431")}
}
@media(min-width:2000px){
  .photo-scene{background-image:url("../assets/img/kostol-hero-3400.jpg?v=202610061431")}
}

/* ═══════════════ HMLA AKO OBLÚK, NIE PÁS ═══════════════
   Prechod je kruhový, nie priamkový: dole sa neuzatvára rovnou čiarou
   cez celú šírku, ale mäkkým oblúkom, ktorý po stranách stúpa. Krytie
   je redšie než predtým, aby fotografia presvitala. Oblúk sa v strede
   uzavrie ešte nad špičkou veže (tablet 51 %, telefón 56 % výšky, kríž
   je na 52,6 % resp. 57,2 %), takže sa kostola nedotkne. */
@media(max-width:900px){
  .sky__veil{
    background:radial-gradient(134% 62% at 50% -2%,
      rgba(255,255,255,.78)   0%,
      rgba(255,255,255,.75)  52%,
      rgba(255,255,255,.60)  75%,
      rgba(255,255,255,.28)  90%,
      rgba(255,255,255,0)   100%);
  }
}
@media(max-width:520px){
  .sky__veil{
    background:radial-gradient(134% 68% at 50% -2%,
      rgba(255,255,255,.80)   0%,
      rgba(255,255,255,.77)  55%,
      rgba(255,255,255,.62)  76%,
      rgba(255,255,255,.29)  90%,
      rgba(255,255,255,0)   100%);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ŠIRŠÍ STĹPEC NA VEĽKÝCH MONITOROCH
   Obsah bol všade zovretý do 1240 px, takže na širokouhlom monitore
   ostávali po stranách veľké prázdne pásy a text s postavou stáli
   zbytočne blízko stredu. Od 1600 px sa stĺpec rozťahuje s oknom až do
   1800 px: text ide viac doľava, postava viac doprava a medzi nimi
   ostane viac fotografie.
   ═══════════════════════════════════════════════════════════════════ */
@media(min-width:1600px){
  :root{--wrap:clamp(1240px, 76vw, 1800px)}
}
/* ═══════════════ FOTOGRAFIA KOSTOLA PODĽA TVARU OBRAZOVKY ═══════════════
   Širokouhlý záber sedí do širokej plochy. Na úzku a vysokú sa musel
   nafúknuť takmer sedemnásobne a odtiaľ pochádzala rozmazanosť.
   Preto sa záber prepína presne tam, kde sa mení rozloženie stránky:
   od 900 px nadol stojí postava pod textom a plocha pre fotografiu je
   na výšku, tak dostane záber na výšku.
   Oba zvislé zábery vznikli rovnako: obloha pochádza z pôvodnej
   fotografie, samotný kostol z ostrejšej predlohy a spájajú sa dlhým
   prechodom v hladkej oblohe, takže spoj nie je vidieť. Tvarom
   zodpovedajú ploche, do ktorej sa kreslia, takže sa nezväčšujú.
   Telefón na výšku má pomer strán 0,46, tablet a telefón naležato 0,80. */
@media(max-width:900px){
  .photo-scene{
    background-image:url("../assets/img/kostol-tablet.jpg?v=202610061431");
    background-image:-webkit-image-set(
      url("../assets/img/kostol-tablet-900.jpg?v=202610061431") 1x,
      url("../assets/img/kostol-tablet.jpg?v=202610061431") 2x);
    background-image:image-set(
      url("../assets/img/kostol-tablet-900.jpg?v=202610061431") 1x,
      url("../assets/img/kostol-tablet.jpg?v=202610061431") 2x);
    background-position:center center;
    background-size:cover;
    background-color:transparent;
  }
}
@media(max-width:520px){
  .photo-scene{
    background-image:url("../assets/img/kostol-mobil.jpg?v=202610061431");
    background-image:-webkit-image-set(
      url("../assets/img/kostol-mobil-700.jpg?v=202610061431") 1x,
      url("../assets/img/kostol-mobil-900.jpg?v=202610061431") 2x,
      url("../assets/img/kostol-mobil.jpg?v=202610061431") 3x);
    background-image:image-set(
      url("../assets/img/kostol-mobil-700.jpg?v=202610061431") 1x,
      url("../assets/img/kostol-mobil-900.jpg?v=202610061431") 2x,
      url("../assets/img/kostol-mobil.jpg?v=202610061431") 3x);
  }
}

/* ═══════════════ HMLA CEZ CELÝ TEXT AJ NA POČÍTAČI ═══════════════
   Doteraz sa prechod meral od okraja okna a na notebooku vyblednul už
   v polovici mena. Teraz je ukotvený k stĺpcu s textom rovnako ako na
   širokouhlom monitore. Prechod je kruhový, takže vpravo končí oblúkom,
   nie rovnou čiarou, a v polovici výšky dobehne do nuly 485 px od
   stĺpca, teda za posledným písmenom mena. */
@media(min-width:901px) and (max-width:1419px){
  .sky__veil{
    --stlpec:calc((100vw - min(100vw - 3rem, var(--wrap))) / 2);
    background:radial-gradient(720px 150% at calc(var(--stlpec) - 70px) 44%,
      rgba(255,255,255,.80)   0%,
      rgba(255,255,255,.76)  38%,
      rgba(255,255,255,.60)  60%,
      rgba(255,255,255,.34)  76%,
      rgba(255,255,255,.10)  90%,
      rgba(255,255,255,0)   100%);
  }
}

/* ═══════════════ DLHŠÍ NÁZOV NA OBÁLKE ═══════════════
   Nadpis má o riadok viac, tak sa písmo o kúsok zmenší a riadky sa
   utiahnu, aby sa spis na obálku zmestil rovnako ako predtým. */
.obalka__nazov{
  font-size:clamp(1.6rem,4.6vw,2.4rem);
  line-height:1.04;
  margin-top:1.1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   POSTAVA NIŽŠIE, TEXT S ŇOU
   Postava sedí v sekcii nižšie. Na počítači sa o rovnakú hodnotu posunie
   aj text, lebo hlava má zostať v jednej výške s menom: skript meria
   polohu nadpisu a podľa nej nastavuje --foto-top, takže keď klesne text,
   postava ide sama za ním. Aby sa pritom nezmenšila, o tú istú hodnotu
   klesne aj jej spodná hrana; rez na hrudi tým ide hlbšie do tmavej vlny,
   kde ho aj tak nie je vidieť.
   ═══════════════════════════════════════════════════════════════════ */
:root{--posun-hero:clamp(24px,3.2vw,48px)}

@media(min-width:901px){
  .hero__copy{position:relative;top:var(--posun-hero)}
  .hero__photo{--hladina:calc(var(--wave-h) * .12 - var(--posun-hero))}
}

@media(max-width:900px){
  .hero__photo{margin-bottom:calc(var(--wave-h) * -1.62)}
}

/* ═══════════════════════════════════════════════════════════════════
   POSTAVA EŠTE NIŽŠIE A SYMETRICKY OD OKRAJA
   1. Postava klesne hlbšie, aby jej odrezané telo nebolo vidieť: pod
      hladinou skončí zhruba štvrtina figúry. Násobok presahu na telefóne
      je nižší než predtým iba preto, že vlnový pás je teraz hrubší.
   2. Na počítači má postava od pravého okraja rovnaký odstup, aký má
      text od ľavého, teda presne šírku bočného pásu stĺpca. Predtým
      presahovala o 3,5 rem ďalej doprava.
   ═══════════════════════════════════════════════════════════════════ */
:root{--posun-hero:clamp(50px,6.2vw,96px)}

@media(min-width:901px){
  .hero__photo{
    right:calc((100% - min(100% - 3rem, var(--wrap))) / 2);
  }
}

@media(max-width:900px){
  .hero__photo{margin-bottom:calc(var(--wave-h) * -1.10)}
}

/* ═══════════════ VÝRAZNEJŠIA HMLA NA TABLETE ═══════════════
   Obloha na fotografii je sama o sebe svetlá, takže riedka biela hmla
   na nej nebola vidieť. Krytie je preto hustejšie a oblúk siaha o kúsok
   nižšie, aby jeho spodný okraj prešiel cez tmavšie koruny stromov a
   bolo poznať, kde hmla končí. */
@media(max-width:900px){
  .sky__veil{
    background:radial-gradient(140% 66% at 50% -2%,
      rgba(255,255,255,.90)   0%,
      rgba(255,255,255,.86)  50%,
      rgba(255,255,255,.66)  74%,
      rgba(255,255,255,.30)  90%,
      rgba(255,255,255,0)   100%);
  }
}
@media(max-width:520px){
  .sky__veil{
    background:radial-gradient(140% 70% at 50% -2%,
      rgba(255,255,255,.90)   0%,
      rgba(255,255,255,.87)  54%,
      rgba(255,255,255,.68)  76%,
      rgba(255,255,255,.31)  90%,
      rgba(255,255,255,0)   100%);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HRUBŠIE VLNY NA TELEFÓNOCH A TEXT NA STRED
   1. Pás vĺn sa cez 12vw na úzkych displejoch scvrkol na 90 px, kým na
      počítači mal 173 až 180. Spodná hranica sa preto dvíha na 150 px,
      aby bol pás všade podobne výrazný.
   2. Text má byť zvislo v strede sekcie, rovnako ďaleko od horného aj
      spodného okraja. Posun nadol sa preto ruší a postava sa dopočíta
      sama: skript zarovná jej vrch na meno a spodok ostáva hlboko vo
      vlne, takže sa iba primerane predĺži.
   ═══════════════════════════════════════════════════════════════════ */
:root{--wave-h:clamp(150px,12vw,180px)}

@media(min-width:901px){
  .hero__copy{top:var(--stred-oprava, 0px)}
}

/* ═══════════════════════════════════════════════════════════════════
   BUBLINA MEDZI HLADINOU A TVÁROU
   Bublina „Kandidát na starostu“ visí v ráme postavy a má dve hranice:
   zdola nesmie zájsť do vody, zhora nesmie zakryť tvár. Brada je vo
   výreze na 35 % výšky, takže vrch bubliny musí ostať pod touto čiarou,
   a zároveň jej spodok musí byť nad hladinou. Preto clamp: spodná
   hranica je hladina (vlnový pás plus presah postavy pod sekciu), horná
   hranica je brada mínus výška bubliny aj s rezervou na jej pohupovanie
   (bublina sa v animácii dvíha o 12 px).
   ═══════════════════════════════════════════════════════════════════ */
.badge--b{
  bottom:clamp(
    calc(var(--vlna-cl, 0px) + 12px),
    34%,
    calc(65% - 4.6rem)
  );
}
@media(min-width:901px){
  .badge--b{--vlna-cl:calc(var(--wave-h) * .70 + var(--posun-hero))}
}
@media(max-width:900px){
  .badge--b{--vlna-cl:calc(var(--wave-h) * .70 + 56px)}
}

/* ═══════════════ MIESTO PRE VLNY POD PROGRAMOM ═══════════════
   Vlnový pás na spodku Programu kreslí navrch obsahu (z-index 3). Odkedy
   má na telefónoch 150 px namiesto 90, prekrýval poslednú kartu 3.3.
   Spodné odsadenie sekcie preto nikdy neklesne pod výšku pásu plus
   rezervu, nech je pás akokoľvek vysoký. */
.program{
  padding-bottom:max(clamp(7rem,13vw,11rem), calc(var(--wave-h) + 3.5rem));
}

/* ═══════════════════════════════════════════════════════════════════
   VLNY PODĽA VEĽKOSTI OBRAZOVKY
   Dve veci naraz:
   1. Výška. Spodná hranica 150 px bola na telefóne priveľa, pás zaberal
      takmer pätinu obrazovky. Teraz sa odvíja od šírky okna (13 %) so
      spodnou hranicou 110 px a stropom 180 px, takže na telefóne je
      štíhlejší a na monitore ostáva rovnako výrazný ako doteraz.
   2. Tvar. Kresba má pevný viewBox 1440 a rozťahuje sa cez celú šírku
      (preserveAspectRatio="none"), takže na telefóne sa vodorovne
      stlačila takmer štyrikrát: hrebene zhustli a pás vyzeral ako
      zubatý múr. Kresba preto nikdy neklesne pod 780 px šírky — na
      užšom displeji jednoducho presahuje a orezáva sa, čím si vlny
      držia rovnaký tvar ako na monitore. Vycentrovaná je preto, aby bol
      v zábere stred vlny.
   Platí pre oba pásy: pod portrétom aj pod Programom.
   ═══════════════════════════════════════════════════════════════════ */
:root{--wave-h:clamp(110px,13vw,180px)}

.waves{overflow:hidden}
.waves svg{
  width:max(100%, 780px);
  position:relative;
  left:50%;
  translate:-50% 0;
}

/* ═══════════════════════════════════════════════════════════════════
   OTVORENIE OBÁLKY — CHOREOGRAFIA

   Pokojné otvorenie na zhruba päť sekúnd, ktoré sa dá sledovať.
   Nič nevybuchuje a nič neletí po obrazovke (časy riadi js/main.js):
     1. nádych — obálka sa jemne nadvihne                    (je-otvara)
     2. pečať  — pomaly sa odlepí od okraja ako nálepka, odtrhne sa
                 a skĺzne z papiera; na mieste ostane bledá stopa vosku
     3. klopa  — plynulo sa odklopí, zvnútra jemne presvitne svetlo
                                                              (je-otvorene)
     4. list   — plán pomaly vystúpi, obálka pod ním klesne a vybledne
                                                              (vystupuje)
     5. obsah  — guličky a riadky strany sa objavia jeden po druhom

   Bez animácií (prefers-reduced-motion) sa nič z toho nehrá — obsah sa
   ukáže rovno.
   ═══════════════════════════════════════════════════════════════════ */

/* 1 — nádych */
.trezor.je-otvara .obalka{
  transform:translateY(-6px);
  transition:transform 1.2s cubic-bezier(.3,.7,.3,1);
}
.trezor.je-otvara .obalka__ziara{
  animation:none;opacity:1;transform:scale(1.05);
  transition:transform 1.4s var(--ease),opacity 1.4s var(--ease);
}

/* 2 — pečať sa odlepí: najprv sa nadvihne jej pravý okraj a tieň pod
   ním narastie, potom sa odtrhne celá, pootočí sa a skĺzne dole.
   Pohyb v 3D majú obe polovice pečate (idú spolu, rovnako), tieň drží
   samotná .pecat. Tieň na prvku otočenom v 3D by Chrome nakreslil ako
   sivý štvorec okolo pečate — takto kopíruje jej skutočný tvar. */
.trezor.je-otvara .pecat__pol{
  transform-origin:14% 55%;
  animation:pecatOdlep 1.9s cubic-bezier(.5,.05,.35,1) .35s both;
}
.trezor.je-otvara .pecat{animation:pecatTien 1.9s cubic-bezier(.5,.05,.35,1) .35s both}
.trezor.je-otvara .pecat::after{animation:none;opacity:0;transition:opacity .5s ease}
@keyframes pecatOdlep{
  0%{transform:perspective(520px) rotateY(0deg) rotateZ(0deg) translate3d(0,0,0);opacity:1}
  28%{transform:perspective(520px) rotateY(-16deg) rotateZ(-1.5deg) translate3d(0,-2px,6px);opacity:1}
  52%{transform:perspective(520px) rotateY(-34deg) rotateZ(-4deg) translate3d(-3px,-8px,18px);opacity:1}
  100%{transform:perspective(520px) rotateY(-58deg) rotateZ(-16deg) translate3d(-34px,60px,24px);opacity:0}
}
@keyframes pecatTien{
  0%{filter:drop-shadow(0 12px 20px rgba(60,4,10,.5))}
  28%{filter:drop-shadow(-4px 16px 18px rgba(60,4,10,.45))}
  52%{filter:drop-shadow(-8px 26px 22px rgba(60,4,10,.38))}
  100%{filter:drop-shadow(-10px 30px 26px rgba(60,4,10,0))}
}
/* bledá stopa vosku, ktorá po pečati ostane na papieri */
.obalka__stopa{
  position:absolute;z-index:3;left:50%;top:var(--klopa);translate:-50% -50%;
  width:clamp(80px,13vw,112px);aspect-ratio:1;pointer-events:none;opacity:0;
  border-radius:52% 48% 50% 50% / 48% 52% 49% 51%;
  background:radial-gradient(circle at 50% 48%,rgba(168,27,36,.17),rgba(168,27,36,.07) 55%,transparent 72%);
}
.trezor.je-otvara .obalka__stopa{opacity:1;transition:opacity 1s ease 1.1s}
.trezor.je-otvorene .obalka__stopa{opacity:0;transition:opacity .6s ease}

/* 3 — klopa sa plynulo odklopí, svetlo zvnútra len presvitne */
.trezor.je-otvorene .obalka__klopa{
  transform:rotateX(-164deg);
  transition:transform 1.5s cubic-bezier(.55,.05,.25,1);
}
.obalka__svetlo{
  position:absolute;z-index:2;left:8%;right:8%;top:calc(var(--klopa) * -.2);height:calc(var(--klopa) * 1.3);
  pointer-events:none;opacity:0;transform-origin:50% 100%;
  background:radial-gradient(55% 90% at 50% 100%,rgba(255,255,255,.95),rgba(123,222,234,.42) 42%,transparent 74%);
  filter:blur(10px);
}
.trezor.je-otvorene .obalka__svetlo{animation:obalkaSvetlo 2.3s ease-in-out .5s both}
@keyframes obalkaSvetlo{
  0%{opacity:0;transform:scaleY(.3)}
  50%{opacity:.7;transform:scaleY(1.2)}
  100%{opacity:0;transform:scaleY(1.6)}
}

/* 4 — obálka klesne a vybledne, list pomaly vystúpi */
.trezor.je-otvorene .obalka{
  opacity:0;transform:translateY(34px) scale(.97);filter:blur(3px);
  pointer-events:none;
  transition:opacity 1.1s ease 1.25s,transform 1.5s cubic-bezier(.45,0,.55,1) 1.05s,filter 1.1s ease 1.25s;
}
.odhalene.vystupuje{animation:listVystupuje 1.6s cubic-bezier(.22,.8,.22,1) both}
@keyframes listVystupuje{
  0%{opacity:0;transform:translateY(64px) scale(.975)}
  45%{opacity:1}
  100%{opacity:1;transform:none}
}

/* 5 — guličky a riadky strany sa objavia jeden po druhom */
.gulicky li{
  opacity:0;transform:translateY(8px);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
.odhalene.vidno .gulicky li{opacity:1;transform:none;transition-delay:calc(.8s + var(--i,0) * .09s)}
.trezor.hned .gulicky li{transition:none}
.odhalene.vystupuje .strana__hlava,
.odhalene.vystupuje .strana__telo > :not(ul),
.odhalene.vystupuje .strana__zoznam li{
  animation:stranaRiadok .7s var(--ease) both;
  animation-delay:calc(1.1s + min(var(--i,0) * .07s, 1.1s));
}

@media(prefers-reduced-motion:reduce){
  .trezor.je-otvara .obalka,.trezor.je-otvara .pecat,.trezor.je-otvara .pecat__pol,.obalka__stopa,
  .obalka__svetlo,.odhalene.vystupuje,
  .gulicky li,.odhalene.vystupuje .strana__hlava,.odhalene.vystupuje .strana__telo > *,
  .odhalene.vystupuje .strana__zoznam li{animation:none!important;transition:none!important}
  .gulicky li{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   NÍZKE A ŠIROKÉ OKNO — PRIBLÍŽENIE V PREHLIADAČI

   Keď si niekto v prehliadači priblíži stránku na 150 % a viac, okno sa
   v CSS bodoch zmenší: z počítača s 1520 px sa stane pás široký 1013,
   pri 200 % dokonca 760 px. Doteraz naň sadlo telefónne rozloženie —
   meno, pod ním fotka — a hlavička narástla na vyše troch obrazoviek,
   hoci monitor je široký. Rovnako to vyzeralo na telefóne naležato.

   Tvar okna rozhodne lepšie ako samotná šírka: keď je okno širšie než
   vyššie, držíme rozloženie ako na počítači, len primerane menšie.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px) and (min-width:620px) and (min-aspect-ratio:1/1){
  .hero__in{
    grid-template-columns:1.06fr .94fr;grid-template-rows:1fr;
    text-align:left;width:min(100% - 2rem,var(--wrap));
  }
  .hero__copy{align-self:center;position:relative;top:var(--posun-hero)}
  .crest-row{justify-content:flex-start}
  .hero__lead{margin-inline:0}
  .hero__cta{justify-content:flex-start}

  .hero__photo{
    position:absolute;
    right:calc((100% - min(100% - 2rem, var(--wrap))) / 2);
    bottom:-2.5rem;
    height:calc(70% + 2.5rem);
    width:auto;max-width:none;margin:0;
    --hladina:calc(var(--wave-h) * .12 - var(--posun-hero));
  }
  .cutout{height:100%;width:auto;max-width:none;display:block}

  /* širokouhlé okno si žiada širokouhlý záber kostola */
  .photo-scene{
    background-image:url("../assets/img/kostol-hero-1800.jpg?v=202610061431");
    background-size:cover;
    background-position:58% top;
    background-color:transparent;
  }

  /* Postava stojí vedľa textu, takže hmla ide zľava ako na počítači —
     nie zhora ako na telefóne, kde je postava pod textom. Oblúk je
     ukotvený pri ľavom okraji stĺpca a dobehne do nuly za menom,
     skôr než začne postava. */
  .sky__veil{
    background:radial-gradient(clamp(460px, 62vw, 600px) 150% at calc(1rem - 70px) 44%,
      rgba(255,255,255,.84)   0%,
      rgba(255,255,255,.78)  38%,
      rgba(255,255,255,.60)  60%,
      rgba(255,255,255,.32)  78%,
      rgba(255,255,255,.08)  92%,
      rgba(255,255,255,0)   100%);
  }
}

/* V nízkom okne (priblíženie, telefón naležato, malý notebook) zaberá
   samotné odsadenie hlavičky viac než tretinu obrazovky. Zúžime ho —
   na obsah tak ostane viac miesta. */
@media(max-height:620px) and (min-width:620px){
  .hero{
    padding-top:calc(var(--nav-h) + var(--pas-h) + 1rem);
    padding-bottom:clamp(4.5rem,10vw,8rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HMLA SA DRŽÍ TEXTU AJ PRI ODDIALENÍ

   Doteraz mala hmla pevný polomer 830 px. Kým bolo okno široké okolo
   1520 px, sedela presne pod textom. Keď si ju však niekto v prehliadači
   oddialil (na 50 % má okno v CSS bodoch 3040 px) alebo mal širokouhlý
   monitor, stĺpec s textom sa roztiahol až na 1800 px, ale hmla ostala
   rovnako veľká — meno „PRISTACH“ jej vybiehalo von a na fotografii
   bolo vidieť, kde hmla zrazu končí.

   Preto polomer rastie so stĺpcom obsahu (57 % jeho šírky). Pri 1520 px
   vyjde spodná hranica 830 px, takže bežný monitor vyzerá presne ako
   doteraz; pri oddialení hmla rastie spolu s textom. Zároveň sa okraj
   rozpúšťa dlhšie, aby prechod do fotografie nebolo vidieť.
   ═══════════════════════════════════════════════════════════════════ */
@media(min-width:1420px){
  .sky__veil{
    --stlpec:calc((100vw - min(100vw - 3rem, var(--wrap))) / 2);
    --sirka-obsahu:min(100vw - 3rem, var(--wrap));
    /* polomer: rastie so stĺpcom textu a zároveň vždy dosiahne na ľavý
       okraj okna, nech na širokom monitore nevisí ovál v prázdnote */
    background:radial-gradient(
      clamp(830px,
            max(calc(var(--sirka-obsahu) * .57), calc(var(--stlpec) + 150px)),
            3200px) 150%
      at calc(var(--stlpec) - 70px) 44%,
      rgba(255,255,255,.80)   0%,
      rgba(255,255,255,.76)  36%,
      rgba(255,255,255,.62)  56%,
      rgba(255,255,255,.40)  72%,
      rgba(255,255,255,.20)  84%,
      rgba(255,255,255,.06)  93%,
      rgba(255,255,255,0)   100%);
  }
}



/* ═══════════════════════════════════════════════════════════════════
   TÍM — ŽIVÁ SIEŤ

   Vľavo je sieť, vpravo menný zoznam. Sieť nie je kruh: uzly sú
   rozhádzané v rôznych vzdialenostiach, spája ich najkratšia možná
   kostra od stredu (nie lúče) a všetko sa neprestajne vlní. Nite sa
   prehýbajú, po nich preskakujú iskry a celok sa nakláňa za myšou.

   Polohy aj nite prepočítava js/main.js v každom snímku — tu je len
   vzhľad. Skript nastavuje --dx/--dy (posun), --m (mierka) a
   priehľadnosť, aby si pohyb a prechody neliezli do cesty.
   ═══════════════════════════════════════════════════════════════════ */
.tim{
  position:relative;isolation:isolate;overflow:hidden;
  /* rovnaký svetlý podklad ako sekcia Piliere */
  background:
    radial-gradient(70% 50% at 10% 0%,rgba(23,162,184,.08),transparent 60%),
    radial-gradient(60% 60% at 95% 60%,rgba(21,100,200,.07),transparent 62%),
    var(--sky-50);
}
.tim[hidden]{display:none}
.tim__ziara{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(720px 520px at 24% 40%,rgba(4,167,181,.07),transparent 70%),
    radial-gradient(660px 460px at 88% 78%,rgba(21,100,200,.06),transparent 72%);
}

/* sieť dostane väčšinu šírky — je to to prvé, čo má človek vidieť */
.tim__telo{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(1.8rem,4vw,4rem);align-items:center;
  margin-top:clamp(1.8rem,3.8vw,3rem);
}

/* ─────────── sieť ─────────── */
.siet{position:relative;width:min(100%,680px);margin-inline:auto;aspect-ratio:1}

/* mäkká žiara pod sieťou — pomaly pláva, aby pozadie nebolo ploché */
.siet::before{
  content:'';position:absolute;inset:-14%;z-index:0;pointer-events:none;
  background:
    radial-gradient(closest-side circle at 44% 40%,rgba(4,167,181,.12),transparent 70%),
    radial-gradient(closest-side circle at 66% 68%,rgba(21,100,200,.09),transparent 72%);
  animation:sietZiara 17s ease-in-out infinite alternate;
}
@keyframes sietZiara{
  from{translate:-3% -2%;scale:.94}
  to{translate:4% 3%;scale:1.08}
}

.siet__ciary{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}

/* Plôšky trojuholníkov dávajú sieti telo, nite ju obkresľujú. Dĺžku
   majú nite normovanú (pathLength=1), takže sa dajú „nakresliť" bez
   ohľadu na to, ako sa práve prehýbajú. */
.siet__nit{
  fill:none;stroke:rgba(4,167,181,.38);stroke-width:.26;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke .35s var(--ease),stroke-width .35s var(--ease),opacity .35s var(--ease);
}
/* tetivy cez stred sú oveľa jemnejšie ako obvod — pri každý s každým
   by inak bol stred jedna škvrna */
.siet__nit--dlha{stroke:rgba(11,46,94,.14);stroke-width:.15}
.siet.je-vybrane .siet__nit{opacity:.1}
.siet__nit.je-zvyraznena{opacity:1;stroke:var(--teal-600);stroke-width:.5}

.siet__iskra{fill:var(--teal-600)}
.siet__zaria{fill:var(--teal-400)}

/* Percentá v translate sa počítajú z veľkosti prvku, nie z rámu —
   polohu preto určuje left/top a translate len vycentruje a pridá
   plávanie, ktoré doň zapisuje skript. */
.siet__stred,
.siet__uzol{
  position:absolute;left:var(--x);top:var(--y);
  translate:calc(-50% + var(--dx,0px)) calc(-50% + var(--dy,0px));
  scale:var(--m,1);
  display:grid;place-items:center;border-radius:50%;
}

.siet__stred{
  width:21.5%;aspect-ratio:1;z-index:3;
  background:radial-gradient(circle at 50% 32%,#fff,#EAF7FB);
  box-shadow:0 0 0 1px rgba(4,167,181,.3),0 0 0 13px rgba(4,167,181,.08),
             0 22px 44px -26px rgba(11,46,94,.45);
}
.siet__stred::before{
  content:'';position:absolute;inset:-16%;border-radius:50%;
  border:1px solid rgba(4,167,181,.4);
  animation:stredTep 5.2s var(--ease) infinite;
}
@keyframes stredTep{
  0%{transform:scale(.92);opacity:.8}
  65%{transform:scale(1.18);opacity:0}
  100%{transform:scale(1.18);opacity:0}
}
.siet__stred img{width:60%;height:auto}
/* Rozpálenie písma sa pridá aj za posledné písmeno riadku, takže text
   by bol o polovicu toho posunutý doľava — rovnaký odstup zľava to
   vyrovná a meno sedí presne pod stredom znaku. */
.siet__stredPopis{
  position:absolute;top:calc(100% + .75rem);left:50%;translate:-50% 0;white-space:nowrap;
  padding-left:var(--label-track);text-align:center;
  font-family:var(--f-display);font-weight:800;font-size:.66rem;
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-700);
}

/* uzol je tlačidlo — klik otvorí okno s človekom */
.siet__uzol{
  width:var(--velkost,12%);aspect-ratio:1;z-index:2;
  appearance:none;-webkit-appearance:none;border:0;padding:0;background:transparent;
  font:inherit;color:inherit;cursor:pointer;
}
.siet__uzol:focus-visible{outline:2px solid var(--teal-300);outline-offset:3px}
.siet__vnutro{
  width:100%;height:100%;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;opacity:0;
  background:linear-gradient(155deg,#2E6EAC,#164C86);
  box-shadow:inset 0 0 0 1px rgba(4,167,181,.4),0 14px 26px -16px rgba(11,46,94,.6);
  color:#fff;font-family:var(--f-display);font-weight:800;
  font-size:var(--pismo,.78rem);letter-spacing:.02em;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),color .35s var(--ease);
}
.siet.je-vybrane .siet__uzol:not(.je-zvyrazneny) .siet__vnutro{
  background:linear-gradient(155deg,#9FC3DE,#7FA7C8);
  box-shadow:inset 0 0 0 1px rgba(11,46,94,.12);
  color:rgba(255,255,255,.85);
}
.siet__uzol.je-zvyrazneny .siet__vnutro{
  background:var(--grad-brand);
  box-shadow:0 0 0 4px rgba(4,167,181,.18),0 18px 30px -16px rgba(11,46,94,.75);
}
.siet__vnutro img{width:100%;height:100%;object-fit:cover}

/* ─────────── menný zoznam ─────────── */
.tim__zoznam{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:.15rem;
  counter-reset:none;
}

/* Riadok je tlačidlo — klik otvorí okno s človekom. Deliaca čiara je
   navrchu a prvému riadku sa vypína, takže vyjde správne pri akomkoľvek
   počte ľudí. */
.clen{position:relative;list-style:none}
.clen::after{
  content:'';position:absolute;left:.7rem;right:.7rem;top:0;height:1px;
  background:rgba(11,46,94,.12);
}
.clen:first-child::after{background:transparent}

.clen__on{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;
  display:grid;align-items:center;
  grid-template-columns:auto 1fr auto;gap:clamp(.8rem,1.4vw,1.1rem);
  padding:clamp(.6rem,1vw,.8rem) .9rem;border-radius:var(--r-sm);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.clen__on:hover,
.clen.je-zvyrazneny .clen__on{
  background:rgba(4,167,181,.09);
  transform:translateX(3px);
}
.clen__on:focus-visible{outline:2px solid var(--teal-300);outline-offset:2px}

/* text do okna — na stránke sa nezobrazuje, vyberá si ho skript */
.clen__opis{display:none}

.clen__portret{
  width:clamp(46px,4.2vw,56px);height:clamp(46px,4.2vw,56px);border-radius:50%;flex:none;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#fff,var(--sky-100));
  box-shadow:inset 0 0 0 1px rgba(4,167,181,.3);
  font-family:var(--f-display);font-weight:800;font-size:.78rem;color:var(--teal-700);
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.clen__on:hover .clen__portret,
.clen.je-zvyrazneny .clen__portret{
  background:var(--grad-brand);color:#fff;box-shadow:0 8px 18px -10px rgba(0,0,0,.9);
}
.clen__portret img{width:100%;height:100%;object-fit:cover}

/* šírka textového stĺpca je meradlom pre písmo roly nižšie (cqi) */
.clen__text{display:grid;gap:.06rem;min-width:0;container-type:inline-size}
.clen__meno{
  font-family:var(--f-display);font-weight:700;line-height:1.25;
  font-size:clamp(1.1rem,1.6vw,1.32rem);color:var(--navy-800);
  overflow-wrap:anywhere;
}
/* Rola je vždy na jeden riadok, u všetkých rovnako. „Kandidátka na
   poslankyňu" má asi 12,4-násobok veľkosti písma — keď je
   stĺpec užší (malý telefón, zväčšené písmo v telefóne), písmo sa
   radšej o kúsok zmenší (7,5cqi = šírka stĺpca / 13,3), než by sa
   zalomilo. Trojbodka je len poistka pre extrémne úzke displeje. */
.clen__rola{
  font-size:min(.9rem, 7.5cqi);line-height:1.35;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Volebné číslo. Na hlasovacom lístku ho človek hľadá ako prvé, tak mu
   dáme podobu známky: malý štítok s „č." a výrazným číslom. */
.clen__cislo{
  display:inline-flex;align-items:baseline;gap:.18rem;
  /* rovnaká šírka pre jednociferné aj dvojciferné číslo — inak by
     riadok s „č. 20" mal na meno a rolu menej miesta než s „č. 1" */
  min-width:3.9rem;justify-content:center;
  padding:.42rem .6rem;border-radius:var(--r-sm);
  background:linear-gradient(150deg,#fff,var(--sky-100));
  box-shadow:inset 0 0 0 1px rgba(4,167,181,.28);
  font-family:var(--f-display);font-weight:900;font-size:1.22rem;line-height:1;
  color:var(--navy-800);font-variant-numeric:tabular-nums;
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.clen__cislo::before{
  content:'č.';font-size:.66rem;font-weight:800;color:var(--teal-700);opacity:.85;
  transition:color .3s var(--ease),opacity .3s var(--ease);
}
.clen__on:hover .clen__cislo,
.clen.je-zvyrazneny .clen__cislo{
  background:var(--grad-brand);color:#fff;
  box-shadow:0 8px 18px -10px rgba(4,167,181,.9);
}
.clen__on:hover .clen__cislo::before,
.clen.je-zvyrazneny .clen__cislo::before{color:#fff;opacity:.75}

/* ─────────── záverečný pruh „a vy" ─────────── */
.tim__vy{
  margin-top:clamp(2.2rem,4.5vw,3.4rem);
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,1.8rem);flex-wrap:wrap;
  padding:clamp(1.2rem,2.6vw,1.8rem) clamp(1.3rem,3vw,2.2rem);
  border-radius:var(--r-md);
  background:linear-gradient(100deg,#fff,var(--sky-50));
  box-shadow:inset 0 0 0 1px rgba(4,167,181,.22),0 18px 40px -30px rgba(11,46,94,.5);
}
.tim__vyIco{
  width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-brand);box-shadow:0 12px 26px -14px rgba(0,0,0,.9);
}
.tim__vyIco svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tim__vyText{flex:1;min-width:min(100%,260px);display:grid;gap:.2rem}
.tim__vyText b{font-family:var(--f-display);font-weight:900;font-size:clamp(1.05rem,1.9vw,1.26rem);color:var(--navy-800)}
.tim__vyText span{color:var(--muted);font-size:.94rem;line-height:1.5}

/* ─────────── užšie obrazovky ─────────── */
@media(max-width:900px){
  .tim__telo{grid-template-columns:1fr;gap:clamp(1.4rem,4vw,2.4rem)}
  /* na telefóne a tablete nech sieť zaberie celý stĺpec a zoznam pod
     ňou je rovnako široký — číslo tak nie je ďaleko od mena */
  .siet{width:min(100%,600px)}
  .tim__zoznam{width:min(100%,600px);margin-inline:auto}
  .tim .sec__head{text-align:center}
  .tim .sec__head .kicker{justify-content:center}
}
/* na úzkych displejoch je meno pod znakom širšie ako medzera v kruhu —
   zlomíme ho na dva riadky, nech nelezie do bublín */
@media(max-width:700px){
  /* Šírka podľa najdlhšieho slova, nie 8ch — „PRISTACH" veľkými
     písmenami je širšie než 8ch, pretekalo doprava a sedelo mimo stredu. */
  .siet__stredPopis{
    white-space:normal;width:min-content;text-align:center;line-height:1.2;
    font-size:.58rem;text-shadow:0 1px 8px rgba(4,21,47,.85);
  }
}
/* Na telefóne siaha sieť od okraja po okraj obrazovky. Bubliny sedia
   najďalej 42 % šírky od stredu, takže aj tak ostane pri okraji miesto. */
@media(max-width:560px){
  .siet{width:calc(100% + 2rem);margin-inline:-1rem}
  .clen__on{padding:.65rem .45rem}
  .clen__portret{width:46px;height:46px;font-size:.84rem}
}

@media(prefers-reduced-motion:reduce){
  .siet::before{animation:none}
  .siet__iskra,.siet__zaria{display:none}
  .siet__stred::before{animation:none;opacity:0}
  .siet__nit{transition:none}
}
/* ═══════════════════════════════════════════════════════════════════
   PRI ODDIALENÍ SA KOMPOZÍCIA HLAVIČKY UŽ NEROZŤAHUJE

   Pri oddialení na 25 % má okno v CSS bodoch vyše 6000 px. Stĺpec s
   obsahom rástol spolu s ním, takže meno ostalo pri ľavom okraji,
   postava pri pravom a medzi nimi zívala prázdna fotografia — dvojica,
   ktorá má držať pokope, sa roztiahla cez celú obrazovku.

   Od 2100 px preto hlavička prestane rásť: text a postava si držia
   rovnaký odstup ako na bežnom monitore a celá dvojica stojí uprostred
   okna. S ňou sa prestane naťahovať aj výška sekcie, aby postava
   neprerástla a nezasiahla do textu. Hmla sa drží textu ako predtým.

   Pod 2100 px sa nemení vôbec nič.
   ═══════════════════════════════════════════════════════════════════ */
@media(min-width:2100px){
  :root{--hero-wrap:1560px}

  .hero{
    min-height:max(
      min(100svh, 850px),
      calc(min(31vw, 1000px) + var(--wave-h) + var(--nav-h) + var(--pas-h))
    );
  }

  .hero__in{width:min(100% - 3rem, var(--hero-wrap))}
  /* Postava sa meria z výšky sekcie. Keby rástla ďalej, prerástla by svoj
     stĺpec a zasiahla do textu — preto sa jej výška zastaví na 800 px.
     Nie je to zlom: hodnota sa mení plynule, len prestane rásť. */
  .hero__photo{
    right:calc((100% - min(100% - 3rem, var(--hero-wrap))) / 2);
    height:min(calc(70% + 2.5rem), 800px);
  }

  /* Sekcia je nižšia, takže záber sa v nej oreže zhora aj zdola. Keby
     ostal ukotvený na vrchu, ostala by v ňom len obloha a špička veže —
     posunieme ho tak, aby v okne ostal celý kostol. */
  .photo-scene{background-position:58% 22%}

  .sky__veil{
    --stlpec:calc((100vw - min(100vw - 3rem, var(--hero-wrap))) / 2);
    background:radial-gradient(
      clamp(830px, calc(var(--hero-wrap) * .62), 1250px) 150%
      at calc(var(--stlpec) - 70px) 44%,
      rgba(255,255,255,.80)   0%,
      rgba(255,255,255,.76)  36%,
      rgba(255,255,255,.62)  56%,
      rgba(255,255,255,.40)  72%,
      rgba(255,255,255,.20)  84%,
      rgba(255,255,255,.06)  93%,
      rgba(255,255,255,0)   100%);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PROFIL KANDIDÁTA V OKNE

   Fotka je tu obdĺžnikový portrét cez celý stĺpec — krúžky ostávajú
   v zozname a v sieti. Text je rozložený na skutočné odseky a zoznamy
   (js/main.js, timOpis).

   Všetky portréty (assets/img/poslanci/*-velka.jpg, 4:5) aj štvorce pre
   telefón (*-mobil.jpg, okno__foto--stvorec) majú u každého rovnakú
   kompozíciu: tvár v strede šírky, nad vlasmi pár percent miesta.

   Rám okna má pri každom rozlíšení iný tvar, no fotka sa v ňom nesmie
   priveľmi priblížiť — tvár musí byť vždy vidieť celá. Veľkosť fotky
   preto počítame z rozmerov rámu (cqw/cqh):
     • zakryť rám (ako object-fit:cover)…
     • …ale na výšku orezať najviac 15 % fotky: výška ≤ 100cqh / .85
     • zhora sa uberie najviac --m (3 % nad vlasmi), zvyšok zdola
     • keď je rám ešte širší, fotka sa zmestí celá na výšku a boky
       vyplní rozmazaná kópia tej istej fotky (::before)
   Keď je rám užší než fotka, orežú sa len boky — tvár ostane v strede. */
.okno__foto--portret{
  container-type:size;background:var(--sky-100);
  --a:.8;       /* pomer strán fotky (šírka / výška) */
  --m:.064;     /* najviac toľko z výšky fotky smie ubrať zhora */
}
.okno__foto--stvorec{--a:1;--m:.094}
.okno__foto--portret::before{
  display:block;inset:-12%;transform:none;opacity:.9;
  background-position:50% 30%;
  filter:blur(26px) saturate(1.05) brightness(1.06);
}
.okno__foto--portret img{
  --h:min(max(100cqh, 100cqw / var(--a)), 100cqh / .85);
  position:absolute;inset:auto;
  width:calc(var(--h) * var(--a));height:var(--h);
  max-width:none;max-height:none;
  left:calc((100cqw - var(--h) * var(--a)) / 2);
  top:calc(-1 * min(var(--h) - 100cqh, var(--h) * var(--m)));
  object-fit:cover;
}
/* prehliadač bez jednotiek rámu dostane obyčajné zakrytie */
@supports not (width:1cqw){
  .okno__foto--portret img{inset:0;width:100%;height:100%;object-position:50% 18%}
}
@media(max-width:820px){
  /* Šírka musí byť zadaná. Pri automatickej šírke by sa max-height cez
     aspect-ratio preniesla aj na šírku a rám by sa zúžil k ľavému okraju. */
  .okno__foto--portret{width:100%;aspect-ratio:1;max-height:max(58svh,330px)}
  .okno__foto--portret img{max-height:none}
}

/* Okno kandidáta má pevný rozmer, rovnaký pre každého — inak by sa
   výška riadila dĺžkou textu a fotka by bola raz vyššia, raz nižšia.
   740 px stačí na najdlhší text pri plnej šírke okna; na nižšej
   obrazovke okno drží 92 % výšky a text sa posúva vo svojom stĺpci. */
@media(min-width:821px){
  .okno__ram--profil{height:min(92svh,740px)}
}
@media(max-width:820px){
  /* Na výšku roluje celé okno. Pevné height by tu riadky stlačilo
     (fotka a text majú min-height:0) a text by vliezol pod fotku —
     min-height spolu s max-height:92svh dá rovnakú výšku a riadky
     ostanú podľa obsahu. Krátky text nechá voľné miesto dole. */
  .okno__ram--profil{min-height:92svh;align-content:start}
}

.okno__profil{
  display:grid;gap:1.05rem;
  color:var(--ink-2);font-size:1.02rem;line-height:1.68;
}
.okno__profil[hidden]{display:none}
.okno__profil p{margin:0;text-wrap:pretty;max-width:62ch}
/* *zvýraznenie* z textu kandidáta */
.okno__profil em{font-style:italic;font-weight:500;color:var(--ink)}
.profil__zoznam em{font-weight:inherit}

.profil__zoznam{
  position:relative;padding:1.05rem 1.15rem 1.1rem;border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--sky-50),#fff 70%);
  box-shadow:inset 0 0 0 1px rgba(4,167,181,.18),0 16px 34px -28px rgba(11,46,94,.45);
}
.profil__zoznam h4{
  display:flex;align-items:center;gap:.55rem;
  margin:0 0 .75rem;
  font-family:var(--f-display);font-weight:800;font-size:.72rem;
  letter-spacing:var(--label-track);text-transform:uppercase;color:var(--teal-700);
}
.profil__zoznam h4::before{
  content:'';width:22px;height:3px;border-radius:3px;background:var(--grad-brand);
}
.profil__zoznam ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.profil__zoznam li{
  position:relative;padding-left:1.75rem;
  color:var(--ink);font-weight:600;line-height:1.5;text-wrap:pretty;
}
.profil__zoznam li::before{
  content:'';position:absolute;left:.2rem;top:.48em;
  width:.6rem;height:.6rem;border-radius:3px;rotate:45deg;
  background:var(--grad-brand);
  box-shadow:0 0 0 3px rgba(47,198,214,.16),0 4px 10px -3px rgba(4,167,181,.75);
}

/* obsah profilu sa vysype po blokoch a položky zoznamu po jednej */
.okno.je-vstup .okno__profil > *{
  animation:oknoVstup .55s var(--ease) both;
  animation-delay:calc(.26s + var(--k,0) * .09s);
}
.okno.je-vstup .profil__zoznam li{
  animation:oknoVstup .5s var(--ease) both;
  animation-delay:calc(.42s + var(--k,0) * .09s + var(--j,0) * .07s);
}
@media(prefers-reduced-motion:reduce){
  .okno.je-vstup .okno__profil > *,
  .okno.je-vstup .profil__zoznam li{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════
   NÁHĽAD OBÁLKY PRE ADMINISTRÁTORA (/?nahlad=obalka)
   Pásik dole pripomína, že otvorená obálka je len náhľad. Kliky
   prepúšťa ďalej, nič na stránke nezakrýva natrvalo.
   ═══════════════════════════════════════════════════════════════════ */
.nahlad-pas{
  position:fixed;left:50%;bottom:max(.9rem, env(safe-area-inset-bottom));
  translate:-50% 0;z-index:9980;
  width:max-content;max-width:calc(100% - 6.5rem);
  padding:.55rem 1rem;border-radius:999px;
  background:var(--navy-900);color:#fff;
  box-shadow:0 0 0 1px rgba(123,222,234,.45),0 14px 30px -12px rgba(0,0,0,.6);
  font-family:var(--f-display);font-weight:700;font-size:.74rem;line-height:1.35;
  text-align:center;pointer-events:none;
}
.nahlad-pas--nie{background:#7a1d24}
/* na užšom displeji by stredom narazil do tlačidla „hore" (.totop) —
   vtedy sedí vľavo a končí pred ním */
@media(max-width:760px){
  .nahlad-pas{
    left:.75rem;right:calc(1.4rem + 52px + .6rem);translate:none;
    width:auto;max-width:none;text-align:left;border-radius:14px;
  }
}