/* fonty.css */
@font-face{font-family:'Bodoni Moda';src:url('/assets/fonty/bodoni-latin.woff2') format('woff2');font-weight:400 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bodoni Moda';src:url('/assets/fonty/bodoni-latin-ext.woff2') format('woff2');font-weight:400 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Jost';src:url('/assets/fonty/jost-latin.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';src:url('/assets/fonty/jost-latin-ext.woff2') format('woff2');font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Yellowtail';src:url('/assets/fonty/yellowtail-latin.woff2') format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Yellowtail';src:url('/assets/fonty/yellowtail-latin-ext.woff2') format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* tokens.css */
:root {
  /* WHY: farby odmerané z podklady/mockup-chatgpt.png cez scripts/farby.mjs — neodhaduj ich */
  --cierna: #0A0B0B;
  --cierna-hlbka: #060707;
  --panel: #111112;
  --panel-2: #0D0E0E;

  --zlata: #C99A66;
  --zlata-svetla: #E4C193;
  --zlata-tmava: #8A6A42;
  --zlata-linka: rgba(201, 154, 102, 0.28);
  --zlata-linka-slaba: rgba(201, 154, 102, 0.14);

  --text: #EDE7DE;
  --text-tlmeny: #A8A096;
  /* WHY #918A81: pôvodné #7D766D malo 4,21:1, náhrada #857E75 mala 4,71:1 —
     to je tesne nad hranicou a Lighthouse to aj tak hlásil ako prepadnuté.
     Táto hodnota má 5,53:1, teda rezervu. Merané scripts/farby.mjs. */
  --text-slaby: #918A81;

  --pismo: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pismo-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --pismo-skript: 'Yellowtail', 'Segoe Script', cursive;

  --t--1: 0.78rem;
  --t-0: 1rem;
  --t-1: 1.08rem;
  --t-2: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  --t-3: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --t-4: clamp(1.8rem, 1.4rem + 1.9vw, 2.6rem);
  --t-5: clamp(2.1rem, 1.5rem + 2.9vw, 3.2rem);
  --t-6: clamp(3.2rem, 2rem + 6vw, 6.5rem);

  --m-1: 0.25rem;
  --m-2: 0.5rem;
  --m-3: 1rem;
  --m-4: 1.5rem;
  --m-5: 2.5rem;
  --m-6: 4rem;
  --m-7: clamp(3.5rem, 2rem + 6vw, 6rem);

  --vyska-hlavicky: 88px;
  --sirka-obalu: 1280px;
  --okraj: clamp(1.25rem, 5vw, 4.5rem);
  --sirka-textu: 62ch;

  --krivka: cubic-bezier(0.22, 1, 0.36, 1);
  --cas-1: 150ms;
  --cas-2: 280ms;
  --cas-3: 520ms;
}

/* base.css */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cierna);
  color: var(--text);
  font-family: var(--pismo);
  font-size: var(--t-0);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 2px solid var(--zlata);
  outline-offset: 3px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.15; }

p { margin: 0; }

.preskocit {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--zlata);
  color: var(--cierna);
  padding: var(--m-2) var(--m-3);
  z-index: 100;
}
.preskocit:focus { left: var(--m-3); top: var(--m-3); }

/* nadpis sekcie — serif, prestrkaný, so zlatou ozdobou pod ním */
.nadpis-sekcie {
  font-family: var(--pismo-display);
  font-size: var(--t-5);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}
.nadpis-sekcie--zlaty { color: var(--zlata); }

/* WHY väčšie a menej prestrkané: 12,5 px pri 0,32em a váhe 400 prejde kontrastom
   na 100, ale kontrastný pomer nemeria tenké ťahy ani medzery medzi písmenami.
   Michal to trafil — zákazníčky sú staršie a verzálky s veľkým prestrkaním sa
   na mobile čítajú horšie, než audit ukazuje. 0,26em stále drží luxusný výraz. */
.oko {
  font-size: 0.85rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--zlata);
  font-weight: 500;
}

.perex {
  color: var(--text-tlmeny);
  max-width: var(--sirka-textu);
  font-size: var(--t-1);
}

/* nožničková ozdoba pod nadpisom (ako v predlohe) */
.ozdoba {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-3);
  color: var(--zlata);
}
.ozdoba::before, .ozdoba::after {
  content: "";
  height: 1px;
  width: clamp(40px, 12vw, 110px);
  background: linear-gradient(90deg, transparent, var(--zlata));
}
.ozdoba::after { background: linear-gradient(90deg, var(--zlata), transparent); }
.ozdoba svg { width: 20px; height: 20px; flex: none; }

.ozdoba--vlavo { justify-content: flex-start; }
.ozdoba--vlavo::before { display: none; }

/* tlačidlá */
.tlacidlo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--m-2);
  font-family: var(--pismo);
  font-size: var(--t--1);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--zlata);
  color: var(--zlata);
  background: transparent;
  cursor: pointer;
  transition: background var(--cas-2) var(--krivka), color var(--cas-2) var(--krivka),
              border-color var(--cas-2) var(--krivka);
}
.tlacidlo:hover, .tlacidlo:focus-visible {
  background: var(--zlata);
  color: var(--cierna);
}
.tlacidlo--plne {
  background: var(--zlata);
  color: var(--cierna);
  font-weight: 500;
}
.tlacidlo--plne:hover, .tlacidlo--plne:focus-visible {
  background: var(--zlata-svetla);
  border-color: var(--zlata-svetla);
  color: var(--cierna);
}
.tlacidlo--ticho {
  border-color: rgba(237, 231, 222, 0.3);
  color: var(--text);
}

.hero__popis {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--text-tlmeny);
}

/* rýchle kontakty — telefón, WhatsApp, Instagram vedľa seba */
.rychle-kontakty {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}
.rychle-kontakty .tlacidlo { padding: 0.85rem 1.4rem; }
.rychle-kontakty svg { flex: none; }

.nadpis-sekcie--vlavo { text-align: left; }
.perex--odsadeny { margin-top: 1rem; }

/* layout.css */
.obal {
  width: 100%;
  max-width: var(--sirka-obalu);
  margin-inline: auto;
  padding-inline: var(--okraj);
}

.pas { padding-block: var(--m-7); }
.pas--panel { background: var(--panel); }
.pas--hlbka { background: var(--cierna-hlbka); }

.pas__hlavicka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--m-3);
  text-align: center;
  margin-bottom: var(--m-6);
}
.pas__hlavicka--vlavo {
  align-items: flex-start;
  text-align: left;
}

.mriezka-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--m-6);
  align-items: center;
}
@media (min-width: 900px) {
  .mriezka-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m-7); }
}

/* hlavicka.css */
.hlavicka {
  position: fixed;
  padding-block: 0.35rem;
  inset: 0 0 auto 0;
  z-index: 50;
  min-height: var(--vyska-hlavicky);
  display: flex;
  align-items: center;
  background: rgba(10, 11, 11, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--cas-2) var(--krivka), border-color var(--cas-2) var(--krivka);
}
.hlavicka[data-posunuta="ano"] {
  background: rgba(6, 7, 7, 0.95);
  border-bottom-color: var(--zlata-linka-slaba);
}
.hlavicka__obal {
  width: 100%;
  max-width: var(--sirka-obalu);
  margin-inline: auto;
  padding-inline: var(--okraj);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m-4);
}

.znacka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  text-decoration: none;
  flex: none;
}
.znacka__logo { display: block; height: auto; }
.znacka--pata .znacka__meno { font-size: 1.1rem; }
.znacka__mono {
  font-family: var(--pismo-display);
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: 0.02em;
  background: linear-gradient(160deg, var(--zlata-svetla), var(--zlata) 55%, var(--zlata-tmava));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.znacka__text { display: flex; flex-direction: column; line-height: 1.1; }
.znacka__nazov {
  font-size: 0.94rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--text);
}
.znacka__meno {
  font-family: var(--pismo-skript);
  /* WHY väčšie než pôsobí: Yellowtail má nízky stredový dotah, takže pri 1,02rem
     sa číta ako ~12 px bezpätkového. Rukopis drž len na mene a podpise, nikdy na
     dlhšom texte. */
  font-size: 1.16rem;
  padding-left: 0.2rem;
  color: var(--zlata);
  line-height: 1.4;
}

.menu { display: none; }
@media (min-width: 1000px) {
  .menu {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2.1rem);
  }
}
.menu a {
  font-size: var(--t--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-tlmeny);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color var(--cas-1) var(--krivka), border-color var(--cas-1) var(--krivka);
}
.menu a:hover, .menu a:focus-visible { color: var(--text); border-bottom-color: var(--zlata); }
.menu a[aria-current="page"] { color: var(--zlata); border-bottom-color: var(--zlata); }

.hlavicka__akcia { display: none; }
@media (min-width: 1000px) { .hlavicka__akcia { display: inline-flex; padding: 0.75rem 1.5rem; } }

/* mobilné menu */
.prepinac {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--zlata-linka);
  cursor: pointer;
}
@media (min-width: 1000px) { .prepinac { display: none; } }
.prepinac span {
  display: block;
  height: 1px;
  background: var(--zlata);
  transition: transform var(--cas-2) var(--krivka), opacity var(--cas-1) var(--krivka);
}
.prepinac[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.prepinac[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.prepinac[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.zasuvka {
  position: fixed;
  inset: var(--vyska-hlavicky) 0 auto 0;
  background: var(--cierna-hlbka);
  border-bottom: 1px solid var(--zlata-linka-slaba);
  padding: var(--m-4) var(--okraj) var(--m-5);
  display: flex;
  flex-direction: column;
  gap: var(--m-3);
  z-index: 49;
}
.zasuvka[hidden] { display: none; }
.zasuvka a {
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding-block: 0.55rem;
  border-bottom: 1px solid rgba(237, 231, 222, 0.08);
}
.zasuvka a[aria-current="page"] { color: var(--zlata); }
.zasuvka .tlacidlo { margin-top: var(--m-2); }
@media (min-width: 1000px) { .zasuvka { display: none; } }

/* hero.css */
.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--vyska-hlavicky) + var(--m-6)) var(--okraj) var(--m-7);
  overflow: hidden;
  /* WHY: dočasná textúra tkaniny, kým nedodá Martina fotku dielne.
     Nie je to fotka a netvári sa ňou — pod hero fotkou ostane ako podklad. */
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201, 154, 102, 0.09), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 3px),
    var(--cierna-hlbka);
}
.hero__pozadie {
  position: absolute;
  inset: 0;
  object-fit: cover;
  /* WHY: na úzkom displeji by stred záberu ukázal len prázdny stôl —
     výrez sa posúva na krajčírsku pannu so sakom. */
  object-position: 28% 50%;
  width: 100%;
  height: 100%;
  opacity: 1;
}
@media (min-width: 760px) {
  .hero__pozadie { object-position: 50% 50%; }
}
.hero__zavoj {
  position: absolute;
  inset: 0;
  /* WHY: fotka je sama tmavá, preto len jemné stmavenie za textom a silnejšie
     na hranách — pod hlavičkou a v prechode do ďalšej sekcie. */
  background:
    radial-gradient(ellipse 58% 62% at 50% 48%, rgba(6, 7, 7, 0.74) 0%, rgba(6, 7, 7, 0.34) 62%, transparent 100%),
    linear-gradient(180deg, rgba(6, 7, 7, 0.92) 0%, rgba(6, 7, 7, 0.28) 22%, rgba(6, 7, 7, 0.3) 60%, var(--cierna) 100%);
}
.hero__obsah { position: relative; max-width: 760px; }

.hero__mono {
  font-family: var(--pismo-display);
  font-size: var(--t-6);
  line-height: 1.18;
  letter-spacing: 0.04em;
  background: linear-gradient(168deg, var(--zlata-svetla) 4%, var(--zlata) 46%, var(--zlata-tmava) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.15em;
}
.hero__nazov {
  font-family: var(--pismo-display);
  font-size: clamp(1.6rem, 1rem + 2.6vw, 2.9rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text);
}
.hero__meno {
  font-family: var(--pismo-skript);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.3rem);
  color: var(--zlata);
  line-height: 1.6;
  margin-top: 0.1em;
}
.hero .ozdoba { margin-block: var(--m-4) var(--m-3); }
.hero__slogan {
  font-size: var(--t-1);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-tlmeny);
}
.hero__akcie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-3);
  justify-content: center;
  margin-top: var(--m-5);
}
.hero__dole {
  position: absolute;
  bottom: var(--m-4);
  left: 50%;
  transform: translateX(-50%);
  color: var(--zlata);
  opacity: 0.7;
  animation: hero-dole 2.6s var(--krivka) infinite;
}
@keyframes hero-dole {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.35; }
  50% { transform: translate(-50%, 8px); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) { .hero__dole { animation: none; } }

/* sluzby.css */
.sluzby {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
@media (min-width: 620px) { .sluzby { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sluzby { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sluzba {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--m-3);
  text-align: center;
  padding: var(--m-4) var(--m-4) var(--m-5);
  text-decoration: none;
  border-bottom: 1px solid var(--zlata-linka-slaba);
  transition: background var(--cas-2) var(--krivka);
}
@media (min-width: 620px) {
  .sluzba { border-bottom: none; border-right: 1px solid var(--zlata-linka-slaba); }
  .sluzba:nth-child(2n) { border-right: none; }
}
@media (min-width: 1000px) {
  .sluzba, .sluzba:nth-child(2n) { border-right: 1px solid var(--zlata-linka-slaba); }
  .sluzba:nth-child(3n) { border-right: none; }
  .sluzba:last-child { border-right: none; }
}
.sluzba:hover { background: rgba(201, 154, 102, 0.05); }

.sluzba__znak { color: var(--zlata); height: 52px; }
.sluzba__znak svg { height: 100%; width: auto; }
.sluzba__nazov {
  font-family: var(--pismo-display);
  font-size: var(--t-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zlata);
}
.sluzba__popis { color: var(--text-tlmeny); font-size: 0.96rem; }
.sluzba__viac {
  margin-top: auto;
  padding-top: var(--m-2);
  font-size: var(--t--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-slaby);
  transition: color var(--cas-1) var(--krivka);
}
.sluzba:hover .sluzba__viac { color: var(--zlata); }

.sluzba-galeria { margin-top: var(--m-3); }

/* o-mne.css */
.o-mne { align-items: stretch; }
.o-mne__text {
  display: flex;
  flex-direction: column;
  gap: var(--m-3);
  justify-content: center;
  padding-block: var(--m-4);
}
.o-mne__nadpis {
  font-family: var(--pismo-display);
  font-size: var(--t-5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--zlata);
  text-wrap: balance;
}
.o-mne__text p { color: var(--text-tlmeny); max-width: var(--sirka-textu); }
.o-mne__podpis {
  font-family: var(--pismo-skript);
  font-size: var(--t-3);
  color: var(--zlata);
  margin-top: var(--m-2);
}
.o-mne__foto { position: relative; min-height: 380px; }
.o-mne__foto img { width: 100%; height: 100%; object-fit: cover; }

/* WHY: rám odsadený dovnútra fotky — prvok z predlohy, drží zlatú linku aj bez fotky */
.ram { position: relative; }
.ram::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--zlata-linka);
  pointer-events: none;
}

/* galeria.css */
/* WHY väčší odstup: pri 8 px gape farebné fotky splynú do jedného pestrého bloku
   a čierne pozadie medzi nimi prakticky zmizne. Elegancia zvyšku webu stojí práve
   na tom tichu okolo. (25.8.2026) */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m-3);
}
@media (min-width: 760px) { .galeria { gap: var(--m-4); } }
@media (min-width: 760px) { .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .galeria { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.galeria--siroka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .galeria--siroka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.galeria__polozka {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--panel);
  /* WHY dva rámy: zlatá linka drží štýl, ale na pestrej fotke ju nevidno.
     Tmavý vnútorný prstenec oddelí okraj fotky od jej vlastnej farby a usadí ju. */
  border: 1px solid var(--zlata-linka);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.galeria__polozka img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cas-3) var(--krivka);
}
.galeria__polozka:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .galeria__polozka:hover img { transform: none; }
}

.galeria__prazdna {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--m-3);
  font-size: var(--t--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-slaby);
  background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(201, 154, 102, 0.07) 12px 13px);
}

.galeria__akcia { display: flex; justify-content: center; margin-top: var(--m-5); }

/* rozcestník kategórií */
.galeria-katy {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.galeria-kat {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--zlata-linka-slaba);
  overflow: hidden;
  transition: border-color var(--cas-2) var(--krivka);
}
.galeria-kat:hover { border-color: var(--zlata); }
.galeria-kat img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform var(--cas-3) var(--krivka);
}
.galeria-kat:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .galeria-kat:hover img { transform: none; }
}
.galeria-kat__telo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--m-3) var(--m-3) var(--m-4);
}
.galeria-kat__nazov {
  font-family: var(--pismo-display);
  font-size: var(--t-2);
  letter-spacing: 0.05em;
  color: var(--zlata);
}
.galeria-kat__popis { color: var(--text-tlmeny); font-size: 0.92rem; line-height: 1.55; }
.galeria-kat__pocet {
  margin-top: 0.3rem;
  font-size: var(--t--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-slaby);
}

/* kontakt.css */
.kontakt { align-items: start; }
.kontakt__riadky { display: flex; flex-direction: column; gap: var(--m-4); }
.kontakt__riadok { display: flex; align-items: flex-start; gap: var(--m-3); }
.kontakt__ikona {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--zlata-linka);
  color: var(--zlata);
}
.kontakt__ikona svg { width: 19px; height: 19px; }
.kontakt__popis { display: flex; flex-direction: column; line-height: 1.5; }
.kontakt__hodnota { color: var(--text); font-size: var(--t-1); text-decoration: none; }
a.kontakt__hodnota:hover { color: var(--zlata); }
.kontakt__stitok {
  font-size: var(--t--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-slaby);
}

.formular { display: flex; flex-direction: column; gap: var(--m-3); }
.pole { display: flex; flex-direction: column; gap: var(--m-1); }
.pole label {
  font-size: var(--t--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tlmeny);
}
.pole input, .pole textarea, .pole select {
  font-family: var(--pismo);
  font-size: var(--t-0);
  font-weight: 300;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--zlata-linka-slaba);
  padding: 0.85rem 1rem;
  transition: border-color var(--cas-1) var(--krivka);
}
.pole input:focus, .pole textarea:focus, .pole select:focus {
  border-color: var(--zlata);
  outline: none;
}
.pole textarea { resize: vertical; min-height: 130px; }
.formular__poznamka { font-size: var(--t--1); color: var(--text-slaby); }
.formular__stav { font-size: 0.95rem; color: var(--zlata); }

/* WHY: pasca na roboty — pred človekom aj čítačkou skryté, ale nie display:none,
   lebo to niektoré roboty rozpoznajú */
.pole--pasca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kontakt__hodiny { display: flex; flex-direction: column; gap: 0.15rem; }
.kontakt__den {
  display: flex;
  gap: 1.2rem;
  justify-content: space-between;
  font-size: 0.98rem;
  color: var(--text);
  max-width: 20rem;
}
.kontakt__den span:last-child { color: var(--text-tlmeny); font-variant-numeric: tabular-nums; }

.formular__poznamka a { color: var(--text-tlmeny); }
.formular__poznamka a:hover { color: var(--zlata); }

/* stranka.css */
/* hlavička podstránky — nižšia než hero na úvode, bez fotky */
.cip {
  position: relative;
  padding: calc(var(--vyska-hlavicky) + var(--m-6)) var(--okraj) var(--m-6);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201, 154, 102, 0.10), transparent 62%),
    var(--cierna-hlbka);
  border-bottom: 1px solid var(--zlata-linka-slaba);
}
.cip__obal {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--m-3);
  align-items: center;
}
.cip__nadpis {
  font-family: var(--pismo-display);
  font-size: var(--t-5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  text-wrap: balance;
}
.cip__perex { color: var(--text-tlmeny); max-width: 58ch; }

.omrvinky {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-2);
  justify-content: center;
  font-size: var(--t--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-slaby);
}
.omrvinky a { color: var(--text-slaby); text-decoration: none; }
.omrvinky a:hover { color: var(--zlata); }

.text-blok { display: flex; flex-direction: column; gap: var(--m-3); max-width: var(--sirka-textu); }
.text-blok p { color: var(--text-tlmeny); }
.text-blok h2,
.text-blok__nadpis {
  font-family: var(--pismo-display);
  font-size: var(--t-3);
  letter-spacing: 0.06em;
  color: var(--zlata);
  margin-top: var(--m-3);
}

.zoznam { display: flex; flex-direction: column; gap: var(--m-2); list-style: none; padding: 0; margin: 0; }
/* WHY nie flex: pri display:flex sa <strong> a text za ním stanú dvomi flex itemami
   a whitespace medzi nimi prehliadač zahodí — z „Cloudflare — hosting" bolo
   „Cloudflare— hosting". Odrážka je preto absolútna a li ostáva bežný blok. */
.zoznam li {
  position: relative;
  padding-left: 1.55rem;
  padding-bottom: var(--m-2);
  color: var(--text-tlmeny);
  border-bottom: 1px solid rgba(237, 231, 222, 0.07);
}
.zoznam li::before {
  content: ;
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--zlata);
  transform: rotate(45deg);
}

.kroky { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--m-5); }
@media (min-width: 700px) { .kroky { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1050px) { .kroky { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.krok {
  display: flex;
  flex-direction: column;
  gap: var(--m-2);
  padding-top: var(--m-3);
  border-top: 1px solid var(--zlata-linka);
}
.krok__cislo {
  font-family: var(--pismo-display);
  font-size: var(--t-3);
  color: var(--zlata);
  font-variant-numeric: tabular-nums;
}
.krok__nazov { font-size: var(--t-1); letter-spacing: 0.06em; color: var(--text); }
.krok p { color: var(--text-tlmeny); font-size: 0.95rem; }

.stitok {
  display: inline-flex;
  align-items: center;
  gap: var(--m-2);
  font-size: var(--t--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border: 1px dashed var(--zlata);
  color: var(--zlata);
}

/* cenník */
.cennik { display: flex; flex-direction: column; border-top: 1px solid var(--zlata-linka-slaba); }
.cennik__riadok {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-2) var(--m-4);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--m-3);
  border-bottom: 1px solid var(--zlata-linka-slaba);
}
.cennik__nazov { color: var(--text); }
.cennik__cena {
  font-family: var(--pismo-display);
  font-size: var(--t-2);
  color: var(--zlata);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gdpr-stitok { margin-top: var(--m-5); }

.gdpr-datum { margin-top: var(--m-4); color: var(--text-slaby); font-size: 0.9rem; }

.text-blok__nadpis { margin-bottom: 1.2rem; }

/* pata.css */
.pata { background: var(--cierna-hlbka); border-top: 1px solid var(--zlata-linka-slaba); }
.pata__hlavne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--m-5);
  padding-block: var(--m-6);
}
@media (min-width: 800px) { .pata__hlavne { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--m-6); } }
.pata__stlpec { display: flex; flex-direction: column; gap: var(--m-3); }
.pata__nadpis {
  font-size: var(--t--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--zlata);
}
.pata__odkazy { display: flex; flex-direction: column; gap: var(--m-2); }
.pata__odkazy a {
  color: var(--text-tlmeny);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--cas-1) var(--krivka);
}
.pata__odkazy a:hover { color: var(--zlata); }
.pata__text { color: var(--text-tlmeny); font-size: 0.95rem; max-width: 42ch; }

.pata__spodok {
  border-top: 1px solid rgba(237, 231, 222, 0.07);
  padding-block: var(--m-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--m-2) var(--m-4);
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-slaby);
}
.pata__socialne { display: flex; gap: var(--m-2); }
.pata__socialne a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--zlata-linka-slaba);
  color: var(--zlata);
  transition: background var(--cas-1) var(--krivka), color var(--cas-1) var(--krivka);
}
.pata__socialne a:hover { background: var(--zlata); color: var(--cierna); }
.pata__socialne svg { width: 17px; height: 17px; }

.pata__pravne { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: center; }
.pata__pravne a { color: var(--text-slaby); text-decoration: none; border-bottom: 1px solid transparent; }
.pata__pravne a:hover { color: var(--zlata); border-bottom-color: var(--zlata); }

/* brana.css */
/* Vstupná brána — starožitná skriňa z podklady/fotky/skrina.png.
   Overlay nad hotovým webom, nie druhá stránka: obsah je v DOM od začiatku.
   WHY fotka a nie CSS kresba: rezby na krídlach sa kresliť nedajú a práve tie
   robia ten dojem. Krídla sú výrezy tej istej fotky, korpus ostáva statický. */

.brana {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: #050403;
}
.brana[data-stav="hotova"] { display: none; }

body[data-brana="ano"] { overflow: hidden; }

/* scéna drží pomer fotky, aby výrezy krídel sedeli na korpus v každom okne */
.brana__scena {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, 177.34vh);
  aspect-ratio: 1536 / 1024;
  perspective: 1500px;
  perspective-origin: 50.5% 48%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 1.85s cubic-bezier(0.42, 0, 0.62, 0.92) 1.2s;
}
.brana[data-stav="otvara"] .brana__scena { transform: translate(-50%, -50%) scale(1.5); }

/* WHY: na výšku displeja je fotka 3:2 v celej šírke maličká — skriňa vyzerá
   ako obrázok v strede, nie ako dvere, pred ktorými stojíš. Scéna sa preto
   nafúkne nad šírku okna a boky korpusu sa orežú. */
@media (max-aspect-ratio: 1/1) {
  /* WHY 168vw a nie 215vw: pri väčšom zväčšení bolo vidieť len otvor medzi dverami
     a krídla sa otáčali mimo záber — na mobile to nevyzeralo ako otváranie, ale
     ako keby dvere zmizli. Pri 168vw sú krídla v zábere skoro celé. */
  .brana__scena { width: min(168vw, 132vh); }

  /* kamera sa najprv o kúsok odtiahne, nech je otváranie vidieť celé,
     a až potom vletí dovnútra */
  .brana[data-stav=otvara] .brana__scena {
    transition: none;
    animation: brana-kamera 3.05s cubic-bezier(0.45, 0, 0.62, 0.92) forwards;
  }
}

@keyframes brana-kamera {
  0%   { transform: translate(-50%, -50%) scale(1); }
  30%  { transform: translate(-50%, -50%) scale(0.9); }
  52%  { transform: translate(-50%, -50%) scale(0.94); }
  100% { transform: translate(-50%, -50%) scale(2.35); }
}

.brana__korpus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- priestor za dverami ---------- */
/* WHY tieto percentá: sú odmerané z fotky (dvere x 330–1195, y 95–900 z 1536×1024).
   Nemeň ich bez nového výrezu — krídla by prestali sedieť na korpus. */
.brana__vnutro {
  position: absolute;
  left: 22.14%;
  top: 11.72%;
  width: 55.99%;
  height: 75.20%;
  overflow: hidden;
  /* WHY teplý podklad: v medzere medzi krídlami má presvitať svetlo z vnútra,
     nie čierny panel. */
  background: linear-gradient(180deg, #2A180A 0%, #6B4415 34%, #8A5A1E 52%, #4A2C0E 100%);
  /* WHY inset tieň: bez neho mal otvor ostré hrany a na mobile, kde vyplní skoro
     celú obrazovku, to vyzeralo ako obdĺžniková diera namiesto vnútra skrine. */
  box-shadow:
    inset 0 0 40px 18px rgba(10, 6, 2, 0.92),
    inset 0 0 120px 40px rgba(10, 6, 2, 0.65);
}

.brana__interier {
  position: absolute;
  inset: -8%;
  background-image: url('/assets/fotky/hero-1024.webp');
  background-size: cover;
  background-position: 50% 45%;
  filter: blur(10px) saturate(0.8) brightness(0.42) sepia(0.3);
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 1.6s ease 0.2s, filter 2.2s ease 0.6s, transform 1.85s cubic-bezier(0.42, 0, 0.62, 0.92) 1.2s;
}
.brana[data-stav="otvara"] .brana__interier {
  opacity: 1;
  filter: blur(3px) saturate(0.95) brightness(0.8) sepia(0.12);
  transform: scale(1);
}

/* teplé svetlo — rozsvieti sa skôr, než sa krídla pohnú */
.brana__ziara {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 46% 62% at 50% 50%, rgba(255, 214, 150, 0.62) 0%, rgba(222, 160, 84, 0.26) 44%, transparent 76%),
    linear-gradient(180deg, rgba(255, 206, 138, 0.16), transparent 40%);
  opacity: 0;
  transition: opacity 1.2s ease 0.1s;
}
.brana[data-stav="otvara"] .brana__ziara { opacity: 1; }

/* svetlo prenikajúce škárou — na fotke je už úzka škára, tu ju rozšírime.
   WHY scaleX a nie width: animovaná šírka spúšťa reflow v každom snímku
   a na slabšom telefóne to seká práve v momente, ktorý má urobiť dojem. */
.brana__skara {
  position: absolute;
  left: 50.5%;
  top: 8%;
  width: 7%;
  height: 84%;
  margin-left: -3.5%;
  transform-origin: center;
  transform: scaleX(0.05);
  background: linear-gradient(180deg, transparent 1%, rgba(255, 220, 164, 0.9) 20%, rgba(255, 232, 190, 1) 50%, rgba(255, 220, 164, 0.9) 80%, transparent 99%);
  opacity: 0;
  filter: blur(2px);
  will-change: transform, filter;
  transition: opacity 0.7s ease, transform 1.7s cubic-bezier(0.6, 0, 0.3, 1), filter 1.7s ease;
}
.brana[data-stav="otvara"] .brana__skara {
  opacity: 1;
  transform: scaleX(1);
  filter: blur(30px);
}

.brana__prach {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.3s ease 0.6s;
  pointer-events: none;
}
.brana[data-stav="otvara"] .brana__prach { opacity: 1; }
/* WHY z-index: iskry musia byť nad krídlami aj nad svetlom, inak sa stratia */
.brana__prach { z-index: 2; }

/* ---------- krídla ---------- */
.kridlo {
  position: absolute;
  top: 11.72%;
  height: 75.20%;
  transform-style: preserve-3d;
  /* WHY: ťažké dvere sa nerozbiehajú lineárne — dlho stoja, potom sa strhnú
     a na konci tvrdo dosadnú. Preto silne asymetrická krivka. */
  transition: transform 2.05s cubic-bezier(0.72, 0.015, 0.5, 1) 0.35s;
  will-change: transform;
  backface-visibility: hidden;
}
.kridlo img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.kridlo--lave {
  left: 22.14%;
  width: 28.45%;
  transform-origin: left center;
}
.kridlo--prave {
  left: 50.59%;
  width: 27.54%;
  transform-origin: right center;
}

.brana[data-stav="otvara"] .kridlo--lave { transform: rotateY(-98deg); }
.brana[data-stav="otvara"] .kridlo--prave { transform: rotateY(98deg); }

/* tieň, ktorý na krídle ostane, keď sa natočí od svetla */
.kridlo__tien {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 1.6s ease 0.5s;
  pointer-events: none;
}
.kridlo--prave .kridlo__tien {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.62) 0%, transparent 55%);
}
.brana[data-stav="otvara"] .kridlo__tien { opacity: 1; }

/* ---------- text a ovládanie ---------- */
.brana__obsah {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 4vh, 3rem);
  padding: clamp(1.4rem, 4vh, 2.6rem) 2rem 0;
  background: radial-gradient(ellipse 70% 100% at 50% 78%, rgba(6, 4, 2, 0.9) 0%, rgba(6, 4, 2, 0.72) 45%, transparent 78%);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
  width: min(92vw, 560px);
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.5, 0, 0.2, 1);
}
.brana[data-stav="otvara"] .brana__obsah {
  opacity: 0;
  transform: translateX(-50%) translateY(30px);
  pointer-events: none;
}
.brana__logo {
  display: block;
  width: min(72vw, 300px);
  height: auto;
  margin-bottom: 0.4rem;
  transform: translateX(5%);
}
.brana__mono {
  font-family: var(--pismo-display);
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  font-weight: 500;
  line-height: 1.18;
  color: #E8C79B;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95), 0 0 34px rgba(201, 154, 102, 0.4);
}
.brana__nazov {
  font-family: var(--pismo-display);
  font-size: clamp(1.2rem, 3.6vw, 1.9rem);
  letter-spacing: 0.05em;
  color: #F2EAE0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.98);
}
.brana__meno {
  font-family: var(--pismo-skript);
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--zlata);
  line-height: 1.7;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.98);
}
.brana__vstup { margin-top: 1rem; }
.brana__telefon {
  margin-top: 0.85rem;
  font-size: var(--t--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C9C0B4;
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95);
}
.brana__telefon:hover { color: var(--zlata); }

.brana__preskoc {
  position: absolute;
  z-index: 4;
  background: rgba(10, 8, 6, 0.62);
  border: 1px solid rgba(201, 154, 102, 0.34);
  color: #C9C0B4;
  cursor: pointer;
  transition: color var(--cas-1) var(--krivka), border-color var(--cas-1) var(--krivka);
}
.brana__preskoc:hover { color: var(--zlata); border-color: var(--zlata); }


.brana__preskoc {
  bottom: clamp(1rem, 3vh, 1.6rem);
  right: clamp(1rem, 3vw, 1.8rem);
  font-family: var(--pismo);
  font-size: var(--t--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
}
.brana[data-stav="otvara"] .brana__preskoc {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* záverečné odhalenie webu */
.brana[data-stav="otvara"] { animation: brana-odhalenie 0.62s ease-in 2.52s forwards; }
@keyframes brana-odhalenie {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brana { display: none; }
}

/* na úzkom displeji sa telefón lámal do tlačidla Preskočiť */
@media (max-width: 560px) {
  .brana__telefon {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
  .brana__preskoc {
    top: clamp(1rem, 3vh, 1.8rem);
    bottom: auto;
    left: clamp(1rem, 3vw, 1.8rem);
    right: auto;
  }
}

/* lightbox.css */
/* dlaždica galérie je tlačidlo — musí vyzerať ako obrázok, nie ako tlačidlo */
button.galeria__polozka {
  padding: 0;
  border: 1px solid var(--zlata-linka-slaba);
  background: var(--panel);
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  display: block;
  width: 100%;
}
button.galeria__polozka:focus-visible {
  outline: 2px solid var(--zlata);
  outline-offset: 3px;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 7, 7, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }

body[data-lightbox="ano"] { overflow: hidden; }

.lightbox__ramec {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--m-3);
  min-width: 0;
  min-height: 0;
}
.lightbox__foto {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--zlata-linka);
  background: var(--panel);
}
.lightbox__popis {
  font-size: 0.9rem;
  color: var(--text-tlmeny);
  text-align: center;
  max-width: 46ch;
}

.lightbox__zavri,
.lightbox__sip {
  background: rgba(17, 17, 18, 0.8);
  border: 1px solid var(--zlata-linka);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--cas-1) var(--krivka), color var(--cas-1) var(--krivka);
}
.lightbox__zavri:hover,
.lightbox__sip:hover { background: var(--zlata); color: var(--cierna); }
.lightbox__zavri:focus-visible,
.lightbox__sip:focus-visible { outline: 2px solid var(--zlata); outline-offset: 3px; }

.lightbox__sip { width: 52px; height: 52px; flex: none; }

.lightbox__zavri {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.6rem);
  right: clamp(0.8rem, 2vw, 1.6rem);
  width: 44px;
  height: 44px;
  font-size: 1.7rem;
  line-height: 1;
  font-family: var(--pismo);
}

.lightbox__pocet {
  position: absolute;
  bottom: clamp(0.8rem, 2vw, 1.6rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--t--1);
  letter-spacing: 0.2em;
  color: var(--text-slaby);
  font-variant-numeric: tabular-nums;
}

/* na úzkom displeji sa šípky nezmestia vedľa fotky — idú pod ňu */
@media (max-width: 700px) {
  .lightbox {
    grid-template-columns: 1fr;
    grid-template-areas: "ramec" "ovladace";
    align-content: center;
    gap: var(--m-4);
  }
  .lightbox__ramec { grid-area: ramec; }
  .lightbox__sip--vlavo,
  .lightbox__sip--vpravo {
    grid-area: ovladace;
    justify-self: center;
  }
  .lightbox__sip--vlavo { margin-right: 7rem; }
  .lightbox__sip--vpravo { margin-left: 7rem; }
  .lightbox__foto { max-height: 66vh; }
  .lightbox__popis { font-size: 0.82rem; }
}

/* pohyb.css */
.zjav {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--cas-3) var(--krivka), transform var(--cas-3) var(--krivka);
}
.zjav[data-videne="ano"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .zjav { opacity: 1; transform: none; transition: none; }
}
/* WHY: bez tohto by tlač aj náhľady bez IntersectionObservera vyšli prázdne */
@media print {
  .zjav { opacity: 1; transform: none; }
}