/*
Theme Name:   Becík
Theme URI:    https://branislavbecik.sk
Author:       —
Description:  Onepage theme pre web Branislava Becíka. 
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  becik
*/
/* ==========================================================================
   Branislav Becík — web
   Built from Figma "Becik_web_design" (frame v2 / desktop 1440, mobile 402)
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --red:        #ED1C23;
  --red-dark:   #D60006;
  --maroon:     #59111E;
  --navy:       #25346D;
  --purple:     #3E284C;
  --ink:        #262626;
  --grey:       #959595;
  --grey-100:   #F1F1F1;
  --grey-50:    #F9F9F9;
  --line:       #E0E0E0;
  --white:      #fff;

  --container:  1180px;
  --gutter:     40px;

  --shadow-card: 0 3px 31px rgba(0,0,0,.05);
  --ff: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--ff);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
/* WordPress pridáva k obrázkom atribúty width/height; tie sa správajú ako CSS
   deklarácie a prebili by aspect-ratio. height:auto ich zruší. */
img{height:auto}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 20px;background:var(--navy);color:#fff;
}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Shared type ---------- */
.h2{font-size:34.3px;font-weight:700;line-height:1.2}
.h2--maroon{color:var(--maroon)}
.h2--white{color:var(--white)}
.h2--xl{font-size:58.5px;line-height:1.13}

.eyebrow{
  font-size:17.4px;font-weight:700;line-height:1.2;
  text-transform:uppercase;color:var(--navy);
}
.lead{font-size:20px;font-weight:500;line-height:1.3;color:var(--grey)}
.rule{display:block;width:75px;height:5px;background:var(--red)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border:2px solid transparent;border-radius:99px;
  font-size:18px;font-weight:500;line-height:14px;text-transform:uppercase;
  white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s;
}
.btn svg{flex:none}
.btn{transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.btn:active{transform:translateY(0) scale(.98)}

/* CTA typu „Čítať viac“: obrys je základný stav, plná farba je hover */
.btn--red{
  padding:17px 30px;border-width:1px;
  background:transparent;border-color:var(--red);color:var(--red);
}
.btn--red:hover{background:var(--red);color:var(--white)}

.btn--navy{
  padding:17px 30px;border-width:1px;
  background:transparent;border-color:var(--navy);color:var(--navy);
}
.btn--navy:hover{background:var(--navy);color:var(--white)}

/* menšia pilulka na kartách programu (119×39 v návrhu) */
.btn--sm{
  padding:13px 23px;border-width:1px;gap:8px;
  font-size:13.8px;line-height:12px;
}

/* tlačidlá, ktoré zostávajú plné (hlavička, newsletter) */
.btn--solid{background:var(--red);border-color:var(--red);color:var(--white)}
.btn--solid:hover{background:transparent;color:var(--red)}
.btn--outline-dark{border-color:var(--ink);color:var(--ink)}
.btn--outline-purple{border-color:var(--purple);color:var(--purple)}
/* položky menu sa na hover vyplnia modrou */
.btn--outline-dark:hover,
.btn--outline-purple:hover{
  background:var(--navy);border-color:var(--navy);color:var(--white);
  transform:translateY(-2px);
}
.btn--ghost{
  padding:18px 30px;
  border:1px solid rgba(255,255,255,.8);color:var(--white);
  font-size:18px;font-weight:400;text-transform:none;gap:12px;
}

/* Sociálne siete: na hover vyrastie biely kruh za ikonou a ikona sa preklopí */
.btn--social{position:relative;isolation:isolate}
/* Biely kruh sedí na ľavom konci pilulky (má jej výšku) a ikona sa doň
   presunie — inak by bola natlačená k textu a vľavo by ostala diera. */
.btn--social::before{
  content:"";position:absolute;z-index:-1;
  left:0;top:0;bottom:0;width:auto;aspect-ratio:1;
  border-radius:50%;background:var(--white);
  transform:scale(0);transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.btn--social:hover::before{transform:scale(1)}
.btn--social svg{transition:color .25s ease,transform .3s cubic-bezier(.2,.8,.3,1)}
.btn--social:hover svg{color:var(--ink);transform:translateX(-12px)}

/* „Zobraziť celú galériu“: na hover plná biela */
.btn--ghost-caps{
  padding:17px 30px;
  text-transform:uppercase;font-weight:400;letter-spacing:.02em;
}
.btn--ghost-caps:hover{
  background:var(--white);border-color:var(--white);color:var(--ink);
}
.btn__arrow{
  display:inline-flex;flex:none;width:12px;height:15px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.btn__arrow svg{width:100%;height:100%}
.is-expanded .btn__arrow{transform:rotate(180deg)}

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Hlavička je fixed a v toku ju nahrádza padding na <body>, takže jej
   zmenšenie nemení výšku dokumentu — inak by sa scroll a prah prepínania
   navzájom preháňali a hlavička by pri malom scrolle blikala. */
body{padding-top:113px}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;
  height:113px;padding-left:39px;
  background:var(--white);
  transition:height .28s ease,box-shadow .28s ease;
}
.site-header.is-stuck{
  height:76px;
  box-shadow:0 6px 24px rgba(0,0,0,.10);
}
.site-header.is-stuck .logo img{width:118px}
.site-header.is-stuck .btn{padding:11px 24px;font-size:16px}
.site-header.is-stuck .header-cta{padding:0 54px;font-size:21px}
.logo img{transition:width .28s ease}

/* aby kotva neskončila pod lepiacou hlavičkou */
section[id]{scroll-margin-top:84px}
.logo img{width:147px;height:auto}
.site-nav{display:flex;gap:18px;margin-left:47px}
.site-nav .nav-cta-mobile{display:none}
.header-cta{
  display:flex;align-items:center;
  margin-left:auto;align-self:stretch;
  padding:0 79px;
  background:var(--red-dark);color:var(--white);
  font-size:25px;font-weight:900;line-height:1;text-transform:uppercase;
  transition:background-color .2s;
}
.header-cta:hover{background:var(--white);color:var(--red)}
.nav-toggle{display:none;margin-left:auto;padding:0}
.nav-toggle__close{display:none}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;background:var(--maroon);overflow:hidden}
.hero__slides{position:relative}
.hero__slide{
  position:absolute;inset:0;
  opacity:0;transition:opacity .7s ease;
  pointer-events:none;
}
.hero__slide.is-active{opacity:1;pointer-events:auto}
.hero__slide img{
  width:100%;height:100%;object-fit:cover;
  /* --focus = ohnisko snímky, aby sa pri oreze nestratila tvár */
  object-position:var(--focus,50% 50%);
}

.hero__link{position:absolute;inset:0;z-index:2}

/* Nadpis je súčasťou fotky, preto sa slider nesmie orezať:
   rám drží pomer strán snímky (--hero-ratio nastavuje šablóna
   podľa rozmerov prvej nahranej fotky, predvolene 1410/666).               */
.hero__slides{height:auto;aspect-ratio:var(--hero-ratio,1410/666)}
.hero__dots{
  position:absolute;left:50%;bottom:42px;transform:translateX(-50%);
  display:flex;gap:14px;z-index:2;
}
.hero__dot{
  width:12px;height:12px;border-radius:50%;padding:0;
  border:1px solid var(--white);background:var(--white);
  transition:background-color .2s,transform .2s;
}
.hero__dot.is-active{background:transparent}
.hero__dot:hover{transform:scale(1.25)}
.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  color:var(--white);background:rgba(0,0,0,.18);
  opacity:0;transition:opacity .25s,background-color .25s;
}
.hero__arrow svg{width:18px;height:36px}
.hero:hover .hero__arrow,.hero__arrow:focus-visible{opacity:1}
.hero__arrow:hover{background:rgba(0,0,0,.4)}
.hero__arrow--prev{left:24px}
.hero__arrow--prev svg{transform:rotate(180deg)}
.hero__arrow--next{right:24px}

/* ==========================================================================
   KOMPLET ODPOČET (purple band + cards)
   ========================================================================== */
.band-purple{
  min-height:396px;padding:56px var(--gutter) 0;
  background:var(--purple);color:var(--white);text-align:center;
}
.band-purple__title{font-size:23px;font-weight:500;line-height:1.25}
.band-purple__sub{
  max-width:860px;margin:12px auto 0;
  font-size:15px;font-weight:300;line-height:1.6;
}

.highlights{position:relative;z-index:2;margin-top:-120px;padding-bottom:90px}
.highlights__track{
  display:flex;gap:16px;justify-content:center;
  max-width:1060px;margin-inline:auto;padding-inline:var(--gutter);
}
.hcard{
  position:relative;flex:0 0 253px;height:275px;
  perspective:1200px;
}
.hcard__inner{
  position:relative;width:100%;height:100%;
  transition:transform .6s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
/* hover = červený obrys na prednej strane, otočenie až na klik/tap */
.hcard.is-flipped .hcard__inner{transform:rotateY(180deg)}
.hcard:hover .hcard__face--front,
.hcard:focus-visible .hcard__face--front{
  box-shadow:var(--shadow-card),inset 0 0 0 1px var(--red);
}
.hcard__face{
  position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:var(--white);box-shadow:var(--shadow-card);
}
.hcard__face--front{padding:72px 20px 0 28px}
.hcard__face--back{
  transform:rotateY(180deg);
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:24px;background:var(--red);color:var(--white);
  overflow:auto;
  box-shadow:var(--shadow-card),inset 0 0 0 1px var(--red);
}
.hcard__subtitle{font-size:18px;font-weight:800;line-height:1.25}
.hcard__copy{font-size:12.5px;font-weight:500;line-height:1.45}
.hcard__copy + .hcard__copy{margin-top:2px}
.hcard{cursor:pointer}
.hcard--static{cursor:default}
.hcard__num{
  position:absolute;top:12px;right:9px;
  display:flex;align-items:center;justify-content:center;
  width:79px;height:79px;
  background:var(--grey-100);
  font-size:24px;font-weight:500;color:var(--grey);
}
.hcard__icon{height:61px;width:auto}
.hcard__title{
  margin-top:34px;
  font-size:22px;font-weight:700;line-height:1.2;color:var(--maroon);
}
.highlights__dots{display:none;gap:4px;justify-content:center;margin-top:22px}
.highlights__dots span{width:5px;height:5px;border-radius:50%;background:var(--line)}
.highlights__dots span.is-active{background:var(--navy)}

/* ==========================================================================
   KTO SOM
   ========================================================================== */
/* overflow-x:clip zabráni vodorovnému posunu od mapy, ale nechá ju
   presahovať nahor — s overflow:hidden by sa orezala */
.about{position:relative;padding:1px 0 106px;overflow-x:clip;overflow-y:visible}
.about .container{max-width:1229px}
/* obrys Slovenska (Isolation_Mode v návrhu) — začína ešte nad sekciou,
   na úrovni dlaždíc, presne ako v návrhu (y 1073, x 872) */
.about__map{
  position:absolute;top:-361px;left:50%;z-index:-1;
  width:584px;margin-left:152px;
  opacity:.25;pointer-events:none;
}
.about__inner{
  position:relative;
  display:grid;grid-template-columns:693px minmax(0,408px);
  gap:48px;justify-content:space-between;
}

/* Koláž — všetko v percentách, takže sa celá kompozícia škáluje.
   Mobilný návrh je presne táto zostava zmenšená na 49,4 %. */
.collage{position:relative;width:100%;max-width:693px;aspect-ratio:693/516}
.collage__crowd{
  position:absolute;top:0;left:0;
  width:76.48%;aspect-ratio:530/393;object-fit:cover;
}
.collage__dashes{
  position:absolute;top:20.74%;left:54.11%;
  width:35.79%;aspect-ratio:248/262;z-index:-1;
}
.collage__square{
  position:absolute;top:58.53%;left:20.63%;
  width:24.39%;aspect-ratio:169/151;background:var(--red);
}
.collage__castle{
  position:absolute;top:55.43%;left:33.48%;
  width:66.52%;aspect-ratio:461/230;object-fit:cover;
}

/* text column */
.about__text{padding-top:30px}
.about__text .eyebrow{margin-top:10px}
.about__text .h2{margin-top:26px;font-size:55px;line-height:1}
.about__text .lead{margin-top:41px;font-size:16px;line-height:1.5}
.about__list{margin-top:32px;font-size:15px;font-weight:800;line-height:1.8;color:var(--maroon)}
.about__list li{position:relative;padding-left:20px}
.about__list li::before{
  content:"";position:absolute;left:2px;top:.72em;
  width:5px;height:5px;border-radius:50%;background:var(--maroon);
}
.about__text .btn{margin-top:24px}

/* ==========================================================================
   SOCIÁLNE SIETE
   ========================================================================== */
.social{padding:93px 0 114px;background:var(--maroon)}
.social .container{max-width:1261px}
.social__head{
  display:grid;grid-template-columns:1fr 408px;gap:48px;align-items:start;
  margin-bottom:31px;
}
.social__intro{font-size:16px;font-weight:500;line-height:1.5;color:var(--white)}

.gallery{column-count:4;column-gap:14px}
.gallery__item{
  position:relative;margin:0 0 14px;
  break-inside:avoid;-webkit-column-break-inside:avoid;
  border-radius:9px;overflow:hidden;
}
.gallery__item img{
  width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover;
  transition:transform .5s ease;
}
.gallery__item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(89,17,30,.55));
  opacity:0;transition:opacity .35s ease;
  pointer-events:none;   /* inak by prekryv zhltol každý klik na odkaz */
}
.gallery__item a{position:relative;z-index:1;display:block}
/* reely sú 9:16; orez posunieme hore, aby v zábere ostala tvár a nie brada */
.gallery__item--reel img{object-position:center 32%}
.gallery__item:hover img{transform:scale(1.05)}
.gallery__item:hover::after{opacity:1}
.gallery__tag{
  position:absolute;top:20px;left:20px;z-index:2;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  min-width:47px;height:24px;padding:0 10px;
  border:1px solid rgba(255,255,255,.3);border-radius:12px;
  background:rgba(255,255,255,.34);
  font-size:16px;color:var(--white);line-height:1;
  backdrop-filter:blur(2px);
}
/* extra photos revealed by "Zobraziť celú galériu" */
.gallery__item--extra{display:none}
.gallery.is-expanded .gallery__item--extra{display:block;animation:fade-in .45s ease both}
@keyframes fade-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.social__actions{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-top:44px;
}
.social__links{display:flex;gap:8px}

/* ==========================================================================
   PROGRAM
   ========================================================================== */
.program{position:relative;padding:85px 0 0}
.program::before{
  content:"";position:absolute;top:0;left:0;right:0;height:624px;
  background:var(--grey-50);
}
.program .container{position:relative;max-width:1310px}
.program__head{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.program__nav{display:flex;gap:8px;margin-left:auto}
.program__track{display:flex;gap:18px}
.pcard{
  transition:transform .3s ease,box-shadow .3s ease;
  position:relative;z-index:1;
  flex:1 1 0;min-width:0;min-height:626px;
  padding:33px 23px 31px;
  background:var(--white);box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;
}
.pcard:hover{transform:translateY(-6px);box-shadow:0 18px 46px rgba(0,0,0,.12)}
.pcard__img{width:100%;height:328px;object-fit:cover;transition:filter .3s ease}
.pcard:hover .pcard__img{filter:saturate(1.1) brightness(1.03)}
.pcard__title{
  margin-top:21px;
  font-size:18px;font-weight:700;line-height:1.3;color:var(--navy);
}
.pcard__text{
  margin-top:16px;
  font-size:15px;font-weight:500;line-height:1.5;color:var(--grey);
}
.pcard .btn{align-self:flex-start;margin-top:auto;margin-left:22px}
.pcard__text{flex:none}
.arrow{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;color:var(--ink);
  transition:background-color .2s;
}
.arrow:hover{background:rgba(0,0,0,.06)}
.arrow--prev svg{transform:rotate(180deg)}

@media (min-width:1024px){
  /* desktop: arrows sit outside the card row, vertically centred on it */
  .arrow{position:absolute;top:454px;width:25px;height:50px;border-radius:0}
  .arrow:hover{background:none;opacity:.6}
  .arrow--prev{left:49px}
  .arrow--next{right:49px}
}

/* ==========================================================================
   QUOTE / RED BAND
   ========================================================================== */
.quote{
  position:relative;z-index:0;margin-top:-26px;
  display:flex;align-items:flex-start;
  height:518px;padding-top:203px;background:var(--white);overflow:hidden;
}
.quote__bg{
  position:absolute;left:0;top:-15%;width:100%;height:130%;
  object-fit:cover;object-position:center 22%;opacity:.6;
  will-change:transform;
}
.quote::after{                       /* red 84% multiply, as in the design */
  content:"";position:absolute;inset:0;
  background:var(--red);opacity:.84;mix-blend-mode:multiply;
}
.quote .container{position:relative;z-index:1}
.quote__text{
  max-width:950px;
  font-size:48.3px;font-weight:700;line-height:1.09;color:var(--white);
}
/* posledná veta („Pokračujme.“) je odsadená nižšie a podčiarknutá */
.quote__more{
  display:block;margin-top:.42em;
  text-decoration:underline;
  text-decoration-thickness:.055em;
  text-underline-offset:.14em;
}

/* ==========================================================================
   KALENDÁR AKCIÍ
   ========================================================================== */
.calendar{padding:114px 0 0}
.calendar .container{max-width:1180px}
.calendar .rule{width:130px;height:9px}
.calendar .eyebrow{margin-top:21px;font-size:30px}
.calendar .h2--xl{margin-top:24px}
.calendar .lead{margin-top:26px;line-height:1.55}

.cal{
  display:flex;gap:141px;
  max-width:1088px;margin:69px auto 0;padding:20px 96px 138px 81px;
  background:var(--white);border-radius:40px;
  box-shadow:0 14px 60px rgba(0,0,0,.08);
}
.cal__left{position:relative;flex:0 0 528px;max-width:100%}
.cal__day{font-size:124px;font-weight:700;line-height:1.05;color:var(--navy)}
.cal__grid{width:100%;margin-top:30px;border-collapse:collapse;table-layout:fixed;text-align:center}
.cal__grid th{
  padding:8px 0;background:var(--red);
  font-size:20px;font-weight:400;line-height:30px;color:var(--white);
}
.cal__grid th:first-child{border-radius:0}
.cal__grid td{
  height:60px;padding:0;
  font-size:24px;font-weight:400;color:var(--ink);
  vertical-align:middle;
}

/* deň ako tlačidlo — rovnaký vzhľad ako obyčajné číslo */
.cal__cell{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:66px;height:66px;padding:0;border-radius:50%;
  font:inherit;color:inherit;line-height:1;
  transition:background-color .18s ease,color .18s ease;
}
.cal__cell:hover{background:var(--grey-100)}
.cal__cell.has-event{
  font-weight:700;
  box-shadow:inset 0 0 0 2px var(--red);   /* krúžok = v tento deň je akcia */
}
.cal__cell.has-event:hover{background:rgba(237,28,35,.10)}

/* vybraný deň — plná modrá vždy prebije stav vyššie */
.cal__grid .cal__cell.is-selected,
.cal__grid .cal__cell.is-selected:hover{
  background:var(--navy);color:var(--white);box-shadow:none;
}
/* vybraný deň, ktorý má aj akciu — krúžok ostáva, ale bielym vnútrom */
.cal__grid .cal__cell.is-selected.has-event{
  box-shadow:inset 0 0 0 2px var(--navy),inset 0 0 0 4px rgba(255,255,255,.85);
}

/* bublina s prehľadom akcií pri prejdení myšou */
.cal__tip{
  position:absolute;z-index:5;
  min-width:180px;max-width:260px;padding:12px 14px;
  background:var(--ink);color:var(--white);border-radius:10px;
  font-size:14px;line-height:1.4;
  transform:translate(-50%,-100%);
  opacity:0;visibility:hidden;transition:opacity .15s ease;
  pointer-events:none;box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.cal__tip.is-visible{opacity:1;visibility:visible}
.cal__tip::after{
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--ink);border-bottom:0;
}
.cal__tip-date{font-weight:700;margin-bottom:6px}
.cal__tip-item{display:flex;gap:8px}
.cal__tip-item + .cal__tip-item{margin-top:4px}
.cal__tip-item strong{color:#FF6B71;font-weight:700}
.cal__grid td.is-weekend,.cal__grid th.is-weekend{color:var(--red)}
.cal__grid th.is-weekend{color:var(--white)}
.is-today{
  display:inline-flex;align-items:center;justify-content:center;
  width:66px;height:66px;border-radius:50%;
  background:var(--navy);color:var(--white);
}
.cal__right{display:flex;flex-direction:column;flex:1;min-width:0;padding-top:46px}
.cal__monthnav{display:flex;flex-direction:column;align-items:flex-end}
.cal__monthnav__btns{display:flex;gap:4px;margin-bottom:6px}
.cal__monthnav button{
  flex:none;                    /* nesmú sa zmršťovať pri dlhom názve mesiaca */
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  color:var(--navy);transition:background-color .2s ease;
}
.cal__monthnav button:hover{background:var(--grey-100)}
.cal__monthnav button svg{width:11px;height:22px}
.cal__monthnav .cal__prev svg{transform:rotate(180deg)}
.cal__month{
  white-space:nowrap;
  font-size:clamp(26px,2.74vw,40px);font-weight:700;line-height:1.05;
  text-transform:uppercase;text-align:right;color:var(--navy);
}
.cal__panel-date{
  margin-top:38px;
  font-size:18px;font-weight:700;color:var(--navy);
}
.cal__empty{
  margin-top:38px;padding-left:20px;
  border-left:9px solid var(--line);
  font-size:18px;line-height:1.5;color:var(--grey);
}
.cal__events li em{
  display:block;margin-top:2px;
  font-style:normal;font-size:16px;color:var(--grey);
}
.cal__events li p{
  margin-top:4px;font-size:16px;line-height:1.45;color:var(--grey);
}
.cal__events{margin-top:20px;display:flex;flex-direction:column;gap:28px}
.cal__panel > .cal__events:first-child{margin-top:45px}
.cal__events li{
  padding-left:20px;border-left:9px solid var(--red);
  display:flex;flex-direction:column;
}
.cal__events strong{font-size:43px;font-weight:700;line-height:1.03;color:var(--ink)}
.cal__events span{font-size:20px;font-weight:500;line-height:1.3;color:var(--ink)}

.calendar__note{
  max-width:740px;margin:32px auto 0;padding-bottom:53px;
  font-size:16px;font-weight:500;line-height:1.64;text-align:center;color:var(--ink);
}

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter{position:relative;min-height:310px;padding:50px 0;display:flex;align-items:center;background:var(--navy);overflow:hidden}
.newsletter__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.45;mix-blend-mode:multiply;
}
.newsletter .container{max-width:1272px}
.newsletter__inner{
  position:relative;
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
}
.newsletter__title{font-size:39.5px;font-weight:700;line-height:1.2;color:var(--white)}
.subscribe{
  position:relative;display:flex;align-items:center;
  width:647px;max-width:100%;margin-top:30px;
  border-radius:62px;
}
.subscribe input{
  flex:1;min-width:0;height:100%;padding:0 24px 0 56px;
  border:0;background:none;border-radius:62px;
  font-size:16px;color:var(--ink);
}
.subscribe input::placeholder{color:var(--line)}
.subscribe input:focus{outline:2px solid var(--navy);outline-offset:-2px}
.subscribe button{
  flex:none;height:65px;margin-right:9px;padding:0 39px;
  background:var(--navy);border:2px solid var(--navy);border-radius:99px;
  font-size:23px;font-weight:300;color:var(--white);
  transition:filter .2s;
}
.subscribe button:hover{filter:brightness(1.2)}
.newsletter__links{display:flex;gap:8px;padding-bottom:12px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--ink);color:var(--white)}
.site-footer__inner{
  display:flex;align-items:center;
  height:89px;padding:0 81px;
}
.site-footer__logo{flex:0 0 290px;font-size:17.6px;line-height:1;text-transform:uppercase}
.site-footer__logo span{font-weight:300}
.site-footer__logo strong{font-weight:700}
.site-footer__links{display:flex;gap:57px}
.site-footer__links a{font-size:12px;font-weight:500}
.site-footer__links a:hover{text-decoration:underline}

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}

/* návrh nechá stránku vidieť — tmavý závoj je len jemný, rozostrenie
   robí samo okno cez backdrop-filter */
.modal__backdrop{
  position:absolute;inset:0;background:rgba(38,38,38,.15);
  animation:fade-in .25s ease both;
}
.modal__dialog{
  position:relative;width:min(880px,calc(100% - 40px));
  max-height:86vh;overflow:auto;
  padding:56px 64px;
  background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid #D5D5D5;border-radius:48px;
  box-shadow:0 30px 80px rgba(0,0,0,.18);
  animation:modal-in .3s cubic-bezier(.2,.8,.3,1) both;
}
/* prehliadače bez backdrop-filter dostanú takmer nepriehľadné pozadie */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modal__dialog{background:rgba(255,255,255,.97)}
}
@keyframes modal-in{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}

.modal__close{
  position:absolute;top:26px;right:26px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;color:#000;
  transition:background-color .2s,transform .2s;
}
.modal__close svg{width:26px;height:26px}
.modal__close:hover{background:rgba(0,0,0,.06);transform:rotate(90deg)}

.modal__title{
  padding-right:56px;
  font-size:38px;font-weight:500;line-height:1.2;color:var(--ink);
}
.modal__body{margin-top:26px;font-size:20px;font-weight:500;line-height:1.45;color:var(--ink)}
.modal__body p + p{margin-top:20px}
.modal__subhead{
  margin-top:28px;
  font-size:22px;font-weight:700;line-height:1.3;color:var(--ink);
}
.modal__subhead + p{margin-top:8px}

.modal__actions{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:16px;
  margin-top:40px;
}
.btn--modal{
  padding:17px 28px;border-width:1px;border-radius:99px;
  font-size:20px;font-weight:400;line-height:22px;text-transform:none;
}
.btn--modal-primary{background:var(--red);border-color:var(--red);color:var(--white)}
.btn--modal-primary:hover{background:transparent;color:var(--red)}
.btn--modal-ghost{background:transparent;border-color:#000;color:#000}
.btn--modal-ghost:hover{background:#000;color:var(--white)}

/* pop-up programu: fotka vľavo, text vpravo */
.modal__dialog--program{width:min(1020px,calc(100% - 40px));padding:48px 56px}
.modal-program{display:flex;gap:48px;align-items:stretch}
.modal-program__img{
  flex:0 0 38%;align-self:flex-start;
  width:38%;aspect-ratio:231/420;max-height:56vh;
  object-fit:cover;border-radius:24px;
}
.modal-program__text{flex:1;min-width:0;display:flex;flex-direction:column}
.modal-program__text .modal__body{margin-top:0}
.modal-program__text .modal__actions{margin-top:auto;padding-top:40px}

body.has-modal{overflow:hidden}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1279px){
  .about__inner{grid-template-columns:1fr;gap:64px}
  .about__text{order:-1}          /* text first once the two columns stack */
  .collage{max-width:693px}
  /* mapa je aj v mobilnom návrhu — začína tesne pod červenou linkou */
  .about__map{
    top:50px;left:38.8%;width:80.8%;
    margin-left:0;
  }
  .gallery{column-count:3}
  .social__head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
  .cal{padding:20px 40px 40px 40px;gap:32px}
  .cal__left{flex:1 1 420px}
  .cal__day{font-size:96px}
  .cal__month,.cal__events strong{font-size:34px}
  .site-footer__links{margin-left:0}
}

@media (max-width:1023px){
  :root{--gutter:24px}
  .site-header{padding:0 12px 0 24px}
  /* Otvorené menu je celoobrazovkové: veľký text bez piluliek a hranaté
     červené tlačidlo. Leží pod hlavičkou (z-index 55 < 60), takže logo
     a krížik ostávajú navrchu. */
  .site-nav{
    position:fixed;inset:0;z-index:55;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:32px;
    margin:0;padding:156px 24px 40px 56px;
    background:var(--white);
    overflow-y:auto;
    display:none;
  }
  .site-nav.is-open{display:flex}
  body.has-menu{overflow:hidden}

  .site-nav .btn{
    padding:0;border:0;border-radius:0;background:none;
    font-size:18px;line-height:1;font-weight:500;letter-spacing:.01em;
    transform:none;
  }
  .site-nav .btn--outline-purple{color:var(--purple)}
  .site-nav .btn--outline-dark{color:var(--ink)}
  .site-nav .btn:hover{background:none;color:var(--navy);transform:none}

  .site-nav .nav-cta-mobile{
    margin-top:34px;
    padding:23px 24px;border-radius:0;
    background:var(--red);color:var(--white);
    font-weight:900;
  }
  .site-nav .nav-cta-mobile:hover{
    background:var(--white);color:var(--red);
    box-shadow:inset 0 0 0 2px var(--red);
  }

  .site-nav{gap:0;}
  .site-header.is-stuck .btn{padding:11px 0;display:block;width:100%;}
  .site-header.is-stuck .btn.nav-cta-mobile{padding:11px 24px;width:auto;}

  /* logo aj krížik musia ostať nad celoobrazovkovým menu */
  .logo,
  .nav-toggle{position:relative;z-index:61}
  .nav-toggle{color:var(--navy)}
  .site-nav .nav-cta-mobile{display:inline-flex}
  .header-cta{display:none}
  .nav-toggle{display:block}
  .nav-toggle[aria-expanded="true"] .nav-toggle__open{display:none}
  .nav-toggle[aria-expanded="true"] .nav-toggle__close{display:block}

  /* na užších oknách sa fotka oreže na výšku podľa mobilného návrhu */
  .hero__slides{aspect-ratio:auto;height:520px}
  .hero__slide img{object-position:left center}

  .highlights__track{
    max-width:none;justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .highlights__track::-webkit-scrollbar{display:none}
  .hcard{scroll-snap-align:center}
  .highlights__dots{display:flex}

  .gallery{column-count:2;column-gap:10px}
  .gallery__item{margin-bottom:8px}
  .social__actions{flex-direction:column;margin-top:40px}

  /* podujatia pod kalendárom, nie vedľa neho — vedľa je od tejto šírky úzko */
  .cal{
    display:grid;gap:0;
    grid-template-columns:auto auto;
    grid-template-areas:"day month" "grid grid" "legend legend" "events events";
    padding:28px 36px 36px;
  }
  .cal__left,.cal__right{display:contents}
  .cal__day{grid-area:day}
  .cal__grid{grid-area:grid}
  .cal__monthnav{grid-area:month;justify-self:end;align-items:flex-end}
  .cal__panel{grid-area:events}
  .cal__legend{grid-area:legend}
  .cal__events{
    margin-top:24px;padding-top:20px;
    border-top:1px solid var(--grey-100);
  }
  .cal__panel-date{margin-top:24px}

  .program__nav{display:flex}
  .program__track{
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:60px;scrollbar-width:none;
  }
  .program__track::-webkit-scrollbar{display:none}
  .pcard{flex:0 0 300px;scroll-snap-align:center}
  .pcard__img{height:220px}
  .pcard__text{font-size:16px}

  .hero__arrow{display:none}
  .quote{height:auto;padding:70px 0}
  .quote__text{font-size:32px}

  .newsletter{height:auto;padding:56px 0}
  .newsletter__inner{flex-direction:column;align-items:stretch;gap:40px}
  .newsletter__links{justify-content:center;padding:0}

  .modal__dialog{padding:36px 24px;border-radius:32px}
  .modal__dialog--program{padding:32px 20px}
  .modal__title{font-size:26px;padding-right:44px}
  .modal__body{font-size:16px}
  .modal__close{top:14px;right:14px;width:38px;height:38px}
  .modal__close svg{width:22px;height:22px}
  .btn--modal{padding:14px 22px;font-size:16px;line-height:18px}
  .modal__actions{margin-top:28px;gap:10px}
  .modal-program{flex-direction:column;gap:24px}
  .modal-program__img{width:100%;flex:none;aspect-ratio:16/11;max-height:38vh}
  .modal-program__text .modal__actions{padding-top:24px}
  .site-footer__inner{padding:0 24px;gap:24px}
  .site-footer__links{gap:32px}
}

@media (max-width:767px){
  .h2{font-size:20px}
  .h2--xl{font-size:35px}
  .eyebrow{font-size:13px}
  .lead{font-size:15px}
  .btn{padding:12px 20px;font-size:13px;line-height:12px}
  .btn--red,.btn--navy{padding:12px 20px}
  .btn--sm{padding:10px 16px;font-size:11px;line-height:10px}
  .btn--ghost{padding:12px 20px;font-size:13px;gap:8px}
  .btn--ghost svg{width:16px;height:16px}
  .btn--ghost-caps{padding:12px 20px}
  /* na mobile je pilulka nižšia, kruh aj posun ikony sú menšie */
  .btn--social:hover svg{transform:translateX(-8px)}
  .btn__arrow{width:10px;height:12px}

  body{padding-top:78px}
  .site-header{height:78px}
  .site-header.is-stuck{height:64px}
  .logo img{width:98px}

  .hero__slides{aspect-ratio:auto;height:576px}
  .hero__dots{bottom:24px;gap:12px}
  .hero__dot{width:10px;height:10px}

  .band-purple{min-height:560px;padding-top:68px}
  .band-purple__title{font-size:20px}
  .band-purple__sub{font-size:13px;margin-top:10px}
  .highlights{margin-top:-135px}
  .hcard__title{font-size:19px}
  .hcard__copy{font-size:11.5px;line-height:1.4}
  .about__text .lead{font-size:14px}
  .about__list{font-size:13px}
  .social__intro{font-size:13px}
  .pcard__title{font-size:14px;margin-top:14px}
  .modal__subhead{font-size:17px;margin-top:20px}

  .highlights{padding-bottom:60px}
  .about{padding-bottom:60px}
  .about__text{padding-top:0}
  .about__text .h2{font-size:41px}
  .about__text .lead{margin-top:24px;font-size:15px}
  .about__list{margin-top:24px;font-size:14.5px;line-height:2}
  .about__list li{padding-left:16px}
  .about__list li::before{left:2px;width:4px;height:4px}

  /* koláž sa škáluje sama cez percentá, mobilné prepisy netreba */

  .social{padding:54px 0 60px}
  .social__intro{font-size:14px}

  .program{padding-top:80px}
  .program::before{height:250px}
  .program__track{padding-bottom:40px}

  .calendar{padding-top:60px}
  .calendar .rule{width:88px;height:6px}
  .calendar .eyebrow{font-size:18px}
  .cal{
    display:grid;gap:0;margin-top:40px;
    grid-template-columns:auto auto;
    grid-template-areas:"day month" "grid grid" "legend legend" "events events";
    padding:24px 20px 32px;border-radius:24px;
  }
  .cal__left,.cal__right{display:contents}
  .cal__day{grid-area:day;font-size:41px;line-height:1}
  .cal__grid{grid-area:grid}
  .cal__monthnav{grid-area:month;justify-self:end;align-items:flex-end}
  .cal__month{font-size:14px;line-height:1.2}
  .cal__panel{grid-area:events}
  .cal__legend{grid-area:legend;margin-top:10px;font-size:11px}
  .cal__grid th{padding:8px 0;font-size:11px}
  .cal__grid td{height:34px;font-size:14px}
  .is-today{width:37px;height:37px}
  .cal__events{
    flex-direction:column;gap:16px;margin-top:24px;
    padding-top:20px;border-top:1px solid var(--grey-100);
  }
  .cal__events li{padding-left:8px;border-left-width:3px}
  .cal__events strong{font-size:14px}
  .cal__events span{font-size:10px}
  .cal__events li em,.cal__events li p{font-size:11px}
  .cal__cell{width:37px;height:37px}
  .cal__cell.has-event{box-shadow:inset 0 0 0 1.5px var(--red)}
  .cal__grid .cal__cell.is-selected.has-event{
    box-shadow:inset 0 0 0 1.5px var(--navy),inset 0 0 0 3px rgba(255,255,255,.85);
  }
  .cal__monthnav__btns{margin-bottom:2px}
  .cal__monthnav button{width:22px;height:22px}
  .cal__monthnav button svg{width:8px;height:16px}
  .cal__panel-date,.cal__empty{margin-top:18px;font-size:12px}
  .cal__empty{border-left-width:3px;padding-left:8px}
  .cal__tip{font-size:12px;min-width:140px}
  .calendar__note{font-size:12px;padding-bottom:60px}

  .quote{padding:73px 0 60px}
  .quote__text{font-size:17.5px;max-width:220px}
  .quote__more{margin-top:.5em}

  .newsletter__title{font-size:20px}
  .subscribe{margin-top:16px}
  .subscribe input{padding:0 16px 0 29px;font-size:8px}
  .subscribe button{height:34px;margin-right:4px;padding:0 20px;font-size:12px}

  .site-footer__inner{height:auto;padding:20px 24px;flex-wrap:wrap}
  .site-footer__logo{flex:0 0 auto;font-size:11px}
  .site-footer__links{gap:24px}
}

/* ==========================================================================
   WORDPRESS / EXTRAS
   ========================================================================== */

/* tile without a back side never flips */
.hcard--static .hcard__inner{transform:none!important}

/* calendar day that has an event but is not the highlighted one */
/* legenda pod mriežkou */
.cal__legend{
  display:flex;align-items:center;gap:8px;
  margin-top:14px;
  font-size:14px;color:var(--grey);
}
.cal__legend i{
  display:inline-block;width:18px;height:18px;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--red);
}

/* newsletter feedback line */
.subscribe__msg{
  margin-top:10px;min-height:20px;
  font-size:14px;color:var(--white);
}
.subscribe__msg.is-error{color:#FFD2D4}

/* logo output by the WP custom-logo feature */
.logo .custom-logo{width:147px;height:auto}

/* generic inner pages (blog, single, 404, legal texts) */
.page-section{padding:80px 0 120px}
.page-section--center{text-align:center}
.entry + .entry{margin-top:56px}
.entry__content{margin-top:20px;font-size:18px;line-height:1.7}
.entry__content p + p{margin-top:16px}
.entry__content a{color:var(--red);text-decoration:underline}
.entry__nav{margin-top:48px}
.entry__nav .page-numbers{
  display:inline-block;padding:8px 14px;margin-right:6px;
  border:2px solid var(--ink);border-radius:99px;font-weight:700;
}
.entry__nav .page-numbers.current{background:var(--ink);color:var(--white)}

/* WP core alignment/caption classes */
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.aligncenter{display:block;margin-inline:auto}
.wp-caption-text,.wp-element-caption{font-size:14px;color:var(--grey);margin-top:8px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ==========================================================================
   CONTACT FORM 7 (newsletter)
   Očakávaná šablóna formulára je v README; kľúčový je obal .subscribe__row.
   ========================================================================== */
/* Obal preberá .subscribe (flex, pevná výška) — pre CF7 to musíme zrušiť,
   inak sa formulár zmrští na obsah a pilulka nemá plnú šírku. */
.subscribe--cf7{
  display:block;height:auto;align-items:initial;
  width:647px;max-width:100%;margin-top:30px;
}
.subscribe--cf7 .wpcf7-form{width:100%}
.subscribe--cf7 .wpcf7-form p{margin:0}
.subscribe--cf7 .wpcf7-spinner{position:absolute;right:16px;top:50%;transform:translateY(-50%)}

.subscribe__row{
  position:relative;display:flex;align-items:center;
  height:82px;background:var(--white);border-radius:62px;
}
.subscribe__row input[type="email"]{
  flex:1;min-width:0;height:100%;outline:none;border:0;
  padding:0 24px 0 56px;border:0;background:none;border-radius:62px;
  height:62px;
  font-size:16px;color:var(--ink);
}
.subscribe__row input[type="email"]::placeholder{color:var(--line)}
.subscribe__row input[type="submit"]{
  flex:none;height:65px;margin-right:9px;padding:0 39px;
  background:var(--navy);border:2px solid var(--navy);border-radius:99px;
  font-size:23px;font-weight:300;color:var(--white);cursor:pointer;
  transition:filter .2s ease;
}
.subscribe__row input[type="submit"]:hover{filter:brightness(1.2)}

.subscribe--cf7 .wpcf7-response-output{
  margin:14px 0 0!important;padding:10px 16px!important;
  border:0!important;border-radius:10px;
  background:rgba(255,255,255,.16);color:var(--white);font-size:14px;
}
/* Hláška je vnútri flex riadku, takže v toku by rozbila pilulku. Ukotvíme ju
   pod riadok — nemení layout a je čitateľná na tmavom pozadí sekcie. */
/* CF7 prepúšťa obsah cez wpautop, takže do riadka pridá <p> a <br>.
   Tie musíme z flexu vyradiť, inak tlačidlo spadne pod pole. */
.wpcf7-form-control-wrap{position:initial;}
.subscribe--cf7 .subscribe__row .wpcf7-form-control-wrap{display:contents}
.subscribe--cf7 .subscribe__row p{display:contents}
.subscribe--cf7 .subscribe__row br{display:none}
.subscribe--cf7 .wpcf7-not-valid-tip{
  position:absolute;top:100%;left:30px;right:30px;
  margin-top:10px;
  font-size:13px;line-height:1.35;color:#FFD2D4;
}
span.wpcf7-form-control-wrap[data-name="gdpr"] .wpcf7-not-valid-tip{margin-top:0;top:95%;}

/* neplatné pole zvýrazníme na samotnej pilulke */
.subscribe__row:has(.wpcf7-not-valid){box-shadow:0 0 0 2px #FFD2D4}

/* miesto pre hlásku, nech nenarazí do tlačidiel pod formulárom */
.subscribe--cf7{padding-bottom:26px}
.subscribe--cf7 .wpcf7-acceptance{display:block;margin-top:28px}
.subscribe--cf7 .wpcf7-acceptance .wpcf7-list-item{margin:0}
.subscribe--cf7 .wpcf7-acceptance label{
  display:flex;gap:10px;align-items:flex-start;
  font-size:13px;line-height:1.4;color:rgba(255,255,255,.85);
  cursor:pointer;
}
/* bez flex:none by sa checkbox roztiahol na celú šírku a text odletel doprava */
.subscribe--cf7 .wpcf7-acceptance input[type="checkbox"]{
  flex:none;width:16px;height:16px;margin-top:1px;
  accent-color:var(--red);
}
.subscribe--cf7 .wpcf7-acceptance a{text-decoration:underline}

/* honeypot — pre človeka neviditeľné, pre bota lákavé */
.becik-trap{
  position:absolute!important;left:-9999px!important;
  width:1px;height:1px;overflow:hidden;
}

@media (max-width:767px){
  .subscribe--cf7{margin-top:16px}
  .subscribe__row{height:42px}
  .subscribe__row input[type="email"]{padding:0 16px 0 29px;font-size:12px;}
  .subscribe__row input[type="submit"]{height:34px;margin-right:4px;padding:0 20px;font-size:12px}
}

/* označenie reelu v galérii */
.gallery__play{
  position:absolute;z-index:2;right:14px;bottom:14px;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.34);border:1px solid rgba(255,255,255,.3);
  color:var(--white);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:background-color .25s ease,color .25s ease;
}
.gallery__play svg{width:18px;height:18px}
.gallery__item:hover .gallery__play{background:var(--white);color:var(--maroon)}