/* ===========================================================================
   Zberateľské záložky 2026 — kampaňová grafika.

   Obal stránky (hlavička, pätička, tlačidlá, modály, formuláre, hlášky) je
   Martinus styleguide v2, ktorý sa ťahá z `mrtns.sk` — adresy sú v
   `config/styleguide.php`. Tento súbor dopĺňa už len to, na čo dizajnový
   systém komponentu nemá: album, triptychy, vejár záložiek, golden ticket,
   konfety a drobnosti okolo navigácie.

   Nič zo styleguidu sa tu neprepisuje. Vlastné triedy majú predponu `zb-`
   alebo sú kampaňové názvy (`tile`, `triptych`, `golden`, `atile`), aby bolo
   na prvý pohľad vidieť, čo je naše a čo dizajnový systém.

   Celá stránka ide s témou. Kde má styleguide token, berie sa token — vlastná
   `--zb-*` hodnota je len tam, kde token nie je, a tmavý variant má vždy
   pri sebe (blok `html[data-theme="dark"]` nižšie). Farba napísaná natvrdo
   priamo do pravidla patrí do palety vždy, keď ju téma môže zmeniť.

   Výnimka je len jedna a je jej v súbore vidieť: biele závoje na hlavičke
   a pätičke. Tie sú tmavé v oboch témach, takže `rgba(255,255,255,…)` na
   nich nie je prehliadnutá farba, ale miestna hodnota, ktorú nemá čo
   prepínať. Každá taká má pri sebe vetu, prečo tam je.
   =========================================================================== */

/* -------------------- KAMPAŇOVÁ PALETA --------------------
   Kampaň ide s témou. Neutrálne farby, červená aj broskyňová sa tu preto
   nedefinujú — berú sa priamo z `--ms-*` tokenov styleguidu. Boli to aj tak
   len ich svetlé hodnoty odpísané do vlastných názvov (`#f7efeb` je
   `--ms-surface-secondary-dark`, `#d22121` je `--ms-interactive-primary`,
   `#625d58` je `--ms-text-secondary`…), takže tmavý variant prišiel s nimi.

   Zostáva to, na čo styleguide token nemá: zelený signál „mám ju“, zlatá
   golden ticketu, matné sklo nad nevydanou záložkou, konfety, tiene a miery.

   Čo je pevné, je pevné zámerne: biely text na červenej výplni ostáva biely
   v oboch témach, lebo sa mení podklad pod ním, nie text na ňom. */
:root {
  /* Text a ikony na farebnej výplni — odznak účtu, fajka nad získanou
     záložkou, štítok s počtom kusov, zlaté tlačidlo. */
  --zb-on-accent: #fff;
  --zb-on-gold:   #16130f;

  /* Zelená = „mám ju“. Jeden a ten istý signál v celej zbierke.
     Zrkadlí `--ms-state-success`; vlastný názov má preto, že žiary okolo
     dlaždíc potrebujú aj rozložený rgb trojkomponent, a ten styleguide
     nepublikuje. Keď sa styleguide preladí, preladiť obe hodnoty naraz. */
  --zb-green:      #33ab4e;
  --zb-green-rgb:  51, 171, 78;
  /* Číslo v ukazovateli postupu. Na svetlom o odtieň tmavšie než žiara —
     je to 28px text, nie plocha. */
  --zb-green-text: #2f9e49;

  /* Značková červená pre výplne, ktoré ležia na hlavičke alebo pod logom:
     hlavička záložky vo vejári a odznak s iniciálkami účtu. Preto vlastný
     token a nie `--ms-interactive-primary` — ten sa v tmavej téme rozsvecuje
     na `#ff6b6b`, aby text a odkazy na tmavom podklade stránky držali
     kontrast. Tieto dve plochy podklad stránky nevidia (hlavička je tmavá
     v oboch témach, vejár má za sebou vlastnú ilustráciu), takže by sa im
     odtieň značky menil bez dôvodu.

     Rovnakú červenú berie aj textové tlačidlo `.zb-linkbtn` — vrátane
     stavu `:hover`, aby sa dvojica držala pokope. Hover zosvetľuje
     (`--ms-interactive-primary-hover` zo svetlej témy), nie stmavuje: na
     tmavom podklade by stmavnutie odkaz pri prejdení myšou potlačilo.

     Rubrika `.eyebrow` naopak zostáva na styleguide tokene: je to nadpisový
     text na podklade stránky a rozsvietenú červenú v tmavej téme potrebuje. */
  --zb-red:       #d22121;
  --zb-red-hover: #eb2525;

  /* Zlatá patrí golden ticketu a nikomu inému. */
  --zb-gold:       #c9a227;
  --zb-gold-hover: #dcb63a;
  --zb-gold-rgb:   201, 162, 39;

  /* Golden ticket je kontrastný blok: obracia sa proti stránke, takže
     v svetlej téme je tmavý a v tmavej svetlý (preklopenie je nižšie).
     Preto má vlastné pomenované farby a nie `--ms-*` tokeny — tie idú
     so stránkou, on ide proti nej. */
  --zb-golden-bg:         #16130f;
  --zb-golden-plate:      #221d16; /* podklad dlaždice, kým sa obrázok načíta */
  --zb-golden-text:       #f5f2ee;
  --zb-golden-text-soft:  rgba(245, 242, 238, 0.7);
  --zb-golden-text-faint: rgba(245, 242, 238, 0.55);
  --zb-golden-accent:     #c9a227; /* rubrika „Unikát“ */
  --zb-golden-cast:       rgba(0, 0, 0, 0.5); /* tieň pod dlaždicou */
  /* Rozmazané gule za dlaždicou — dva odtiene, aby sa žiara nevrstvila
     z jedného. Sú to rgb trojkomponenty: krytie si nesie každá guľa sama. */
  --zb-orb:     201, 162, 39;
  --zb-orb-alt: 245, 222, 140;

  /* Tieň pod záložkami vo vejári. Nesie ho `drop-shadow`, takže kopíruje
     obrys karty, nie jej rám. */
  --zb-fan-cast: rgba(0, 0, 0, 0.22);

  /* Matné sklo nad záložkou, ktorá ešte nie je v obehu. `chip` nesie aj
     katalógové číslo na dlaždici — obidva štítky ležia na ilustrácii, takže
     majú byť len tak nepriehľadné, aby sa text dal prečítať.

     Písmo na štítku nejde cez `--ms-text-*`: štítok nestojí na podklade
     stránky, ale na ilustrácii, a tá je v oboch témach tá istá. Preto vlastný
     token — čierna na 80 %, na tmavej téme obrátená, lebo tam je podklad
     štítku tmavý. */
  --zb-frost:      rgba(251, 247, 245, 0.42);
  --zb-frost-chip: rgba(255, 255, 255, 0.7);
  --zb-frost-text: rgba(0, 0, 0, 0.8);

  /* Konfety. JS si zoznam prečíta až pri výbuchu, takže prepnutie vzhľadu
     platí hneď a bez reloadu; rozdeľuje sa čiarkou, takže tu smú byť len
     hodnoty, ktoré žiadnu neobsahujú (hex áno, `rgba()` nie). */
  --zb-confetti-ok:   #33ab4e, #5cc776, #1f8f42, #8fdc9f, #d22121, #e8543f;
  --zb-confetti-gold: #c9a227, #f5de8c, #e0b93a, #fff2c4, #d22121, #e8543f;

  /* Styleguide v2 polomery ani tiene ako tokeny nepublikuje. */
  --zb-radius-sm:     0.2rem;
  --zb-radius:        0.25rem;
  --zb-radius-lg:     0.3rem;
  --zb-radius-pill:   50rem;
  --zb-radius-circle: 999rem;

  --zb-shadow-1: 0 2px 4px 0 rgba(0, 0, 0, 0.07);
  --zb-shadow-2: 0 3px 8px 0 rgba(0, 0, 0, 0.11);
  --zb-shadow-3: 0 4px 13px 0 rgba(0, 0, 0, 0.15);

  --zb-ease: 0.2s ease 0s;

  /* Výška lepiacej hlavičky. Styleguide ju ako token nepublikuje, drží ju
     `.header__bar { min-height: 65px }` v `main.css`; `header--simple` sa
     od 768 px lepí celá (`.header.header--simple { top: 0 }`), takže pod ňou
     ostane zakrytých presne toľko. Čokoľvek, čo sa má lepiť pod hlavičkou
     alebo uhnúť kotve, počíta odtiaľto — aby to bolo na jednom mieste. */
  --zb-header-h: 65px;
}

/* -------------------- TMAVÁ TÉMA --------------------
   Selektor je atribút, nie `prefers-color-scheme`: blokujúci úryvok v `<head>`
   zapisuje na `<html>` vždy už vyriešené `light`/`dark`, takže voľba „podľa
   systému“ je v tej chvíli preložená. Media query by si s ňou protirečila. */
html[data-theme="dark"] {
  --zb-green:      #4ecb6f;
  --zb-green-rgb:  78, 203, 111;
  --zb-green-text: #4ecb6f;

  /* Golden ticket sa preklápa: na tmavej stránke je to svetlý blok. */
  --zb-golden-bg:         #f7f2e6;
  --zb-golden-plate:      #efe6d2;
  --zb-golden-text:       #16130f;
  --zb-golden-text-soft:  rgba(22, 19, 15, 0.72);
  --zb-golden-text-faint: rgba(22, 19, 15, 0.55);
  /* Rubrika je text, a `--zb-gold` má na kréme kontrast 2,2:1. */
  --zb-golden-accent:     #8a6a14;
  --zb-golden-cast:       rgba(22, 19, 15, 0.22);
  /* Svetlejšia z dvoch gulí by na kréme zmizla, tak ide opačným smerom. */
  --zb-orb-alt: 176, 137, 26;

  --zb-fan-cast: rgba(0, 0, 0, 0.5);

  --zb-frost:      rgba(13, 13, 12, 0.5);
  --zb-frost-chip: rgba(37, 35, 33, 0.7);
  --zb-frost-text: rgba(255, 255, 255, 0.8);

  /* Tmavé odtiene konfiet by na tmavom zanikli, svetlé pribudli. Zlaté
     naopak stmavnú — vybuchujú nad golden ticketom, ktorý je tu svetlý. */
  --zb-confetti-ok:   #4ecb6f, #7fdc96, #2f9e49, #b6efc6, #ff6b6b, #ff9478;
  --zb-confetti-gold: #c9a227, #a8811a, #e0b93a, #6d5410, #d22121, #b83a2a;

  /* Čierny tieň na tmavom nie je vidieť — hranu dlaždice drží vlások. */
  --zb-shadow-1: 0 0 0 1px hsla(0, 0%, 100%, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  --zb-shadow-2: 0 0 0 1px hsla(0, 0%, 100%, 0.08), 0 3px 8px 0 rgba(0, 0, 0, 0.5);
  --zb-shadow-3: 0 0 0 1px hsla(0, 0%, 100%, 0.1), 0 4px 16px 0 rgba(0, 0, 0, 0.6);
}

/* Golden ticket je v tmavej téme svetlý ostrovček, takže komponenty v ňom —
   tlačidlo „Mám“ a počítadlo kusov — potrebujú svetlé tokeny. Bez toho by na
   kréme sedelo tmavosivé pole s bielym textom.

   Zoznam je len to, čo komponenty vnútri naozaj čítajú, nie prepis styleguidu.
   `--ms-button-primary-*` tu zámerne nie sú: tmavá téma ich nemení, červené
   tlačidlo je `#d22121` v oboch. */
html[data-theme="dark"] .golden {
  color-scheme: light;

  --ms-text-primary:        #16130f;
  --ms-text-secondary:      rgba(22, 19, 15, 0.72);
  --ms-interactive-primary: #d22121;
  --ms-form-bg:             #fafafa;
  --ms-form-border:         #bcbcba;
  --ms-form-text:           #000;
  --ms-border-subtle:       rgba(0, 0, 0, 0.05);
  --ms-surface-active:      rgba(0, 0, 0, 0.05);

  /* Zelená „mám ju“ sa vracia na svetlú hodnotu — prstenec aj žiara okolo
     získaného golden ticketu tu ležia na kréme, nie na tmavej stránke. */
  --zb-green:     #33ab4e;
  --zb-green-rgb: 51, 171, 78;

  /* A s ňou tiene: biely vlások pre tmavé pozadie by na kréme svietil. */
  --zb-shadow-1: 0 2px 4px 0 rgba(0, 0, 0, 0.07);
  --zb-shadow-2: 0 3px 8px 0 rgba(0, 0, 0, 0.11);
  --zb-shadow-3: 0 4px 13px 0 rgba(0, 0, 0, 0.15);
}

/* -------------------- OBAL OBSAHU --------------------
   Farby už nenesie: podklad aj text dáva `body` zo styleguidu a kampaň ide
   s témou. Zostáva len to, čo drží rytmus stránky. */
.zb-paper {
  /* `flow-root`, nie `block`: horný odstup golden ticketu sa inak vysunie
     mimo obal (marginy sa cez prázdny obal zlievajú) a spodné odsadenie
     by sa počítalo od zlého miesta. */
  display: flow-root;
  /* Medzera pred pätičkou patrí stránke, nie poslednému bloku na nej.
     Kým ju niesol golden ticket, zmizla spolu s ním — a špeciálky, ktoré
     zostali posledné, dosadli priamo na dúhový pásik. Takto je rovnaká na
     každej kampaňovej stránke a nezávisí od toho, čo sa práve vykreslilo.

     Dúhový pásik do nej nezasahuje — kreslí sa do vlastných 60 px (`.footer`
     má `margin-top: 60px` a `::after` s `top: -60px`), ktoré nasledujú až
     za plagátom. */
  padding-bottom: clamp(72px, 10vw, 120px);
}

/* Pätička dosadá priamo na posledný blok — na prehľade záložiek vtedy, keď je
   v obehu golden ticket. Ten ide od kraja po kraj a má vlastnú farbu, takže
   medzera pod ním by bola pás podkladu stránky medzi dvoma farebnými plochami.

   Dúhový pásik nad pätičkou je `.footer::after`: absolútne pozicovaný pruh
   vysoký 60 px, ktorý presne vyplní `margin-top` pätičky. Kreslí ho
   `background-image` s priehľadnými medzerami medzi knihami a vlastnú farbu
   pozadia nemá, takže stačí ju doplniť — knihy tým dostanú za chrbát podklad
   golden ticketu a blok s pásikom splynú do jedného celku.

   Trieda je na `<body>`, lebo obsah a pätička sú súrodenci; `.zb-paper` sa
   na pätičku nedostane. */
/* Sneak peek: pod hero nenasleduje žiadna sekcia, tak nech je pod ním poriadne
   miesto — vejár sa doň stráca a stránka nekončí hneď za posledným riadkom. */
.zb-paper--peek { padding-bottom: clamp(160px, 22vw, 260px); }

.zb-flush-footer .zb-paper { padding-bottom: 0; }
.zb-flush-footer .footer::after { background-color: var(--zb-golden-bg); }

/* -------------------- ROZLOŽENIE --------------------
   `wrapper-main` zo styleguidu (1280 px) nesie celú šírku. Album a „Ako
   zbierať“ potrebujú užší stĺpec: šírka je zvolená podľa albumu tak, aby do
   riadka sadli práve tri triptychy — pri 240px stĺpci a 32px medzere potrebuje
   štvrtý 1056 px obsahu, sem sa ich zmestí 912. */
.zb-narrow { max-width: 1000px; }

/* Kampaňový pás. Styleguide `.section` dáva len 1,25 rem zhora; plagát stojí
   na väčšom rytme, tak má vlastnú triedu — `.section` sa tým neprepisuje. */
.zb-band { padding-top: clamp(40px, 8vw, 64px); }
.zb-band--specials { padding-top: clamp(48px, 10vw, 88px); }

/* -------------------- HLAVIČKA A PÄTIČKA --------------------
   Tmavý pás aj dúhový okraj kreslí `header-simple` zo styleguidu. Tu je len
   to, čo do jeho slotu pre obsah vkladáme my. */
.zb-nav { gap: 32px; margin-left: 20px; }
.zb-nav a { font-size: 14px; font-weight: var(--fw-semibold); white-space: nowrap; }

.zb-account { gap: 12px; margin-left: auto; }
.zb-account__link {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px; border-radius: var(--zb-radius-circle);
  background: rgba(255, 255, 255, 0.1);
  color: var(--zb-on-accent); font-size: 13px; font-weight: var(--fw-semibold);
  white-space: nowrap; text-decoration: none;
}
.zb-account__link:hover { background: rgba(255, 255, 255, 0.18); color: var(--zb-on-accent); }
.zb-account__logout {
  display: flex; align-items: center; flex: 0 0 auto;
  font-size: 13px; font-weight: var(--fw-semibold); white-space: nowrap;
}
.zb-avatar {
  position: relative; overflow: hidden; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: var(--zb-radius-circle);
  background: var(--zb-red); color: var(--zb-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: var(--fw-bold); line-height: 1;
  /* Iniciály môžu byť aj s diakritikou (Ľ, Š) — nech nepretečú z kruhu. */
  text-transform: uppercase;
}
.zb-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.zb-burger-bar { gap: 10px; }

/* Rozbalené menu na mobile. Otvára ho modul Toggle zo styleguidu, ktorý na
   cieľ dáva triedu `is-open` — zavreté je predvolený stav, nie `[hidden]`. */
.zb-menu {
  display: none;
  flex-direction: column;
  padding-bottom: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.zb-menu.is-open { display: flex; }
.zb-menu a {
  padding: 14px 0; font-size: 16px; font-weight: var(--fw-semibold);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.zb-menu a:last-of-type { border-bottom: 0; }

.zb-footer {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 24px 40px;
}
.zb-footer__brand { display: flex; align-items: center; gap: 18px; }
.zb-footer__brand img { height: 30px; display: block; width: auto; }
.zb-footer__side { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.zb-social { display: flex; align-items: center; gap: 14px; }
.zb-social a {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--zb-radius-circle); background: rgba(255, 255, 255, 0.1);
  color: var(--ms-footer-link); transition: background var(--zb-ease);
}
.zb-social a:hover { background: var(--ms-interactive-primary); color: var(--zb-on-accent); }

/* Prihlásenie v pätičke sneak peeku. Zámerne nenápadné: pred spustením
   kampane je to jediná cesta dnu, ale zákazníkovi nemá nič sľubovať. Farbu
   berie z pätičky, takže je tichšie než sociálne ikony vedľa. */
.zb-footer__quiet {
  font-size: 13px; color: var(--ms-footer-link); opacity: 0.65;
  transition: opacity var(--zb-ease);
}
.zb-footer__quiet:hover { opacity: 1; color: var(--ms-footer-link); }

@media (max-width: 767px) {
  .zb-footer { justify-content: center; text-align: center; }
  .zb-footer__brand { flex-direction: column; gap: 12px; }
}

/* -------------------- ANIMÁCIE -------------------- */
@keyframes msFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes msConf {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.4); }
  12%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
}
@keyframes msFlash { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes msOrb {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(var(--x1), var(--y1)) scale(1.14); }
  66%  { transform: translate(var(--x2), var(--y2)) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------- ZLATÉ TLAČIDLO --------------------
   Golden ticket mal v dizajne vlastné tlačidlo, nie styleguide variantu: bez
   spodného pásu aj tieňa a s výraznejším rezom. Preto `zb-btn-gold` a nie
   `btn--gold` — styleguide je uzavretý systém a vymyslený modifikátor by sa
   vykreslil ako tlačidlo bez štýlu. */
.btn.zb-btn-gold {
  background: var(--zb-gold);
  color: var(--zb-on-gold);
  font-weight: var(--fw-bold);
  box-shadow: none;
}
.btn.zb-btn-gold::after { content: none; }
.btn.zb-btn-gold:hover { background: var(--zb-gold-hover); color: var(--zb-on-gold); }

/* Textové tlačidlo, ktoré vyzerá ako odkaz — otvára modál (bio ilustrátora,
   „Ako ju získať“ pri špeciálkach). Je to <button>, nie <a>, lebo nikam
   nenaviguje; `btn--link` zo styleguidu je plné modré tlačidlo, nie toto. */
.zb-linkbtn {
  font: inherit; font-size: 13px; font-weight: var(--fw-semibold);
  color: var(--zb-red); text-decoration: underline; text-underline-offset: 2px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.zb-linkbtn:hover { color: var(--zb-red-hover); }
.zb-linkbtn:focus-visible {
  outline: 2px solid var(--ms-interactive-primary); outline-offset: 2px; border-radius: var(--zb-radius-sm);
}

/* Dlhší variant textu v tlačidle. Na úzkej obrazovke sa skryje, aby sa
   tlačidlá vošli vedľa seba. Je vnorený v jednom spane s krátkym textom,
   takže je to jedna flex položka a medzera pred „a“ patrí do bežného
   toku textu — nie do `gap` medzi položkami. */
@media (max-width: 860px) {
  .zb-btn-long { display: none; }
}

/* -------------------- HERO -------------------- */
.hero { background: var(--ms-surface-secondary-dark); overflow: hidden; }
.hero__grid {
  display: grid; align-items: end;
  grid-template-columns: minmax(min(560px, 100%), 1.15fr) minmax(min(320px, 100%), 1fr);
  gap: clamp(24px, 5vw, 56px);
}
/* Na stránke „Ako zbierať“ nesie `.hero__body` aj wrapper, tak `padding-block`
   — v prehľade záložiek je vnorený vo `wrapper-main hero__grid` a tam sa nič
   nemení, vodorovný padding mal aj tak nulový. */
.hero__body {
  padding-block: clamp(40px, 8vw, 72px) clamp(24px, 5vw, 72px);
  min-width: 0;
}
/* Rubrika nad nadpisom: „Martinus uvádza“, meno zberateľa v albume,
   „Unikát“ v golden sekcii. Škáluje s nadpisom, pod ktorým stojí. */
.eyebrow {
  font-size: clamp(13px, 1.3vw, 15px); font-weight: var(--fw-semibold); letter-spacing: 1px;
  text-transform: uppercase; color: var(--ms-interactive-primary);
}
.hero__title {
  font-size: clamp(30px, 7vw, 58px);
  line-height: 1.04; font-weight: var(--fw-bold); letter-spacing: -1px;
  margin: 6px 0 0;
}
.hero__lead {
  font-size: 18px; line-height: 1.62; color: var(--ms-text-secondary);
  max-width: 44ch; margin: 22px 0 0; text-wrap: pretty;
}
.hero__actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
/* Tlačidlá styleguidu nesú spodný margin pre formuláre; v rade pod textom
   by z neho vznikla diera. */
.hero__actions .btn { margin-bottom: 0; }

/* Vejár záložiek */
.fan { display: flex; justify-content: center; align-items: flex-end; }
.fan__inner { position: relative; width: 100%; max-width: 440px; height: 366px; margin-bottom: -48px; }
.fan__card {
  position: absolute; bottom: 0; left: 50%;
  display: flex; flex-direction: column; width: 74px;
  filter: drop-shadow(0 6px 10px var(--zb-fan-cast));
  transform-origin: 50% 128%;
}
.fan__head {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; background: var(--zb-red); border-radius: 10px 10px 0 0;
}
.fan__head img { width: 64%; display: block; }
.fan__art {
  display: block; width: 100%; aspect-ratio: 952 / 4593;
  object-fit: cover; border-radius: 0 0 10px 10px;
}
@media (max-width: 860px) {
  .fan { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
}

/* Sneak peek — jeden vycentrovaný stĺpec. Vejár stojí pod textom, nie vedľa
   neho: na teaseri nie je čo postaviť do druhého stĺpca. Hero dostane viac
   vzduchu, lebo pod ním už žiadna sekcia nie je a biele pole by inak
   vyzeralo ako chýbajúci obsah. */
.peek { text-align: center; padding-top: clamp(48px, 9vw, 88px); }
.peek .hero__title { margin-top: 0; }
.peek .hero__lead { max-width: 54ch; margin-inline: auto; }
.peek .hero__actions { justify-content: center; }

/* Vejár na sneak peeku — tie isté záložky, len rozostrené. Rozmazanie je
   v CSS a nie v samostatných obrázkoch, aby sa pri výmene ilustrácie nedalo
   zabudnúť prekresliť aj teaser. Tieň pod kartami ustupuje: pod rozostrenou
   záložkou z neho je len špinavá škvrna. */
/* Vejár sadá hlbšie do spodnej hrany hero než na prehľade: tam je hero úvod
   stránky, tu je celá stránka, takže odrezané záložky sú to posledné, čo po
   nej zostane. */
.fan--peek { margin-top: clamp(40px, 6vw, 64px); }
/* Posun nadol nesie `transform`, nie margin: vejár sa má prepadnúť pod hranu
   hero, ale výška stránky ani biela plocha pod ňou sa tým hýbať nemajú. */
.fan--peek .fan__inner { margin-bottom: -104px; transform: translateY(50px); }
/* Len rozostrenie, žiadna priehľadnosť: karty sa vo vejári prekrývajú
   a priesvitná ilustrácia z každého prekryvu spravila tmavší obdĺžnik. */
.fan--peek .fan__card { filter: blur(9px); }

/* Na mobile je vejár na prehľade zbytočný a skrýva sa. Tu je to jediná
   grafika stránky, takže zostáva — len menší a pod textom. */
@media (max-width: 860px) {
  .fan--peek { display: flex; }
  /* Menší vejár znesie menší posun — 50 px by tu odkrojilo polovicu. */
  .fan--peek .fan__inner {
    max-width: 260px; height: 212px; margin-bottom: -56px; transform: translateY(30px);
  }
  .fan--peek .fan__card { width: 44px; filter: blur(6px); }
}

/* -------------------- HLAVIČKY SEKCIÍ -------------------- */
.zb-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin-bottom: 8px;
}
/* Škáluje spolu s hero nadpisom, ktorý má clamp(30px, 7vw, 58px). Fixných
   32px by na mobile znamenalo, že H2 je väčší ako H1 — hero tam spadne na
   svoje minimum 30px, kým sekcia by zostala na 32px.
   Dolná hranica 24px drží na mobile pravidelnú škálu 18 → 24 → 30 (meno
   ilustrátora → nadpis sekcie → hero), aby H2 nesplýval ani s jedným. */
.zb-title {
  font-size: clamp(24px, 4.2vw, 32px);
  font-weight: var(--fw-bold); margin: 0;
}
.zb-lead {
  font-size: 16px; line-height: 1.6; color: var(--ms-text-secondary);
  margin: 0 0 36px; text-wrap: pretty; max-width: 72ch;
}

/* Nadpis + úvodný text + ukazovateľ postupu.
   Na desktope stojí ukazovateľ vpravo vedľa nadpisu a text sa tiahne pod
   nimi; na mobile ide ukazovateľ až pod úvodný text. Poradie riešia
   pomenované oblasti gridu, takže v HTML zostáva čitateľná postupnosť
   nadpis -> text -> ukazovateľ (pre čítačky obrazovky aj bez CSS). */
.zb-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title progress"
    "lead  lead";
  align-items: baseline;
  column-gap: 24px;
}
.zb-intro .zb-title { grid-area: title; }
.zb-intro .zb-lead { grid-area: lead; }
.zb-intro .progress { grid-area: progress; }

@media (max-width: 860px) {
  .zb-intro {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "lead"
      "progress";
  }
  /* Text už nie je posledný pred mriežkou, tak mu stačí menší odstup —
     a odstup od mriežky preberá ukazovateľ, ktorý je teraz posledný. */
  .zb-intro .zb-lead { margin-bottom: 20px; }
  .zb-intro .progress { margin-bottom: 36px; }
}

/* -------------------- UKAZOVATEĽ POSTUPU --------------------
   Nesie samotné číslo ako dominantu, aby sa dalo prečítať na prvý pohľad
   aj vedľa 32px nadpisu sekcie. */
.progress { display: flex; flex-direction: column; gap: 7px; width: 260px; }
.progress__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.progress__count { display: flex; align-items: baseline; gap: 7px; margin: 0; white-space: nowrap; }
.progress__count strong {
  font-size: 28px; line-height: 1; font-weight: var(--fw-bold);
  color: var(--zb-green-text);
  font-variant-numeric: tabular-nums;
}
.progress__total { font-size: 15px; font-weight: var(--fw-semibold); color: var(--ms-text-primary); }
.progress__dupes { font-size: 12px; color: var(--ms-text-tertiary); white-space: nowrap; }

/* Na mobile stojí ukazovateľ na vlastnom riadku, tak nech využije celú šírku. */
@media (max-width: 860px) {
  .progress { width: 100%; }
}
.track {
  height: 10px; border-radius: var(--zb-radius-circle);
  background: var(--ms-border-default); overflow: hidden;
}
.track__bar {
  height: 100%; background: var(--zb-green);
  border-radius: var(--zb-radius-circle); transition: width 0.25s ease-in-out;
}

/* -------------------- NÁHĽAD VLNY --------------------
   Interný nástroj, nie časť zákazníckeho rozhrania. Preto plávajúci panel
   v rohu: v hlavičke sekcie súťažil o miesto s ukazovateľom postupu.
   Renderuje sa len tomu, kto je v zozname adminov. */
.zb-wave {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  /* Dátumov je toľko, koľko je dní, keď sa v obehu niečo mení — pribudnutý
     termín má panel zalomiť, nie rozťahovať cez pol obrazovky. */
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  max-width: 340px;
  padding: 8px 10px 8px 14px;
  background: var(--ms-surface-elevated);
  border: 1px dashed var(--ms-border-strong); border-radius: var(--zb-radius);
  box-shadow: var(--zb-shadow-3);
  /* V nečinnosti tichý, aby bolo vidieť, čo prekrýva. */
  opacity: 0.6;
  transition: opacity var(--zb-ease);
}
.zb-wave:hover,
.zb-wave:focus-within { opacity: 1; }

/* Na úzkej obrazovke zaberá fixný panel skoro celú šírku a prekrýval obsah
   (napr. meno ilustrátorky), tak ide do toku stránky. Musí byť ZA pravidlom
   vyššie — media query nezvyšuje špecificitu, rozhoduje poradie. */
@media (max-width: 860px) {
  .zb-wave {
    position: static;
    margin: 0 auto clamp(24px, 6vw, 40px);
    width: calc(100% - 40px);
    max-width: 1280px;
    opacity: 1;
    box-shadow: none;
  }
}
.zb-wave__label {
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--ms-text-tertiary);
}
.zb-wave a {
  min-width: 26px; height: 24px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--zb-radius-sm); background: var(--ms-surface-secondary-dark);
  color: var(--ms-text-secondary); font-size: 12px; font-weight: var(--fw-semibold);
  text-decoration: none;
}
.zb-wave a:hover { text-decoration: none; }
.zb-wave a.is-active { background: var(--ms-interactive-primary); color: var(--zb-on-accent); }

/* Tlačidlo v akčnom slote svetlého alertu (oznam o štarte kampane a banner
   náhľadu). Styleguide tam farbu písma prebíja natvrdo —
   `.alert[class*=-light] .alert__action .btn { color: var(--ms-alert-light-btn) }`
   má vyššiu špecificitu než `.btn--primary`. Počíta s tým, že v slote stojí
   čisté alebo textové tlačidlo; naše plné dostalo tmavosivé písmo na červenom
   podklade. Vraciame mu teda jeho vlastný token, alert nechávame tak. */
.alert[class*="-light"] .alert__action .btn--primary,
.alert[class*="-light"] .alert__action .btn--primary:hover,
.alert[class*="-light"] .alert__action .btn--primary:focus {
  color: var(--ms-button-primary-text);
}

/* Na úzkej obrazovke ide tlačidlo pod text. `.alert` je v styleguide jeden
   neprelamovaný riadok, takže tlačidlo vedľa dvojvetového oznamu stlačilo text
   do stĺpca širokého pár slov. Týka sa to alertov, v ktorých akčnom slote je
   CTA s popisom — plávajúcu hlášku (`alert--fixed`) to obchádza, jej slot drží
   zatváracie „ד a to patrí vedľa textu, nie na vlastný riadok pod ním.
   Breakpoint 860 px je ten istý ako inde na stránke. */
@media (max-width: 860px) {
  .alert:not(.alert--fixed) { flex-wrap: wrap; align-items: flex-start; }
  .alert:not(.alert--fixed) .alert__action { flex: 0 0 100%; margin-left: 0; margin-top: 10px; }
}

/* -------------------- ZÁKLADNÉ ZÁLOŽKY (triptychy) -------------------- */
.ill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(36px, 7vw, 52px) 36px;
}
.ill__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ill__photo {
  flex: 0 0 auto; position: relative; width: 48px; height: 48px;
  border-radius: var(--zb-radius-circle); overflow: hidden; background: var(--ms-surface-secondary-dark);
}
.ill__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1);
}
.ill__photo::after {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--zb-radius-circle);
  box-shadow: inset 0 0 0 1px var(--ms-border-default); pointer-events: none;
}
.ill__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ill__name { font-size: 18px; font-weight: var(--fw-bold); margin: 0; }

/* Skupina troch panelov. Keď je triptych celý, dostane zelený rám. */
.triptych {
  position: relative; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px; padding: 3px;
  background: transparent; border-radius: 11px;
  transition: box-shadow var(--zb-ease), transform var(--zb-ease);
}
.triptych.is-complete {
  background: var(--ms-surface-primary);
  box-shadow: 0 0 0 3px var(--zb-green),
              0 0 16px rgba(var(--zb-green-rgb), 0.75),
              0 0 38px rgba(var(--zb-green-rgb), 0.5),
              0 6px 22px rgba(var(--zb-green-rgb), 0.4);
}
.triptych.is-complete:hover { transform: translateY(-6px); }
.triptych__check {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  width: 32px; height: 32px; border-radius: var(--zb-radius-circle);
  background: var(--zb-green); color: var(--zb-on-accent);
  font-size: 17px; font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--zb-shadow-2);
}

/* Jedna záložka */
.tile {
  position: relative; min-width: 0; aspect-ratio: 952 / 4593;
  background: var(--ms-surface-secondary-dark); border-radius: 8px; overflow: hidden;
  box-shadow: var(--zb-shadow-2);
  transition: box-shadow var(--zb-ease), transform var(--zb-ease);
}
.tile img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
}
.tile:hover { transform: translateY(-6px); }
/* Zelená žiara = mám ju. V triptychu žiari celá skupina, nie jednotlivé diely. */
.tile.is-owned {
  z-index: 3;
  box-shadow: 0 0 0 3px var(--ms-surface-primary), 0 0 0 6px var(--zb-green),
              0 0 14px rgba(var(--zb-green-rgb), 0.75), 0 0 32px rgba(var(--zb-green-rgb), 0.5),
              0 6px 22px rgba(var(--zb-green-rgb), 0.4);
}
/* Kým triptych nie je celý, každý získaný diel žiari sám za seba. Až keď je
   kompletný, žiaru preberá celá skupina a diely ju stratia — v dizajne sa to
   riešilo tým, že príznak `inGroup` sa odvádzal práve od kompletnosti. */
.triptych.is-complete .tile {
  pointer-events: none;
  box-shadow: var(--zb-shadow-2);
  z-index: 0;
}
.triptych.is-complete .tile:hover { transform: none; }

/* Ešte nevydaná záložka */
.tile__locked {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(14px) saturate(0.75);
  -webkit-backdrop-filter: blur(14px) saturate(0.75);
  background: var(--zb-frost); pointer-events: none;
}
.tile__locked span {
  font-size: 9px; font-weight: var(--fw-semibold); line-height: 1.25; text-align: center;
  color: var(--zb-frost-text); background: var(--zb-frost-chip);
  border-radius: var(--zb-radius-pill); padding: 4px 9px; margin: 0 4px;
}
/* Katalógové číslo na záložke — 1.1 až 6.3, to isté, čo je vytlačené na nej.
   Matný štítok na spodku dlaždice, tá istá typografia aj podklad ako nápis
   „Ešte nie je v obehu“: číslo je nad ilustráciou, takže sa musí dať prečítať,
   ale nesmie ju prekryť. Rozmazanie je na samotnom štítku — na rozdiel od
   nevydanej záložky sa tu nerozmazáva celá dlaždica, len to, čo je pod ním. */
.tile__num {
  position: absolute; left: 50%; bottom: 6px; z-index: 2;
  transform: translateX(-50%);
  font-size: 9px; font-weight: var(--fw-semibold); line-height: 1.25;
  color: var(--zb-frost-text); background: var(--zb-frost-chip);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: var(--zb-radius-pill); padding: 3px 8px;
  font-variant-numeric: tabular-nums; pointer-events: none;
}

.tile__check {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  width: 20px; height: 20px; border-radius: var(--zb-radius-circle);
  background: var(--zb-green); color: var(--zb-on-accent);
  font-size: 11px; font-weight: var(--fw-bold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--zb-shadow-2);
}

/* Ovládanie pod panelmi */
.tile-controls {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px; margin-top: 10px;
}
.tile-controls__cell {
  display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 2px;
  min-height: 25px;
}
/* Tlačidlo „Mám“ je komponenta styleguidu; pod dlaždicou ale nemá čo
   odsadzovať, spodný margin je tam na formuláre. */
.tile-controls__cell .btn,
.special__action .btn { margin-bottom: 0; }

/* Počítadlo kusov. Styleguide segmentový prepínač s číslom uprostred nemá —
   `input-addons` je na polia, nie na dvojicu tlačidiel okolo hodnoty. */
.stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--ms-form-border); border-radius: var(--zb-radius);
  background: var(--ms-form-bg); box-shadow: inset 0 2px 2px var(--ms-border-subtle);
  overflow: hidden;
}
.stepper button {
  width: 24px; height: 25px; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; line-height: 1; color: var(--ms-text-secondary);
}
.stepper button:hover { background: var(--ms-surface-active); }
.stepper button:focus-visible { outline: 2px solid var(--ms-interactive-primary); outline-offset: 2px; }
.stepper__count { min-width: 26px; text-align: center; font-size: 12px; font-weight: var(--fw-bold); }

/* -------------------- ŠPECIÁLNE ZÁLOŽKY -------------------- */
/* Rad dlaždíc s pevnou šírkou, nie mriežka roztiahnutá na celú šírku pásu.
   Špeciálok je vidieť toľko, koľko ich je práve v obehu — od jednej po šesť —
   a `space-between` cez celý wrapper by dve z nich odhodilo na opačné konce
   riadka. Pevná medzera drží rad pokope pri každom počte. */
.specials-grid {
  display: flex; flex-wrap: wrap;
  gap: 28px clamp(20px, 3vw, 40px);
}
.special { position: relative; width: 120px; min-width: 0; }
@media (max-width: 860px) {
  /* Na mobile sa šírka počíta z riadka, aby sa tri zmestili vedľa seba
     aj na 375 px displeji. */
  .specials-grid { gap: 26px 10px; }
  .special { width: calc((100% - 20px) / 3); }
}
.special__meta { margin-top: 10px; text-align: center; }
.special__name { font-size: 13px; font-weight: var(--fw-bold); line-height: 1.3; }
/* Nesie odkaz „Ako ju získať“. min-height drží dlaždice v mriežke zarovnané. */
.special__cond {
  display: flex; align-items: center; justify-content: center;
  margin-top: 4px; min-height: 24px;
}
.special__action { display: flex; justify-content: center; margin-top: 8px; min-height: 25px; }

/* -------------------- GOLDEN TICKET --------------------
   Jediný tmavý blok kampane — je tmavý zámerne a v oboch témach rovnako,
   preto si farby píše sám a `--ms-*` tokeny nepoužíva. */
/* Svetlá medzera pod tmavým blokom je rovnako podstatná ako nad ním — bez nej
   sa tmavá plocha zrazí s dúhovým pásikom pätičky. Nie je ale na golden tickete:
   drží ju plagát (`.zb-paper` má spodný padding), takže zostane aj v dňoch,
   keď golden ticket ešte nie je v obehu a posledné na stránke sú špeciálky. */
.golden {
  margin-top: clamp(56px, 10vw, 88px);
  background: var(--zb-golden-bg); color: var(--zb-golden-text); overflow: hidden;
}
.golden__grid {
  display: grid; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(32px, 6vw, 48px);
  /* `padding-block`, nie shorthand — element nesie aj wrapper, ktorý dáva
     vodorovný padding, a `padding: X 0` by ho vynuloval (na mobile potom
     text ide po okraj stránky). */
  padding-block: clamp(40px, 8vw, 64px);
}
.golden__stage { position: relative; display: flex; justify-content: center; isolation: isolate; }
.golden__orbs {
  position: absolute; left: 50%; top: 50%;
  width: min(100%, 420px); height: min(100%, 460px);
  transform: translate(-50%, -50%); pointer-events: none;
}
/* Osem rozmazaných gúľ za dlaždicou. Poloha, veľkosť a fáza sú pre každú iná
   a nedá sa to odvodiť vzorcom, takže sú vypísané — ale v CSS, nie v `style=""`
   v šablóne: farbu si berú z palety a tá sa s témou preklápa.
   V HTML zostáva osem prázdnych `<span>`, poradie rozhoduje. */
.golden__orbs span {
  position: absolute; border-radius: var(--zb-radius-circle);
  animation: msOrb 22s ease-in-out infinite;
}
.golden__orbs span:nth-child(1) {
  --x1: 64px; --y1: -38px; --x2: -30px; --y2: 44px;
  left: 14%; top: 22%; width: 210px; height: 210px; filter: blur(26px);
  background: radial-gradient(circle, rgba(var(--zb-orb), 0.42), transparent 68%);
  animation-duration: 22s;
}
.golden__orbs span:nth-child(2) {
  --x1: -52px; --y1: 46px; --x2: 38px; --y2: -34px;
  right: 8%; top: 40%; width: 158px; height: 158px; filter: blur(22px);
  background: radial-gradient(circle, rgba(var(--zb-orb-alt), 0.34), transparent 66%);
  animation-duration: 17s; animation-delay: -6s;
}
.golden__orbs span:nth-child(3) {
  --x1: 30px; --y1: 52px; --x2: -46px; --y2: -22px;
  left: 34%; bottom: 6%; width: 266px; height: 266px; filter: blur(34px);
  background: radial-gradient(circle, rgba(var(--zb-orb), 0.26), transparent 70%);
  animation-duration: 29s; animation-delay: -13s;
}
.golden__orbs span:nth-child(4) {
  --x1: -40px; --y1: -30px; --x2: 26px; --y2: 36px;
  left: 6%; bottom: 24%; width: 118px; height: 118px; filter: blur(18px);
  background: radial-gradient(circle, rgba(var(--zb-orb-alt), 0.28), transparent 64%);
  animation-duration: 14s; animation-delay: -3s;
}
.golden__orbs span:nth-child(5) {
  --x1: -58px; --y1: 34px; --x2: 44px; --y2: -40px;
  right: 22%; top: 8%; width: 176px; height: 176px; filter: blur(24px);
  background: radial-gradient(circle, rgba(var(--zb-orb), 0.3), transparent 68%);
  animation-duration: 25s; animation-delay: -16s;
}
.golden__orbs span:nth-child(6) {
  --x1: 48px; --y1: -46px; --x2: -34px; --y2: 28px;
  left: 2%; top: 46%; width: 134px; height: 134px; filter: blur(20px);
  background: radial-gradient(circle, rgba(var(--zb-orb-alt), 0.24), transparent 66%);
  animation-duration: 19s; animation-delay: -9s;
}
.golden__orbs span:nth-child(7) {
  --x1: -36px; --y1: -52px; --x2: 52px; --y2: 30px;
  right: 4%; bottom: 10%; width: 224px; height: 224px; filter: blur(30px);
  background: radial-gradient(circle, rgba(var(--zb-orb), 0.22), transparent 70%);
  animation-duration: 33s; animation-delay: -21s;
}
.golden__orbs span:nth-child(8) {
  --x1: 40px; --y1: 44px; --x2: -28px; --y2: -36px;
  left: 44%; top: 2%; width: 146px; height: 146px; filter: blur(20px);
  background: radial-gradient(circle, rgba(var(--zb-orb-alt), 0.26), transparent 64%);
  animation-duration: 16s; animation-delay: -5s;
}
.golden__tile {
  position: relative; z-index: 1;
  width: min(120px, calc((100vw - 52px) / 3)); aspect-ratio: 952 / 4593;
  background: var(--zb-golden-plate); border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 0 3px var(--zb-golden-bg), 0 0 0 6px var(--zb-gold),
              0 0 14px rgba(var(--zb-gold-rgb), 0.75), 0 0 34px rgba(var(--zb-gold-rgb), 0.5),
              0 0 70px rgba(var(--zb-gold-rgb), 0.3), 0 18px 40px var(--zb-golden-cast);
  transition: transform var(--zb-ease), box-shadow var(--zb-ease);
}
.golden__tile:hover { transform: translateY(-8px); }
/* Získaný golden ticket sa zazelení ako ostatné záložky — zlatá žiara ustúpi
   zelenej, aby signál „mám ju“ bol v celej zbierke jeden a ten istý.
   Rozostupy tieňa zostávajú väčšie než pri dlaždiciach, lebo stojí na tmavom. */
.golden__tile.is-owned {
  box-shadow: 0 0 0 3px var(--zb-golden-bg), 0 0 0 6px var(--zb-green),
              0 0 14px rgba(var(--zb-green-rgb), 0.75), 0 0 34px rgba(var(--zb-green-rgb), 0.5),
              0 0 70px rgba(var(--zb-green-rgb), 0.3), 0 18px 40px var(--zb-golden-cast);
}
.golden__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.golden__eyebrow {
  font-size: clamp(13px, 1.3vw, 15px); font-weight: var(--fw-semibold); letter-spacing: 1px;
  text-transform: uppercase; color: var(--zb-golden-accent);
}
.golden__title {
  font-size: clamp(24px, 4.2vw, 32px);
  font-weight: var(--fw-bold); margin: 4px 0 12px;
}
.golden__lead {
  font-size: 16px; line-height: 1.62; color: var(--zb-golden-text-soft);
  margin: 0; max-width: 52ch; text-wrap: pretty;
}
.golden__actions { display: flex; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.golden__actions .btn { margin-bottom: 0; }
.golden__note { font-size: 13px; color: var(--zb-golden-text-faint); }

/* -------------------- KONFETY -------------------- */
.confetti {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: visible;
}
/* Celoobrazovkový ohňostroj za skompletovanie základných záložiek.
   `pointer-events: none` drží stránku ovládateľnú; z-index je pod hlavičkou
   (styleguide 1400) aj pod modálom (1550), aby ohňostroj neprekryl otvorené
   okno ani navigáciu. */
.fireworks {
  position: fixed; inset: 0; z-index: 1000;
  pointer-events: none; overflow: hidden;
}
.confetti span {
  position: absolute; top: 38%; left: 50%; opacity: 0;
  animation: msConf 1000ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

/* -------------------- ALBUM --------------------
   Vlastný aj verejný album zdieľajú jednu šablónu, takže aj jeden set tried.
   Rozdiel je len v tom, čo sa vykreslí, nie v tom, ako to vyzerá. */
.album-hero { background: var(--ms-surface-secondary-dark); }
/* Zdieľanie stojí na desktope vpravo, zarovnané s účiarou nadpisu a s pravým
   okrajom mriežky záložiek pod ním; na mobile ide pod nadpis na celú šírku.
   Grid, nie `flex-wrap`: ten by pri dlhšom nadpise alebo mene zhodil zdieľanie
   pod nadpis — presne to sa stalo pri premenovaní na „Album záložiek“. Takto
   sa radšej zalomí nadpis a zdieľanie zostane, kde má byť. */
.album-hero__body {
  padding-top: clamp(36px, 7vw, 64px);
  padding-bottom: clamp(24px, 4vw, 34px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: end; gap: 20px 32px;
}
@media (max-width: 860px) {
  .album-hero__body { grid-template-columns: minmax(0, 1fr); }
}

/* Nadpisy v albume stoja priamo nad mriežkou dlaždíc, bez úvodného textu,
   ktorý inde odsadenie nesie sám. */
.zb-band--album .zb-title { margin-bottom: clamp(14px, 2vw, 20px); }

/* Zdieľanie albumu — vidí ho len majiteľ. */
/* Bez `align-items` — pole má vlastnú výšku menšiu než `btn--large`,
   predvolené `stretch` ho dorovná na výšku tlačidla. */
.share { display: flex; gap: 8px; }
/* Obal tlačidla je kotva bubliny — tá patrí k tlačidlu, nie k celému riadku. */
.share__action { position: relative; display: flex; }
.share .input {
  /* Adresa sa aj tak číta len po začiatok — na skopírovanie je tlačidlo. */
  width: clamp(180px, 24vw, 260px); min-width: 0;
  font-size: 13px;
}
.share .btn { margin-bottom: 0; }

/* Úsporná podoba v rade tlačidiel na úvode: samotné tlačidlo. Pole s adresou
   tam zavadzia, ale v stránke zostáva — nesie hodnotu na skopírovanie a keď
   kopírovanie zlyhá, skript triedu zloží a pole vyjde na svetlo. */
.share--compact .input { display: none; }

/* Bublina nad tlačidlom. Skrýva sa priehľadnosťou, nie `visibility`, aby text
   zostal v strome prístupnosti a `role="status"` ho stihol ohlásiť. */
.share__tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  padding: 7px 11px; border-radius: var(--zb-radius);
  background: var(--ms-text-primary); color: var(--ms-surface-primary);
  font-size: 12px; font-weight: var(--fw-semibold); text-align: center;
  /* Dlhšia hláška sa zalomí; krátka zostane na jednom riadku. Strop drží
     vycentrovanú bublinu na obrazovke aj vtedy, keď tlačidlo stojí pri kraji
     stránky — vtedy je od stredu tlačidla po okraj najmenej miesta. */
  width: max-content; max-width: 220px;
  box-shadow: var(--zb-shadow-3);
  opacity: 0; transform: translate(-50%, 4px); pointer-events: none;
  transition: opacity var(--zb-ease), transform var(--zb-ease);
}
.share__tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--ms-text-primary);
}
.share__tip.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .share { width: 100%; }
  /* Úsporná podoba nemá čo roztiahnuť — bez poľa by zo zvyšku riadka bola
     len diera a „Ako zbierať“ by sa zbytočne zlomilo pod ňu. */
  .share--compact { width: auto; }
  /* Tlačidlo si drží svoju šírku a text na jednom riadku; zvyšok riadka
     dopĺňa pole s adresou. `flex-basis: 0` je podstatné — s `auto` by pole
     trvalo na svojej vlastnej šírke a na užších telefónoch by sa zalomil
     nápis na tlačidle. */
  .share__action { flex: 0 0 auto; }
  /* Na telefóne je od tlačidla po okraj stránky len jej vnútorný okraj, tak
     bublina prerastá tlačidlo len o kúsok. */
  .share__tip { max-width: calc(100% + 16px); }
  .share .btn { flex: 0 0 auto; white-space: nowrap; }
  .share .input { flex: 1 1 0; width: auto; }
}

/* Základné záložky po triptychoch. Samotnú trojicu kreslí `.triptych`
   z prehľadu záložiek — je to tá istá skupina, len bez hlavičky s ilustrátorom
   a bez zelenej žiary za kompletnosť. */
.trip-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: clamp(22px, 3.5vw, 32px);
}

/* Prázdne miesto po nezískanej záložke — obrys, nie plocha, aby mriežka
   nevyzerala plnšia, než zbierka je. */
.tile--empty {
  background: transparent; box-shadow: none;
  border: 1.5px dashed var(--ms-border-strong);
  display: flex; align-items: center; justify-content: center;
}
.tile--empty span {
  font-size: 14px; font-weight: var(--fw-bold); color: var(--ms-text-tertiary);
}
.tile--empty:hover { transform: none; }

/* Špeciálky a golden ticket pod triptychmi. Na rozdiel od základných záložiek
   ich nie je pevný počet a prázdne miesta nedostávajú, takže riadok skoro nikdy
   nevyjde celý — zarovnaný doľava vyzeral ako nedokončená mriežka. Vycentrovaný
   je to samostatná skupina pod triptychmi, čo aj je.

   Tu ide o flex, nie o mriežku: `justify-content` v mriežke vycentruje stĺpce,
   nie dlaždice, takže prázdne stĺpce z `auto-fill` by skupinu držali naľavo.
   Flex pozná len toľko položiek, koľko ich naozaj je, a tie aj vycentruje. */
.album-extras { margin-top: clamp(28px, 4vw, 40px); }
/* Obe triedy v selektore zámerne: pravidlo pre `.atile-grid` stojí nižšie
   v súbore, takže so samotným `.album-extras` by rozloženie prebilo späť. */
.atile-grid.album-extras {
  display: flex; flex-wrap: wrap; justify-content: center;
}
.album-extras .atile { flex: 0 0 96px; }

/* Mriežka dlaždíc v albume */
.atile-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 20px 12px; align-content: start;
}
.atile { min-width: 0; }
/* Záložka v plnom pomere, neorezaná — je to jej celá ilustrácia, nie náhľad. */
.atile .tile { width: 100%; }
.atile__badge {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  min-width: 22px; padding: 2px 5px; border-radius: var(--zb-radius-pill);
  background: var(--zb-green); color: var(--zb-on-accent);
  font-size: 11px; font-weight: var(--fw-bold); text-align: center;
  box-shadow: var(--zb-shadow-2);
}
/* Zelená žiara zostáva prehľadu záložiek. V albume stoja získané záložky vedľa
   seba, takže by signál „mám ju“ nič neodlíšil — odlíšené sú tie chýbajúce,
   a to šedou (pravidlo nižšie). */
.atile .tile.is-owned { box-shadow: var(--zb-shadow-2); }

/* Chýbajúca záložka — vidno, ktorá to je, ale nekričí. Úplná šedá pri 40 %
   krytí splývala s pozadím a zo zoznamu „chýba mi“ sa nedalo prečítať, o ktoré
   záložky ide; pritom presne na to ten zoznam je. Odlíšenie teraz stojí na
   miernom odfarbení a ľahšom tieni — dosť na to, aby sa získaná a chýbajúca
   nedali zameniť, ale ilustrácia zostane čitateľná. */
.atile--missing .tile { box-shadow: var(--zb-shadow-1); }
.atile--missing .tile img { filter: grayscale(0.6); opacity: 0.82; }
.atile--missing .tile:hover { transform: none; }

.album-empty {
  font-size: 14px; line-height: 1.55; color: var(--ms-text-secondary);
  margin: 0; max-width: 46ch;
}
.album-actions { margin: 24px 0 0; }

/* -------------------- ADMIN: TEXTY STRÁNKY --------------------
   Interná obrazovka, nie kampaňová stránka — polia, tlačidlá aj typografia
   sú komponenty styleguidu a obrazovka ide s témou. Vlastné je tu len to,
   na čo komponenta nie je: rozcestník skupín, lepiaca lišta s uložením
   a zvýraznenie prepísaného poľa. */
.admin__toc {
  /* Hlavička stránky je sama lepiaca, tak sa rozcestník lepí pod ňu — pri
     `top: 0` by sa po odlepení schoval za ňu. */
  position: sticky; top: var(--zb-header-h); z-index: 3;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
  /* Podklad je nepriehľadný, lebo pod rozcestníkom pri scrollovaní prechádza
     formulár — linka pod ním preto netreba, oddeľuje ho už samotná medzera. */
  padding: 12px 0 14px; margin-bottom: 20px;
  background: var(--ms-surface-primary);
}
/* Po skoku na kotvu má nadpis skupiny skončiť pod hlavičkou aj pod lepiacim
   rozcestníkom — ten je dvojriadkový, takže k výške hlavičky ide ešte 100 px. */
.admin__group { scroll-margin-top: calc(var(--zb-header-h) + 100px); }

/* Prepísaný text má zelený prúžok — pri stovke polí je to jediný spôsob,
   ako na prvý pohľad vidieť, do čoho už niekto siahol. */
.admin__field {
  padding: 14px 16px; border-radius: var(--zb-radius-lg);
  background: var(--ms-surface-tertiary); border: 1px solid var(--ms-border-default);
}
.admin__field.is-custom { border-left: 3px solid var(--ms-state-success); }
/* Celá stránka v jednom poli — značky sa čítajú lepšie v strojovom písme
   a zalamovať ich uprostred slova nemá zmysel. */
.admin__field--html .input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; tab-size: 2;
}
.admin__hint {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.admin__hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* Rozcestník sú `pill` chipy zo styleguidu; ako odkazy potrebujú len hover. */
.admin__toc .pill { text-decoration: none; }
.admin__toc .pill:hover { opacity: 0.8; }

/* Ukladá sa celý formulár naraz, tak tlačidlo drží pri spodnom okraji —
   inak by sa po úprave textu v prvej skupine scrollovalo na koniec stránky. */
.admin__bar {
  position: sticky; bottom: 0; z-index: 3;
  padding: 14px 0; background: var(--ms-surface-primary);
  border-top: 1px solid var(--ms-border-default);
}
.admin__bar .btn { margin-bottom: 0; }

@media (max-width: 860px) {
  /* Na mobile sa rozcestník skupín rozpadne do štyroch riadkov a zabral by
     štvrtinu obrazovky — lepí sa preto len na širokých displejoch. Kotva
     tým pádom uhýba už len hlavičke. */
  .admin__toc { position: static; }
  .admin__group { scroll-margin-top: calc(var(--zb-header-h) + 8px); }
}

/* -------------------- ADMIN: DÁTUMY VYDANIA --------------------
   Polia sú tu krátke (jeden dátum), takže pod sebou by 25 riadkov znamenalo
   scrollovanie cez tri obrazovky za jedným posunom termínu. Mriežka ich dá
   vedľa seba a skupina zostane čitateľná ako celok. */
.admin__dates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 12px;
}
.admin__date .input { max-width: 200px; }

/* Hromadné pole stojí nad skupinou a je zámerne odlíšené — prepisuje polia
   pod sebou, takže nemá vyzerať ako ďalšie z nich. */
.admin__bulk {
  padding: 14px 16px; margin-bottom: 16px;
  border-radius: var(--zb-radius-lg);
  border: 1px dashed var(--ms-border-default);
}
.admin__bulk .input { max-width: 200px; }

/* -------------------- MODÁL: BIO ILUSTRÁTORA --------------------
   Okno, nadpis aj zatváranie sú `modal` zo styleguidu; `modal-header` je už
   flex riadok, tu sa mu len dopĺňa rozostup a stĺpec s menom a povolaním.

   Pri špeciálkach fotka nie je — `[hidden]` ju nevykreslí a `gap` po nej
   nezostane, takže hlavička netreba riešiť výnimkou. */
.zb-modal__head { gap: 16px; }
.zb-modal__ident { min-width: 0; }
/* Rovnaká fotka ako v prehľade záložiek, o niečo väčšia: tam je to položka
   v zozname, tu hlavička detailu. */
.zb-modal__photo {
  flex: 0 0 auto; position: relative; width: 56px; height: 56px;
  border-radius: var(--zb-radius-circle); overflow: hidden; background: var(--ms-surface-secondary-dark);
}
.zb-modal__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(1);
}
.zb-modal__role { color: var(--ms-text-tertiary); }


/* -------------------- HLÁŠKY --------------------
   Hláška plávajúca nad stránkou — kreslí ju `alert` v obale `alert-container`
   zo styleguidu, tu je len odstup zhora. Styleguide počíta s eshopovou
   hlavičkou a pripne obal 60 px od vrchu; naša `header-simple` končí dúhovým
   pásikom na 65 px. Hlášku púšťame tak, aby horným okrajom zapadla do pásika
   a z hlavičky visela ako lístok — pásik je v jej šírke prekrytý, lebo obal
   má vyššiu vrstvu než hlavička. */
.alert-container { top: 57px; }

/* Nábeh. Hláška je na stránke hneď od servera vykreslená viditeľná, takže
   prechod styleguidu (`alert--fixed` → `alert--fixed-active`) sa nemá čoho
   chytiť — spustenie zhora preto kreslí animácia. Krátka cesta, nie tých
   100 px zo styleguidu: ten počíta s hláškou letiacou cez celú hlavičku,
   naša vychádza spod dúhového pásika. */
.alert-container .alert { animation: msFlash 300ms ease-out; }

/* Odchod tou istou cestou, len naspäť hore: `alert--destroy` zo styleguidu
   hlášku iba zosvetlí do priehľadna, posun si dopĺňame. Prechod na to netreba
   zavádzať, `all .2s ease` má `.alert` zo styleguidu — odchod je tak o čosi
   svižnejší než nábeh, čo je v poriadku: prichádzajúcu hlášku si treba
   všimnúť, odchádzajúcu už nie. */
.alert-container .alert--destroy { transform: translateY(-20px); }