/* ========================================================
   AJ TU JE DOBRE — dizajnový systém
   Farby, typografia a komponenty odvodené z reálnych
   plagátov občianskeho združenia (gradient žltá→zelená→tyrkys,
   zrnitá textúra, čierne výrazné caps písmo, »» / «« šípky).

   ŠTRUKTÚRA SÚBORU
   1) Základ (písma, premenné, typografia)
   2) Spoločné komponenty (nav, hero, sekcie, karty, pätička)
   3) VETVA ZLOŽKY — Združenie masérov (body class="zm")
   4) Nové komponenty (balíčky, FAQ, čísla, referencie, formulár)
   ======================================================== */

@font-face{
  font-family: 'Cornichon';
  src: url('assets/fonts/Cornichon-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Cornichon';
  src: url('assets/fonts/Cornichon-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --yellow: #f2ea3a;
  --green:  #7be85a;
  --cyan:   #3fe0cf;
  --ink:    #0b0f08;
  --paper:  #f1f1ef;
  --paper-dim: #e7e7e4;
  --muted:  #52564a;
  --line:   rgba(11,15,8,0.14);

  /* akcent vetvy — na materskej úrovni žltá, v zložke sa prepne na tyrkys */
  --accent: var(--yellow);

  --display: 'Cornichon', 'Arial Narrow Bold', sans-serif;
  --mono: 'Cornichon', 'Courier New', monospace;

  --container: 1180px;
  --edge: clamp(20px, 5vw, 64px);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

a{ color: inherit; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}

h1,h2,h3{
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.08;
}

/* ---------- grain + gradient texture, shared by hero bands ---------- */
.grain{ position:relative; overflow:hidden; }
.grain::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    conic-gradient(from 200deg at 30% 20%, var(--cyan), var(--green) 35%, var(--yellow) 70%, var(--cyan) 100%);
  filter: saturate(1.15);
  z-index:0;
}
.grain::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  opacity:0.5;
  mix-blend-mode: multiply;
  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='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 180px 180px;
}
.grain > *{ position:relative; z-index:2; }

/* ---------- nav ---------- */
.site-nav{
  position: sticky; top:0; z-index: 50;
  background: rgba(250,249,239,0.86);
  backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--ink);
}
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top: 14px; padding-bottom: 14px;
}

.logo-img{ height: 40px; width: auto; display:block; object-fit: contain; }
footer .logo-img{ height: 34px; }

/* ---------- LOCK-UP: logo matky + názov zložky ----------
   Nikdy netvor druhé logo. Zložka sa označuje týmto zámkom. */
.lockup{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.lockup img{ height:40px; width:auto; display:block; object-fit:contain; }
.lockup .divider{
  width:1.5px; height:30px; background:var(--ink); opacity:.35; display:block;
}
.lockup .unit{
  font-family: var(--display); font-weight:700; text-transform:uppercase;
  font-size: 13.5px; line-height:1.05; letter-spacing:0.02em;
}
footer .lockup img{ height:34px; }

.nav-links{ display:flex; gap: clamp(12px, 2.4vw, 26px); list-style:none; margin:0; padding:0; flex-wrap:wrap; justify-content:flex-end; }
.nav-links a{
  text-decoration:none;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active{ border-color: var(--ink); }

/* mobil: navigácia sa zalomí pod logo, žiadne skryté menu netreba */
@media (max-width: 760px){
  .site-nav .wrap{ flex-direction:column; align-items:flex-start; gap:12px; }
  .nav-links{ justify-content:flex-start; gap:14px 16px; }
  .nav-links a{ font-size:12px; }
}

/* ---------- TRAIL / PREPÍNAČ ENTÍT ----------
   Čierny pás pod navigáciou je na VŠETKÝCH stránkach.
   Ukazuje, v ktorej entite sa návštevník nachádza, a umožňuje prepnúť:
   aktívna materská entita svieti žltou, aktívna zložka tyrkysovou.
   Prepína sa atribútom data-active="atjd" / data-active="zm" na .trail  */
.trail{
  background: var(--ink); color: var(--paper);
  border-bottom: 1.5px solid var(--ink);
}
.trail .wrap{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-top:8px; padding-bottom:8px;
  font-family: var(--display); font-weight:700;
  text-transform:uppercase; font-size:12.5px; letter-spacing:0.05em;
}
.trail .arrows{ color: var(--yellow); letter-spacing:-1px; }
.trail[data-active="zm"] .arrows{ color: var(--cyan); }
.trail .sep{ opacity:.45; }
.trail .here{ color: var(--paper); opacity:.75; }

.trail .switch{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.trail .sw{
  display:inline-block; text-decoration:none;
  color: var(--paper); opacity:.55;
  padding:5px 13px; border-radius:999px;
  border:1.5px solid rgba(241,241,239,0.35);
  transition: opacity .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
  white-space:nowrap;
}
.trail .sw:hover{ opacity:1; border-color: var(--paper); }

/* aktívna entita — farebná pilulka */
.trail[data-active="atjd"] .sw[data-ent="atjd"]{
  opacity:1; background: var(--yellow); color: var(--ink); border-color: var(--yellow);
}
.trail[data-active="zm"] .sw[data-ent="zm"]{
  opacity:1; background: var(--cyan); color: var(--ink); border-color: var(--cyan);
}
/* neaktívna entita zostáva zreteľne klikateľná */
.trail[data-active="atjd"] .sw[data-ent="zm"]:hover{ background: rgba(63,224,207,0.18); color: var(--cyan); border-color: var(--cyan); opacity:1; }
.trail[data-active="zm"] .sw[data-ent="atjd"]:hover{ background: rgba(242,234,58,0.18); color: var(--yellow); border-color: var(--yellow); opacity:1; }

@media (max-width: 560px){
  .trail .wrap{ font-size:11.5px; gap:8px; }
  .trail .sw{ padding:4px 10px; }
}

/* ---------- SUBNAV: podnavigácia zložky ---------- */
.subnav{
  background: var(--paper-dim);
  border-bottom: 1.5px solid var(--ink);
}
.subnav .wrap{
  display:flex; align-items:center; gap: clamp(12px, 2.4vw, 26px);
  flex-wrap:wrap; padding-top:11px; padding-bottom:11px;
}
.subnav a{
  text-decoration:none; font-size:12.5px; text-transform:uppercase;
  letter-spacing:0.06em; padding:4px 0;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.subnav a:hover, .subnav a.active{ border-color: var(--ink); }
.subnav .subnav-label{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:12.5px; letter-spacing:0.06em; color:var(--muted);
  padding-right:6px; border-right:1px solid var(--line);
}
@media (max-width: 640px){
  .subnav .subnav-label{ border-right:none; width:100%; padding-right:0; }
}

/* ---------- hero band (per page) ---------- */
.hero{
  padding: clamp(64px, 12vw, 120px) 0 clamp(48px, 8vw, 84px);
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform:uppercase;
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 22px; background: rgba(250,249,239,0.55);
}
.hero h1{
  font-size: clamp(46px, 9vw, 108px);
}
.hero .lede{
  max-width: 46ch; margin-top: 22px;
  font-size: clamp(15px, 1.6vw, 18px);
}
.hero .lede.wide{ max-width: 60ch; }

/* ---------- chevron divider — signature element ---------- */
.chevrons{
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper);
}
.chevrons .row{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap: 0 18px;
  padding: 10px var(--edge);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 4vw, 40px);
  text-transform: uppercase;
  border-bottom: 1px dashed rgba(250,249,239,0.25);
}
.chevrons .row:last-child{ border-bottom:none; }
.chevrons .row span.arrows{ color: var(--yellow); letter-spacing: -2px; }

/* ---------- section ---------- */
section{ padding: clamp(56px, 8vw, 96px) 0; }
.section-head{ max-width: 60ch; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head .kicker{
  display:block; font-size: 12.5px; letter-spacing: 0.16em; text-transform:uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.section-head h2{ font-size: clamp(30px, 5vw, 54px); }
.section-head p{ margin-top: 14px; color: var(--muted); max-width: 56ch; }

/* ---------- cards / grid ---------- */
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
@media (max-width: 900px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .grid-4{ grid-template-columns: 1fr; }
}

.icard{
  border: 1.5px solid var(--ink); padding: 26px 22px; background: var(--paper-dim);
  border-radius: 2px;
}
.icard svg{ width:44px; height:44px; margin-bottom: 18px; }
.icard h3{ font-size: 19px; margin-bottom: 8px; }
.icard p{ color: var(--muted); font-size: 14px; margin:0; }

/* karta ako odkaz (napr. vstup do zložky) */
.linkcard{
  display:flex; flex-direction:column; gap:10px;
  border:1.5px solid var(--ink); background: var(--paper-dim);
  padding: 28px 24px; text-decoration:none;
  transition: transform .12s ease, background .12s ease;
}
.linkcard:hover{ transform: translateY(-3px); background: var(--paper); }
.linkcard h3{ font-size: 22px; }
.linkcard p{ margin:0; color: var(--muted); font-size:14.5px; }
.linkcard .go{
  margin-top:auto; padding-top:12px;
  font-family: var(--display); font-weight:700; text-transform:uppercase;
  font-size:13px; letter-spacing:0.05em;
}

.poster-card{
  border: 1.5px solid var(--ink); background: var(--paper-dim);
  display:flex; flex-direction:column; overflow:hidden;
}
.poster-card .img-wrap{ aspect-ratio: 4/5; overflow:hidden; border-bottom: 1.5px solid var(--ink); background:#ddd; }
.poster-card .img-wrap img{ width:100%; height:100%; object-fit:cover; }
.poster-card .body{ padding: 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.poster-card h3{ font-size: 26px; }
.poster-card .meta{ font-size: 13px; letter-spacing:0.04em; color:var(--muted); }
.poster-card p.desc{ font-size: 14px; color: var(--ink); margin:0; }
.poster-card .tag{
  align-self:flex-start; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em;
  border:1.5px solid var(--ink); padding:3px 10px; border-radius:999px; margin-bottom:4px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--mono); font-weight:700; font-size:13.5px;
  text-transform:uppercase; letter-spacing:0.06em;
  padding: 13px 22px; border: 1.5px solid var(--ink);
  text-decoration:none; background: var(--ink); color: var(--paper);
  transition: transform .12s ease;
  cursor:pointer;
}
.btn:hover{ transform: translateY(-2px); }
.btn.ghost{ background:transparent; color: var(--ink); }
.btn.on-dark{ background: var(--accent); color: var(--ink); border-color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band h2{ font-size: clamp(28px, 5vw, 48px); max-width: 20ch; margin:0 auto 18px; }
.cta-band p{ color: var(--muted); max-width: 50ch; margin: 0 auto 28px; }

/* ---------- footer ---------- */
footer{ border-top: 1.5px solid var(--ink); padding: 40px 0 28px; }
footer .wrap{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
footer .fbrand{ display:flex; align-items:center; gap:10px; }
footer .fbrand img{ height:30px; }
footer .fmeta{ font-size:12.5px; color: var(--muted); }
footer .fnav{ display:flex; gap:18px; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
footer .fnav a{ text-decoration:none; font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; }

/* ---------- misc page bits ---------- */
.two-col{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px,6vw,80px); align-items:start; }
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; } }

.value-list{ list-style:none; margin:0; padding:0; }
.value-list li{
  display:flex; gap:18px; padding: 18px 0; border-bottom: 1px solid var(--line);
}
.value-list li:first-child{ border-top: 1px solid var(--line); }
.value-list .n{ font-family: var(--display); font-size: 22px; color: var(--muted); min-width: 2ch; }
.value-list h3{ font-size: 18px; margin-bottom:4px; }
.value-list p{ margin:0; color: var(--muted); font-size:14px; }

.quote-block{
  border-left: 4px solid var(--ink); padding-left: 20px; font-size: clamp(17px,2vw,21px);
}
.quote-block b{ background: var(--accent); padding: 0 4px; }

.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.badge{ border:1.5px solid var(--ink); border-radius:999px; padding:5px 13px; font-size:12px; text-transform:uppercase; letter-spacing:0.05em; }

.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-item{ padding: 22px 0; border-top: 1px solid var(--line); }
.contact-item:last-child{ border-bottom: 1px solid var(--line); }
.contact-item .label{ font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); display:block; margin-bottom:6px; }
.contact-item .value{ font-family: var(--display); font-size: 22px; text-transform:none; display:block; }
/* viac osôb v jednej položke — každá na vlastnom riadku, zarovnané pod sebou */
.contact-item .value + .value{ margin-top: 16px; }
.contact-item .value .role{
  display:block; font-family: var(--mono); font-size:12px; font-weight:400;
  text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); margin-top:5px;
}

.placeholder-note{
  font-size:12.5px; color: var(--muted); border:1px dashed var(--line); padding:10px 14px; margin-top:10px;
}

.map-box{
  border:1.5px solid var(--ink); aspect-ratio: 16/9; overflow:hidden;
}
.map-box iframe{ width:100%; height:100%; border:0; }

/* ---------- kalendár podujatí ---------- */
.cal-widget{
  border: 1.5px solid var(--ink); background: var(--paper-dim);
  padding: clamp(20px,4vw,34px); max-width: 480px;
}
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px; }
.cal-head .cal-title{ font-family: var(--display); font-weight:700; font-size: clamp(20px,3vw,26px); text-transform:uppercase; }
.cal-nav-btn{
  width: 36px; height: 36px; border: 1.5px solid var(--ink); background: transparent;
  font-family: var(--display); font-weight:700; font-size: 16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color: var(--ink);
  transition: background .12s ease, color .12s ease;
}
.cal-nav-btn:hover{ background: var(--ink); color: var(--paper); }
.cal-dow-row, .cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-dow-row{ margin-bottom: 6px; }
.cal-dow{ text-align:center; font-size: 11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--muted); }
.cal-day{
  aspect-ratio: 1; display:flex; align-items:center; justify-content:center;
  font-size: 13.5px; border: 1px solid var(--line); position:relative;
}
.cal-day.empty{ border-color: transparent; }
.cal-day.has-event{
  background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight:700; cursor:default;
}
.cal-day.has-event::after{
  content: attr(data-title);
  position:absolute; bottom: calc(100% + 6px); left:50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); font-size: 11.5px; padding: 5px 9px;
  white-space: nowrap; opacity:0; pointer-events:none; transition: opacity .12s ease;
  border: 1px solid var(--paper);
}
.cal-day.has-event:hover::after{ opacity:1; }
.cal-legend{ display:flex; align-items:center; gap:9px; margin-top: 18px; font-size: 12.5px; color: var(--muted); }
.cal-legend .dot{ width:13px; height:13px; background: var(--ink); display:inline-block; }

/* ---------- zoznam členov ---------- */
.member-list{ list-style:none; margin:0; padding:0; }
.member-list li{
  display:flex; align-items:flex-start; gap:26px;
  padding: 28px 0; border-bottom: 1px solid var(--line);
}
.member-list li:first-child{ border-top: 1px solid var(--line); }
.member-photo{
  flex:0 0 auto; width:112px; height:112px;
  border:1.5px solid var(--ink); overflow:hidden;
  background: linear-gradient(135deg, var(--yellow), var(--green) 55%, var(--cyan));
  display:flex; align-items:center; justify-content:center;
}
.member-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.member-photo .initials{
  font-family: var(--display); font-size:36px; color:var(--ink); letter-spacing:0.02em;
}
.member-info{ flex:1; min-width:0; }
.member-info h3{ font-size:23px; margin-bottom:5px; }
.member-info .role{
  font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:11px;
}
.member-info p{ margin:0; font-size:15px; }
@media (max-width: 560px){
  .member-list li{ gap:16px; padding:22px 0; }
  .member-photo{ width:78px; height:78px; }
  .member-photo .initials{ font-size:26px; }
  .member-info h3{ font-size:20px; }
}

/* ========================================================
   3) VETVA ZLOŽKY — ZDRUŽENIE MASÉROV
   Aktivuje sa cez <body class="zm">.
   Mení sa LEN akcentová farba a dominancia gradientu.
   Typografia, mriežka, tlačidlá a pätička ostávajú rovnaké.
   ======================================================== */
body.zm{ --accent: var(--cyan); }

body.zm .grain::before{
  background:
    conic-gradient(from 320deg at 26% 16%, var(--cyan), #5fe6d8 30%, #9aeeb0 66%, var(--green) 80%, var(--cyan) 100%);
}

body.zm .member-photo{
  background: linear-gradient(135deg, var(--cyan), #6fe9dd 55%, var(--green));
}

body.zm .hero .eyebrow{ background: rgba(250,249,239,0.7); }

/* ========================================================
   4) NOVÉ KOMPONENTY
   ======================================================== */

/* --- štítok stavu / príslušnosti (napr. "V PRÍPRAVE", "ZDRUŽENIE MASÉROV") --- */
.tag{
  display:inline-block; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em;
  border:1.5px solid var(--ink); padding:3px 10px; border-radius:999px;
  font-family:var(--display); font-weight:700;
}
.tag.filled{ background: var(--accent); }
.tag.unit{ background: var(--cyan); }
.tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }

/* --- projektová karta so stavom --- */
.proj-card{
  border:1.5px solid var(--ink); background: var(--paper-dim);
  padding: 24px 22px; display:flex; flex-direction:column; gap:10px;
}
.proj-card h3{ font-size:21px; }
.proj-card p{ margin:0; color:var(--muted); font-size:14.5px; }

/* --- pás s číslami (dôkaz) --- */
.stat-row{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  border:1.5px solid var(--ink); background: var(--paper-dim);
}
.stat-row .stat{ padding:26px 20px; border-right:1.5px solid var(--ink); }
.stat-row .stat:last-child{ border-right:none; }
.stat-row .num{
  font-family:var(--display); font-weight:700; font-size:clamp(30px,5vw,46px); line-height:1;
  display:block; margin-bottom:8px;
}
.stat-row .lbl{ font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
@media (max-width: 860px){
  .stat-row{ grid-template-columns: repeat(2,1fr); }
  .stat-row .stat{ border-bottom:1.5px solid var(--ink); }
  .stat-row .stat:nth-child(2n){ border-right:none; }
  .stat-row .stat:nth-last-child(-n+2){ border-bottom:none; }
}
@media (max-width: 480px){
  .stat-row{ grid-template-columns: 1fr; }
  .stat-row .stat{ border-right:none; border-bottom:1.5px solid var(--ink); }
  .stat-row .stat:last-child{ border-bottom:none; }
}

/* --- referencie --- */
.quote-card{
  border:1.5px solid var(--ink); background: var(--paper-dim); padding:26px 22px;
  display:flex; flex-direction:column; gap:14px;
}
.quote-card p{ margin:0; font-size:15.5px; }
.quote-card .who{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:13px; letter-spacing:0.05em; margin-top:auto;
}
.quote-card .who span{ display:block; font-family:var(--mono); font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted); font-size:13px; }

/* --- balíčky pre partnerov --- */
.pkg-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; align-items:stretch; }
@media (max-width: 900px){ .pkg-grid{ grid-template-columns:1fr; } }
.pkg{
  border:1.5px solid var(--ink); background: var(--paper-dim);
  padding:28px 24px; display:flex; flex-direction:column; gap:14px;
}
.pkg.featured{ background: var(--accent); }
.pkg h3{ font-size:24px; }
.pkg .price{
  font-family:var(--display); font-weight:700; font-size:26px; line-height:1.1;
}
.pkg .price small{ display:block; font-family:var(--mono); font-weight:400; font-size:12.5px; color:var(--muted); text-transform:none; margin-top:5px; }
.pkg.featured .price small{ color: rgba(11,15,8,0.7); }
.pkg ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.pkg li{ font-size:14.5px; padding-left:20px; position:relative; }
.pkg li::before{ content:"→"; position:absolute; left:0; font-family:var(--display); font-weight:700; }
.pkg .btn{ margin-top:auto; align-self:flex-start; }

/* --- FAQ / námietky --- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); padding: 4px 0; }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 0;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size: clamp(16px,2.2vw,20px); letter-spacing:0.01em;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:24px; line-height:1; flex:0 0 auto; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 18px; color:var(--muted); font-size:15px; max-width:70ch; }

/* --- kroky 1-2-3 --- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset: st; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
.steps .step{ border-top:3px solid var(--ink); padding-top:18px; }
.steps .step .n{
  font-family:var(--display); font-weight:700; font-size:34px; line-height:1; display:block; margin-bottom:10px;
}
.steps .step h3{ font-size:19px; margin-bottom:8px; }
.steps .step p{ margin:0; color:var(--muted); font-size:14.5px; }

/* --- formulár --- */
.form-block{
  border:1.5px solid var(--ink); background:var(--paper-dim); padding: clamp(22px,4vw,34px);
  max-width: 640px;
}
.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.form-row label{
  font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted);
}
.form-row input, .form-row textarea, .form-row select{
  font-family:var(--mono); font-size:15px; color:var(--ink);
  border:1.5px solid var(--ink); background:var(--paper); padding:11px 13px; border-radius:0;
  width:100%;
}
.form-row textarea{ min-height:120px; resize:vertical; }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:3px solid var(--accent); outline-offset:-1px;
}
.form-consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); margin-bottom:20px; }
.form-consent input{ width:auto; margin-top:3px; flex:0 0 auto; }

/* --- video --- */
.video-frame{
  border:1.5px solid var(--ink); aspect-ratio:16/9; overflow:hidden; background:var(--paper-dim);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
}
.video-frame iframe{ width:100%; height:100%; border:0; }
.video-frame .ph{ color:var(--muted); font-size:14px; max-width:44ch; }

/* --- právna poznámka pod hero zložky --- */
.note-legal{
  font-size:13px; color:var(--muted); border-left:3px solid var(--ink);
  padding: 10px 0 10px 16px; max-width:68ch;
}

/* --- logá / mená partnerov --- */
.partner-strip{
  display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center;
}
.partner-strip span{
  border:1.5px solid var(--ink); padding:8px 14px;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:13px; letter-spacing:0.04em; background:var(--paper-dim);
}

/* --- dokumenty na stiahnutie --- */
.doc-list{ list-style:none; margin:0; padding:0; }
.doc-list li{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.doc-list li:first-child{ border-top:1px solid var(--line); }
.doc-list .name{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:16px; }
.doc-list .state{ font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }


/* ---------- ADRESÁR ČLENOV + MAPA ---------- */
.dir-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(26px,4vw,48px); align-items:start; }
@media (max-width: 980px){ .dir-layout{ grid-template-columns:1fr; } }

.map-panel{ position:sticky; top:96px; }
@media (max-width: 980px){ .map-panel{ position:static; } }
.map-svg-box{
  border:1.5px solid var(--ink); background: var(--paper-dim); padding:14px;
}
.map-svg-box svg{ width:100%; height:auto; display:block; }
.map-svg-box .sk-outline{ fill: rgba(11,15,8,0.06); stroke: var(--ink); stroke-width:2.5; stroke-linejoin:round; }
.map-pin{ cursor:pointer; }
.map-pin circle{
  fill: var(--cyan); stroke: var(--ink); stroke-width:4;
  transition: r .12s ease, fill .12s ease;
}
.map-pin text{
  font-family: var(--display); font-weight:700; font-size:20px; fill: var(--ink);
  paint-order: stroke; stroke: var(--paper); stroke-width:6px; stroke-linejoin:round;
}
.map-pin:hover circle, .map-pin.is-on circle{ fill: var(--yellow); }
.map-pin.is-off{ opacity:.22; }
.map-legend{ margin-top:14px; font-size:12.5px; color:var(--muted); display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.map-legend .dot{ width:13px; height:13px; border-radius:999px; background:var(--cyan); border:1.5px solid var(--ink); display:inline-block; }

.filter-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.filter-btn{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:12.5px; letter-spacing:0.05em;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  padding:7px 14px; border-radius:999px; cursor:pointer;
  transition: background .12s ease, color .12s ease;
}
.filter-btn:hover{ background: rgba(11,15,8,0.07); }
.filter-btn.is-on{ background: var(--ink); color: var(--paper); }

.dir-count{ font-size:13px; color:var(--muted); margin-bottom:18px; }

.member-cards{ display:flex; flex-direction:column; gap:18px; }
.mcard{
  border:1.5px solid var(--ink); background:var(--paper-dim);
  display:flex; gap:20px; padding:20px; align-items:flex-start;
  transition: background .12s ease, transform .12s ease;
}
.mcard.is-hi{ background: var(--cyan); transform: translateY(-2px); }
.mcard .ph{
  flex:0 0 auto; width:96px; height:96px; overflow:hidden;
  border:1.5px solid var(--ink);
  background: linear-gradient(135deg, var(--cyan), #6fe9dd 55%, var(--green));
  display:flex; align-items:center; justify-content:center;
}
.mcard .ph img{ width:100%; height:100%; object-fit:cover; }
.mcard .ph span{ font-family:var(--display); font-weight:700; font-size:30px; }
.mcard .info{ flex:1; min-width:0; }
.mcard h3{ font-size:21px; margin-bottom:3px; }
.mcard .where{
  font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}
.mcard .bio{ font-size:14.5px; margin:0 0 12px; }
.mcard .spec{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.mcard .spec span{
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
  border:1.5px solid var(--ink); border-radius:999px; padding:2px 9px; background:var(--paper);
}
.mcard .links{ display:flex; gap:8px; flex-wrap:wrap; }
.mcard .links a{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:11.5px; letter-spacing:0.05em; text-decoration:none;
  border:1.5px solid var(--ink); padding:6px 12px; background:var(--paper);
  transition: background .12s ease, color .12s ease;
}
.mcard .links a:hover{ background:var(--ink); color:var(--paper); }
.mcard .links a.primary{ background:var(--ink); color:var(--paper); }
.mcard .links a.primary:hover{ background:var(--yellow); color:var(--ink); }
@media (max-width: 560px){
  .mcard{ flex-direction:column; gap:14px; }
  .mcard .ph{ width:72px; height:72px; }
  .mcard .ph span{ font-size:24px; }
}

.dir-empty{ border:1px dashed var(--line); padding:22px; color:var(--muted); font-size:14px; }


/* ---------- FOTOGALÉRIA AKCIE ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery a{
  display:block; overflow:hidden; border:1.5px solid var(--ink);
  background:var(--paper-dim); aspect-ratio:1; position:relative;
}
/* široká dlaždica: šírka 2 stĺpce + medzera, výška = 1 riadok → pomer ≈ 2,06 */
.gallery a.wide{ grid-column:span 2; aspect-ratio:2.06/1; }
.gallery img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease; }
.gallery a:hover img{ transform:scale(1.05); }
/* pri niektorých fotkách je dôležitý horný okraj, nie stred */
.gallery img.top{ object-position:top; }
.gallery-note{ font-size:13px; color:var(--muted); margin-top:14px; }
@media (max-width:900px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .gallery a.wide{ grid-column:span 2; aspect-ratio:3/2; }
}


/* ---------- VEĽKÁ FOTKA S POPISOM ---------- */
.lead-photo{ border:1.5px solid var(--ink); background:var(--paper-dim); overflow:hidden; }
.lead-photo img{ width:100%; height:auto; display:block; }
.lead-photo figcaption{
  border-top:1.5px solid var(--ink); padding:14px 18px;
  font-size:13.5px; color:var(--muted);
}
.lead-photo figcaption b{ color:var(--ink); }


/* ========================================================
   COOKIE LIŠTA
   Súvisiaci skript: cookies.js
   Obe tlačidlá majú zámerne rovnakú veľkosť aj váhu —
   odmietnuť musí byť rovnako ľahké ako súhlasiť.
   ======================================================== */
.cookie-bar{
  position: fixed; left:0; right:0; bottom:0; z-index: 200;
  background: var(--ink); color: var(--paper);
  border-top: 1.5px solid var(--ink);
  box-shadow: 0 -10px 30px rgba(11,15,8,0.18);
}
.cookie-bar[hidden]{ display:none !important; }
.cookie-inner{
  max-width: var(--container); margin:0 auto;
  padding: 18px var(--edge);
  display:flex; align-items:center; gap: clamp(16px,3vw,36px); flex-wrap:wrap;
}
.cookie-text{ flex:1 1 420px; font-size:13.5px; line-height:1.55; }
.cookie-text b{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; }
.cookie-text a{ color: var(--cyan); text-underline-offset:3px; }
.cookie-btns{ display:flex; gap:10px; flex:0 0 auto; }

/* tlačidlá na tmavom páse — rovnaká veľkosť, líši sa len farba */
.cookie-bar .btn{
  background: var(--paper); color: var(--ink); border-color: var(--paper);
  padding: 11px 20px; font-size:13px; white-space:nowrap;
}
.cookie-bar .btn.ghost{
  background: transparent; color: var(--paper); border-color: var(--paper);
}
.cookie-bar .btn:hover{ transform: translateY(-2px); }

@media (max-width: 640px){
  .cookie-inner{ padding:16px var(--edge); gap:14px; }
  .cookie-text{ flex:1 1 100%; font-size:13px; }
  .cookie-btns{ width:100%; }
  .cookie-bar .btn{ flex:1 1 0; justify-content:center; padding:12px 14px; }
}