@charset "UTF-8";
/* ==========================================================================
   L’Eterna Promessa – ÚVODNÍ STRÁNKA (design v2, od 20. 10. 2026)
   --------------------------------------------------------------------------
   • Načítá ji jen index.html, a to AŽ PO /css/site.css. Barvy, písma,
     tlačítka, hlavička, patička a odkrývání při scrollování (data-odhal)
     jsou ve společném site.css – tady je jen to, co má jen úvodní stránka.
   • Všechny třídy začínají „uv-“. Pohyb a ovládání dělá /js/uvod.js.
   • Barvu nebo písmo neměňte tady, ale v site.css (sekce 1, :root).
   • Co se tu dá bezpečně měnit: velikosti písma (clamp(…)), mezery,
     délku animací (např. 9s u pomalého přiblížení fotek v úvodu).
   • Obsah:
       1. Společné prvky stránky (štítky „01 — …“, nadpisy, mezery)
       2. Úvodní opona (jen první návštěva)
       3. Úvod s fotkami (hero)
       4. 01 Věčný slib + čísla
       5. 02 Co děláme (karty)
       6. 03 Svatby ve 3D (pás scén)
       7. Běžící pás jmen balíčků
       8. 04 Balíčky (karusel, veletržní akce)
       9. 05 Jak to probíhá
      10. 06 Prsteny (tmavá sekce)
      11. 07 Vlastní prsten (90 kombinací)
      12. 08 Galerie
      13. Zvětšený obrázek (okno galerie)
      14. 09 Katalogy (tmavá sekce)
      15. Recenze
      16. 10 Kontakt (tmavá sekce)
      17. Omezený pohyb a stránka bez JavaScriptu
   ========================================================================== */

/* ---------- 1. Společné prvky stránky ---------- */

/* posuvník zůstává na místě i při otevřeném okně se zvětšeným obrázkem
   (stránka pod ním neposkočí do strany) */
html {
  scrollbar-gutter: stable;
}

/* štítek sekce „01 —— Věčný slib“: číslo, tenká linka, název */
.uv-stitek {
  gap: 0.9rem;
}

/* v sekcích s textem vlevo je štítek také vlevo */
:is(.uv-sceny, .uv-prsteny, .uv-katalog) .uv-stitek {
  justify-content: flex-start;
}

.uv-stitek__cislo {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-variant-numeric: lining-nums tabular-nums;
}

.uv-stitek__cislo::after {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

/* modrý odkaz se šipkou na tmavém podkladu */
.uv-odkaz-svetly {
  color: var(--led-svetla);
}

.uv-odkaz-svetly:hover {
  color: #FFFFFF;
}

/* velké nadpisy tmavých sekcí a pásu scén (stejná velikost jako h2 sekcí) */
.uv-sceny h2,
.uv-katalog h2 {
  font-size: clamp(2.3rem, 1.5rem + 2.9vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* sekce před tmavou sekcí, která přes ni „najede“ zaoblenými rohy */
.uv-co,
.uv-kroky,
.uv-galerie,
.uv-recenze {
  padding-bottom: calc(var(--sekce) + var(--r-l));
}

.uv-hlavicka .lp-stitek {
  margin-bottom: 1.4rem;
}

/* ---------- 2. Úvodní opona ----------
   Krémová plocha se symbolem prstýnků, název se „napíše“ a opona odjede
   nahoru. Jen při první návštěvě (třídu uv-bez-opony přidá skript v <head>),
   celkem 1,6 s. Řídí ji jen CSS – když se skript nenačte, opona stejně zmizí. */
.uv-opona {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-js:not(.uv-bez-opony) .uv-opona {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: var(--krem);
    animation: uv-opona-pryc 0.6s var(--ease-io) 1s forwards;
  }
}

.uv-opona__obsah {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}

.uv-opona__symbol {
  width: 92px;
  height: auto;
  animation: uv-opona-symbol 0.8s var(--ease-out) both;
}

.uv-opona__jmeno {
  padding: 0 0.3em;
  font: 400 clamp(2.6rem, 6vw, 4rem)/1.25 var(--f-skript);
  color: var(--inkoust);
  clip-path: inset(-30% 100% -30% -10%);
  animation: uv-napsat 0.95s cubic-bezier(0.6, 0.1, 0.3, 1) 0.12s forwards;
}

@keyframes uv-opona-symbol {
  from {
    opacity: 0;
    transform: scale(0.84) rotate(-10deg);
  }
}

@keyframes uv-napsat {
  to {
    clip-path: inset(-30% -10% -30% -10%);
  }
}

@keyframes uv-opona-pryc {
  to {
    transform: translateY(-100%);
    visibility: hidden;
  }
}

/* ---------- 3. Úvod s fotkami (hero) ----------
   Fotky se střídají (třídu je-aktivni přepíná uvod.js), aktivní se pomalu
   oddaluje (1,06 → 1, 9 s). Tmavý závoj přes fotky je ze site.css
   (.lp-uvod--foto::before). Při scrollování fotka ujíždí a text slábne
   (--uvod-posun 0 → 1 nastavuje site-nav.js). */
.uv-hero.lp-uvod--foto {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
}

.lp-js .tmavy-uvod .uv-hero {
  padding-top: 0;
}

.uv-hero__fotky {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--noc);
  translate: 0 calc(var(--uvod-posun, 0) * 14%);
  scale: calc(1 + var(--uvod-posun, 0) * 0.04);
}

.uv-hero__foto {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease-io);
}

.uv-hero__foto.je-aktivni {
  opacity: 1;
}

.uv-hero__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  .uv-hero__foto.je-aktivni img,
  .uv-hero__foto.odchazi img {
    animation: uv-ken-burns 9s linear both;
  }

  .uv-hero__foto:nth-child(even).je-aktivni img,
  .uv-hero__foto:nth-child(even).odchazi img {
    animation-name: uv-ken-burns-2;
  }
}

@keyframes uv-ken-burns {
  from {
    transform: scale(1.06) translate3d(1%, 0.6%, 0);
  }

  to {
    transform: none;
  }
}

@keyframes uv-ken-burns-2 {
  from {
    transform: scale(1.06) translate3d(-1%, -0.5%, 0);
  }

  to {
    transform: none;
  }
}

.uv-hero__obsah,
.uv-hero__spodek {
  width: 100%;
  max-width: calc(1200px + 2 * var(--okraj));
  margin-inline: auto;
  padding-inline: var(--okraj);
}

.uv-hero__obsah {
  align-self: center;
  padding-block: calc(var(--hl-vyska) + 2.5rem) 2rem;
  translate: 0 calc(var(--uvod-posun, 0) * 16vh);
  opacity: calc(1 - var(--uvod-posun, 0) * 1.6);
}

.uv-hero .uv-hero__stitek {
  margin: 0 0 1.1rem;
  color: var(--led-svetla);
}

.uv-hero .uv-hero__jmeno {
  max-width: none;
  margin: 0 0 0 -0.06em;
  font: 400 clamp(3.4rem, 1.2rem + 7.2vw, 8.6rem)/1.08 var(--f-skript);
  letter-spacing: 0;
  color: #FFFFFF;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.35);
}

/* tahy písma Great Vibes přesahují – vnitřní okraj, aby se neořízly */
.uv-hero__napis {
  display: inline-block;
  padding: 0.06em 0.2em 0.14em 0.06em;
}

.uv-hero .uv-hero__motto {
  margin: 0.4rem 0 0;
  color: var(--na-tmave);
}

.uv-hero__motto::before {
  content: "";
  display: inline-block;
  width: 2.6rem;
  height: 1px;
  margin-right: 1rem;
  vertical-align: middle;
  background: var(--led-svetla);
}

.uv-hero__veta {
  max-width: 32rem;
  margin: 1.4rem 0 0;
  font: italic 300 clamp(1.3rem, 1rem + 0.9vw, 1.8rem)/1.35 var(--f-titul);
  color: #FFFFFF;
}

.uv-hero .uv-hero__akce {
  justify-content: flex-start;
  margin-top: 2.2rem;
}

/* spodní lišta: název scény, proužky fotek, „Dolů“ */
.uv-hero__spodek {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: clamp(1.4rem, 3vw, 2.4rem);
  opacity: calc(1 - var(--uvod-posun, 0) * 2.2);
}

.uv-hero__popisek {
  display: grid;
  gap: 0.25rem;
  min-width: 13rem;
  margin: 0;
  font: 500 0.78rem/1.4 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.uv-hero__nazev {
  transition: opacity 0.35s var(--ease-out);
}

.uv-hero__balicek {
  font-size: 0.72rem;
  color: var(--led-svetla);
}

.uv-hero__pruhy {
  display: flex;
  gap: 0.5rem;
}

.uv-hero__pruhy button {
  display: grid;
  align-items: center;
  width: clamp(30px, 4vw, 56px);
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.uv-hero__pruhy i {
  position: relative;
  display: block;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}

.uv-hero__pruhy i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  transform: scaleX(0);
  transform-origin: left center;
}

.uv-hero__pruhy button:hover i {
  background: rgba(255, 255, 255, 0.55);
}

.uv-hero__pruhy .je-aktivni i::after {
  animation: uv-plneni var(--doba-snimku, 6.5s) linear forwards;
}

.uv-hero__pruhy .je-hotovy i::after {
  transform: none;
}

.uv-hero.je-pauza .uv-hero__pruhy .je-aktivni i::after {
  animation-play-state: paused;
}

@keyframes uv-plneni {
  to {
    transform: none;
  }
}

.uv-hero__dolu {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  font: 500 0.72rem/1 var(--f-text);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

.uv-hero__dolu i {
  position: relative;
  width: 1px;
  height: 54px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
}

.uv-hero__dolu i::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: #FFFFFF;
  animation: uv-kapka 2.2s var(--ease-io) infinite;
}

@keyframes uv-kapka {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(260%);
  }
}

/* nástup úvodu: název se „napíše“, ostatní vyjede zdola.
   Po oponě začíná později (--uv-start). */
@media (prefers-reduced-motion: no-preference) {
  .lp-js .uv-hero {
    --uv-start: 0.15s;
  }

  .lp-js:not(.uv-bez-opony) .uv-hero {
    --uv-start: 1.15s;
  }

  .lp-js .uv-hero__napis {
    clip-path: inset(-30% 100% -30% -10%);
    animation: uv-napsat 1.7s cubic-bezier(0.6, 0.1, 0.3, 1) var(--uv-start) forwards;
  }

  .lp-js :is(.uv-hero__stitek, .uv-hero__motto, .uv-hero__veta, .uv-hero__akce, .uv-hero__spodek) {
    animation: lp-vyjet 1.1s var(--ease-out) both;
    animation-delay: var(--uv-start);
  }

  .lp-js .uv-hero__motto {
    animation-delay: calc(var(--uv-start) + 0.85s);
  }

  .lp-js .uv-hero__veta {
    animation-delay: calc(var(--uv-start) + 1s);
  }

  .lp-js .uv-hero__akce {
    animation-delay: calc(var(--uv-start) + 1.15s);
  }

  .lp-js .uv-hero__spodek {
    animation-delay: calc(var(--uv-start) + 1.35s);
  }
}

/* Telefon (přání majitele 20. 10. 2026: „na telefonu ten úvod není moc hezký“):
   fotky na výšku (<picture> v index.html), text na středu, motto bez linky,
   menší tlačítka vedle sebe, bez popisku fotky – zůstanou jen proužky. */
@media (max-width: 39.99rem) {
  .uv-hero__dolu,
  .uv-hero__popisek {
    display: none;
  }

  .uv-hero__spodek {
    justify-content: center;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }

  .uv-hero__obsah {
    align-self: end;
    padding-bottom: 1.4rem;
    text-align: center;
  }

  .uv-hero .uv-hero__stitek {
    margin-bottom: 0.7rem;
    font-size: 0.68rem;
  }

  .uv-hero .uv-hero__jmeno {
    margin-left: 0;
    font-size: clamp(2.9rem, 13.5vw, 3.6rem);
    line-height: 1.02;
  }

  .uv-hero__motto::before {
    display: none;
  }

  .uv-hero .uv-hero__motto {
    font-size: 0.64rem;
    letter-spacing: 0.2em;
  }

  .uv-hero__veta {
    max-width: 19rem;
    margin: 0.9rem auto 0;
    font-size: 1.2rem;
  }

  .uv-hero .uv-hero__akce {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
  }

  .uv-hero .uv-hero__akce .lp-tlacitko {
    flex: 0 1 auto;
    width: auto;
    min-height: 2.9rem;
    padding: 0.7rem 1.25rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }

  .uv-jen-sirka {
    display: none;
  }
}

/* ---------- 4. 01 Věčný slib + čísla ---------- */
.uv-slib {
  text-align: center;
}

.uv-slib .uv-stitek {
  margin-bottom: 2rem;
}

.uv-slib__text {
  max-width: 21em;
  margin: 0 auto;
  font: 300 clamp(1.7rem, 1.1rem + 2.4vw, 3.3rem)/1.28 var(--f-titul);
  letter-spacing: -0.005em;
  color: var(--inkoust);
  text-wrap: balance;
}

/* slova rozsvěcuje skript (--s 0 → 1); bez skriptu jsou plně vidět */
.uv-slovo {
  opacity: calc(0.16 + var(--s, 1) * 0.84);
  transition: opacity 0.3s linear;
}

.uv-cisla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mezera-mrizky);
  margin: clamp(4rem, 8vw, 6.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.uv-cisla li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linka);
}

.uv-cisla__n {
  font: 300 clamp(3.4rem, 2rem + 5vw, 6.5rem)/1 var(--f-titul);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--led-text);
}

.uv-cisla__popis {
  max-width: 14rem;
  font: 500 0.78rem/1.5 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-inkoust-3);
}

@media (max-width: 39.99rem) {
  .uv-cisla {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .uv-cisla li {
    padding-block: 1.8rem;
  }
}

/* ---------- 5. 02 Co děláme ---------- */
.uv-co__karty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uv-karta a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.uv-karta__foto {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--krem);
}

.uv-karta__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.2s var(--ease-out);
}

.uv-karta__foto--prsten img {
  object-position: 40% 50%;
}

.uv-karta a:hover .uv-karta__foto img {
  scale: 1.05;
}

.uv-karta__cislo {
  display: block;
  margin: 1.5rem 0 0.35rem;
  font: italic 300 1.9rem/1 var(--f-titul);
  color: var(--led-text);
}

.uv-karta h3 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  transition: color 0.4s var(--ease-out);
}

.uv-karta a:hover h3 {
  color: var(--led-text);
}

.uv-karta p {
  max-width: 26rem;
  margin: 0.7rem 0 0.9rem;
  color: var(--text);
}

.uv-karta a:hover .lp-odkaz {
  color: var(--inkoust);
}

.uv-karta a:hover .lp-odkaz::after {
  width: 3.25rem;
  opacity: 1;
}

@media (max-width: 55.99rem) {
  .uv-co__karty {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }

  .uv-karta__foto {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- 6. 03 Svatby ve 3D ----------
   Tmavá sekce se zaoblenými horními rohy najede přes předchozí sekci.
   Počítač (od 56rem, se skriptem – třída je-vodorovne): sekce se „přilepí“
   a scény při scrollování jedou do strany. Telefon (a bez skriptu): scény
   pod sebou, při scrollování se skládají na sebe. */
.uv-sceny {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--r-l));
  border-radius: var(--r-l) var(--r-l) 0 0;
  color: var(--na-tmave);
  background: var(--noc);
}

.uv-sceny h2 {
  color: #FFFFFF;
}

.uv-sceny h2 em,
.uv-sceny .lp-stitek {
  color: var(--led-svetla);
}

.uv-sceny :focus-visible {
  outline-color: var(--led-svetla);
}

.uv-sceny__uvod p {
  max-width: 28rem;
  margin: 1.4rem 0 0;
  color: var(--na-tmave);
}

.uv-sceny__uvod .uv-sceny__navod {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  font: 500 0.72rem/1 var(--f-text);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--led-svetla);
}

.uv-sceny__navod i {
  position: relative;
  width: 70px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
}

.uv-sceny__navod i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--led-svetla);
  animation: uv-kapka-x 2s var(--ease-io) infinite;
}

@keyframes uv-kapka-x {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(260%);
  }
}

.uv-scena {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--noc-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.uv-scena__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.uv-scena__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* tmavý závoj zleva dole (text je čitelný i na světlých scénách) */
.uv-scena__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    var(--zavoj-karta),
    linear-gradient(90deg, rgba(8, 10, 14, 0.42) 0%, rgba(8, 10, 14, 0) 58%);
}

.uv-scena__text {
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}

.uv-scena__text {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 40rem;
  padding: clamp(1.4rem, 3.5vw, 3.2rem);
  color: var(--na-tmave);
}

.uv-scena__balicek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin: 0;
  font: 500 0.75rem/1.4 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--led-svetla);
}

.uv-scena__cislo {
  padding: 0.3em 0.75em;
  border: 1px solid rgba(142, 197, 232, 0.5);
  border-radius: 999px;
  letter-spacing: 0.08em;
}

.uv-scena__nazev {
  margin: 0.3rem 0 0.5rem -0.08em;
  padding-inline: 0.1em;
  font: 400 clamp(2.6rem, 1.6rem + 3.2vw, 5rem)/1.1 var(--f-skript);
  letter-spacing: 0;
  color: #FFFFFF;
}

.uv-scena__body {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uv-scena__body li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.uv-scena__body li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--led-svetla);
  transform: translateY(-0.2em);
}

.uv-scena__akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.2rem;
  margin-top: 1.6rem;
}

.uv-sceny__postup {
  display: none;
}

@media (min-width: 56rem) {
  .uv-sceny.je-vodorovne {
    height: var(--sceny-vyska, 600vh);
  }

  .je-vodorovne .uv-sceny__lepidlo {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    border-radius: inherit;
  }

  .je-vodorovne .uv-sceny__pas {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: max-content;
    height: 100%;
    padding-inline: var(--okraj) 8vw;
    translate: var(--pas-x, 0px) 0;
    will-change: translate;
  }

  .je-vodorovne .uv-sceny__uvod {
    flex: none;
    width: min(30rem, 34vw);
    padding-right: 2vw;
  }

  .je-vodorovne .uv-scena {
    flex: none;
    width: min(74vw, 124vh);
    height: min(76vh, 44vw);
  }

  /* fotka uvnitř karty se posouvá pomaleji než karta (--paralaxa, --blizko
     nastavuje uvod.js) */
  .je-vodorovne .uv-scena__foto img {
    width: 114%;
    max-width: none;
    margin-left: -7%;
    translate: calc(var(--paralaxa, 0) * 6%) 0;
    scale: calc(1.01 + var(--blizko, 0) * 0.03);
  }

  .je-vodorovne .uv-sceny__postup {
    position: absolute;
    left: var(--okraj);
    bottom: 4vh;
    display: flex;
    align-items: center;
    gap: 1rem;
    font: 500 0.75rem/1 var(--f-text);
    letter-spacing: 0.16em;
    font-variant-numeric: tabular-nums;
    color: var(--na-tmave-2);
  }

  .uv-sceny__lista {
    position: relative;
    width: 160px;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
  }

  .uv-sceny__lista i {
    position: absolute;
    inset: 0;
    background: var(--led-svetla);
    transform: scaleX(var(--postup, 0));
    transform-origin: left center;
  }
}

.uv-sceny:not(.je-vodorovne) .uv-sceny__pas {
  display: grid;
  gap: 1.25rem;
  width: 100%;
  max-width: calc(1200px + 2 * var(--okraj));
  margin-inline: auto;
  padding: var(--sekce) var(--okraj);
}

.uv-sceny:not(.je-vodorovne) .uv-sceny__uvod {
  margin-bottom: 1.5rem;
}

.uv-sceny:not(.je-vodorovne) .uv-sceny__navod {
  display: none;
}

.uv-sceny:not(.je-vodorovne) .uv-scena {
  position: sticky;
  top: calc(var(--hl-vyska) + 0.75rem);
  height: min(80svh, 44rem);
  min-height: 31rem;
  box-shadow: 0 -24px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

@media (max-width: 39.99rem) {
  .uv-scena__foto img {
    object-position: 50% 62%;
  }

  .uv-scena__balicek {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }

  .uv-scena__akce .lp-tlacitko {
    padding-inline: 1.3rem;
  }
}

/* ---------- 7. Běžící pás jmen balíčků ----------
   Posun (--pasek-x) nastavuje uvod.js; při rychlém scrollování zrychlí. */
.uv-pasek {
  overflow: hidden;
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--linka);
  background: var(--krem);
}

.uv-pasek__pas {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 3rem);
  width: max-content;
  translate: var(--pasek-x, 0px) 0;
}

.uv-pasek span {
  padding-inline: 0.1em;
  font: 400 clamp(2.6rem, 1.8rem + 3.2vw, 5rem)/1.2 var(--f-skript);
  white-space: nowrap;
  color: var(--inkoust);
}

.uv-pasek span:nth-of-type(even) {
  color: var(--led-text);
}

.uv-pasek i {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--led);
  transform: rotate(45deg);
}

/* ---------- 8. 04 Balíčky – karusel ----------
   Bez skriptu: fotky v řadě (posouvají se do strany), texty pod sebou.
   Se skriptem (třída je-zapnuty): uprostřed velká karta, po stranách
   menší a mlhavější; texty se střídají podle karty. */
.uv-balicky {
  overflow-x: clip;
}

.uv-balicky .uv-hlavicka {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.uv-karusel {
  position: relative;
}

.uv-karusel__scena {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0 var(--okraj) 1rem;
  scroll-snap-type: x mandatory;
}

.uv-karusel__karta {
  position: relative;
  flex: 0 0 auto;
  width: min(62vw, 18rem);
  margin: 0;
  aspect-ratio: 800 / 1122;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--krem-2);
  scroll-snap-align: center;
}

.uv-karusel__karta img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uv-karusel__sipka {
  display: none;
}

.uv-karusel.je-zapnuty {
  height: clamp(340px, 30vw + 160px, 560px);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.je-zapnuty .uv-karusel__scena {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  padding: 0;
}

.je-zapnuty .uv-karusel__karta {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
  cursor: pointer;
  box-shadow: 0 30px 60px -30px rgba(15, 18, 21, 0.45);
  transform: translateX(-50%);
  transition:
    transform 0.9s var(--ease-out),
    opacity 0.9s var(--ease-out),
    filter 0.9s var(--ease-out);
  will-change: transform;
}

/* mlha přes boční karty (--mlha nastavuje skript) */
.je-zapnuty .uv-karusel__karta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--krem);
  opacity: var(--mlha, 0);
  pointer-events: none;
  transition: opacity 0.9s var(--ease-out);
}

.je-zapnuty .uv-karusel__karta:not(.je-aktivni) {
  filter: blur(calc(var(--mlha, 0) * 3px)) saturate(0.75);
}

.je-zapnuty .uv-karusel__karta.je-aktivni {
  cursor: default;
}

.je-zapnuty .uv-karusel__karta img {
  pointer-events: none;
  scale: 1.1;
  transition: translate 0.3s linear;
}

/* karta uprostřed „dýchá“ a fotka v ní se při scrollování posouvá (--kp) */
@media (prefers-reduced-motion: no-preference) {
  .je-zapnuty .uv-karusel__karta.je-aktivni img {
    translate: 0 var(--kp, 0px);
    animation: uv-dychani 7s ease-in-out infinite alternate;
  }
}

@keyframes uv-dychani {
  from {
    scale: 1.08;
  }

  to {
    scale: 1.13;
  }
}

.je-zapnuty .uv-karusel__sipka {
  position: absolute;
  top: 50%;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--linka-silna);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  translate: 0 -50%;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), scale 0.3s var(--ease-out);
}

.uv-karusel__sipka::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 1.5px solid var(--inkoust);
  border-bottom: 1.5px solid var(--inkoust);
  transform: translateX(2px) rotate(45deg);
}

.uv-karusel__sipka--dal::before {
  transform: translateX(-2px) rotate(-135deg);
}

.je-zapnuty .uv-karusel__sipka:hover {
  background: #FFFFFF;
  border-color: var(--led);
  scale: 1.06;
}

.uv-karusel__sipka--zpet {
  left: max(var(--okraj), calc(50% - 36rem));
}

.uv-karusel__sipka--dal {
  right: max(var(--okraj), calc(50% - 36rem));
}

/* texty balíčků pod karuselem */
.uv-karusel__texty {
  display: grid;
  gap: 2.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.uv-karusel__texty.je-zapnuty {
  gap: 0;
}

.uv-karusel__texty.je-zapnuty .uv-balicek {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.8s var(--ease-out),
    visibility 0s 0.5s;
}

.uv-karusel__texty.je-zapnuty .uv-balicek.je-aktivni {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.12s, 0.12s, 0s;
}

.uv-balicek__hlava {
  margin: 0;
}

.uv-balicek__hlava a {
  display: inline-grid;
  justify-items: center;
  color: var(--inkoust);
  text-decoration: none;
}

.uv-balicek__nazev {
  padding-inline: 0.1em;
  font: 400 clamp(2.8rem, 2rem + 3vw, 4.6rem)/1.1 var(--f-skript);
  transition: color 0.4s var(--ease-out);
}

.uv-balicek__hlava a:hover .uv-balicek__nazev {
  color: var(--led-text);
}

.uv-balicek__typ {
  margin-top: 0.15rem;
  font: 500 0.78rem/1.4 var(--f-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--led-text);
}

.uv-balicek__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 1rem;
  margin: 1.1rem 0 0;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  color: var(--inkoust);
}

.uv-balicek__body > span {
  white-space: nowrap;
}

.uv-balicek__body i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--led);
}

.uv-balicek__scena {
  margin: 0.5rem 0 0;
  font: italic 400 1.15rem/1.4 var(--f-titul);
  color: var(--text);
}

.uv-balicek__odkazy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2rem;
  margin: 0.6rem 0 0;
}

.uv-karusel__tecky {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 1.25rem;
}

.uv-karusel__tecky button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.uv-karusel__tecky button::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--linka-silna);
  transition: background-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.uv-karusel__tecky button:hover::before {
  background: var(--tlumena);
}

.uv-karusel__tecky button[aria-current="true"]::before {
  background: var(--led);
  transform: scale(1.6);
}

/* veletržní akce (znění potvrdila majitelka 20. 10. 2026) */
.uv-veletrh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem 1.4rem;
  width: fit-content;
  max-width: 100%;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 0.9rem 1.8rem 0.9rem 0.9rem;
  text-align: center;
  background: var(--bila);
  border: 1px solid var(--linka);
  border-radius: 999px;
  box-shadow: var(--stin-karty);
}

.uv-veletrh__stitek {
  margin: 0;
  padding: 0.6em 1.15em;
  font: 500 0.72rem/1 var(--f-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--led-text);
  border-radius: 999px;
}

.uv-veletrh__text {
  margin: 0;
  font: 400 clamp(1.2rem, 1rem + 0.5vw, 1.45rem)/1.35 var(--f-titul);
  color: var(--inkoust);
}

.uv-veletrh strong {
  font-weight: 600;
  color: var(--led-text);
}

.uv-odkazy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2.5rem;
}

@media (max-width: 39.99rem) {
  .je-zapnuty .uv-karusel__sipka {
    display: none;
  }

  .uv-veletrh {
    flex-direction: column;
    padding: 1.2rem 1.25rem;
    border-radius: var(--r);
  }
}

/* ---------- 9. 05 Jak to probíhá ----------
   Čára nad kroky se dokresluje (--postup 0 → 1 nastavuje uvod.js). */
.uv-kroky__seznam {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin: 0;
  padding: 3.2rem 0 0;
  list-style: none;
}

.uv-kroky__seznam::before,
.uv-kroky__seznam::after {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--linka-silna);
}

.uv-kroky__seznam::after {
  background: var(--led);
  transform: scaleX(var(--postup, 0));
  transform-origin: left center;
}

.uv-krok {
  position: relative;
}

.uv-krok::before {
  content: "";
  position: absolute;
  top: calc(-3.2rem + 0.6rem - 6px);
  left: 0;
  z-index: 1;
  width: 13px;
  height: 13px;
  border: 1px solid var(--linka-silna);
  border-radius: 50%;
  background: var(--krem-2);
  transition: background-color 0.5s, border-color 0.5s, box-shadow 0.5s;
}

.uv-krok.je-dosazeny::before {
  background: var(--led);
  border-color: var(--led);
  box-shadow: 0 0 0 6px rgba(95, 168, 216, 0.18);
}

.uv-krok__foto {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r);
}

.uv-krok__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.2s var(--ease-out);
}

.uv-krok:hover .uv-krok__foto img {
  scale: 1.05;
}

.uv-krok__cislo {
  display: block;
  margin: 1.3rem 0 0.3rem;
  font: italic 300 2.6rem/1 var(--f-titul);
  color: var(--led-text);
}

.uv-krok h3 {
  font-size: 1.6rem;
}

.uv-krok p {
  margin: 0.4rem 0 0;
}

@media (max-width: 55.99rem) {
  .uv-kroky__seznam {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3rem;
    padding: 0 0 0 2.2rem;
  }

  .uv-kroky__seznam::before,
  .uv-kroky__seznam::after {
    top: 0;
    bottom: 0;
    left: 0.4rem;
    right: auto;
    width: 1px;
    height: auto;
  }

  .uv-kroky__seznam::after {
    transform: scaleY(var(--postup, 0));
    transform-origin: center top;
  }

  .uv-krok::before {
    top: 0;
    left: calc(-2.2rem + 0.4rem - 6px);
  }
}

@media (max-width: 35.99rem) {
  .uv-kroky__seznam {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 10. 06 Prsteny (tmavá sekce .lp-tmava ze site.css) ---------- */
.uv-prsteny__mrizka {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.uv-prsteny h2 {
  font-size: clamp(3rem, 2rem + 4vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.uv-prsteny .uv-prsteny__perex {
  max-width: 30rem;
  margin: 1.25rem 0 2rem;
}

.uv-prsteny__seznam {
  display: grid;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.uv-prsteny__seznam button {
  position: relative;
  display: grid;
  justify-items: start;
  padding: 0.85rem 0 1rem;
  font: inherit;
  text-align: left;
  color: rgba(255, 255, 255, 0.5);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: color 0.5s var(--ease-out);
}

.uv-prsteny__seznam button:hover,
.uv-prsteny__seznam button[aria-selected="true"] {
  color: #FFFFFF;
}

.uv-prsteny__jmeno {
  padding-inline: 0.1em;
  font: 400 clamp(2rem, 1.6rem + 1.4vw, 2.8rem)/1.15 var(--f-skript);
}

.uv-prsteny__spec {
  display: block;
  max-height: 0;
  overflow: hidden;
  font: 500 0.72rem/1.5 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--led-svetla);
  opacity: 0;
  transition: max-height 0.6s var(--ease-out), opacity 0.6s var(--ease-out), margin 0.6s var(--ease-out);
}

.uv-prsteny__seznam button[aria-selected="true"] .uv-prsteny__spec {
  max-height: 4.5em;
  margin-top: 0.25rem;
  opacity: 1;
}

/* proužek pod vybraným prstenem ukazuje, kdy se přepne na další */
.uv-prsteny__seznam i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--led-svetla);
  transform: scaleX(0);
  transform-origin: left center;
}

.uv-prsteny__seznam button[aria-selected="true"] i {
  animation: uv-plneni var(--doba-prstenu, 5s) linear forwards;
}

.uv-prsteny.je-pauza .uv-prsteny__seznam i {
  animation-play-state: paused;
}

.uv-prsteny__ukazka {
  --odhal-r: var(--r-l);
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-l);
  background: #EEEAE3;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.7);
}

.uv-prsten {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s var(--ease-out), visibility 0s 0.9s;
}

/* skryté prsteny zůstávají v rozvržení kvůli prolínání (site.css jinak
   [hidden] úplně schová) */
.uv-prsten[hidden] {
  display: block !important;
}

.uv-prsten.je-aktivni {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s var(--ease-out), visibility 0s;
}

.uv-prsten img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.06;
  transition: scale 6s ease-out;
}

.uv-prsten.je-aktivni img {
  scale: 1;
}

/* rámeček s fotkou prstenu (styl v site.css sekce 30 f) vyplní celý prostor */
.uv-prsten__otocka {
  position: absolute;
  inset: 0;
}

.uv-prsten__3d {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  padding: 0.95em 1.4em;
  font: 500 0.75rem/1 var(--f-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--inkoust);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.uv-prsteny .uv-prsten__3d:hover {
  color: #FFFFFF;
  background: var(--inkoust);
}

/* telefon: nadpis, text, obrázek a pod ním seznam prstenů */
@media (max-width: 55.99rem) {
  .uv-prsteny__mrizka {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .uv-prsteny__text {
    display: contents;
  }

  .uv-prsteny__ukazka {
    order: 1;
    margin-bottom: 1.5rem;
  }

  .uv-prsteny__seznam {
    order: 2;
  }
}

/* ---------- 11. 07 Vlastní prsten ---------- */
.uv-kombinace {
  text-align: center;
}

.uv-kombinace__sloupce {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uv-kombinace__sloupce > li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.2rem;
}

.uv-kombinace__n {
  margin-bottom: 0.6rem;
  font: 300 clamp(4rem, 3rem + 4vw, 6.5rem)/1 var(--f-titul);
  color: var(--led-text);
}

.uv-kombinace__popis {
  font: 500 0.78rem/1.4 var(--f-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lp-inkoust-3);
}

.uv-kombinace__vzorky {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
}

.uv-kombinace__vzorky img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border: 1px solid var(--linka);
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform 0.5s var(--ease-out);
}

.uv-kombinace__vzorky img:hover {
  transform: translateY(-4px) scale(1.1);
}

.uv-kombinace__vzorky--kameny {
  align-items: center;
  gap: 0.7rem;
  min-height: 58px;
}

.uv-kombinace__vzorky--kameny > span {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 45%), var(--b);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 10px -4px var(--b);
  transition: transform 0.5s var(--ease-out);
}

.uv-kombinace__vzorky--kameny > span:hover {
  transform: scale(1.3);
}

.uv-kombinace__vysledek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem 1rem;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
}

.uv-kombinace__rovnice {
  font: 500 0.9rem/1 var(--f-text);
  letter-spacing: 0.2em;
  color: var(--lp-inkoust-3);
}

.uv-kombinace__90 {
  font: italic 300 clamp(2.6rem, 2rem + 2.6vw, 4.2rem)/1.1 var(--f-titul);
  color: var(--inkoust);
}

.uv-kombinace .uv-kombinace__akce {
  margin-top: 2.2rem;
}

@media (max-width: 39.99rem) {
  .uv-kombinace__sloupce {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
}

/* ---------- 12. 08 Galerie ----------
   Tlačítka filtru a obrázky vyrábí uvod.js (seznam SCENY). */
.uv-galerie__filtry {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.uv-galerie__filtry button {
  min-height: 44px;
  padding: 0.7em 1.25em;
  font: 500 0.78rem/1 var(--f-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkoust);
  background: transparent;
  border: 1px solid var(--linka-silna);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.uv-galerie__filtry button:hover {
  border-color: var(--inkoust);
}

.uv-galerie__filtry button[aria-pressed="true"] {
  color: #FFFFFF;
  background: var(--inkoust);
  border-color: var(--inkoust);
}

.uv-galerie__pocet {
  margin-left: 0.15em;
  font-size: 0.85em;
  opacity: 0.6;
}

.uv-galerie__mrizka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(0.5rem, 1vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.uv-galerie__polozka {
  aspect-ratio: 16 / 9;
}

.uv-galerie__polozka--velka {
  grid-column: span 2;
  grid-row: span 2;
}

.uv-galerie__polozka button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r);
  background: var(--krem);
  cursor: zoom-in;
}

.uv-galerie__polozka img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.2s var(--ease-out);
}

.uv-galerie__polozka button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 12, 16, 0.75), rgba(10, 12, 16, 0) 55%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}

.uv-galerie__popis {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.9rem;
  z-index: 1;
  font: 400 1.1rem/1.3 var(--f-titul);
  text-align: left;
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}

.uv-galerie__popis small {
  display: block;
  margin-bottom: 0.2rem;
  font: 500 0.68rem/1.3 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--led-svetla);
}

.uv-galerie__polozka button:hover img {
  scale: 1.06;
}

.uv-galerie__polozka button:is(:hover, :focus-visible)::after,
.uv-galerie__polozka button:is(:hover, :focus-visible) .uv-galerie__popis {
  opacity: 1;
  transform: none;
}

.uv-galerie__bez-js {
  text-align: center;
}

.uv-galerie__vice {
  margin: 2.5rem 0 0;
  text-align: center;
}

@media (max-width: 55.99rem) {
  .uv-galerie__mrizka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (hover: none) {
  .uv-galerie__popis {
    display: none;
  }
}

/* ---------- 13. Zvětšený obrázek (okno galerie) ----------
   <dialog> přes celou obrazovku. Obrázek „vyletí“ z náhledu (animaci dělá
   uvod.js), tmavé pozadí a ovládání se plynule objeví (třída je-otevreny). */
html.uv-lb-otevreny {
  overflow: hidden;
}

.uv-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #FFFFFF;
  background: transparent;
  border: 0;
}

.uv-lightbox::backdrop {
  background: transparent;
}

.uv-lightbox::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 13, 0.95);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}

.uv-lightbox.je-otevreny::before {
  opacity: 1;
}

.uv-lightbox__obsah {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "zpet obr dal";
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 4.5rem clamp(0.5rem, 2vw, 2rem) 1.5rem;
}

.uv-lightbox__figura {
  grid-area: obr;
  display: grid;
  justify-items: center;
  gap: 1rem;
  min-width: 0;
  margin: 0;
}

/* velikost je spočítaná dopředu (všechny obrázky jsou 16 : 9), aby animace
   věděla, kam obrázek doletí */
.uv-lightbox__img {
  display: block;
  width: min(100%, calc((100svh - 11rem) * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--noc-2);
  clip-path: inset(0 round 10px);
  transform-origin: center center;
  transition: opacity 0.3s var(--ease-out), transform 0.5s var(--ease-out);
}

.uv-lightbox__img.meni-se {
  opacity: 0;
  transform: translateX(calc(var(--smer, 0) * -24px)) scale(0.985);
}

.uv-lightbox__popisek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1.4rem;
  font: 400 1.2rem/1.4 var(--f-titul);
  text-align: center;
}

.uv-lightbox__pocet {
  font: 500 0.75rem/1 var(--f-text);
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--na-tmave-2);
}

.uv-lightbox__popisek,
.uv-lightbox__sipka,
.uv-lightbox__zavrit {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out), background-color 0.3s var(--ease-out);
}

.uv-lightbox.je-otevreny :is(.uv-lightbox__popisek, .uv-lightbox__sipka, .uv-lightbox__zavrit) {
  opacity: 1;
  transition-delay: 0.25s, 0s;
}

.uv-lightbox__sipka,
.uv-lightbox__zavrit {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.uv-lightbox__sipka:hover,
.uv-lightbox__zavrit:hover {
  background: rgba(255, 255, 255, 0.18);
}

.uv-lightbox :focus-visible {
  outline-color: var(--led-svetla);
}

.uv-lightbox__sipka--zpet {
  grid-area: zpet;
}

.uv-lightbox__sipka--dal {
  grid-area: dal;
}

.uv-lightbox__sipka::before {
  content: "";
  width: 11px;
  height: 11px;
  border-left: 1.5px solid #FFFFFF;
  border-bottom: 1.5px solid #FFFFFF;
  transform: translateX(2px) rotate(45deg);
}

.uv-lightbox__sipka--dal::before {
  transform: translateX(-2px) rotate(-135deg);
}

.uv-lightbox__zavrit {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.uv-lightbox__zavrit::before,
.uv-lightbox__zavrit::after {
  content: "";
  grid-area: 1 / 1;
  width: 20px;
  height: 1.5px;
  background: #FFFFFF;
  transform: rotate(45deg);
}

.uv-lightbox__zavrit::after {
  transform: rotate(-45deg);
}

@media (max-width: 39.99rem) {
  .uv-lightbox__obsah {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "obr obr"
      "zpet dal";
    padding-inline: 0.5rem;
  }

  .uv-lightbox__sipka {
    justify-self: center;
  }
}

/* ---------- 14. 09 Katalogy (tmavá sekce) ---------- */
.uv-katalog__mrizka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.uv-katalog__text p:not(.lp-stitek) {
  max-width: 28rem;
  margin-top: 1.4rem;
}

.uv-katalog .lp-akce {
  margin-top: 2rem;
}

.uv-katalog__knihy {
  position: relative;
  height: clamp(380px, 40vw, 560px);
}

.uv-katalog__kniha {
  position: absolute;
  display: block;
  overflow: hidden;
  border-radius: var(--r-s);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: rotate 0.8s var(--ease-out), scale 0.8s var(--ease-out);
}

.uv-katalog__kniha img {
  display: block;
  width: 100%;
  height: auto;
}

.uv-katalog__kniha--a4 {
  top: 0;
  left: 6%;
  width: 54%;
  rotate: -6deg;
}

.uv-katalog__kniha--a5 {
  right: 4%;
  bottom: 0;
  width: 42%;
  rotate: 6deg;
}

.uv-katalog__kniha:hover,
.uv-katalog__kniha:focus-visible {
  z-index: 2;
  rotate: 0deg;
  scale: 1.04;
}

@media (max-width: 55.99rem) {
  .uv-katalog__mrizka {
    grid-template-columns: minmax(0, 1fr);
  }

  .uv-katalog__knihy {
    height: min(110vw, 520px);
  }
}

/* ---------- 15. Recenze ---------- */
.uv-recenze .lp-recenze-seznam {
  max-width: 72rem;
  margin-inline: auto;
}

/* ---------- 16. 10 Kontakt (tmavá sekce s fotkou) ---------- */
.uv-zaver {
  display: grid;
  align-items: center;
  min-height: min(100svh, 56rem);
  text-align: center;
}

/* kruhový tmavý závoj a jen mírné ztmavení fotky */
.uv-zaver .lp-tmava__pozadi img {
  filter: brightness(0.72) saturate(0.9);
}

.uv-zaver .lp-tmava__pozadi::after {
  background: var(--zavoj-sekce);
}

.uv-zaver h2 {
  font-size: clamp(3rem, 1.8rem + 5vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
}

.uv-zaver .uv-zaver__text {
  max-width: 36rem;
  margin: 1.4rem auto 0;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
}

.uv-zaver .lp-akce {
  margin-top: 2.2rem;
}

.uv-zaver__kontakty {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem 3rem;
  max-width: 52rem;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 2rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.uv-zaver__kontakty li {
  display: grid;
  gap: 0.2rem;
  color: var(--na-tmave);
}

.uv-zaver__kontakty li > span {
  font: 500 0.72rem/1.4 var(--f-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--led-svetla);
}

.uv-zaver__kontakty a {
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.3s var(--ease-out);
}

.uv-zaver__kontakty a:hover {
  color: #FFFFFF;
  border-bottom-color: #FFFFFF;
}

/* ---------- 17. Omezený pohyb a stránka bez JavaScriptu ---------- */
@media (prefers-reduced-motion: reduce) {
  .uv-hero__fotky,
  .uv-hero__obsah,
  .uv-scena__foto img,
  .je-zapnuty .uv-karusel__karta img {
    translate: none !important;
    scale: none !important;
  }

  .uv-hero__obsah,
  .uv-hero__spodek {
    opacity: 1;
  }

  .uv-slovo {
    opacity: 1;
  }

  .uv-sceny:not(.je-vodorovne) .uv-scena {
    position: relative;
    top: auto;
  }

  .uv-kroky__seznam::after {
    transform: none;
  }

  .uv-krok::before {
    background: var(--led);
    border-color: var(--led);
  }

  .uv-prsten img {
    scale: none;
  }
}

html:not(.lp-js) .uv-kroky__seznam::after {
  transform: none;
}