@charset "UTF-8";
/* ==========================================================================
   L’Eterna Promessa – sdílené styly webu (DESIGN V2, od 20. 10. 2026)
   --------------------------------------------------------------------------
   • Pravidla vzhledu jsou v web/_nastroje/DESIGN-V2.md, hotové ukázky HTML
     v web/_nastroje/KOMPONENTY.md.
   • Barvy, písma a rozměry jsou CSS proměnné v :root (sekce 1). Kdo chce
     změnit barvu nebo písmo, mění ji JEN tam.
   • Písma (Google Fonts, odkaz v <head> každé stránky):
       Cormorant Garamond – nadpisy, citáty, velká čísla
       Jost               – běžný text, menu, tlačítka, štítky, formuláře
       Great Vibes        – jen jména (značka, balíčky, prsteny, scény)
       Cinzel             – jen motto „Jemnost v detailech, síla ve vzpomínkách“
   • Všechny třídy mají předponu „lp-“. Staré názvy tříd i proměnných
     (--lp-…) dál fungují – stránky a skripty je používají.
   • Animace při scrollování ovládá /js/site-nav.js (atributy data-odhal,
     data-parallax, data-pocitadlo – viz sekce 24 a KOMPONENTY.md).
   ========================================================================== */

/* ---------- 1. Design tokeny ---------- */
:root {
  /* Barvy v2 */
  --krem: #FAF8F3;        /* podklad stránky */
  --krem-2: #F3EFE7;      /* střídavé sekce, podklad obrázků */
  --bila: #FFFFFF;        /* karty, formuláře */
  --inkoust: #23282E;     /* nadpisy, hlavní tlačítko */
  --text: #4A525B;        /* odstavce */
  --tlumena: #7A828B;     /* drobné popisky, ozdoby */
  --linka: rgba(35, 40, 46, 0.12);
  --linka-silna: rgba(35, 40, 46, 0.24);
  --led: #5FA8D8;         /* ledově modrá: dekor, ikony, aktivní tečky */
  --led-text: #2F78AD;    /* modrý TEXT na krému (kontrast nad 4,5 : 1) */
  --led-svetla: #8EC5E8;  /* modrý text a akcent na tmavém */
  --noc: #0F1215;         /* tmavé sekce, patička */
  --noc-2: #171B20;       /* karty na tmavém */
  --na-tmave: rgba(255, 255, 255, 0.88);
  --na-tmave-2: rgba(255, 255, 255, 0.62);
  --chyba: #A1302B;

  /* Písma */
  --f-skript: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  --f-titul: "Cormorant Garamond", "Cormorant", Garamond, "Palatino Linotype", Georgia, serif;
  --f-text: "Jost", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-motto: "Cinzel", "Trajan Pro", Georgia, serif;

  /* Rozměry */
  --okraj: clamp(16px, 4.5vw, 56px);                /* okraj stránky vlevo a vpravo */
  --obal: min(1200px, 100% - 2 * var(--okraj));     /* šířka obsahu */
  --obal-uzky: min(760px, 100% - 2 * var(--okraj));
  --sekce: clamp(5rem, 10vw, 9.5rem);               /* svislá mezera sekce */
  --sekce-hlavicka: clamp(2.5rem, 5vw, 4.5rem);     /* mezera nadpis sekce → obsah */
  --mezera-mrizky: clamp(16px, 2.2vw, 32px);
  --hl-vyska: 76px;                                 /* výška hlavičky (mobil 64 px) */

  /* Zaoblení a stíny */
  --r-s: 6px;      /* pole formuláře, drobné prvky */
  --r: 16px;       /* fotky, karty, panely */
  --r-l: 28px;     /* velké tmavé panely */
  --stin-karty: 0 1px 2px rgba(15, 18, 21, 0.04), 0 24px 48px -28px rgba(15, 18, 21, 0.25);
  --stin-karty-vetsi: 0 1px 2px rgba(15, 18, 21, 0.05), 0 34px 64px -30px rgba(15, 18, 21, 0.34);

  /* Pohyb */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* Tmavé závoje přes fotky (přání majitelky – zůstávají) */
  --zavoj-uvod:
    linear-gradient(90deg, rgba(10, 12, 16, 0.72) 0%, rgba(10, 12, 16, 0.35) 45%, rgba(10, 12, 16, 0) 75%),
    linear-gradient(180deg, rgba(10, 12, 16, 0.5) 0%, rgba(10, 12, 16, 0) 22%, rgba(10, 12, 16, 0) 62%, rgba(10, 12, 16, 0.7) 100%);
  --zavoj-uvod-mobil: linear-gradient(180deg, rgba(10, 12, 16, 0.55) 0%, rgba(10, 12, 16, 0.25) 30%, rgba(10, 12, 16, 0.35) 60%, rgba(10, 12, 16, 0.85) 100%);
  --zavoj-karta: linear-gradient(15deg, rgba(8, 10, 14, 0.88) 0%, rgba(8, 10, 14, 0.5) 35%, rgba(8, 10, 14, 0) 65%);
  --zavoj-sekce: radial-gradient(ellipse at center, rgba(10, 12, 16, 0.55), rgba(10, 12, 16, 0.8) 75%);

  /* ---- Staré názvy (používají je stránkové styly) → nové hodnoty ---- */
  --lp-zlato-900: var(--inkoust);
  --lp-zlato-800: var(--led-text);
  --lp-zlato-600: #9AA1A9;
  --lp-zlato-500: #AEB4BB;
  --lp-zlato-300: #CDD2D7;
  --lp-zlato-50: var(--krem-2);
  --lp-zlato-prechod: linear-gradient(135deg, #E9ECEF 0%, #C0C6CD 30%, #99A1AA 62%, #6C747D 100%);
  --lp-tlacitko-pozadi: var(--inkoust);
  --lp-tlacitko-hover: var(--led-text);
  --lp-led-300: var(--led-svetla);
  --lp-led-500: var(--led);
  --lp-led-700: var(--led-text);
  --lp-inkoust: var(--inkoust);
  --lp-inkoust-2: var(--text);
  --lp-inkoust-3: #636B74; /* drobné popisky – tmavší než --tlumena kvůli čitelnosti */
  --lp-bila: var(--bila);
  --lp-podklad: var(--krem-2);
  --lp-podklad-2: var(--krem);
  --lp-podklad-prechod: linear-gradient(180deg, var(--krem) 0%, var(--krem-2) 100%);
  --lp-linka: var(--linka);
  --lp-linka-silna: var(--linka-silna);
  --lp-okraj-pole: rgba(35, 40, 46, 0.3);
  --lp-chyba: var(--chyba);
  --lp-chyba-podklad: #FCF4F3;
  --lp-pismo-jmeno: var(--f-skript);
  --lp-pismo-titul: var(--f-text);   /* dřív Cinzel na štítky a tlačítka – teď Jost */
  --lp-pismo-text: var(--f-text);
  --lp-sirka: 75rem;
  --lp-sirka-panel: 52rem;
  --lp-okraj-stranky: var(--okraj);
  --lp-zaobleni: var(--r-s);
  --lp-stin: var(--stin-karty);
  --lp-stin-vetsi: var(--stin-karty-vetsi);
  --lp-prechod: 300ms var(--ease-out);
  --lp-bridlice: var(--noc);
  --lp-bridlice-tmava: var(--noc);
  --lp-na-tmave: #FFFFFF;
  --lp-na-tmave-2: var(--na-tmave);
  --lp-foto-podklad: var(--krem-2);
  --lp-mezera-mrizky: var(--mezera-mrizky);

  /* Ozdoba linka – srdíčko – linka (z loga), srdíčko a světlá ozdoba */
  --lp-ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%2399A1AA' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%237E868F'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%237E868F'/%3E%3Cstop offset='1' stop-color='%2399A1AA' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238EC5E8'/%3E%3Cstop offset='1' stop-color='%235FA8D8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6' y='11.5' width='98' height='1' fill='url(%23a)'/%3E%3Crect x='136' y='11.5' width='98' height='1' fill='url(%23b)'/%3E%3Cpath transform='translate(111 3) scale(.75)' fill='url(%23c)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  --lp-ornament-svetly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23C0C6CD' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23E9ECEF'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23E9ECEF'/%3E%3Cstop offset='1' stop-color='%23C0C6CD' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23BFE0F3'/%3E%3Cstop offset='1' stop-color='%238EC5E8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6' y='11.5' width='98' height='1' fill='url(%23a)'/%3E%3Crect x='136' y='11.5' width='98' height='1' fill='url(%23b)'/%3E%3Cpath transform='translate(111 3) scale(.75)' fill='url(%23c)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  --lp-srdce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235FA8D8' stroke-width='1' stroke-linejoin='round' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

/* ---------- 2. Základ ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
}

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

/* s JavaScriptem je hlavička pevně nahoře – skok na kotvu se zastaví pod ní */
.lp-js {
  scroll-padding-top: calc(var(--hl-vyska) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-variant-numeric: lining-nums;
  color: var(--text);
  background: var(--krem);
  overflow-wrap: break-word;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--f-titul);
  font-weight: 400;
  line-height: 1.15;
  color: var(--inkoust);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.9rem, 1.7rem + 4.4vw, 6rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.9rem, 1.35rem + 2vw, 2.8rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.95rem);
}

/* kurzíva v nadpisu = modrý akcent („Svatba, kterou <em>uvidíte</em>“) */
:is(h1, h2, h3) em {
  font-style: italic;
  color: var(--led-text);
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

strong,
b {
  font-weight: 500;
  color: var(--inkoust);
}

a {
  color: var(--led-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.3s var(--ease-out), text-decoration-color 0.3s var(--ease-out);
}

a:hover {
  color: var(--inkoust);
  text-decoration-color: var(--led);
}

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

::selection {
  background: rgba(142, 197, 232, 0.45);
  color: var(--inkoust);
}

[hidden] {
  display: none !important;
}

/* Text jen pro čtečky obrazovky */
.lp-skryte {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* „Přeskočit na obsah“ – ukáže se po stisku Tab */
.lp-preskocit {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 60;
  padding: 0.8rem 1.3rem;
  font: 500 0.8rem/1.2 var(--f-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
  background: var(--inkoust);
  border-radius: 999px;
  transition: top 0.3s var(--ease-out);
}

.lp-preskocit:focus,
.lp-preskocit:hover {
  top: 1rem;
  color: #FFFFFF;
}

/* Obal obsahu: šířka 1200 px + okraje stránky */
.lp-obal {
  width: 100%;
  max-width: calc(1200px + 2 * var(--okraj));
  margin-inline: auto;
  padding-inline: var(--okraj);
}

/* ---------- 3. Hlavička a menu ----------
   Počítač (od 64rem = 1024 px): symbol + název vlevo, menu a tlačítko
   „Poptávka“ vpravo v jedné řadě. Užší okno a telefon: tlačítko „Menu“,
   které otevře celoobrazovkové tmavé menu s fotkou.
   S JavaScriptem (třída lp-js na <html>) je hlavička pevně nahoře, při
   scrollování dolů se schová a při scrollování nahoru vrátí. Na stránce
   s tmavým úvodem (<body class="tmavy-uvod">) je nahoře průhledná s bílým
   textem. Stavové třídy přidává /js/site-nav.js:
     .je-odscrollovana  – stránka není úplně nahoře (nižší hlavička, linka)
     .je-plna           – tmavý úvod je odscrollovaný (krémové sklo)
     .je-skryta         – schovaná nahoru
     .je-otevrena       – otevřené menu na telefonu
   Bez JavaScriptu zůstane hlavička na místě a odkazy menu se zalomí pod logo.
   Hranice 64rem je i v /js/site-nav.js – měňte je vždy společně. */
.lp-hlavicka {
  position: relative;
  z-index: 50;
  color: var(--inkoust);
  background: var(--krem);
  border-bottom: 1px solid var(--linka);
  view-transition-name: hlavicka;
}

.lp-hlavicka__obsah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  min-height: var(--hl-vyska);
  padding-block: 0.4rem;
  transition: min-height 0.5s var(--ease-out);
}

/* proužek průběhu stránky (šířku nastavuje skript) */
.lp-hlavicka__prubeh {
  display: none;
}

.lp-js .lp-hlavicka {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: none;
  border-bottom: 0;
  transition: transform 0.6s var(--ease-out), color 0.45s var(--ease-out);
}

/* krémové sklo je ve vlastní vrstvě, aby šlo plynule zprůhlednit */
.lp-js .lp-hlavicka::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 248, 243, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 1px 0 transparent;
  transition: opacity 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.lp-js .lp-hlavicka.je-odscrollovana::before {
  box-shadow: 0 1px 0 var(--linka);
}

.lp-js .lp-hlavicka.je-odscrollovana .lp-hlavicka__obsah {
  min-height: 64px;
}

.lp-js .lp-hlavicka.je-skryta {
  transform: translateY(calc(-100% - 4px));
}

.lp-js .lp-hlavicka__prubeh {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 2px;
  background: var(--led);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* místo pro pevnou hlavičku; tmavý úvod jde až pod ni */
.lp-js body {
  padding-top: var(--hl-vyska);
}

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

/* tmavý úvod: nahoře průhledná hlavička s bílým textem */
.lp-js .tmavy-uvod .lp-hlavicka:not(.je-plna) {
  color: #FFFFFF;
}

.lp-js .tmavy-uvod .lp-hlavicka:not(.je-plna)::before {
  opacity: 0;
}

.lp-js .tmavy-uvod .lp-hlavicka:not(.je-plna) :focus-visible {
  outline-color: var(--led-svetla);
}

/* značka: symbol prstýnků + název */
.lp-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--r-s);
}

.lp-logo:hover {
  color: inherit;
}

.lp-logo__symbol {
  display: block;
  width: 40px;
  height: auto;
  transition: width 0.5s var(--ease-out), transform 0.9s var(--ease-out);
}

.lp-logo__jmeno {
  padding: 0.14em 0.1em 0;
  font-family: var(--f-skript);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1;
  white-space: nowrap;
}

.lp-hlavicka.je-odscrollovana .lp-logo__symbol {
  width: 36px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lp-logo:hover .lp-logo__symbol {
    transform: rotate(-10deg) scale(1.05);
  }
}

/* menu v řadě */
.lp-menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem clamp(1rem, 1.7vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font: 500 0.82rem/1.2 var(--f-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: inherit;
}

/* tenká linka pod odkazem: vyjede zleva při najetí, u otevřené stránky je trvale */
.lp-menu a:not(.lp-menu__cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.1em;
  bottom: 0.55rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-out);
}

.lp-menu a:not(.lp-menu__cta):hover::after,
.lp-menu a[aria-current="page"]:not(.lp-menu__cta)::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.lp-menu a:hover {
  color: inherit;
}

/* poslední odkaz „Poptávka“ jako tlačítko */
.lp-menu a.lp-menu__cta {
  justify-content: center;
  padding: 0 1.35rem;
  color: #FFFFFF;
  background: var(--inkoust);
  border: 1px solid var(--inkoust);
  border-radius: 999px;
  translate: var(--mag-x, 0px) var(--mag-y, 0px);
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), color 0.4s var(--ease-out), translate 0.5s var(--ease-out);
}

.lp-menu a.lp-menu__cta:hover,
.lp-menu a.lp-menu__cta[aria-current="page"] {
  color: #FFFFFF;
  background: var(--led-text);
  border-color: var(--led-text);
}

.lp-js .tmavy-uvod .lp-hlavicka:not(.je-plna) .lp-menu__cta {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.75);
}

.lp-js .tmavy-uvod .lp-hlavicka:not(.je-plna) .lp-menu__cta:hover {
  color: var(--inkoust);
  background: #FFFFFF;
  border-color: #FFFFFF;
}

/* „Úvod“ je jen v menu na telefonu – v řadě vede domů logo */
.lp-menu__uvod {
  display: none;
}

/* tlačítko „Menu“ – jen na užších obrazovkách a jen s JavaScriptem */
.lp-menu-tlacitko {
  display: none;
  align-items: center;
  gap: 0.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-right: -0.6rem;
  padding: 0 0.6rem;
  font: 500 0.78rem/1 var(--f-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lp-menu-tlacitko__ikona {
  position: relative;
  flex: none;
  width: 26px;
  height: 9px;
}

.lp-menu-tlacitko__ikona::before,
.lp-menu-tlacitko__ikona::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.5s var(--ease-out), top 0.5s var(--ease-out);
}

.lp-menu-tlacitko__ikona::before {
  top: 0;
}

.lp-menu-tlacitko__ikona::after {
  top: calc(100% - 1.5px);
}

.lp-menu-tlacitko__ikona span {
  display: none;
}

.lp-menu-tlacitko[aria-expanded="true"] .lp-menu-tlacitko__ikona::before {
  top: calc(50% - 0.75px);
  transform: rotate(45deg);
}

.lp-menu-tlacitko[aria-expanded="true"] .lp-menu-tlacitko__ikona::after {
  top: calc(50% - 0.75px);
  transform: rotate(-45deg);
}

@media (max-width: 63.99rem) {
  :root {
    --hl-vyska: 64px;
  }

  /* bez JavaScriptu: odkazy v zalomeném řádku pod logem */
  .lp-menu ul {
    gap: 0 1.25rem;
  }

  .lp-js .lp-hlavicka__obsah {
    flex-wrap: nowrap;
  }

  .lp-js .lp-logo,
  .lp-js .lp-menu-tlacitko {
    position: relative;
    z-index: 2;
  }

  .lp-js .lp-logo {
    flex-shrink: 1;
    min-width: 0;
  }

  .lp-js .lp-logo__symbol,
  .lp-js .lp-hlavicka.je-odscrollovana .lp-logo__symbol {
    width: 34px;
  }

  .lp-js .lp-logo__jmeno {
    font-size: 1.55rem;
  }

  .lp-js .lp-menu-tlacitko {
    display: inline-flex;
  }

  /* celoobrazovkové tmavé menu: čisté tmavé pozadí, položky na středu
     s tenkými linkami (přání majitele 20. 10. 2026 – předchozí verze s fotkou
     a obřím písmem vlevo „je hrozná“) */
  .lp-js .lp-menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--hl-vyska) + 1.5rem) var(--okraj) calc(2rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    color: #FFFFFF;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(95, 168, 216, 0.12) 0%, rgba(95, 168, 216, 0) 60%),
      var(--noc);
    visibility: hidden;
    clip-path: circle(0 at calc(100% - var(--okraj) - 1.5rem) calc(var(--hl-vyska) / 2));
    transition: clip-path 0.8s var(--ease-io), visibility 0s linear 0.8s;
  }

  .lp-js .lp-hlavicka.je-otevrena .lp-menu {
    visibility: visible;
    clip-path: circle(150% at calc(100% - var(--okraj) - 1.5rem) calc(var(--hl-vyska) / 2));
    transition: clip-path 0.8s var(--ease-io), visibility 0s linear 0s;
  }

  .lp-js .lp-menu ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 20rem;
    margin-inline: auto;
    text-align: center;
  }

  .lp-js .lp-menu li:not(:last-child) + li:not(:last-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .lp-js .lp-menu__uvod {
    display: block;
  }

  .lp-js .lp-menu li {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }

  .lp-js .lp-hlavicka.je-otevrena .lp-menu li {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.18s + var(--i, 0) * 0.06s);
  }

  .lp-js .lp-menu a {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    min-height: 3.4rem;
    font: 400 1rem/1.2 var(--f-text);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: normal;
    color: rgba(255, 255, 255, 0.9);
  }

  .lp-js .lp-menu a:not(.lp-menu__cta)::after {
    display: none;
  }

  .lp-js .lp-menu a:hover {
    color: #FFFFFF;
  }

  .lp-js .lp-menu a[aria-current="page"] {
    color: var(--led-svetla);
  }

  .lp-js .lp-menu li:last-child {
    margin-top: 1.6rem;
    align-self: center;
  }

  .lp-js .lp-menu a.lp-menu__cta,
  .lp-js .tmavy-uvod .lp-hlavicka:not(.je-plna) .lp-menu__cta {
    width: auto;
    min-height: 3.1rem;
    padding: 0 2.2rem;
    font: 500 0.78rem/1 var(--f-text);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--inkoust);
    background: #FFFFFF;
    border-color: #FFFFFF;
  }

  .lp-js .lp-menu a.lp-menu__cta:hover {
    color: var(--inkoust);
    background: var(--led-svetla);
    border-color: var(--led-svetla);
  }

  .lp-js .lp-menu :focus-visible {
    outline-color: var(--led-svetla);
  }

  /* otevřené menu: hlavička bez skla, bílá, nikdy schovaná */
  .lp-js .lp-hlavicka.je-otevrena {
    color: #FFFFFF;
    transform: none;
  }

  .lp-js .lp-hlavicka.je-otevrena::before {
    opacity: 0;
  }

  html.lp-menu-otevrene,
  html.lp-menu-otevrene body {
    overflow: hidden;
  }
}

/* velmi úzké telefony: v tlačítku zůstane jen ikona */
@media (max-width: 23.99rem) {
  .lp-menu-tlacitko__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .lp-js .lp-logo__jmeno {
    font-size: 1.4rem;
  }
}

/* ---------- 4. Typografické prvky ---------- */
/* štítek nad nadpisem („Služby“, „01 — Svatby ve 3D“) */
.lp-stitek {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font: 500 0.78rem/1.4 var(--f-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--led-text);
}

/* ozdoba linka – srdíčko – linka (z loga) */
.lp-ornament {
  display: block;
  width: 8rem;
  max-width: 60%;
  height: 1rem;
  margin: 1.4rem auto;
  background: var(--lp-ornament) center / contain no-repeat;
}

/* motto – jediné místo pro písmo Cinzel */
.lp-motto {
  margin: 0 auto 1.6rem;
  font: 400 0.8rem/1.8 var(--f-motto);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
}

/* úsek textu, který se nesmí zalomit (např. polovina motta) */
.lp-nezlomit {
  display: inline-block;
}

/* ---------- 5. Tlačítka a odkazy ----------
   .lp-tlacitko               tmavé (hlavní)
   .lp-tlacitko--obrys        tenký obrys, při najetí se vyplní
   .lp-tlacitko--svetle       bílé – jen na tmavý podklad
   .lp-tlacitko--obrys-svetly bílý obrys – jen na tmavý podklad
   Při najetí výplň „vyjede“ zdola; na počítači s myší se tlačítko jemně
   přitáhne k ukazateli (proměnné --mag-x a --mag-y nastavuje site-nav.js). */
.lp-tlacitko {
  --tl-pozadi: var(--inkoust);
  --tl-text: #FFFFFF;
  --tl-okraj: var(--inkoust);
  --tl-vypln: var(--led-text);
  --tl-text-hover: #FFFFFF;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.75rem;
  font: 500 0.8rem/1.2 var(--f-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--tl-text);
  background: var(--tl-pozadi);
  border: 1px solid var(--tl-okraj);
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  translate: var(--mag-x, 0px) var(--mag-y, 0px);
  transition:
    color 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out),
    background-color 0.45s var(--ease-out),
    translate 0.5s var(--ease-out),
    transform 0.2s var(--ease-out);
}

.lp-tlacitko::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--tl-vypln);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-out);
}

.lp-tlacitko:hover {
  color: var(--tl-text-hover);
  border-color: var(--tl-vypln);
}

.lp-tlacitko:hover::before {
  transform: none;
}

.lp-tlacitko:active {
  transform: scale(0.97);
}

.lp-tlacitko--obrys {
  --tl-pozadi: transparent;
  --tl-text: var(--inkoust);
  --tl-okraj: var(--inkoust);
  --tl-vypln: var(--inkoust);
  --tl-text-hover: #FFFFFF;
}

.lp-tlacitko--svetle {
  --tl-pozadi: #FFFFFF;
  --tl-text: var(--inkoust);
  --tl-okraj: #FFFFFF;
  --tl-vypln: var(--led-svetla);
  --tl-text-hover: var(--inkoust);
}

.lp-tlacitko--obrys-svetly {
  --tl-pozadi: rgba(255, 255, 255, 0.04);
  --tl-text: #FFFFFF;
  --tl-okraj: rgba(255, 255, 255, 0.7);
  --tl-vypln: #FFFFFF;
  --tl-text-hover: var(--inkoust);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Tlačítko na Instagram (pozná se podle adresy odkazu, HTML se neupravuje):
   vlevo malá ikonka Instagramu, při najetí se vybarví barvami Instagramu. */
.lp-tlacitko[href*="instagram.com"]::before {
  background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 24%, #D62976 52%, #962FBF 78%, #4F5BD5 100%);
}

.lp-tlacitko[href*="instagram.com"]:hover {
  color: #FFFFFF;
  border-color: transparent;
}

.lp-tlacitko[href*="instagram.com"]::after {
  content: "";
  order: -1;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Textové odkazy na Instagram (kontakt na úvodní stránce, patička, O nás,
   Poptávka): malá ikonka před textem, při najetí barvy Instagramu. */
a[href*="instagram.com"]:not(.lp-tlacitko) {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

a[href*="instagram.com"]:not(.lp-tlacitko)::before {
  content: "";
  flex: none;
  width: 1.05em;
  height: 1.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='17.6' cy='6.4' r='1.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

a[href*="instagram.com"]:not(.lp-tlacitko):hover {
  color: #D62976;
  background: linear-gradient(45deg, #FA7E1E 0%, #D62976 45%, #962FBF 75%, #4F5BD5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border-color: #D62976;
  text-decoration-color: #D62976;
}

a[href*="instagram.com"]:not(.lp-tlacitko):hover::before {
  background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 52%, #962FBF 78%, #4F5BD5 100%);
}

.lp-tlacitko[disabled],
.lp-tlacitko[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.6;
}

.lp-tlacitko[disabled]:hover,
.lp-tlacitko[aria-disabled="true"]:hover {
  color: var(--tl-text);
  border-color: var(--tl-okraj);
}

.lp-tlacitko[disabled]::before,
.lp-tlacitko[aria-disabled="true"]::before {
  display: none;
}

/* na tmavém podkladu je rámeček fokusu světle modrý */
.lp-tlacitko--svetle:focus-visible,
.lp-tlacitko--obrys-svetly:focus-visible {
  outline-color: var(--led-svetla);
}

/* úzké telefony: nápis tlačítka i se šipkou zůstane na jednom řádku */
@media (max-width: 22.99rem) {
  .lp-tlacitko {
    padding-inline: 1rem;
    letter-spacing: 0.08em;
  }
}

/* šipka za textem; při najetí se posune o 4 px */
.lp-sipka::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.55em;
  font-family: var(--f-text);
  font-weight: 400;
  letter-spacing: 0;
  transition: transform 0.5s var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  a:hover .lp-sipka::after,
  button:hover .lp-sipka::after,
  .lp-sipka:hover::after {
    transform: translateX(4px);
  }
}

/* odkaz se šipkou: verzálky a linka za textem, která se při najetí prodlouží */
.lp-odkaz {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: 0.4rem;
  font: 500 0.8rem/1.3 var(--f-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--led-text);
}

.lp-odkaz::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 1px;
  margin-left: 0.85rem;
  background: currentColor;
  opacity: 0.55;
  transition: width 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}

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

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

.lp-odkaz .lp-sipka::after {
  content: none;
}

/* tlačítko, které vypadá jako odkaz (např. „Zkusit znovu“) */
.lp-tlacitko-text {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 0.25rem;
  font: 500 0.8rem/1.2 var(--f-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--led-text);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--linka-silna);
  text-underline-offset: 0.3em;
  cursor: pointer;
}

.lp-tlacitko-text:hover {
  color: var(--inkoust);
  text-decoration-color: var(--led);
}

.lp-akce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
}

.lp-akce--vlevo {
  justify-content: flex-start;
}

/* ---------- 6. Úvod stránky ----------
   a) .lp-titulek – světlý úvod podstránky (štítek, h1, text, rozcestník)
   b) .lp-uvod + .lp-ramecek – světlý úvod s bílou kartou (stránka 404)
   c) .lp-uvod.lp-uvod--foto – FOTKA PŘES CELOU ŠÍŘKU s tmavým závojem,
      bílý text vlevo dole. Na <body> patří třída „tmavy-uvod“ (hlavička je
      pak nahoře průhledná). Markup viz KOMPONENTY.md. */
.lp-uvod {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6.5rem);
  background: var(--krem);
}

.lp-ramecek {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 6vw, 4rem);
  text-align: center;
  background: var(--bila);
  border-radius: var(--r-l);
  box-shadow: var(--stin-karty);
}

.lp-ramecek h1 {
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
}

.lp-uvod h1 {
  max-width: 16ch;
  margin-inline: auto;
}

.lp-uvod__text {
  max-width: 36rem;
  margin: 1.4rem auto 2rem;
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text);
}

.lp-uvod__dalsi {
  margin: 0.6rem 0 0;
}

/* c) fotka přes celou šířku */
.lp-uvod--foto {
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  min-height: max(480px, min(78vh, 760px));
  min-height: max(480px, min(78svh, 760px));
  padding-block: 4rem clamp(3rem, 7vw, 5.5rem);
  color: #FFFFFF;
  background: var(--noc);
}

.lp-js .tmavy-uvod .lp-uvod--foto {
  padding-top: calc(var(--hl-vyska) + 3rem);
}

/* tmavý závoj (stejný jako na úvodní stránce) */
.lp-uvod--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--zavoj-uvod);
  pointer-events: none;
}

.lp-uvod__foto {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--krem-2);
}

.lp-uvod--foto .lp-uvod__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  background: var(--noc-2);
  transform-origin: 50% 35%;
  /* posun a zvětšení při scrollování (--uvod-posun 0 → 1 nastavuje skript) */
  translate: 0 calc(var(--uvod-posun, 0) * 16%);
  scale: calc(1 + var(--uvod-posun, 0) * 0.06);
}

.lp-uvod--foto > .lp-obal {
  position: relative;
  opacity: calc(1 - var(--uvod-posun, 0) * 1.25);
}

.lp-uvod--foto .lp-ramecek {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.lp-uvod--foto h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2.9rem, 1.7rem + 4.4vw, 6rem);
  color: #FFFFFF;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}

.lp-uvod--foto h1 em,
.lp-uvod--foto .lp-stitek {
  color: var(--led-svetla);
}

.lp-uvod--foto .lp-uvod__text {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  color: var(--na-tmave);
}

.lp-uvod--foto .lp-ornament {
  margin-inline: 0;
  background-image: var(--lp-ornament-svetly);
}

.lp-uvod--foto .lp-motto {
  margin-inline: 0;
  color: var(--na-tmave);
}

.lp-uvod--foto .lp-akce {
  justify-content: flex-start;
  margin-top: 2.25rem;
}

/* tlačítka na fotce: hlavní je bílé, obrysové bílým obrysem */
.lp-uvod--foto .lp-tlacitko:not(.lp-tlacitko--obrys):not(.lp-tlacitko--obrys-svetly) {
  --tl-pozadi: #FFFFFF;
  --tl-text: var(--inkoust);
  --tl-okraj: #FFFFFF;
  --tl-vypln: var(--led-svetla);
  --tl-text-hover: var(--inkoust);
}

.lp-uvod--foto .lp-tlacitko--obrys {
  --tl-pozadi: rgba(255, 255, 255, 0.04);
  --tl-text: #FFFFFF;
  --tl-okraj: rgba(255, 255, 255, 0.7);
  --tl-vypln: #FFFFFF;
  --tl-text-hover: var(--inkoust);
}

.lp-uvod--foto a:not(.lp-tlacitko) {
  color: #FFFFFF;
}

.lp-uvod--foto :focus-visible {
  outline-color: var(--led-svetla);
}

@media (prefers-reduced-motion: no-preference) {
  .lp-js .lp-uvod--foto .lp-uvod__foto {
    animation: lp-ken-burns 9s var(--ease-out) both;
  }
}

@keyframes lp-ken-burns {
  from {
    transform: scale(1.06);
  }

  to {
    transform: none;
  }
}

@media (max-width: 39.99rem) {
  .lp-uvod--foto::before {
    background: var(--zavoj-uvod-mobil);
  }

  .lp-uvod--foto .lp-akce .lp-tlacitko {
    flex: 1 1 auto;
  }
}

/* a) světlý úvod podstránky */
.lp-titulek {
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
  background: var(--krem);
}

.lp-titulek h1 {
  max-width: 18ch;
  margin-inline: auto;
}

.lp-titulek__text {
  max-width: 40rem;
  margin: 1.5rem auto 0;
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--text);
  text-wrap: balance;
}

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

/* úvod se při načtení stránky jemně „poskládá“ (jen CSS, nic neblikne) */
@media (prefers-reduced-motion: no-preference) {
  .lp-js .lp-titulek .lp-obal > :not([data-odhal]),
  .lp-js .lp-uvod--foto .lp-ramecek > :not([data-odhal]),
  .lp-js .lp-uvod--foto > .lp-obal > :not(.lp-ramecek):not([data-odhal]) {
    animation: lp-vyjet 1s var(--ease-out) both;
  }

  .lp-js :is(.lp-titulek .lp-obal, .lp-uvod--foto .lp-ramecek, .lp-uvod--foto > .lp-obal) > :nth-child(2) {
    animation-delay: 0.08s;
  }

  .lp-js :is(.lp-titulek .lp-obal, .lp-uvod--foto .lp-ramecek, .lp-uvod--foto > .lp-obal) > :nth-child(3) {
    animation-delay: 0.16s;
  }

  .lp-js :is(.lp-titulek .lp-obal, .lp-uvod--foto .lp-ramecek, .lp-uvod--foto > .lp-obal) > :nth-child(4) {
    animation-delay: 0.24s;
  }

  .lp-js :is(.lp-titulek .lp-obal, .lp-uvod--foto .lp-ramecek, .lp-uvod--foto > .lp-obal) > :nth-child(n+5) {
    animation-delay: 0.32s;
  }
}

@keyframes lp-vyjet {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
}

/* rozcestník „Části stránky“ pod nadpisem */
.lp-rozcestnik ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: var(--lp-sirka-panel);
  margin: 2.5rem auto 0;
  padding: 0;
  list-style: none;
}

.lp-rozcestnik a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  padding: 1.1rem 0.9rem;
  font: 500 0.8rem/1.35 var(--f-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--inkoust);
  background: var(--bila);
  border-radius: var(--r);
  box-shadow: var(--stin-karty);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), color 0.3s var(--ease-out);
}

.lp-rozcestnik a:hover {
  color: var(--led-text);
  box-shadow: var(--stin-karty-vetsi);
  transform: translateY(-3px);
}

.lp-rozcestnik__cislo {
  font: italic 400 1.6rem/1 var(--f-titul);
  letter-spacing: 0;
  text-transform: none;
  color: var(--led-text);
}

@media (max-width: 39.99rem) {
  .lp-rozcestnik ol {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .lp-rozcestnik a {
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    text-align: left;
  }

  .lp-rozcestnik__cislo {
    min-width: 1.6rem;
    text-align: center;
  }
}

.lp-upozorneni {
  max-width: var(--lp-sirka-panel);
  margin: 1.5rem auto 0;
}

/* ---------- 7. Sekce ---------- */
.lp-sekce {
  padding-block: var(--sekce);
}

/* střídavá sekce (název zůstal „bílá“, barva je teplá krémová) */
.lp-sekce--bila {
  background: var(--krem-2);
}

.lp-hlavicka-sekce {
  max-width: 46rem;
  margin: 0 auto var(--sekce-hlavicka);
  text-align: center;
}

.lp-hlavicka-sekce h2 {
  font-size: clamp(2.3rem, 1.5rem + 2.9vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.lp-hlavicka-sekce p:not(.lp-stitek) {
  max-width: 38rem;
  margin: 1.25rem auto 0;
  font-size: 1.125rem;
  color: var(--text);
  text-wrap: balance;
}

.lp-sekce__odkaz {
  margin: 2.5rem 0 0;
  text-align: center;
}

/* Služby / pilíře: <ul class="lp-sluzby"> s kartami <li class="lp-sluzba"> */
.lp-sluzby {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mezera-mrizky);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-sluzba {
  position: relative;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--bila);
  border-radius: var(--r);
  box-shadow: var(--stin-karty);
}

@media (min-width: 40rem) {
  .lp-sluzby {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-sluzba:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 60rem) {
  .lp-sluzby {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lp-sluzba:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

.lp-sluzba__cislo {
  display: block;
  margin-bottom: 1.1rem;
  font: italic 300 2.4rem/1 var(--f-titul);
  color: var(--led-text);
}

.lp-sluzba h3 {
  margin-bottom: 0.6rem;
}

.lp-sluzba p {
  max-width: 38rem;
  margin: 0;
  color: var(--text);
}

/* ---------- 8. Karta „ve 3D“, volby a barevné vzorky ---------- */
.lp-karta-3d {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: var(--bila);
  border-radius: var(--r);
  box-shadow: var(--stin-karty);
  transition: box-shadow 0.5s var(--ease-out);
}

.lp-karta-3d:hover {
  box-shadow: var(--stin-karty-vetsi);
}

@media (min-width: 60rem) {
  .lp-karta-3d {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

.lp-karta-3d + .lp-karta-3d {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.lp-karta-3d__obraz {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 15rem;
  padding: 2.75rem 2rem;
  overflow: hidden;
  background: radial-gradient(circle at 50% 46%, #FFFFFF 0%, #F6F3ED 45%, var(--krem-2) 100%);
}

.lp-karta-3d__obraz img {
  display: block;
  width: min(15rem, 72%);
  height: auto;
  filter: drop-shadow(0 18px 20px rgba(35, 40, 46, 0.2));
}

@media (prefers-reduced-motion: no-preference) {
  .lp-karta-3d__obraz:not(.lp-karta-3d__obraz--foto) img {
    animation: lp-vznaseni 7s ease-in-out infinite;
  }
}

@keyframes lp-vznaseni {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-9px) rotate(2deg);
  }
}

/* obrázek scény místo prstýnků */
.lp-karta-3d__obraz--foto {
  min-height: 0;
  padding: 0;
  aspect-ratio: 16 / 10;
  background: var(--krem-2);
}

@media (min-width: 40rem) and (max-width: 59.99rem) {
  .lp-karta-3d__obraz--foto {
    aspect-ratio: 2 / 1;
  }
}

@media (min-width: 60rem) {
  .lp-karta-3d__obraz--foto {
    min-height: 15rem;
    aspect-ratio: auto;
  }
}

.lp-karta-3d__obraz--foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.lp-karta-3d__text {
  padding: clamp(1.75rem, 5vw, 3rem);
}

.lp-karta-3d h2 {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem);
}

.lp-karta-3d__text > p {
  max-width: 40rem;
  margin-top: 1rem;
  color: var(--text);
}

@media (max-width: 29.99rem) {
  .lp-karta-3d__text .lp-tlacitko {
    width: 100%;
  }
}

/* Volby (kov, kámen, tvar…): <dl class="lp-volby"> */
.lp-volby {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.lp-volby dt {
  margin-bottom: 0.35rem;
  font: 500 0.75rem/1.3 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-inkoust-3);
}

.lp-volby dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0;
}

/* Barevný vzorek před textem: <span class="lp-vzorek" data-vzorek="bile"> */
.lp-vzorek {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--inkoust);
}

.lp-vzorek::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--vzorek, var(--lp-zlato-prechod));
  box-shadow: inset 0 0 0 1px rgba(35, 40, 46, 0.16), 0 1px 2px rgba(35, 40, 46, 0.12);
}

.lp-vzorek--kamen::before {
  width: 0.85rem;
  height: 0.85rem;
  margin-inline: 0.13rem;
  border-radius: 2px;
  transform: rotate(45deg);
}

/* tvar (brus) kamene: obrysová značka místo barevného vzorku */
.lp-vzorek--brus::before {
  width: 1rem;
  height: 1rem;
  background: none;
  border: 1.5px solid currentColor;
  box-shadow: none;
  opacity: 0.7;
}

.lp-vzorek--brus[data-vzorek="oval"]::before {
  width: 1.3rem;
  height: 0.85rem;
}

.lp-vzorek--brus[data-vzorek="princess"]::before {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 1px;
}

.lp-vzorek--brus[data-vzorek="smaragdovy"]::before {
  width: 1.3rem;
  height: 0.9rem;
  border-radius: 4px;
}

.lp-vzorek--brus[data-vzorek="hruska"]::before {
  width: 0.9rem;
  height: 0.9rem;
  margin-inline: 0.15rem;
  border-radius: 50% 0 50% 50%;
  transform: rotate(45deg);
}

.lp-vzorek[data-vzorek="zlute"] {
  --vzorek: linear-gradient(135deg, #FFFBEA 0%, #E4C885 28%, #CAA55B 52%, #A57F3C 78%, #805E27 100%);
}

.lp-vzorek[data-vzorek="bile"] {
  --vzorek: linear-gradient(135deg, #FFFFFF 0%, #EEF1F4 30%, #C9D0D6 62%, #9AA3AB 100%);
}

.lp-vzorek[data-vzorek="ruzove"] {
  --vzorek: linear-gradient(135deg, #FFF4EF 0%, #F0C8B8 30%, #D39A83 60%, #A86A55 100%);
}

.lp-vzorek[data-vzorek="ledove-modry"] {
  --vzorek: linear-gradient(135deg, #F1F9FE 0%, #BFE0F3 30%, #8EC5E8 58%, #5FA8D8 100%);
}

.lp-vzorek[data-vzorek="ciry"] {
  --vzorek: linear-gradient(135deg, #FFFFFF 0%, #F4F7F9 40%, #DDE4EA 75%, #C4CED6 100%);
}

.lp-vzorek[data-vzorek="safir"] {
  --vzorek: linear-gradient(135deg, #C9D8FF 0%, #6E8FE8 28%, #2C50C8 58%, #142A80 100%);
}

.lp-vzorek[data-vzorek="rubin"] {
  --vzorek: linear-gradient(135deg, #FFD0D8 0%, #EE6680 28%, #D01F3F 58%, #86102A 100%);
}

.lp-vzorek[data-vzorek="smaragd"] {
  --vzorek: linear-gradient(135deg, #CDF5E3 0%, #5CCBA2 28%, #169C72 58%, #0A644B 100%);
}

.lp-vzorek[data-vzorek="morganit"] {
  --vzorek: linear-gradient(135deg, #FFF6F2 0%, #FBDDD5 30%, #F6C1B5 60%, #E39A92 100%);
}

/* ---------- 9. Recenze (výpis vyrábí /js/recenze.js) ---------- */
.lp-recenze-seznam {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--mezera-mrizky);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-recenze {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  height: 100%;
  margin: 0;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--bila);
  border-radius: var(--r);
  box-shadow: var(--stin-karty);
}

.lp-recenze blockquote {
  margin: 0;
  font: italic 400 1.35rem/1.5 var(--f-titul);
  color: var(--inkoust);
  white-space: pre-line;
}

.lp-recenze blockquote p {
  margin: 0;
}

.lp-recenze figcaption {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--linka);
  font: 500 0.8rem/1.4 var(--f-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkoust);
}

.lp-recenze__datum {
  display: block;
  margin-top: 0.2rem;
  font: 400 0.9rem/1.4 var(--f-text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--lp-inkoust-3);
}

.lp-hvezdicky {
  display: flex;
  gap: 0.2rem;
  color: var(--led);
}

.lp-hvezdicky svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.lp-hvezdicky svg.je-prazdna {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

/* ---------- 10. Patička ----------
   Tmavá a nízká (přání majitele: „moc velké, zmenšit“): značka (symbol,
   název, motto) a sloupce Web, Ve 3D, Kontakt, dole © a odkaz „Správa“.
   Markup vyrábí web/_nastroje/sjednot_hlavicku.py. */
.lp-paticka {
  position: relative;
  padding-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-size: 0.92rem;
  color: var(--na-tmave-2);
  background: var(--noc);
}

.lp-paticka :focus-visible {
  outline-color: var(--led-svetla);
}

.lp-paticka__mrizka {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}

.lp-paticka__symbol {
  display: block;
  width: 38px;
  height: auto;
  margin-bottom: 0.5rem;
}

.lp-paticka__jmeno {
  margin: 0 0 0 -0.1em;
  padding-inline: 0.1em;
  font: 400 1.85rem/1.15 var(--f-skript);
  color: #FFFFFF;
}

.lp-paticka__motto {
  margin: 0.45rem 0 0;
  font: 400 0.64rem/1.8 var(--f-motto);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--na-tmave-2);
}

.lp-paticka__sloupec {
  min-width: 0;
}

.lp-paticka__nadpis {
  margin: 0 0 0.5rem;
  font: 500 0.7rem/1.4 var(--f-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--led-svetla);
}

.lp-paticka__odkazy {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-paticka__sloupec a {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  line-height: 1.3;
  color: var(--na-tmave);
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}

.lp-paticka__sloupec a:hover {
  color: #FFFFFF;
}

.lp-paticka__kontakt {
  display: grid;
  justify-items: start;
  margin: 0;
  font-style: normal;
  line-height: 1.55;
}

.lp-paticka__firma {
  color: var(--na-tmave);
}

/* e-mail stojí mezi obyčejným textem, proto je podtržený */
.lp-paticka__kontakt a[href^="mailto:"] {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 0.25em;
}

.lp-paticka__kontakt .lp-paticka__dalsi {
  margin-top: 0.4rem;
  font: 500 0.78rem/1.3 var(--f-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--led-svetla);
}

.lp-paticka__spodek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-block: 0.4rem 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
}

.lp-paticka__radek {
  margin: 0;
  padding-block: 0.5rem;
  color: var(--na-tmave-2);
}

.lp-paticka__sprava {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  font: 500 0.75rem/1 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--na-tmave-2);
}

.lp-paticka__sprava:hover {
  color: #FFFFFF;
}

/* odkazy sloupce „Web“ ve dvou sloupcích (patička je pak nižší) */
.lp-paticka__odkazy--dva {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 40rem) {
  .lp-paticka__mrizka {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: 2.5rem clamp(1.5rem, 4vw, 3rem);
  }

  .lp-paticka__znacka {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .lp-paticka__mrizka {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .lp-paticka__znacka {
    grid-column: auto;
  }
}

/* ---------- 11. Panel s formulářem (stránka Poptávka) ---------- */
.lp-sekce--formular {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  scroll-margin-top: 0.5rem;
}

.lp-sekce--formular + .lp-sekce--formular {
  padding-top: 0;
}

.lp-panel {
  position: relative;
  max-width: var(--lp-sirka-panel);
  margin-inline: auto;
  padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
  background: var(--bila);
  border-radius: var(--r);
  box-shadow: var(--stin-karty);
}

.lp-panel__hlavicka {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
  text-align: center;
}

.lp-panel__hlavicka h2 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
}

.lp-panel__hlavicka p:not(.lp-stitek) {
  max-width: 34rem;
  margin: 0.9rem auto 0;
  color: var(--text);
}

/* ---------- 12. Formuláře ----------
   Logiku obsluhují skripty (poptavka.js) – třídy, id a atributy name,
   data-pole, data-chyba, data-hlaska a data-pocitadlo NEMĚŇTE. */
.lp-formular {
  display: grid;
  gap: 1.4rem;
}

.lp-formular__mrizka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 1.5rem;
}

.lp-pole--cela {
  grid-column: 1 / -1;
}

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

.lp-pole {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lp-pole > label,
.lp-pole > legend,
.lp-popisek {
  padding: 0;
  font: 500 0.85rem/1.4 var(--f-text);
  color: var(--inkoust);
}

.lp-pole > legend {
  margin-bottom: 0.45rem;
}

.lp-nepovinne {
  font: 400 0.85rem/1 var(--f-text);
  color: var(--lp-inkoust-3);
}

.lp-povinne {
  margin-left: 0.15em;
  color: var(--led-text);
}

.lp-pole input:not([type="checkbox"]):not([type="radio"]),
.lp-pole select,
.lp-pole textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.75rem 1rem;
  font: 400 1rem/1.4 var(--f-text);
  color: var(--inkoust);
  background: var(--bila);
  border: 1px solid var(--lp-okraj-pole);
  border-radius: var(--r-s);
  transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.lp-pole textarea {
  min-height: 9rem;
  resize: vertical;
}

.lp-pole input::placeholder,
.lp-pole textarea::placeholder {
  color: #7A828B;
  opacity: 1;
}

.lp-pole input:not([type="checkbox"]):not([type="radio"]):hover,
.lp-pole select:hover,
.lp-pole textarea:hover {
  border-color: var(--tlumena);
}

.lp-pole input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.lp-pole select:focus-visible,
.lp-pole textarea:focus-visible {
  outline: 2px solid transparent;
  border-color: var(--led-text);
  box-shadow: 0 0 0 4px rgba(95, 168, 216, 0.25);
}

.lp-pole select {
  padding-right: 2.75rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A525B' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 0.75rem;
  cursor: pointer;
}

/* iOS: prázdné pole s datem jinak zkolabuje */
@supports (-webkit-touch-callout: none) {
  .lp-pole input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
  }
}

.lp-pole input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

.lp-pole__napoveda {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--lp-inkoust-3);
}

.lp-pole__chyba {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--chyba);
}

.lp-pole__chyba::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.5em;
  background: currentColor;
  transform: rotate(45deg);
}

.lp-pole.ma-chybu input:not([type="checkbox"]):not([type="radio"]),
.lp-pole.ma-chybu select,
.lp-pole.ma-chybu textarea {
  border-color: var(--chyba);
  background-color: var(--lp-chyba-podklad);
}

.lp-pole__pocitadlo {
  justify-self: end;
  margin: -0.2rem 0 0;
  font-size: 0.85rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--lp-inkoust-3);
}

.lp-dvojice {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 0.75rem;
}

/* Souhlas (checkbox) */
.lp-souhlas {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.lp-souhlas input {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.65rem 0 0;
  accent-color: var(--inkoust);
  cursor: pointer;
}

.lp-souhlas label {
  padding-block: 0.55rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--inkoust);
  cursor: pointer;
}

.lp-souhlas + .lp-pole__napoveda {
  margin-top: -0.6rem;
}

.lp-pole.ma-chybu .lp-souhlas input {
  outline: 2px solid var(--chyba);
  outline-offset: 2px;
}

.lp-souhlas + .lp-pole__napoveda,
.lp-souhlas ~ .lp-pole__chyba {
  padding-left: 2.15rem;
}

/* Past na roboty – člověk ji neuvidí (nesmí být display: none) */
.lp-past {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lp-formular__odeslat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  padding-top: 0.5rem;
}

.lp-formular__pozn {
  margin: 0;
  font-size: 0.9rem;
  color: var(--lp-inkoust-3);
}

@media (max-width: 29.99rem) {
  .lp-formular__odeslat .lp-tlacitko {
    width: 100%;
  }
}

/* Hlášky */
.lp-hlaska {
  margin: 0;
  padding: 0.95rem 1.15rem;
  font-size: 1rem;
  line-height: 1.55;
  border: 1px solid var(--linka);
  border-left-width: 3px;
  border-radius: var(--r-s);
}

.lp-hlaska:focus {
  outline: none;
}

.lp-hlaska:focus-visible {
  outline: 2px solid var(--led-text);
  outline-offset: 3px;
}

.lp-hlaska--chyba {
  font-weight: 500;
  color: var(--chyba);
  background: var(--lp-chyba-podklad);
  border-color: rgba(161, 48, 43, 0.25);
  border-left-color: var(--chyba);
}

.lp-hlaska--info {
  color: var(--text);
  background: var(--krem);
  border-left-color: var(--led);
}

.lp-hlaska .lp-tlacitko-text {
  margin-left: 0.25rem;
}

/* Poděkování po odeslání */
.lp-podekovani {
  padding: 1rem 0 0.5rem;
  text-align: center;
}

.lp-podekovani:focus {
  outline: none;
}

.lp-podekovani__znak {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.25rem;
  color: var(--led-text);
  background: var(--krem);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--linka-silna);
}

.lp-podekovani__znak svg {
  width: 1.6rem;
  height: 1.6rem;
}

.lp-podekovani h3 {
  font-size: clamp(1.9rem, 1.5rem + 1.5vw, 2.5rem);
  font-weight: 300;
}

.lp-podekovani p {
  max-width: 30rem;
  margin: 0.75rem auto 1.75rem;
  font-size: 1.05rem;
  color: var(--text);
}

/* Čip „Vybrané prstýnky“ */
.lp-cip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 1rem 1.25rem;
  background: var(--krem);
  border: 1px solid var(--linka-silna);
  border-radius: var(--r);
}

.lp-cip__obsah {
  display: grid;
  gap: 0.35rem;
}

.lp-cip__stitek {
  font: 500 0.75rem/1.2 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--led-text);
}

.lp-cip__hodnota {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.lp-cip__akce {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

.lp-cip .lp-pole__chyba {
  flex-basis: 100%;
}

/* Termíny konzultací (seznam vyrábí poptavka.js) */
.lp-terminy {
  display: grid;
  gap: 1.5rem;
  margin-top: 0.6rem;
}

.lp-den__nazev {
  margin: 0 0 0.7rem;
  padding-bottom: 0.45rem;
  font: 400 1.4rem/1.3 var(--f-titul);
  color: var(--inkoust);
  border-bottom: 1px solid var(--linka);
}

.lp-den__nazev::first-letter {
  text-transform: uppercase;
}

.lp-den__casy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.lp-volba {
  position: relative;
  display: flex;
}

@media (max-width: 39.99rem) {
  .lp-den__casy {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr));
  }

  .lp-volba label {
    width: 100%;
  }
}

.lp-volba input,
.lp-hvezdy input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.lp-volba label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 5.75rem;
  min-height: 3.5rem;
  padding: 0.5rem 0.9rem;
  line-height: 1.2;
  background: var(--bila);
  border: 1px solid var(--lp-okraj-pole);
  border-radius: var(--r-s);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.lp-volba__cas {
  font-size: 1.1rem;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  color: inherit;
}

.lp-volba__delka {
  font-size: 0.85rem;
  color: var(--lp-inkoust-3);
}

.lp-volba label:hover {
  background: var(--krem);
  border-color: var(--inkoust);
}

.lp-volba input:checked + label {
  color: #FFFFFF;
  background: var(--inkoust);
  border-color: var(--inkoust);
  box-shadow: inset 0 -3px 0 var(--led); /* ledově modrá značka vybraného termínu */
}

.lp-volba input:checked + label .lp-volba__delka {
  color: rgba(255, 255, 255, 0.8);
}

.lp-volba input:focus-visible + label,
.lp-hvezdy input:focus-visible + label {
  outline: 2px solid var(--led-text);
  outline-offset: 3px;
}

.lp-pole.ma-chybu .lp-volba label {
  border-color: var(--chyba);
}

.lp-vybrany {
  margin: 0;
  padding: 0.9rem 1.1rem;
  font-size: 1rem;
  color: var(--inkoust);
  background: var(--krem);
  border-left: 3px solid var(--led);
  border-radius: var(--r-s);
}

.lp-vybrany strong {
  font-weight: 500;
}

.lp-nacitani {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 2rem 0;
  color: var(--lp-inkoust-3);
}

.lp-nacitani::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid var(--linka-silna);
  border-top-color: var(--led);
  border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .lp-nacitani::before {
    animation: lp-otacka 0.9s linear infinite;
  }
}

@keyframes lp-otacka {
  to {
    transform: rotate(360deg);
  }
}

.lp-prazdno {
  padding: 1.75rem 1.25rem;
  text-align: center;
  background: var(--krem);
  border: 1px dashed var(--linka-silna);
  border-radius: var(--r);
}

.lp-prazdno p {
  max-width: 28rem;
  margin: 0 auto 1.25rem;
  font-size: 1.05rem;
}

/* Hvězdičkové hodnocení ve formuláři recenze */
.lp-hvezdy {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem;
}

.lp-hvezdy label {
  display: inline-grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  color: var(--led);
  border-radius: var(--r-s);
  cursor: pointer;
}

.lp-hvezdy svg {
  width: 2rem;
  height: 2rem;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition: fill 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.lp-hvezdy label.je-plna svg {
  fill: var(--led);
  stroke: var(--led-text);
}

@media (prefers-reduced-motion: no-preference) {
  .lp-hvezdy label:hover svg {
    transform: scale(1.1);
  }
}

.lp-hvezdy__popis {
  min-width: 7rem;
  margin-left: 0.6rem;
  font: italic 400 1.2rem/1.3 var(--f-titul);
  color: var(--text);
}

@media (max-width: 29.99rem) {
  .lp-hvezdy {
    justify-content: space-between;
  }

  .lp-hvezdy label {
    width: 3rem;
    height: 3rem;
  }

  .lp-hvezdy__popis {
    flex-basis: 100%;
    min-width: 0;
    min-height: 1.6em;
    margin: 0.15rem 0 0 0.3rem;
  }
}

.lp-pole.ma-chybu .lp-hvezdy label {
  color: var(--chyba);
}

/* ---------- 13. Fotky ----------
   .lp-foto je <figure>, <div>, <span> nebo <a> a v něm <img>. Výchozí poměr
   stran 16 : 9; fotky prstenů (800 × 600) mají .lp-foto--4x3. */
.lp-foto {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--krem-2);
  border-radius: var(--r);
}

.lp-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.lp-foto--4x3 img {
  aspect-ratio: 4 / 3;
}

/* štítek v rohu fotky („Vizualizace“, „3D vizualizace“) */
.lp-foto__znacka {
  position: absolute;
  top: clamp(0.7rem, 2vw, 1.1rem);
  left: clamp(0.7rem, 2vw, 1.1rem);
  z-index: 1;
  max-width: calc(100% - 1.4rem);
  padding: 0.45em 0.95em;
  font: 500 0.72rem/1.2 var(--f-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkoust);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
}

.lp-foto__znacka--dole {
  top: auto;
  bottom: clamp(0.7rem, 2vw, 1.1rem);
}

/* fotka jako odkaz: pomalé jemné přiblížení při najetí myší */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  a.lp-foto img,
  a .lp-foto img {
    transition: transform 1.2s var(--ease-out);
  }

  a.lp-foto:hover img,
  a:hover .lp-foto img {
    transform: scale(1.04);
  }
}

/* ---------- 14. Karty s odkazem přes celou plochu ----------
   .lp-odkaz-karty je odkaz se šipkou, který roztáhne klikací plochu přes
   celou kartu (karta musí mít position: relative). */
.lp-odkaz-karty {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 2.75rem;
  margin-top: auto;
  font: 500 0.8rem/1.3 var(--f-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--led-text);
}

.lp-odkaz-karty::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.lp-odkaz-karty:hover {
  color: var(--inkoust);
}

.lp-odkaz-karty:focus-visible {
  outline: none;
}

.lp-odkaz-karty:focus-visible::before {
  outline: 2px solid var(--led-text);
  outline-offset: -4px;
}

.lp-sluzby--odkazy .lp-sluzba {
  display: flex;
  flex-direction: column;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.lp-sluzby--odkazy .lp-sluzba:hover {
  transform: translateY(-4px);
  box-shadow: var(--stin-karty-vetsi);
}

.lp-sluzby--odkazy .lp-sluzba p {
  margin-bottom: 1.25rem;
}

/* ---------- 15. Kroky spolupráce ----------
   <ol class="lp-kroky"> s položkami .lp-krok (číslo I–IV v kroužku).
   Telefon a tablet: pod sebou se svislou linkou. Od 64rem: jedna řada. */
.lp-kroky {
  --krok-kruh: 3.5rem;
  --krok-mezera: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 40rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.lp-krok {
  position: relative;
  min-height: var(--krok-kruh);
  padding: 0 0 2.25rem calc(var(--krok-kruh) + 1.25rem);
}

.lp-krok:last-child {
  padding-bottom: 0;
}

.lp-krok__cislo {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--krok-kruh);
  height: var(--krok-kruh);
  font: italic 400 1.35rem/1 var(--f-titul);
  color: var(--led-text);
  background: var(--bila);
  border: 1px solid var(--linka-silna);
  border-radius: 50%;
}

.lp-krok:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--krok-kruh) + 0.5rem);
  bottom: 0.5rem;
  left: calc(var(--krok-kruh) / 2);
  width: 1px;
  background: var(--linka-silna);
}

.lp-krok h3 {
  margin-bottom: 0.45rem;
  padding-top: calc((var(--krok-kruh) - 1.15em) / 2);
}

.lp-krok p {
  margin: 0;
  color: var(--text);
}

@media (min-width: 64rem) {
  .lp-kroky {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: var(--krok-mezera);
    max-width: none;
  }

  .lp-krok {
    padding: calc(var(--krok-kruh) + 1.5rem) 0 0;
    text-align: center;
  }

  .lp-krok__cislo {
    left: calc(50% - var(--krok-kruh) / 2);
  }

  .lp-krok:not(:last-child)::before {
    top: calc(var(--krok-kruh) / 2);
    bottom: auto;
    left: calc(50% + var(--krok-kruh) / 2 + 0.75rem);
    width: calc(100% + var(--krok-mezera) - var(--krok-kruh) - 1.5rem);
    height: 1px;
  }

  .lp-krok h3 {
    padding-top: 0;
  }
}

/* ---------- 16. Scény (Svatby ve 3D) ----------
   <article class="lp-scena"> – fotka vlevo, text vpravo; s .lp-scena--vpravo
   je fotka vpravo. Pod fotkou může být pás dalších fotek .lp-scena__nahledy. */
.lp-scena {
  scroll-margin-top: 1.5rem;
}

.lp-scena + .lp-scena {
  margin-top: clamp(3.5rem, 8vw, 6.5rem);
  padding-top: clamp(3.5rem, 8vw, 6.5rem);
  border-top: 1px solid var(--linka);
}

.lp-scena__hlavni {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

.lp-scena__foto {
  box-shadow: var(--stin-karty);
}

.lp-scena__text h2 {
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem);
}

.lp-scena__text > p:not(.lp-stitek) {
  max-width: 38rem;
  margin: 1.1rem 0 0;
  color: var(--text);
}

.lp-scena__text .lp-akce {
  margin-top: 1.75rem;
}

.lp-scena__nahledy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.6vw, 1rem);
  margin: clamp(0.75rem, 2vw, 1.25rem) 0 0;
  padding: 0;
  list-style: none;
}

.lp-scena__nahledy .lp-foto {
  border-radius: calc(var(--r) * 0.75);
}

@media (min-width: 60rem) {
  .lp-scena__hlavni {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .lp-scena--vpravo .lp-scena__hlavni {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .lp-scena--vpravo .lp-scena__foto {
    order: 2;
  }
}

/* Řádek údajů (Balíček · Pohledy …): <dl class="lp-meta"> */
.lp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
  margin: 1.5rem 0 0;
  padding: 1rem 0;
  border-block: 1px solid var(--linka);
}

.lp-meta > div {
  min-width: 0;
}

.lp-meta dt {
  margin-bottom: 0.2rem;
  font: 500 0.72rem/1.3 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-inkoust-3);
}

.lp-meta dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--inkoust);
}

/* odkaz v údaji: plocha pro prst 44 px, řádek přitom zůstane nízký */
.lp-meta a {
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-block: -0.6rem;
}

/* Tři malé karty scén vedle sebe: <ul class="lp-sceny"> */
.lp-sceny {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mezera-mrizky);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-scena-karta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bila);
  border-radius: var(--r);
  box-shadow: var(--stin-karty);
  transition: box-shadow 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.lp-scena-karta:hover {
  box-shadow: var(--stin-karty-vetsi);
  transform: translateY(-4px);
}

.lp-scena-karta .lp-foto {
  border-radius: 0;
}

.lp-scena-karta__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 2rem);
}

.lp-scena-karta__stitek {
  margin: 0 0 0.5rem;
  font: 500 0.75rem/1.3 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--led-text);
}

.lp-scena-karta__text > p:not([class]) {
  margin: 0.6rem 0 1rem;
  color: var(--text);
}

@media (min-width: 36rem) and (max-width: 59.99rem) {
  .lp-scena-karta {
    flex-direction: row;
  }

  .lp-scena-karta .lp-foto {
    flex: 0 0 44%;
    min-height: 12rem;
  }

  .lp-scena-karta .lp-foto img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

@media (min-width: 60rem) {
  .lp-sceny {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- 17. Balíčky ----------
   <ul class="lp-balicky"> s kartami <li class="lp-balicek"> (vyrábí je
   /balicky/balicky.js). Karta má .lp-balicek__hlavicka (typ + italský
   název písmem Great Vibes) a .lp-balicek__telo. .lp-balicek--siroky
   zabere celý řádek (Su misura). */
.lp-balicky {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mezera-mrizky);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .lp-balicky {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .lp-balicky {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lp-balicek {
  --balicek-okraj: clamp(1.5rem, 3.5vw, 2.25rem);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--balicek-okraj);
  background: var(--bila);
  border-radius: var(--r);
  box-shadow: var(--stin-karty);
  scroll-margin-top: 1.5rem;
  transition: box-shadow 0.5s var(--ease-out);
}

/* karta, na kterou vede odkaz s kotvou (např. /balicky#romantico) */
.lp-balicek:target {
  box-shadow: 0 0 0 2px var(--led), var(--stin-karty-vetsi);
}

.lp-balicek__hlavicka {
  margin-bottom: 1.1rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--linka);
}

.lp-balicek__typ {
  margin: 0 0 0.35rem;
  font: 500 0.75rem/1.4 var(--f-text);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--led-text);
}

.lp-balicek__nazev {
  margin-left: -0.1em;
  padding-inline: 0.1em;
  font-family: var(--f-skript);
  font-weight: 400;
  font-size: clamp(2.6rem, 2rem + 1.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: 0;
}

.lp-balicek__telo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.lp-balicek__telo > p {
  margin: 0 0 0.9rem;
}

.lp-balicek__popis,
.lp-balicek__pro {
  color: var(--text);
}

/* malý popisek verzálkami: „Pro koho“, „V balíčku“ */
.lp-balicek__popisek {
  display: block;
  margin: 0 0 0.3rem;
  font: 500 0.72rem/1.4 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-inkoust-3);
}

.lp-balicek__telo > .lp-balicek__popisek {
  margin-bottom: 0.4rem;
}

.lp-balicek .lp-seznam {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.55;
}

/* patička karty se drží dole, i když je text v kartách různě dlouhý */
.lp-balicek__pata {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linka);
}

.lp-balicek__pata > p {
  margin: 0;
}

.lp-balicek__odkazy {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

/* hlavičky karet v jednom řádku mají stejnou výšku (novější prohlížeče) */
@supports (grid-template-rows: subgrid) and selector(:has(> *)) {
  .lp-balicek:not(.lp-balicek--siroky):has(> .lp-balicek__hlavicka:first-child + .lp-balicek__telo:last-child) {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: 0;
  }
}

.lp-balicek--siroky {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  .lp-balicek--siroky {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }

  .lp-balicek--siroky .lp-balicek__hlavicka {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* Seznam s krátkou linkou místo odrážky: <ul class="lp-seznam" role="list"> */
.lp-seznam {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-seznam > li {
  position: relative;
  padding-left: 1.6rem;
}

.lp-seznam > li + li {
  margin-top: 0.4rem;
}

.lp-seznam > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  top: calc(0.5lh - 0.5px);
  width: 0.9rem;
  height: 1px;
  background: var(--led);
}

@media (min-width: 40rem) {
  .lp-seznam--sloupce {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 2.5rem;
  }

  .lp-seznam--sloupce > li + li {
    margin-top: 0;
  }
}

/* ---------- 18. Poznámka ----------
   Stálý text stránky s modrou linkou vlevo (např. „Obrázky jsou vizualizace“). */
.lp-poznamka {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.2rem 1.5rem;
  font-size: 1rem;
  line-height: 1.65;
  text-align: left;
  color: var(--text);
  background: var(--bila);
  border-radius: var(--r);
  box-shadow: inset 3px 0 0 var(--led), var(--stin-karty);
}

.lp-poznamka > :last-child {
  margin-bottom: 0;
}

.lp-poznamka strong {
  font-weight: 500;
  color: var(--inkoust);
}

.lp-poznamka__titul {
  display: block;
  margin: 0 0 0.35rem;
  font: 500 0.75rem/1.4 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--led-text);
}

/* ---------- 19. Tým: oddělení ---------- */
.lp-tym {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mezera-mrizky);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .lp-tym {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .lp-tym {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lp-oddeleni {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--bila);
  border-radius: var(--r);
  box-shadow: var(--stin-karty);
}

.lp-oddeleni > .lp-foto {
  border-radius: 0;
}

.lp-oddeleni__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 2rem);
}

.lp-oddeleni h3 {
  margin-bottom: 0.5rem;
}

.lp-oddeleni__text > p {
  margin: 0 0 1rem;
  color: var(--text);
}

/* řádek pro jména – drží se dole */
.lp-oddeleni__text > .lp-oddeleni__jmeno {
  margin: auto 0 0;
  padding-top: 0.85rem;
  font: italic 400 1.15rem/1.45 var(--f-titul);
  color: var(--lp-inkoust-3);
  border-top: 1px solid var(--linka);
}

/* ---------- 20. Kontakt ----------
   <dl class="lp-kontakt"> s řádky <div><dt>…</dt><dd>…</dd></div>. */
.lp-kontakt {
  margin: 0;
  font-style: normal;
  border-bottom: 1px solid var(--linka);
}

.lp-kontakt > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
  min-height: 3.25rem;
  padding-block: 0.25rem;
  border-top: 1px solid var(--linka);
}

.lp-kontakt dt {
  font: 500 0.72rem/1.4 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lp-inkoust-3);
}

.lp-kontakt dd {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--inkoust);
}

.lp-kontakt a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

@media (max-width: 29.99rem) {
  .lp-kontakt > div {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 0.65rem 0.2rem;
  }
}

/* ---------- 21. Výzva na tmavém panelu ----------
   <section class="lp-pruh"> – tmavý zaoblený panel s bílým textem.
   Tlačítka .lp-tlacitko--svetle a --obrys-svetly patří jen sem (a na fotky). */
.lp-pruh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 2 * var(--okraj));
  max-width: 1320px;
  margin: clamp(3rem, 6vw, 5rem) auto;
  padding-block: clamp(4rem, 9vw, 7rem);
  text-align: center;
  color: var(--na-tmave);
  background:
    radial-gradient(ellipse 70% 90% at 12% 0%, rgba(95, 168, 216, 0.2), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, rgba(142, 197, 232, 0.1), transparent 60%),
    var(--noc);
  border-radius: var(--r-l);
}

.lp-pruh__obsah {
  position: relative;
  max-width: 50rem;
}

.lp-pruh h2 {
  font-size: clamp(2.3rem, 1.5rem + 2.9vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #FFFFFF;
}

.lp-pruh h2 em {
  color: var(--led-svetla);
}

.lp-pruh p {
  color: var(--na-tmave);
}

.lp-pruh .lp-stitek {
  color: var(--led-svetla);
}

.lp-pruh .lp-ornament {
  background-image: var(--lp-ornament-svetly);
}

.lp-pruh__text {
  max-width: 36rem;
  margin: 0 auto 2rem;
  font-size: 1.125rem;
  text-wrap: balance;
}

.lp-pruh a:not(.lp-tlacitko) {
  color: #FFFFFF;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.lp-pruh a:not(.lp-tlacitko):hover {
  text-decoration-color: var(--led-svetla);
}

.lp-pruh :focus-visible {
  outline-color: var(--led-svetla);
}

/* ---------- 22. Text a rozvržení ---------- */
/* Blok souvislého textu (šířka řádku asi 62 znaků) */
.lp-proza {
  max-width: 42rem;
  margin-inline: auto;
}

.lp-proza > * {
  margin-block: 0;
}

.lp-proza > * + * {
  margin-top: 1em;
}

.lp-proza > h2 {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}

.lp-proza > * + h2 {
  margin-top: 1.5em;
}

.lp-proza > * + h3 {
  margin-top: 1.4em;
}

.lp-proza > p,
.lp-proza > ul,
.lp-proza > ol {
  color: var(--text);
}

/* Dva sloupce (text + obrázek); na telefonu pod sebou */
.lp-dvojsloupec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.lp-dvojsloupec--nahoru {
  align-items: start;
}

.lp-dvojsloupec > * {
  min-width: 0;
}

@media (min-width: 56rem) {
  .lp-dvojsloupec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* první část (v HTML) se zobrazí vpravo */
  .lp-dvojsloupec--obracene > :first-child {
    order: 2;
  }
}

.lp-dvojsloupec__text h2 {
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem);
}

.lp-dvojsloupec__text > p:not(.lp-stitek) {
  margin: 1.1rem 0 0;
  color: var(--text);
}

.lp-dvojsloupec__text .lp-akce,
.lp-dvojsloupec__text .lp-kontakt {
  margin-top: 1.75rem;
}

/* svislá mezera před dalším blokem uvnitř jedné sekce */
.lp-odstup {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.lp-odstup--maly {
  margin-top: 1.25rem;
}

/* Prázdný stav recenzí */
.lp-prazdno--recenze {
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 3.25rem) clamp(1.25rem, 4vw, 2.5rem);
  background: var(--bila);
  border: 0;
  box-shadow: var(--stin-karty);
}

.lp-prazdno--recenze::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 1rem;
  background: var(--lp-srdce) center / contain no-repeat;
}

.lp-prazdno--recenze h2,
.lp-prazdno--recenze h3 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem);
}

.lp-prazdno--recenze > :last-child {
  margin-bottom: 0;
}

/* ---------- 23. Tmavá sekce s fotkou v pozadí ----------
   Pro vlny 2–3 (prsteny, katalog, kontakt): <section class="lp-tmava">
   s <div class="lp-tmava__pozadi"><img …></div> a .lp-obal s obsahem. */
.lp-tmava {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(6rem, 12vw, 11rem);
  color: var(--na-tmave);
  background: var(--noc);
}

.lp-tmava--zaoblena {
  margin-top: calc(-1 * var(--r-l));
  border-radius: var(--r-l) var(--r-l) 0 0;
  z-index: 1;
}

.lp-tmava__pozadi {
  position: absolute;
  inset: -12% 0;
  z-index: -1;
}

.lp-tmava__pozadi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.42) saturate(0.8);
}

.lp-tmava__pozadi::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 12, 16, 0.85) 0%, rgba(10, 12, 16, 0.5) 55%, rgba(10, 12, 16, 0.3) 100%);
}

.lp-tmava :is(h1, h2, h3) {
  color: #FFFFFF;
}

.lp-tmava :is(h1, h2, h3) em,
.lp-tmava .lp-stitek {
  color: var(--led-svetla);
}

.lp-tmava p {
  color: var(--na-tmave);
}

.lp-tmava :focus-visible {
  outline-color: var(--led-svetla);
}

/* ---------- 24. Pohyb: odkrývání při scrollování, parallax ----------
   Atributy čte /js/site-nav.js (návod v KOMPONENTY.md):
     data-odhal=""         fade + posun 28 px nahoru
     data-odhal="obraz"    obrázek se odkryje zdola, uvnitř se zmenší 1,12 → 1
     data-odhal="text"     nadpis po slovech vyjede z masky
     data-odhal="zleva"    posun zleva
     data-odhal="meritko"  zvětšení 0,96 → 1
     data-odhal-skupina    na rodiči: děti se odkryjí postupně (po 70 ms)
     style="--zpozdeni:.2s" ruční zpoždění
     data-parallax="0.15"  posun při scrollování (jen počítač)
   Skript přidá třídu .je-videt (začne animace) a po jejím konci
   .lp-odhal-konec (prvek se vrátí ke svým vlastním přechodům). */
.lp-js :is([data-odhal], [data-odhal-skupina] > *):not(.je-videt) {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.lp-js [data-odhal="zleva"]:not(.je-videt) {
  transform: translate3d(-32px, 0, 0);
}

.lp-js [data-odhal="meritko"]:not(.je-videt) {
  transform: scale(0.96);
}

.lp-js :is([data-odhal], [data-odhal-skupina] > *):not(.lp-odhal-konec) {
  transition:
    opacity 0.9s var(--ease-out) var(--zpozdeni, 0s),
    transform 0.9s var(--ease-out) var(--zpozdeni, 0s);
}

/* obraz: odkrytí zdola (ořez) a zmenšení fotky uvnitř */
.lp-js [data-odhal="obraz"]:not(.je-videt) {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0 round var(--odhal-r, var(--r)));
}

.lp-js [data-odhal="obraz"].je-videt:not(.lp-odhal-konec) {
  clip-path: inset(0 0 0 0 round var(--odhal-r, var(--r)));
}

.lp-js [data-odhal="obraz"]:not(.lp-odhal-konec) {
  transition: clip-path 1.3s var(--ease-out) var(--zpozdeni, 0s);
}

.lp-js [data-odhal="obraz"]:not(.je-videt) img {
  transform: scale(1.12);
}

.lp-js [data-odhal="obraz"]:not(.lp-odhal-konec) img {
  transition: transform 1.3s var(--ease-out) var(--zpozdeni, 0s);
}

/* text: slova (span.lp-slovo vyrábí skript) vyjedou z masky */
.lp-js [data-odhal="text"]:not(.je-videt) {
  opacity: 1;
  transform: none;
}

.lp-slovo {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: 0.06em 0.14em;
  margin-block: -0.06em -0.14em;
}

.lp-slovo > span {
  display: inline-block;
}

.lp-js [data-odhal="text"]:not(.je-videt) .lp-slovo > span {
  transform: translate3d(0, 110%, 0);
}

.lp-js [data-odhal="text"]:not(.lp-odhal-konec) .lp-slovo > span {
  transition: transform 0.9s var(--ease-out);
  transition-delay: calc(var(--zpozdeni, 0s) + var(--s, 0) * 45ms);
}

/* posun při scrollování (hodnotu --py nastavuje skript) */
[data-parallax] {
  translate: 0 var(--py, 0px);
}

/* skript se nespustil nebo prohlížeč neumí IntersectionObserver: vše vidět */
.lp-bez-odhalu :is([data-odhal], [data-odhal-skupina] > *),
.lp-bez-odhalu [data-odhal] img,
.lp-bez-odhalu .lp-slovo > span {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* ---------- 25. Přechody mezi stránkami (View Transitions) ----------
   Stará stránka zmizí, nová se objeví s jemným posunem; hlavička zůstane
   na místě. Prohlížeče bez podpory přejdou normálně. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 220ms var(--ease-io) both lp-vt-ven;
}

::view-transition-new(root) {
  animation: 480ms var(--ease-out) both lp-vt-dovnitr;
}

::view-transition-group(hlavicka) {
  animation-duration: 0.45s;
  animation-timing-function: var(--ease-out);
}

@keyframes lp-vt-ven {
  to {
    opacity: 0;
  }
}

@keyframes lp-vt-dovnitr {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ---------- 26. DOČASNĚ: stará úvodní stránka (do vlny 2) ----------
   index.html ještě používá .uv-uvod z /css/uvod.css (fotka vpravo, rámeček
   vlevo). Tohle ji jen udrží čitelnou v novém vzhledu – vlna 2 úvodní
   stránku nahradí a tento blok smaže. */
.lp-uvod--foto.uv-uvod {
  padding-block: 4rem clamp(3rem, 7vw, 5.5rem);
  background: var(--noc);
}

.lp-uvod--foto.uv-uvod::after {
  content: none;
}

.lp-uvod--foto.uv-uvod .lp-uvod__foto {
  left: 0;
  width: 100%;
  height: 100%;
}

.lp-uvod--foto.uv-uvod .lp-ramecek {
  width: auto;
  max-width: 44rem;
  margin: 0;
  padding: 0;
}

/* ---------- 27. Omezený pohyb (nastavení systému) ----------
   Žádné posuny, zoomy, parallax ani přechody stránek; obsah je hned vidět. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .lp-js :is([data-odhal], [data-odhal-skupina] > *),
  .lp-js [data-odhal] img,
  .lp-js .lp-slovo > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  [data-parallax],
  .lp-uvod--foto .lp-uvod__foto,
  .lp-tlacitko,
  .lp-menu a.lp-menu__cta {
    translate: none !important;
    scale: none !important;
  }

  .lp-uvod--foto > .lp-obal {
    opacity: 1 !important;
  }
}

/* ---------- 28. Tisk ---------- */
@media print {
  .lp-js body {
    padding-top: 0;
  }

  .lp-hlavicka,
  .lp-js .lp-hlavicka {
    position: static;
    transform: none;
  }

  .lp-menu-tlacitko,
  .lp-hlavicka__prubeh,
  .lp-preskocit {
    display: none !important;
  }

  .lp-js :is([data-odhal], [data-odhal-skupina] > *),
  .lp-js [data-odhal] img,
  .lp-js .lp-slovo > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ---------- 29. Vysoký kontrast (Windows) ----------
   Prohlížeč zahodí barvy pozadí – tenké linky kreslené pozadím dostanou
   systémovou barvu textu. */
@media (forced-colors: active) {
  .lp-volba input:checked + label {
    outline: 3px solid Highlight;
  }

  .lp-hvezdy label.je-plna svg {
    fill: CanvasText;
  }

  .lp-krok:not(:last-child)::before,
  .lp-seznam > li::before,
  .lp-hlavicka__prubeh,
  .lp-menu a::after {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .lp-balicek:target {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  .lp-tlacitko,
  .lp-sluzba,
  .lp-balicek,
  .lp-recenze,
  .lp-panel,
  .lp-pruh,
  .lp-foto__znacka {
    border: 1px solid CanvasText;
  }

  .lp-ornament,
  .lp-prazdno--recenze::before {
    forced-color-adjust: none;
  }
}

/* ==========================================================================
   30. PODSTRÁNKY V2 – společné prvky (vlna 2b, 20. 10. 2026)
   --------------------------------------------------------------------------
   Prvky, které používá víc podstránek (/sluzby, /svatby-ve-3d, /prsteny,
   /balicky, /o-nas, /recenze, /poptavka, 404). Hotové ukázky HTML jsou
   v web/_nastroje/KOMPONENTY.md.
     a) .lp-stitek__cislo         – číslo ve štítku sekce („01 —— Služby“)
     b) .lp-uvod__kotvy           – odkazy na části stránky v úvodu s fotkou
        .lp-uvod__popisek         – drobný popisek fotky vpravo dole
        .lp-uvod--vysoky          – vyšší úvod s fotkou
     c) .lp-hlavicka-sekce--vlevo – hlavička sekce zarovnaná vlevo
     d) .lp-fotopas               – pomalu jedoucí pás fotek
     e) .lp-karta-foto            – karta = celá fotka s tmavým závojem
     f) .lp-otocka                – rámeček s velkou fotkou prstenu
     g) .pr-lightbox              – okno se zvětšenou fotkou (/prsteny/prsteny.js)
   ========================================================================== */

/* a) číslo ve štítku sekce: „01 —— Název“ */
.lp-stitek__cislo {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  font-variant-numeric: lining-nums tabular-nums;
}

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

/* b) úvod s fotkou: odkazy na části stránky (skleněné „pilulky“) */
.lp-uvod__kotvy {
  margin-top: 2.25rem;
}

.lp-uvod__kotvy ol,
.lp-uvod__kotvy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-uvod__kotvy a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.55rem 1.15rem 0.55rem 0.95rem;
  font: 500 0.78rem/1.2 var(--f-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}

.lp-uvod__kotvy a:hover {
  color: var(--inkoust);
  background: #FFFFFF;
  border-color: #FFFFFF;
}

.lp-uvod__kotvy .lp-rozcestnik__cislo {
  font: italic 400 1.15rem/1 var(--f-titul);
  letter-spacing: 0;
  text-transform: none;
  color: var(--led-svetla);
  transition: color 0.4s var(--ease-out);
}

.lp-uvod__kotvy a:hover .lp-rozcestnik__cislo {
  color: var(--led-text);
}

.lp-uvod__popisek {
  position: absolute;
  right: var(--okraj);
  bottom: clamp(1.25rem, 3vw, 2rem);
  z-index: 1;
  margin: 0;
  font: 500 0.7rem/1.4 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 47.99rem) {
  .lp-uvod__popisek {
    display: none;
  }
}

.lp-uvod--vysoky {
  min-height: max(520px, min(88vh, 860px));
  min-height: max(520px, min(88svh, 860px));
}

/* c) hlavička sekce vlevo */
.lp-hlavicka-sekce--vlevo {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

.lp-hlavicka-sekce--vlevo h2,
.lp-hlavicka-sekce--vlevo p:not(.lp-stitek) {
  max-width: 40rem;
  margin-inline: 0;
}

.lp-hlavicka-sekce--vlevo .lp-stitek {
  justify-content: flex-start;
}

/* d) pás fotek, který pomalu jede do strany. Fotky jsou v HTML dvakrát
      za sebou (druhá polovina má aria-hidden), aby pás plynule navazoval. */
.lp-fotopas {
  overflow: hidden;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.75rem, 4.5vw, 3.75rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.lp-fotopas__rada {
  display: flex;
  gap: clamp(12px, 1.6vw, 22px);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-fotopas__rada li {
  flex: none;
  width: clamp(15rem, 26vw, 24rem);
}

.lp-fotopas__rada li:nth-child(even) {
  transform: translateY(1.25rem);
}

.lp-fotopas .lp-foto img {
  transition: transform 1.2s var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .lp-fotopas__rada {
    animation: lp-fotopas 80s linear infinite;
  }

  .lp-fotopas:hover .lp-fotopas__rada {
    animation-play-state: paused;
  }

  .lp-fotopas .lp-foto:hover img {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-fotopas {
    overflow-x: auto;
  }
}

@keyframes lp-fotopas {
  to {
    transform: translateX(-50%);
  }
}

/* e) karta = celá fotka s tmavým závojem, název dole (scény, rozcestníky) */
.lp-karta-foto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  overflow: hidden;
  min-height: 22rem;
  padding: clamp(1.25rem, 2.5vw, 1.9rem);
  color: #FFFFFF;
  text-decoration: none;
  background: var(--noc-2);
  border-radius: var(--r);
}

.lp-karta-foto > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

.lp-karta-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--zavoj-karta);
}

.lp-karta-foto__cislo {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  left: clamp(1.25rem, 2.5vw, 1.9rem);
  font: italic 300 1.5rem/1 var(--f-titul);
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.lp-karta-foto__jmeno {
  display: block;
  padding-inline: 0.1em;
  font: 400 clamp(2.4rem, 1.9rem + 1.6vw, 3.4rem)/1.05 var(--f-skript);
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.lp-karta-foto__popis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin-top: 0.5rem;
  font: 500 0.75rem/1.4 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--na-tmave);
}

.lp-karta-foto__popis em {
  font-style: normal;
  color: var(--led-svetla);
}

.lp-karta-foto__sipka {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.05rem;
  letter-spacing: 0;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lp-karta-foto:hover > img {
    transform: scale(1.06);
  }
}

.lp-karta-foto:hover .lp-karta-foto__sipka {
  color: var(--inkoust);
  background: #FFFFFF;
  transform: translateX(4px);
}

.lp-karta-foto:focus-visible {
  outline: 2px solid var(--led);
  outline-offset: 3px;
}

/* f) rámeček s velkou fotkou prstenu (/prsteny a úvodní stránka).
      Otáčení prstenů majitel 20. 10. 2026 zrušil – zůstává jen fotka. */
.lp-otocka {
  position: relative;
  overflow: hidden;
  background: #EEEAE3;
}

.lp-otocka > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* g) okno se zvětšenou fotkou (dialog #pr-lightbox, ovládá /prsteny/prsteny.js;
      používají ho /prsteny i /svatby-ve-3d) */
.pr-lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  color: #FFFFFF;
  background: transparent;
  overflow: hidden;
}

.pr-lightbox::backdrop {
  background: rgba(10, 12, 16, 0.94);
}

@media (prefers-reduced-motion: no-preference) {
  .pr-lightbox[open] {
    animation: lp-lightbox 0.45s var(--ease-out);
  }
}

@keyframes lp-lightbox {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}

.pr-lightbox__obsah {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.75rem;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: calc(3.75rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
  touch-action: pan-y pinch-zoom; /* vodorovné tažení prstem listuje fotkami */
}

.pr-lightbox__obsah img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.pr-lightbox figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  min-height: 2.75rem;
  padding-inline: 3.5rem;
  font: 500 0.78rem/1.5 var(--f-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.pr-lightbox__pocet {
  opacity: 0.7;
}

.pr-lightbox__tlacitko {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}

.pr-lightbox__tlacitko:hover {
  color: var(--inkoust);
  background: #FFFFFF;
  border-color: #FFFFFF;
}

.pr-lightbox__tlacitko:focus-visible {
  outline: 2px solid var(--led-svetla);
  outline-offset: 2px;
}

.pr-lightbox__tlacitko svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pr-lightbox__zavrit {
  top: calc(0.6rem + env(safe-area-inset-top, 0px));
  right: calc(0.75rem + env(safe-area-inset-right, 0px));
}

.pr-lightbox__predchozi,
.pr-lightbox__dalsi {
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.pr-lightbox__predchozi {
  left: calc(0.75rem + env(safe-area-inset-left, 0px));
}

.pr-lightbox__dalsi {
  right: calc(0.75rem + env(safe-area-inset-right, 0px));
}

@media (min-width: 48rem) {
  .pr-lightbox__obsah {
    padding: 3.75rem 5.5rem 1.25rem;
  }

  .pr-lightbox__predchozi,
  .pr-lightbox__dalsi {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .pr-lightbox__predchozi {
    left: 1.25rem;
  }

  .pr-lightbox__dalsi {
    right: 1.25rem;
  }
}

/* telefon na šířku: méně místa nahoře, fotka co největší */
@media (max-height: 30rem) {
  .pr-lightbox__obsah {
    gap: 0.25rem;
    padding-top: 0.75rem;
    padding-inline: 4.25rem;
  }

  .pr-lightbox__predchozi,
  .pr-lightbox__dalsi {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

/* při otevřené fotce se stránka pod ní neposouvá */
html.pr-bez-posunu {
  overflow: hidden;
}

/* fotka jako odkaz do okna se zvětšením */
a[data-foto] {
  cursor: zoom-in;
}

@media (forced-colors: active) {
  .pr-lightbox__tlacitko,
  .lp-uvod__kotvy a,
  .lp-karta-foto {
    border: 1px solid CanvasText;
  }
}

/* hlavička sekce na tmavém podkladu (.lp-tmava): světlý perex */
.lp-tmava .lp-hlavicka-sekce p:not(.lp-stitek) {
  color: var(--na-tmave);
}