/* =====================================================================
   VIDY.CSS — spoločný štýl vidy.sk
   Agentúra Vidy Media: videá · weby · reklamy · správa sociálnych sietí.
   Rodina so spolupraca.vidy.sk (papier, vínová, jantár, Fraunces),
   ale bez diptychu: jeden papier, oblé rohy, typografia nesie stránku.

   AKO POSTAVIŤ ĎALŠIU STRÁNKU (services, portfolio, cennik, about):
   1. Do <head> skopíruj z index.html: písma (Fraunces + Instrument Sans +
      IBM Plex Mono z Google Fonts — jeden a ten istý <link> na všetkých
      stránkach), inline skript témy (musí bežať PRED prvým vykreslením),
      favicony, cookie-banner.css, <link rel="stylesheet" href="/vidy.css">.
      Na koniec <body>: <script src="/vidy.js"> (bez defer — skript stránky
      pod ním už môže použiť window.Vidy) a potom cookie-banner.js.
      Ak je na stránke kontaktný formulár, aj emailjs (viď index.html).
      Cesty píš od koreňa (/vidy.css), aby fungovali aj v /sluzby/….
   2. Kostra:
        <a class="preskocit" href="#obsah">Preskočiť na obsah</a>
        <header class="nav">…</header>          ← skopíruj z index.html
        <main id="obsah">
          <section class="sekcia">
            <div class="kontajner">
              <div class="sekcia__hlava">
                <p class="stitok">Malý štítok</p>
                <h2 class="nadpis">Nadpis, <em>dôraz v kurzíve.</em></h2>
                <p class="lede">Úvodný odsek.</p>
              </div>
              …obsah…
            </div>
          </section>
        </main>
        <footer class="pata">…</footer>         ← skopíruj z index.html
   3. Sekcie: .sekcia (základ) · .sekcia--alt (tmavší papier, striedaj)
      · .sekcia--uzka (menej vzduchu) · .sekcia__hlava--delena (nadpis
      vľavo, odkaz vpravo).
   4. Mriežky: .mriezka .mriezka--2 / --3 / --4 (na mobile 1 stĺpec);
      .reely (kartičky videí, auto-fill, na mobile 2 stĺpce).
   5. Komponenty: .karta · .pilier (služba) · .balik (cenník) · .kroky/.krok
      (proces) · .reel (video, prehráva vidy.js) · .stav (prázdny/chybový
      stav = ikona + veta) · .blok (inverzný blok s formulárom) · .formular,
      .pole, .pole-popis, .pole-vyber · .tlacidlo (--vino, --obrys, --jantar)
      · .odkaz-sipka · .zoznam-pomlcky · .prepinac (téma).
   6. Odhalenie pri rolovaní: pridaj triedu .odhal (voliteľne style="--o: 2"
      pre oneskorenie v rade). Bez JS je všetko viditeľné; vidy.js skryje LEN
      to, čo je pod okrajom obrazovky. Nikdy nedávaj .odhal na hero.
   7. Farby nikdy nepíš hexom do stránky — len var(--…) z :root; tmavá téma
      funguje sama. Vlastný <style> stránky patrí pod tento súbor.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TOKENY
   Svetlá paleta na holom :root; tmavá ju len prepisuje. Žiadna farba nesmie
   existovať len v media bloku — inak by v prepnutej téme chýbala.
   Jantár na papieri nemá kontrast pre malý text, preto má textový variant.
   --------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --papier: #FAF4E6;
  --papier-2: #F3EBDA;     /* striedavé sekcie */
  --papier-3: #EAE0C9;     /* kostry, jemné plochy */
  --atrament: #1B1614;
  --atrament-2: #5E554E;
  --linka: rgba(27, 22, 20, .16);
  --linka-silna: rgba(27, 22, 20, .34);

  --vino: #8A2032;
  --vino-text: #8A2032;
  --na-vine: #FAF4E6;
  --vino-jemna: rgba(138, 32, 50, .08);
  --vino-pulz: rgba(138, 32, 50, .35);
  --jantar: #C97B1A;
  --jantar-text: #9A5C0F;
  --na-jantari: #1B1614;
  --focus: #C97B1A;

  --karta: #FFFBF2;
  --ok: #3F6B3A;
  --chyba: #8A2032;
  --tien: 0 1px 2px rgba(27, 22, 20, .05), 0 14px 34px -18px rgba(27, 22, 20, .32);
  --nav-pozadie: rgba(250, 244, 230, .99);
  /* Kostra načítavania má vlastný, výrazne tmavší odtieň než papier sekcie:
     s --papier-3 bol rozdiel 5/255 a kostra bola prakticky neviditeľná. */
  --kostra: #D6C8A8;
  --kostra-2: #C4B28C;

  /* Inverzný blok (formulár): v svetlej téme atramentový, v tmavej papierový.
     Akcent má vlastný token — jantár na svetlom paneli nemá kontrast. */
  --blok: #1B1614;
  --na-bloku: #F1E9DB;
  --na-bloku-2: #C9BFAF;
  --blok-linka: rgba(241, 233, 219, .22);
  --blok-akcent: #C97B1A;
  --na-blok-akcente: #1B1614;
  --blok-pole: #FAF4E6;
  --blok-pole-text: #1B1614;
  --blok-pole-okraj: #6E655C;
  --blok-chyba: #F2A6A6;
  --blok-ok: #F1E9DB;

  /* Tri rezy ako na spolupraca.vidy.sk. Mono nesie mikropopisky, ceny
     a telefónne čísla — je to najrozpoznateľnejší podpis vzoru. Inter tam nie je. */
  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --f-text: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --pad-x: clamp(1.25rem, 4vw, 4rem);
  --sekcia: clamp(4rem, 9vw, 8rem);
  --sirka: 74rem;
  --miera: 36rem;
  --nav-h: 4.5rem;
  /* Vzor má hranaté plochy a vlasové linky, nie 24px rohy a pilulky. */
  --r-s: 2px;
  --r-m: 2px;
  --r-l: 2px;
  --krivka: cubic-bezier(.2, .7, .2, 1);

  /* Primárne tlačidlo v inverznom bloku. Nesmie prebrať --blok-akcent:
     ten je v tmavej téme vínový a tlačidlo by splynulo s .tlacidlo--vino
     vedľa neho. Vlastný token, jantár v OBOCH témach. */
  --blok-tlacidlo: #C97B1A;
  --na-blok-tlacidle: #1B1614;

  /* Značka je tmavomodrý raster (jediný súbor). V tmavej téme ju filter
     prefarbí na papier: brightness(0) = čierna silueta, invert(1) = biela;
     krytie ju stiahne k odtieňu krému. V svetlej téme žiadny filter. */
  --znacka-filter: none;
  --znacka-krytie: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papier: #1C1215;
    --papier-2: #221719;
    --papier-3: #2E2124;
    --atrament: #F1E9DB;
    --atrament-2: #B1A798;
    --linka: rgba(241, 233, 219, .16);
    --linka-silna: rgba(241, 233, 219, .34);
    --vino: #8A2032;
    --vino-text: #E27E90;
    --na-vine: #FAF4E6;
    --vino-jemna: rgba(226, 126, 144, .1);
    --vino-pulz: rgba(226, 126, 144, .35);
    --jantar: #E39A4E;
    --jantar-text: #E39A4E;
    --na-jantari: #1B1614;
    --focus: #E39A4E;
    --karta: #241A1D;
    --ok: #9CCB8F;
    --chyba: #F2A6A6;
    --tien: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -18px rgba(0, 0, 0, .7);
    --nav-pozadie: rgba(28, 18, 21, .99);
    --kostra: #423136;
    --kostra-2: #513C42;
    --blok: #F1E9DB;
    --na-bloku: #1B1614;
    --na-bloku-2: #5E554E;
    --blok-linka: rgba(27, 22, 20, .22);
    --blok-akcent: #8A2032;
    --na-blok-akcente: #FAF4E6;
    --blok-pole: #1B1614;
    --blok-pole-text: #F1E9DB;
    --blok-pole-okraj: #9A9083;
    --blok-chyba: #8A2032;
    --blok-ok: #1B1614;
    --znacka-filter: brightness(0) invert(1);
    --znacka-krytie: .9;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #1C1215;
  --papier-2: #221719;
  --papier-3: #2E2124;
  --atrament: #F1E9DB;
  --atrament-2: #B1A798;
  --linka: rgba(241, 233, 219, .16);
  --linka-silna: rgba(241, 233, 219, .34);
  --vino: #8A2032;
  --vino-text: #E27E90;
  --na-vine: #FAF4E6;
  --vino-jemna: rgba(226, 126, 144, .1);
  --vino-pulz: rgba(226, 126, 144, .35);
  --jantar: #E39A4E;
  --jantar-text: #E39A4E;
  --na-jantari: #1B1614;
  --focus: #E39A4E;
  --karta: #241A1D;
  --ok: #9CCB8F;
  --chyba: #F2A6A6;
  --tien: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -18px rgba(0, 0, 0, .7);
  --nav-pozadie: rgba(28, 18, 21, .99);
  --kostra: #423136;
  --kostra-2: #513C42;
  --blok: #F1E9DB;
  --na-bloku: #1B1614;
  --na-bloku-2: #5E554E;
  --blok-linka: rgba(27, 22, 20, .22);
  --blok-akcent: #8A2032;
  --na-blok-akcente: #FAF4E6;
  --blok-pole: #1B1614;
  --blok-pole-text: #F1E9DB;
  --blok-pole-okraj: #9A9083;
  --blok-chyba: #8A2032;
  --blok-ok: #1B1614;
  --znacka-filter: brightness(0) invert(1);
  --znacka-krytie: .9;
}

/* ---------------------------------------------------------------------
   ZÁKLAD
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);   /* kotvy nesmú zaliezť pod lepivú navigáciu */
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--f-text);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* poistka; rozloženie samo nesmie pretekať */
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, address { margin: 0; }
/* Reset bez [class]: <ul> bez triedy (bočný panel hero, päta) by inak dostal
   odrážky prehliadača a 40 px odsadenie. Zoznamy v obsahu značí .zoznam-pomlcky. */
ul, ol { list-style: none; padding: 0; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.vizualne-skryte {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.preskocit {
  position: absolute; left: var(--pad-x); top: -100%; z-index: 60;
  padding: .75rem 1rem; border-radius: var(--r-s);
  background: var(--atrament); color: var(--papier);
  font-weight: 600; text-decoration: none;
}
.preskocit:focus-visible { top: .5rem; }

/* ---------------------------------------------------------------------
   TYPOGRAFIA
   Fraunces s opsz 144 = displejový rez; kurzíva vo vínovej je jediný dôraz
   v nadpise. Číslice v displejovom písme sú lining + tabular, aby ceny
   a čísla krokov stáli v riadku.
   --------------------------------------------------------------------- */
/* Štítok = rámčekovaný mono štítok ako vo vzore: značkou je vlasový rámček,
   nie bodka. Bodka „záznam“ ostáva len v .stitok--zivy, kde pulzuje. */
.stitok {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .25rem .55rem;
  border: 1px solid currentColor; border-radius: var(--r-s);
  font-family: var(--f-mono);
  font-size: .75rem; font-weight: 500; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase;
  color: var(--vino-text);
}
.stitok::before {   /* bodka = záznam; značka Vidy zo spolupraca.vidy.sk */
  content: ""; display: none; flex: none; width: .5em; height: .5em; border-radius: 50%;
  background: var(--vino);
}
.stitok--jantar { color: var(--jantar-text); }
.stitok--jantar::before { background: var(--jantar); }
.stitok--zivy::before { display: block; animation: k-pulz 2.8s ease-out infinite; }
@keyframes k-pulz {
  from { box-shadow: 0 0 0 0 var(--vino-pulz); }
  to   { box-shadow: 0 0 0 .7em transparent; }
}

/* Telefónne čísla v mono, číslice tabulárne — v zozname kontaktov aj v päte
   stoja pod sebou. Ostatné mikropopisky v mono majú rez pri svojom komponente. */
a[href^="tel:"] { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.nadpis {
  font-family: var(--f-display);
  font-weight: 500;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.nadpis em { font-style: italic; font-weight: 400; color: var(--vino-text); }
.nadpis--h1 {
  font-size: clamp(2.25rem, 1rem + 5.2vw, 5.5rem);
  line-height: .98;
  letter-spacing: -.03em;
}
.podnadpis {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.lede {
  max-width: 56ch;
  font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem);
  line-height: 1.6;
  color: var(--atrament-2);
  text-wrap: pretty;
}
.lede strong { color: var(--atrament); font-weight: 600; }
.drobne { font-size: .875rem; color: var(--atrament-2); }
.cislo {
  font-family: var(--f-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
}
/* Pomlčka „—“ je široká presne 1 em, preto sa odsadzuje v em, nie v rem:
   pevných 1,15 rem nechávalo pri 16 px písme len 2,4 px medzery a pomlčka
   sa lepila na text. 1,5 em = 0,5 em skutočnej medzery pri každej veľkosti. */
.zoznam-pomlcky { display: grid; gap: .4rem; }
.zoznam-pomlcky li { position: relative; padding-left: 1.5em; }
.zoznam-pomlcky li::before { content: "—"; position: absolute; left: 0; color: var(--atrament-2); }

/* ---------------------------------------------------------------------
   ROZLOŽENIE
   --------------------------------------------------------------------- */
.kontajner { width: min(100% - 2 * var(--pad-x), var(--sirka)); margin-inline: auto; }
.sekcia { padding-block: var(--sekcia); }
.sekcia--alt { background: var(--papier-2); }
.sekcia--uzka { padding-block: calc(var(--sekcia) * .6); }
.sekcia__hlava { display: grid; gap: 1.1rem; max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sekcia__hlava .stitok { justify-self: start; }
.sekcia__hlava--delena {
  max-width: none;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem 2rem;
}
.sekcia__hlava--delena > div { display: grid; gap: 1.1rem; max-width: 46rem; }
.sekcia__hlava--delena > div .stitok { justify-self: start; }
.sekcia__pata { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); }

.mriezka { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.mriezka--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mriezka--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mriezka--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 64rem) {
  .mriezka--3, .mriezka--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .mriezka--2, .mriezka--3, .mriezka--4 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   TLAČIDLÁ A ODKAZY — všetky ciele ≥ 44 px
   --------------------------------------------------------------------- */
.tlacidlo {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-s);
  font-weight: 500; font-size: 1rem; line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--krivka), background-color .25s, color .25s, border-color .25s, box-shadow .3s;
}
.tlacidlo--vino { background: var(--vino); color: var(--na-vine); }
.tlacidlo--vino:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(138, 32, 50, .6); }
.tlacidlo--obrys { background: transparent; color: var(--atrament); border-color: var(--linka-silna); }
.tlacidlo--obrys:hover { border-color: var(--atrament); transform: translateY(-2px); }
.tlacidlo--jantar { background: var(--jantar); color: var(--na-jantari); }
.tlacidlo--jantar:hover { transform: translateY(-2px); }
.tlacidlo:active { transform: translateY(0); }
.tlacidlo:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.tlacidlo svg { flex: none; width: 1em; height: 1em; transition: transform .3s var(--krivka); }
.tlacidlo:hover svg { transform: translateX(3px); }

.odkaz-sipka {
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--atrament);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em;
  text-decoration-color: var(--linka-silna);
  transition: color .2s, text-decoration-color .2s;
}
.odkaz-sipka:hover { color: var(--vino-text); text-decoration-color: currentColor; }
.odkaz-sipka svg { flex: none; width: 1em; height: 1em; transition: transform .3s var(--krivka); }
.odkaz-sipka:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   NAVIGÁCIA — lepivá, papier s rozostrením; na mobile panel pod ňou
   --------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-pozadie);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linka);
}
.nav__vnutro { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--nav-h); }
.nav__znacka {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem;
  font-family: var(--f-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1;
  text-decoration: none;
}
.nav__znacka img { flex: none; height: 1.75rem; width: auto; filter: var(--znacka-filter); opacity: var(--znacka-krytie); }
.nav__znacka small {
  font-family: var(--f-mono); font-size: .66rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--atrament-2);
}
.nav__odkazy { display: flex; align-items: center; gap: clamp(.1rem, .8vw, .5rem); }
.nav__odkaz {
  display: inline-flex; align-items: center;
  min-height: 2.75rem; padding: 0 .8rem;
  border-radius: var(--r-s);
  font-size: .92rem; font-weight: 500; color: var(--atrament-2);
  text-decoration: none;
  transition: color .2s, background-color .2s;
}
.nav__odkaz:hover { color: var(--atrament); background: var(--vino-jemna); }
.nav__odkaz[aria-current="page"] { color: var(--vino-text); font-weight: 600; }
.nav__cta { min-height: 2.75rem; padding: 0 1.25rem; font-size: .9375rem; }
.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; padding: .7rem; margin-right: -.7rem;
  border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.nav__burger span { display: block; height: 2px; border-radius: 2px; background: var(--atrament); transition: transform .3s var(--krivka), opacity .2s; }
.nav__burger.je-otvorene span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.je-otvorene span:nth-child(2) { opacity: 0; }
.nav__burger.je-otvorene span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobil {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  padding: .5rem var(--pad-x) 1.5rem;
  background: var(--papier);
  border-bottom: 1px solid var(--linka);
  box-shadow: var(--tien);
}
.nav__mobil.je-otvorene { display: grid; max-height: calc(100vh - var(--nav-h)); overflow-y: auto; }
/* Otvorené menu: stránka pod panelom sa zatemní a telo nescroluje (vidy.js
   dáva telu triedu .je-menu). Zatemnenie je pseudoprvok tela, nie potomok
   .nav — backdrop-filter na .nav by fixnému potomkovi zmenil vzťažný rám. */
body.je-menu { overflow: hidden; }
body.je-menu::before {
  content: ""; position: fixed; inset: 0; z-index: 49;
  background: rgba(27, 22, 20, .6);
}
.nav__mobil a:not(.tlacidlo) {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 3.25rem;
  border-bottom: 1px solid var(--linka);
  font-family: var(--f-display); font-weight: 500; font-size: 1.4rem; letter-spacing: -.01em;
  text-decoration: none;
}
.nav__mobil a[aria-current="page"] { color: var(--vino-text); }
.nav__mobil a small { font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .08em; color: var(--atrament-2); }
.nav__mobil .tlacidlo { margin-top: 1.25rem; justify-self: start; }
@media (max-width: 56rem) {
  .nav__odkazy, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
}

/* ---------------------------------------------------------------------
   HERO — bez 100vh: obsah na prvej obrazovke, nie prázdna plocha.
   Riadky nadpisu sa pri načítaní zdvihnú; text je viditeľný od prvého
   snímku, animuje sa len poloha.
   --------------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem); }
.hero__mriezka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}
.hero .stitok { margin-bottom: 1.5rem; }
.hero__nadpis span { display: block; animation: k-hore .9s var(--krivka) both; }
.hero__nadpis span:nth-child(2) { animation-delay: .07s; }
.hero__nadpis span:nth-child(3) { animation-delay: .14s; }
.hero__nadpis span:nth-child(4) { animation-delay: .21s; }
@keyframes k-hore { from { transform: translateY(.4em); } to { transform: none; } }
.hero .lede { margin-top: 1.75rem; }
.hero__akcie { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 2rem; }
.hero__bok { display: grid; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--linka-silna); }
.hero__bok h2 { font-family: var(--f-mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--atrament-2); }
.hero__bok li { padding-block: .6rem; border-bottom: 1px solid var(--linka); font-size: .92rem; line-height: 1.45; }
.hero__bok li b { display: block; font-weight: 600; }
.hero__bok li span { color: var(--atrament-2); }
.hero__bok .odkaz-sipka { justify-self: start; font-size: .92rem; }
@media (max-width: 56rem) {
  .hero__mriezka { grid-template-columns: 1fr; }
  .hero__bok { padding-top: 1.5rem; }
}

/* ---------------------------------------------------------------------
   KARTY, PILIERE (služby)
   Celá karta je klikateľná cez roztiahnutý hlavný odkaz; vedľajšie odkazy
   v karte ležia nad ním (z-index), aby ostali klikateľné.
   --------------------------------------------------------------------- */
.karta {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--linka);
  border-radius: var(--r-l);
  background: var(--karta);
}
.pilier {
  position: relative;
  display: flex; flex-direction: column; gap: .9rem;
  transition: transform .35s var(--krivka), box-shadow .35s var(--krivka), border-color .25s;
}
.pilier:hover { transform: translateY(-4px); box-shadow: var(--tien); border-color: var(--linka-silna); }
.pilier__cislo { font-size: 2.25rem; color: var(--vino-text); }
/* Odkaz má vlastný box ≥ 44 px (padding vyrovnaný záporným okrajom) a navyše ::after roztiahnutý cez celú kartu. */
.pilier__nazov a { display: inline-block; padding-block: .6rem; margin-block: -.6rem; text-decoration: none; }
.pilier__nazov a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pilier__text { color: var(--atrament-2); font-size: .95rem; }
.pilier__zoznam { font-size: .9rem; }
.pilier__odkazy { position: relative; z-index: 1; margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.pilier__odkazy .odkaz-sipka { font-size: .92rem; }

/* ---------------------------------------------------------------------
   REEL — kartička videa (index aj /portfolio). Prehrávanie rieši vidy.js:
   tlačidlo .reel__media[data-video] sa po kliknutí vymení za <video>.
   --------------------------------------------------------------------- */
.reely {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
/* Na mobile filmový pás: jeden riadok so snapom namiesto troch riadkov
   kariet 9:16 (tie by zabrali celú obrazovku trikrát). Roluje len pás,
   dokument nie; tretia karta vykúka spoza okraja ako výzva potiahnuť. */
@media (max-width: 40rem) {
  .reely {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 58%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad-x);
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
    padding-bottom: .5rem;
    scrollbar-width: thin;
  }
  .reely > * { scroll-snap-align: start; }
}
.reel { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.reel__media {
  position: relative;
  /* Vlastný kontext vrstiev: bez neho by zástupný stav so z-index: -1 prepadol
     pod pozadie rámčeka a zostal by z neho holý béžový obdĺžnik. */
  isolation: isolate;
  display: block; width: 100%; padding: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--linka-silna); border-radius: var(--r-m);
  background: var(--papier-3);
  cursor: pointer;
  text-align: left;
}
.reel__media img, .reel__media video { width: 100%; height: 100%; object-fit: cover; }
/* Tmavé snímky (dielňa, nočný záber) by na tmavom papieri nemali hranu:
   jemné svetlo zhora a vnútorná vlasová linka kartu vykreslia bez zásahu
   do samotného obrázka. Pod tlačidlom prehrávania (z-index) a bez klikov. */
.reel__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 38%);
}
/* --zoom nastavuje skript na kartách, ktorých náhľad má zapečené čierne pásy
   (reel zo 16:9 záberu vložený do 9:16 plátna). Priblížením na obsahový pruh
   pásy vypadnú z rámčeka; bez premennej sa nič nemení. */
.reel__media img { transform: scale(var(--zoom, 1)) translateY(var(--posun, 0)); transition: transform 1s var(--krivka); }
.reel__media:hover img { transform: scale(calc(var(--zoom, 1) * 1.04)) translateY(var(--posun, 0)); }
/* Zástupný stav pod obrázkom: keď náhľad chýba alebo vráti 404, ostane ikona
   klapky a veta — nikdy holý béžový obdĺžnik. */
.reel__bez {
  position: absolute; inset: 0; z-index: -1;   /* pod obrázkom, nad pozadím rámčeka */
  display: grid; place-items: center; align-content: center; gap: .6rem;
  padding: 1rem; text-align: center;
  font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: var(--atrament-2);
  background: var(--papier-3);
}
.reel__bez svg { width: 1.75rem; height: 1.75rem; opacity: .55; }
.reel__play {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 1;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--papier); color: var(--atrament);
  box-shadow: var(--tien);
  transition: transform .3s var(--krivka), background-color .25s, color .25s;
}
.reel__play::before {   /* trojuholník prehrávania, o chlp vpravo, aby sedel opticky v strede */
  content: ""; width: 0; height: 0; margin-left: .2rem;
  border-left: .7rem solid currentColor; border-top: .45rem solid transparent; border-bottom: .45rem solid transparent;
}
.reel__media:hover .reel__play { background: var(--vino); color: var(--na-vine); transform: scale(1.06); }
.reel__telo { display: grid; gap: .1rem; padding: 0 .2rem; }
.reel__klient { font-weight: 600; font-size: .95rem; }
.reel__nazov { font-size: .82rem; line-height: 1.4; color: var(--atrament-2); }
.reel__chyba { display: grid; place-items: center; height: 100%; padding: 1rem; text-align: center; font-size: .85rem; color: var(--atrament-2); }
/* Kostra: čo vidí čitateľ, kým sa načíta API. Nie prázdna plocha.
   Pulzuje POZADÍM, nie krytím celého prvku: krytie ťahalo výplň smerom k pozadiu
   sekcie, takže v spodnej fáze pulzu bol rozdiel ~2/255 a z kostry ostali prázdne
   orámované obdĺžniky. Obe fázy pulzu držia rozdiel voči pozadiu nad 20/255. */
.reel--kostra .reel__media { cursor: default; background: var(--kostra); animation: k-kostra 1.6s ease-in-out infinite; }
.reel--kostra .reel__klient, .reel--kostra .reel__nazov { height: .8em; border-radius: var(--r-s); background: var(--kostra); animation: k-kostra 1.6s ease-in-out infinite; }
.reel--kostra .reel__nazov { width: 60%; margin-top: .3rem; }
@keyframes k-kostra { 0%, 100% { background-color: var(--kostra); } 50% { background-color: var(--kostra-2); } }

/* Prázdny alebo chybový stav: ikona + veta, nikdy holá plocha. */
.stav {
  display: grid; justify-items: center; gap: .75rem;
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  border: 1px dashed var(--linka-silna); border-radius: var(--r-l);
  text-align: center; color: var(--atrament-2);
}
.stav svg { width: 2.5rem; height: 2.5rem; color: var(--vino-text); }
.stav p { max-width: 40ch; text-wrap: balance; }
.stav .odkaz-sipka { color: var(--atrament); }

/* ---------------------------------------------------------------------
   BALÍKY — tri rovnocenné karty; nič „najobľúbenejšie“, len fakty
   --------------------------------------------------------------------- */
.baliky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.balik { display: flex; flex-direction: column; gap: 1.1rem; }
.balik__hlava { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.balik__meno { font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em; }
.balik__tag { display: block; margin-top: .35rem; font-family: var(--f-mono); font-size: .75rem; font-weight: 400; letter-spacing: .01em; color: var(--atrament-2); }
.balik__cena {
  font-family: var(--f-display); font-weight: 400;
  font-variation-settings: "opsz" 144;
  font-size: clamp(2.25rem, 2rem + 1vw, 2.75rem);
  line-height: 1; letter-spacing: -.025em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--vino-text);
  white-space: nowrap;
}
.balik__cena small { display: block; margin-top: .45rem; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .02em; color: var(--atrament-2); }
.balik__prekoho { padding: .9rem 1rem; border-radius: var(--r-s); background: var(--vino-jemna); font-size: .92rem; line-height: 1.5; }
.balik__prekoho b { display: block; font-weight: 600; }
.balik__obsah { padding-top: 1rem; border-top: 1px solid var(--linka); font-size: .92rem; }
.balik .tlacidlo { margin-top: auto; align-self: flex-start; }
/* Tri cenové karty zdieľajú riadky mriežky: hlava, „pre koho“, zoznam plnení
   a tlačidlo stoja v jednej línii vo všetkých troch — popisný box tretej karty
   býval o riadok vyšší a zoznamy plnení sa rozišli o 22 px. Bez subgridu je to
   obyčajná karta: nič sa nerozbije, len sa nezarovná. */
@supports (grid-template-rows: subgrid) {
  .baliky .balik { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 1.1rem; }
  .baliky .balik .tlacidlo { margin-top: 0; align-self: end; justify-self: start; }
}
.baliky__pozn { margin-top: 1.5rem; font-size: .875rem; color: var(--atrament-2); max-width: 60ch; }
/* Odkaz v texte: dotyková plocha 44 px bez zmeny riadkovania (záporný okraj vyrovná padding). */
.odkaz-v-texte, .baliky__pozn a { display: inline-block; padding: .75rem 0; margin: -.75rem 0; color: var(--atrament); text-underline-offset: .2em; }
.odkaz-v-texte:hover, .baliky__pozn a:hover { color: var(--vino-text); }
@media (max-width: 60rem) {
  .baliky { grid-template-columns: 1fr; max-width: 32rem; }
}

/* ---------------------------------------------------------------------
   KROKY — proces ako číslovaný pás
   --------------------------------------------------------------------- */
.kroky { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.krok { padding-top: 1.25rem; border-top: 1px solid var(--linka-silna); }
.krok__cislo { font-size: clamp(2.5rem, 4vw, 3.5rem); color: var(--vino-text); }
.krok__nazov { margin-top: .85rem; font-family: var(--f-display); font-weight: 500; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; }
.krok__text { margin-top: .5rem; font-size: .92rem; color: var(--atrament-2); }

/* ---------------------------------------------------------------------
   KONTAKT — riadky vľavo, inverzný blok s formulárom vpravo
   --------------------------------------------------------------------- */
.kontakt__mriezka { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.kontakt__riadky { margin-top: 2rem; border-top: 1px solid var(--linka); }
.kontakt__riadok {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.25rem;
  border-bottom: 1px solid var(--linka);
  font-size: .95rem;
}
.kontakt__riadok > span:first-child { flex: none; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--atrament-2); }
.kontakt__riadok a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-decoration: none; transition: color .2s; }
.kontakt__riadok a:hover { color: var(--vino-text); }
/* Úvod sekcie Kontakt je na všetkých stránkach rovnaký: štítok, nadpis, lede. */
.kontakt__uvod .stitok, .kontakt__uvod .nadpis { margin-bottom: 1.25rem; }
@media (max-width: 56rem) { .kontakt__mriezka { grid-template-columns: 1fr; } }

.blok {
  --focus: var(--blok-akcent);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--r-l);
  background: var(--blok);
  color: var(--na-bloku);
}
.blok__nadpis { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.blok__text { margin-top: .6rem; color: var(--na-bloku-2); }
.blok__inak { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--blok-linka); font-size: .9rem; color: var(--na-bloku-2); }
.blok__inak a { display: inline-block; padding: .7rem 0; margin: -.7rem 0; color: var(--na-bloku); text-underline-offset: .2em; }
.blok noscript p { margin-top: 1rem; font-size: .9rem; color: var(--na-bloku-2); }

/* Formulár: popis nad poľom, 16 px v poli (iOS pri fokuse nepribližuje). */
.formular { margin-top: 1.5rem; display: grid; gap: 1rem; }
.pole-riadok { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pole-skupina { display: grid; gap: .4rem; min-width: 0; }
.pole-popis { font-family: var(--f-mono); font-size: .75rem; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--na-bloku-2); }
.pole {
  width: 100%; min-height: 3.25rem;
  padding: 0 1rem;
  border: 1px solid var(--blok-pole-okraj); border-radius: var(--r-s);
  background: var(--blok-pole); color: var(--blok-pole-text);
  font-family: inherit; font-size: 1rem;
  text-overflow: ellipsis;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s;
}
.pole::placeholder { color: var(--blok-pole-okraj); opacity: 1; }
.pole:hover { border-color: var(--na-bloku-2); }
.pole:focus-visible { outline-offset: 2px; }
textarea.pole { min-height: 8.5rem; padding: .85rem 1rem; line-height: 1.5; resize: vertical; }
.pole-vyber { position: relative; }
.pole-vyber .pole { padding-right: 2.75rem; cursor: pointer; }
.pole-vyber::after {   /* šípka z okrajov, nie z obrázka — mení farbu s témou */
  content: ""; position: absolute; right: 1.1rem; top: 50%;
  width: .55rem; height: .55rem;
  border-right: 1.5px solid var(--blok-pole-text); border-bottom: 1.5px solid var(--blok-pole-text);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.pasca { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }   /* pasca na roboty: mimo obrazovky, nie display:none */
.formular__akcia { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.blok .tlacidlo--jantar { background: var(--blok-tlacidlo); color: var(--na-blok-tlacidle); }
.blok .tlacidlo--jantar:hover { box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5); }
/* Názvy tried stavu (form__status, is-success, is-error) nastavuje prevzatý JS — nemeniť. */
.form__status { display: none; padding: .85rem 1rem; border: 1px solid; border-radius: var(--r-s); font-size: .92rem; font-weight: 500; }
.form__status.is-success { display: block; color: var(--blok-ok); border-color: var(--blok-ok); }
.form__status.is-error { display: block; color: var(--blok-chyba); border-color: var(--blok-chyba); }
@media (max-width: 36rem) {
  .pole-riadok { grid-template-columns: 1fr; }
  .formular__akcia .tlacidlo { width: 100%; }
}

/* ---------------------------------------------------------------------
   PÄTA
   --------------------------------------------------------------------- */
.pata { padding-block: clamp(3rem, 6vw, 5rem) 1.5rem; border-top: 1px solid var(--linka); }
.pata__mriezka { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--linka); }
.pata__znacka { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1; }
.pata__znacka img { flex: none; height: 1.75rem; width: auto; filter: var(--znacka-filter); opacity: var(--znacka-krytie); }
.pata__text { margin-top: 1rem; max-width: 30ch; font-size: .92rem; color: var(--atrament-2); }
.pata__stlpec h3 { margin-bottom: .75rem; font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--jantar-text); }
.pata__stlpec ul { display: grid; }
.pata__stlpec a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; font-size: .95rem; text-decoration: none; color: var(--atrament-2); transition: color .2s; }
.pata__stlpec a:hover { color: var(--atrament); }
.pata__spodok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding-top: 1.25rem; font-family: var(--f-mono); font-size: .75rem; color: var(--atrament-2); }
.pata__spodok nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.pata__spodok nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.pata__spodok nav a:hover { color: var(--atrament); }
.prepinac {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 2.75rem; padding: 0 1rem;
  border: 1px solid var(--linka-silna); border-radius: var(--r-s); background: transparent;
  font-family: var(--f-mono); font-size: .8125rem; font-weight: 500; color: var(--atrament-2);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.prepinac:hover { border-color: var(--jantar); color: var(--jantar-text); }
.prepinac__bod { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
@media (max-width: 56rem) { .pata__mriezka { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { .pata__mriezka { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ---------------------------------------------------------------------
   ODHALENIE PRI ROLOVANÍ
   Predvolene viditeľné. Skrytý stav (.je-skryte) dáva len vidy.js prvkom
   pod okrajom obrazovky a odoberá ho, keď sa priblížia. --o = poradie
   v rade (oneskorenie), nastavuje sa inline: style="--o: 2".
   --------------------------------------------------------------------- */
.odhal { transition: opacity .7s var(--krivka), transform .7s var(--krivka); transition-delay: calc(var(--o, 0) * 70ms); }
.odhal.je-skryte { opacity: 0; transform: translateY(1.25rem); }

/* ---------------------------------------------------------------------
   MENEJ POHYBU — bez animácií, bez posunov, všetko viditeľné
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .odhal, .odhal.je-skryte { opacity: 1; transform: none; }
  .tlacidlo:hover, .pilier:hover { transform: none; }
}

/* Veľmi úzke telefóny: o niečo menej vzduchu okolo. */
@media (max-width: 24rem) {
  :root { --pad-x: 1rem; }
}