/* ============================================================
   CINEFOLIO, demo
   Paleta: teplá čerň, slonovina, mosaz. Žádné indigo, žádné gradienty.
   ============================================================ */

/* Atribut hidden musí přebít vlastní display, jinak prvek zůstane vidět. */
[hidden] { display: none !important; }

:root {
  --ink: #0E0D0B;
  --ink-soft: #2A2622;
  --ivory: #F2EFE9;
  --ivory-2: #E9E4DA;
  --brass: #B98A44;
  --brass-deep: #966E30;
  --text: var(--ink);
  --bg: var(--ivory);
  --line: rgba(14, 13, 11, 0.14);
  --radius: 6px;
  --font-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
}

/* Tmavé stránky (galerie, portfolio) = promítací sál */
body.cinema {
  --text: #F2EFE9;
  --bg: #0E0D0B;
  --line: rgba(242, 239, 233, 0.16);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; }

a { color: inherit; }

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

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap > * { min-width: 0; }

/* ---------- Tlačítka ---------- */

.btn {
  display: inline-block;
  font-family: inherit;
  font-size: 16px;
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ivory);
  cursor: pointer;
  text-decoration: none;
  transition: background 180ms;
}
.btn:hover { background: #000; }

body.cinema .btn {
  background: var(--ivory);
  color: var(--ink);
}
body.cinema .btn:hover { background: #fff; }

.btn--brass {
  background: var(--brass);
  color: #14100A;
}
.btn--brass:hover { background: var(--brass-deep); color: var(--ivory); }
body.cinema .btn--brass { background: var(--brass); color: #14100A; }
body.cinema .btn--brass:hover { background: #D2A45C; color: #14100A; }

/* ---------- Nav ---------- */

.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 17px 0;
}

/* Na širokém okně sedí odkazy uprostřed lišty, ne hned vedle loga.
   Absolutně, aby je nerozhodily různě široké strany. */
@media (min-width: 900px) {
  .nav__links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.nav__logo {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 24px;
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: 8px 0;
}
.nav__logo em { color: var(--brass); font-style: italic; }

.nav__links {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  text-decoration: none;
  font-size: 15.5px;
  opacity: 0.82;
}
.nav__links a:hover { opacity: 1; }

.nav__burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
}

/* Mobilní drawer */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(82vw, 320px);
  background: var(--ivory);
  color: var(--ink);
  transform: translateX(105%);
  transition: transform 240ms ease;
  z-index: 200;
  padding: 28px 22px;
  box-shadow: -18px 0 40px rgba(0,0,0,0.25);
}
body.cinema .drawer { background: #171512; color: var(--ivory); }
.drawer.open { transform: translateX(0); }
.drawer a {
  display: block;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: 17px;
}
.drawer__close {
  background: none;
  border: none;
  color: inherit;
  font-size: 15px;
  padding: 12px 8px;
  margin-bottom: 10px;
  cursor: pointer;
}
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
  z-index: 199;
}
.backdrop.show { opacity: 1; pointer-events: auto; }

/* Starý úvod (fotka přes celou plochu, tmavý přechod a vstupní box pro
   svatebčany) je pryč. Nový je dole v oddílu ÚVOD HLAVNÍ STRÁNKY. Zbytky
   se sem nesmí vrátit: přechod .hero::after ležel přes celou sekci a na
   světlém úvodu z něj byl šedý závoj. */

/* ---------- Sekce: problém ---------- */

.problem {
  background: #fff;
  padding: 96px 0 88px;
}

.problem__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: start;
}

.problem__grid > * { min-width: 0; }

.problem h2 { max-width: 20ch; }

.problem__now {
  border-left: 2px solid var(--line);
  padding-left: 26px;
  font-size: 16.5px;
}

.problem__now p { opacity: 0.85; }

/* ---------- Sekce: ukázky ---------- */

.demos {
  background: #fff;
  padding: 84px 0 90px;
}

.demos__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 26px;
  margin-top: 36px;
}

.demos__grid > * { min-width: 0; }

.demo-card {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: var(--radius);
  overflow: hidden;
  color: #F5F2EC;
  aspect-ratio: 16 / 10;
}

.demo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 220ms;
}

.demo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(8deg, rgba(8, 7, 5, 0.78) 0%, rgba(8, 7, 5, 0.18) 55%, rgba(8, 7, 5, 0) 80%);
}

.demo-card:hover img { opacity: 0.86; }

.demo-card__label {
  position: absolute;
  z-index: 2;
  bottom: 22px;
  left: 24px;
  right: 24px;
}

.demo-card__label strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 4px;
}

.demo-card__label span { font-size: 15px; opacity: 0.85; }

.demos__note {
  margin: 26px 0 0;
  max-width: 74ch;
  font-size: 15.5px;
  opacity: 0.75;
}

.demos__note a {
  color: var(--brass-deep);
  display: inline-block;
  padding: 11px 2px;
  margin: -11px 0;
}

/* ---------- Sekce: co je uvnitř ---------- */



.inside__lead { max-width: 58ch; opacity: 0.88; }

.inside__rows { margin-top: 40px; }

.inside__row {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}

.inside__row > * { min-width: 0; }

.inside__row h3 { margin: 0; }

.inside__row p { margin: 0; opacity: 0.86; }

.inside__row--minor {
  grid-template-columns: 0.85fr 1.15fr;
  padding: 20px 0;
}

.inside__row--minor h3 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 600; }
.inside__row--minor p { font-size: 15.5px; }

/* ---------- Ceník ---------- */

.pricing {
  background: var(--ink);
  color: var(--ivory);
  padding: 88px 0;
}

.pricing h2 { max-width: 22ch; }

.pricing__lead { max-width: 56ch; opacity: 0.85; }

/* Nabídka na zkoušku patří i sem, ne jen k tlačítku nahoře: kdo čte
   ceník, rozhoduje se o penězích právě v tu chvíli. */
.pricing__zkouska {
  display: inline-block;
  margin: 4px 0 18px;
  padding: 9px 17px;
  border: 1px solid rgba(242, 239, 233, 0.28);
  border-radius: 999px;
  font-size: 15px;
}
.pricing__zkouska strong { color: #E4614C; font-weight: 600; }

.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid rgba(242, 239, 233, 0.18);
  margin-top: 8px;
}

.price-row > * { min-width: 0; }

.price-row:first-of-type { margin-top: 44px; }

.price-row__name {
  font-family: var(--font-display);
  font-size: 26px;
}

.price-row__desc {
  font-size: 15.5px;
  opacity: 0.75;
  margin-top: 4px;
}

.price-row__price {
  font-family: var(--font-display);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-row__price small {
  font-family: var(--font-sans);
  font-size: 14px;
  opacity: 0.7;
}

/* Porovnávací tabulka balíčků.

   Sloupce jsou tarify, řádky vlastnosti. Kde mají všechny tarify
   totéž, slévá se řádek do jedné buňky přes celou šířku — devětkrát
   zopakovaná fajfka vedle sebe totiž nesděluje „všechno je v ceně",
   ale „tabulka je nafouklá, aby vypadala bohatě". */

.tarif-obal {
  margin-top: 44px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tarif {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  min-width: 780px;
}

.vizualne-skryto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tarif thead th {
  vertical-align: bottom;
  padding: 0 18px 18px;
  font-weight: 400;
  border-bottom: 1px solid rgba(242, 239, 233, 0.28);
}

.tarif__znacka {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--brass);
  margin-bottom: 4px;
}

.tarif__jmeno {
  display: block;
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.2;
}

.tarif__cena {
  display: block;
  font-family: var(--font-display);
  font-size: 27px;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  white-space: nowrap;
}

.tarif__cena small {
  font-family: var(--font-sans);
  font-size: 13px;
  opacity: 0.65;
  margin-left: 5px;
}

.tarif tbody th {
  font-weight: 400;
  padding: 15px 26px 15px 0;
  vertical-align: top;
  width: 28%;
  border-bottom: 1px solid rgba(242, 239, 233, 0.12);
}

.tarif tbody th span {
  display: block;
  font-size: 13px;
  opacity: 0.52;
  margin-top: 2px;
}

.tarif tbody td {
  padding: 15px 18px;
  font-size: 15.5px;
  opacity: 0.88;
  vertical-align: top;
  border-bottom: 1px solid rgba(242, 239, 233, 0.12);
}

/* Doporučený sloupec drží jemné podsvícení přes celou výšku tabulky,
   ne křiklavý praporek nad hlavičkou. */
.tarif--doporuceno { background: rgba(242, 239, 233, 0.045); }

/* Podsvícení končí tam, kde končí porovnávané řádky. Bez téhle čáry
   se tón vytratí uprostřed prázdna a vypadá to jako chyba vykreslení. */
.tarif--doporuceno-konec { border-bottom-color: rgba(242, 239, 233, 0.3); }

.tarif__predel td {
  padding: 30px 0 12px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--brass);
  border-bottom: 1px solid rgba(242, 239, 233, 0.28);
}

.tarif__vse {
  opacity: 0.78;
  font-style: italic;
}

.tarif__chybi th,
.tarif__chybi td {
  opacity: 0.45;
}

/* Křížek u balíčku Fotograf.

   Nahrání videa se technicky nikde neblokuje — kdo si tam film hodí,
   nahraje se. Tabulka ale nemá slibovat něco, co u toho balíčku nedává
   smysl: kdo si kupuje 150 GB na fotky, nemá je utrácet za jeden film.
   Proto křížek a věta, co ten balíček je, místo počtu hodin. */
.tarif__ne { color: rgba(242, 239, 233, 0.5); }

/* Text začíná tam, kde v ostatních sloupcích „150 GB“ — obal se smrskne
   na šířku popisku a křížek se vystředí nad ním, ne nad celou buňkou.
   Kdyby se centrovala buňka, rozjede se sloupec vůči zbytku tabulky. */
.tarif__ne-obal {
  display: inline-block;
  text-align: center;
}

.tarif__krizek {
  display: block;
  font-size: 27px;
  line-height: 1;
  color: rgba(242, 239, 233, 0.45);
}

.tarif__ne small {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  opacity: 0.75;
}

/* Dva dovětky pod tabulkou: balíček pro fotografy a nabídka na míru.
   Do tabulky samotné nepatří — ta srovnává tři balíčky, které se liší
   jen místem, a čtvrtý sloupec by to srovnání rozbil. */
.pricing__navic {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid rgba(242, 239, 233, 0.18);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
}

.pricing__navic-bod h3 {
  font-family: var(--font-display);
  font-size: 21px;
  margin-bottom: 10px;
}

.pricing__navic-bod h3 span {
  font-family: var(--font-sans, inherit);
  font-size: 15px;
  color: var(--brass);
  margin-left: 8px;
  white-space: nowrap;
}

.pricing__navic-bod p {
  font-size: 15.5px;
  opacity: 0.82;
  margin-bottom: 0;
  max-width: 46ch;
}

@media (max-width: 720px) {
  .pricing__navic { grid-template-columns: 1fr; gap: 26px; }
}

.pricing__fine {
  margin-top: 34px;
  font-size: 15px;
  opacity: 0.72;
  max-width: 60ch;
}

/* ---------- Footer ---------- */

/* Patička drží čtyři sloupce: značka a tři seznamy odkazů. Povinné
   právní stránky mají vlastní sloupec, ať se nemíchají se službou —
   člověk je hledá vždycky ve stejném rohu. */
.footer {
  border-top: 1px solid var(--line);
  padding: 54px 0 0;
  font-size: 14.5px;
  background: #FBFAF8;
}

.footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 34px 40px;
}

.footer__sloupec { display: flex; flex-direction: column; align-items: flex-start; }

.footer__sloupec strong {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8C877D;
  font-weight: 500;
  margin-bottom: 6px;
}

.footer__sloupec--znacka p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6B6862;
  max-width: 34ch;
}

.footer__logo {
  font-family: var(--font-display);
  font-size: 21px;
  text-decoration: none;
  color: var(--ink);
  padding: 0;
}
.footer__logo em { font-style: italic; color: #A37C42; }

.footer a {
  opacity: 0.82;
  display: inline-block;
  padding: 7px 0;
  color: inherit;
  text-decoration: none;
}
.footer a:hover { opacity: 1; text-decoration: underline; }

.footer__spodek {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 20px;
  padding-bottom: 30px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: #8C877D;
}

@media (max-width: 860px) {
  .footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__sloupec--znacka { grid-column: 1 / -1; }
}

/* Drobná patička u vstupu kódem a v galerii: právní odkazy stranou. */
.powered__pruh { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.powered__pravni { display: inline-flex; flex-wrap: wrap; gap: 0 16px; margin-left: auto; }
.powered__pravni a { font-size: 13.5px; }

/* ============================================================
   PORTFOLIO (tmavá stránka)
   ============================================================ */

.folio-head { padding: 64px 0 20px; }

.folio-head__brand {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0 0 6px;
}

.folio-head__meta {
  font-size: 16px;
  opacity: 0.75;
}

.folio-head__demo {
  display: inline-block;
  margin-top: 16px;
  font-size: 13.5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  opacity: 0.75;
}

.films { padding: 34px 0 80px; }

.film-feature {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 21 / 9;
  color: #F5F2EC;
  text-decoration: none;
  margin-bottom: 26px;
}

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

.film-feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(6deg, rgba(8, 7, 5, 0.8) 0%, rgba(8, 7, 5, 0.12) 50%, rgba(8, 7, 5, 0) 75%);
}

.film-feature__label {
  position: absolute;
  z-index: 2;
  left: 26px;
  right: 26px;
  bottom: 24px;
}

.film-feature__label strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.film-feature__label span { font-size: 15px; opacity: 0.85; }

.films__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.films__grid > * { min-width: 0; }

.film-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.film-card__poster {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: 12px;
}

.film-card__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 200ms;
}

.film-card:hover .film-card__poster img { opacity: 0.85; }

.film-card strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  display: block;
}

.film-card span { font-size: 14.5px; opacity: 0.7; }

.powered {
  border-top: 1px solid var(--line);
  padding: 26px 0 38px;
  font-size: 14.5px;
  opacity: 0.85;
}

.powered a {
  color: var(--brass);
  display: inline-block;
  padding: 9px 2px;
}

/* ============================================================
   GALERIE (tmavá stránka)
   ============================================================ */

/* Brána s heslem */
.gate {
  position: fixed;
  inset: 0;
  background: #0E0D0B;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity 320ms;
}

.gate.hidden { opacity: 0; pointer-events: none; }

.gate__box { max-width: 420px; width: 100%; }

.gate__brand {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 22px;
}

.gate__box h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }

.gate__box p { opacity: 0.75; font-size: 16px; }

.gate__form {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.gate__form input {
  flex: 1;
  min-width: 0;
  background: #171512;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ivory);
  font-family: inherit;
  font-size: 16px;
  padding: 13px 16px;
}

.gate__form input:focus { outline: 1px solid var(--brass); border-color: var(--brass); }

.gate__hint {
  margin-top: 16px;
  font-size: 14px;
  opacity: 0.55;
}

.gate__error {
  color: #D98F6C;
  font-size: 14.5px;
  margin-top: 12px;
  display: none;
}

.gate__error.show { display: block; }

/* Hlavička galerie */
.gal-head {
  padding: 46px 0 10px;
  text-align: left;
}

.gal-head__brand {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 30px;
}

.gal-head h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); margin-bottom: 8px; }

.gal-head__meta { font-size: 16.5px; opacity: 0.75; }

/* Přehrávač */
.player-sec { padding: 38px 0 26px; }

.player {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: #171512;
}

.player img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 220ms;
}

.player:hover img { opacity: 0.82; }

.player__play {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player__play span {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(14, 13, 11, 0.55);
  border: 1px solid rgba(242, 239, 233, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms;
}

.player:hover .player__play span { background: rgba(185, 138, 68, 0.85); }

.player__play svg { margin-left: 5px; }

.player--live { cursor: default; }

.player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 16px;
  font-size: 15px;
  opacity: 0.72;
}

/* Trailer + stažení */
.gal-more { padding: 30px 0 60px; }

.gal-more__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: start;
}

.gal-more__grid > * { min-width: 0; }

.trailer { cursor: pointer; }

.trailer .player { aspect-ratio: 16 / 9; }

.trailer .player__play span { width: 60px; height: 60px; }

.trailer h3 { margin: 14px 0 4px; }

.trailer p { font-size: 15px; opacity: 0.72; margin: 0; }

/* ---------- Další videa v galerii ---------- */

.klipy { padding: 10px 0 60px; }

.klipy__nadpis {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0 0 22px;
}

.klipy__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

/* Rozložení karet si volí kameraman. Mřížka je výchozí, na šířku se hodí
   na dlouhé záběry, střídavě dělá z kapitol spíš vyprávění než katalog. */
body.svatba[data-rozlozeni="pruh"] .klipy__grid {
  grid-template-columns: 1fr;
  gap: 34px;
  max-width: 760px;
}
body.svatba[data-rozlozeni="strida"] .klipy__grid {
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 860px;
}
body.svatba[data-rozlozeni="strida"] .klip {
  max-width: 68%;
}
body.svatba[data-rozlozeni="strida"] .klip:nth-child(even) {
  margin-left: auto;
}

/* Dvojice: pevně dva sloupce, ať se řádky nelámou podle šířky okna. */
body.svatba[data-rozlozeni="dvojice"] .klipy__grid {
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

/* Mozaika: každá třetí karta přes celou šířku. Dává rytmus tam, kde
   je klipů hodně a stejně velké dlaždice by splynuly v katalog. */
body.svatba[data-rozlozeni="mozaika"] .klipy__grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
body.svatba[data-rozlozeni="mozaika"] .klip { grid-column: span 2; }
body.svatba[data-rozlozeni="mozaika"] .klip:nth-child(6n+1) { grid-column: span 4; }
body.svatba[data-rozlozeni="mozaika"] .klip:nth-child(6n+4) { grid-column: span 3; }
body.svatba[data-rozlozeni="mozaika"] .klip:nth-child(6n+5) { grid-column: span 3; }

@media (max-width: 760px) {
  body.svatba[data-rozlozeni="dvojice"] .klipy__grid,
  body.svatba[data-rozlozeni="mozaika"] .klipy__grid { grid-template-columns: 1fr; }
  body.svatba[data-rozlozeni="mozaika"] .klip,
  body.svatba[data-rozlozeni="mozaika"] .klip:nth-child(6n+1),
  body.svatba[data-rozlozeni="mozaika"] .klip:nth-child(6n+4),
  body.svatba[data-rozlozeni="mozaika"] .klip:nth-child(6n+5) { grid-column: span 1; }
  body.svatba[data-rozlozeni="strida"] .klip { max-width: 100%; }
}

/* Hlavní film nemusí být velký nahoře. Když kameraman veze deset stejně
   důležitých klipů, žádný z nich není „ten hlavní" a rám navíc jen překáží. */
body.svatba[data-hlavni="stejny"] .svat-film { display: none; }
body.svatba[data-hlavni="stejny"] .svat-klipy { padding-top: 34px; }

.klip { min-width: 0; cursor: pointer; }

.klip .player__play span { width: 54px; height: 54px; }

.klip strong {
  display: block;
  margin-top: 12px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.klip > span {
  display: block;
  font-size: 14.5px;
  opacity: 0.68;
  margin-top: 2px;
}

.klip:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }

.download {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.download h3 { margin-top: 0; }

.download p { font-size: 15.5px; opacity: 0.8; }

.download__file {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
}

.download__file span:last-child { opacity: 0.65; font-variant-numeric: tabular-nums; white-space: nowrap; }

.download .btn { margin-top: 18px; }

/* Vzkaz od kameramana */
.note-sec { padding: 20px 0 80px; }

.note-sec blockquote {
  margin: 0;
  max-width: 62ch;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.45;
}

.note-sec figcaption {
  margin-top: 16px;
  font-size: 15px;
  opacity: 0.7;
}

/* Demo overlay (klik na play / download) */
.demo-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 7, 5, 0.86);
  z-index: 280;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.demo-modal.show { display: flex; }

.demo-modal__box {
  max-width: 460px;
  background: #171512;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  color: var(--ivory);
}

.demo-modal__box h3 { margin-top: 0; }

.demo-modal__box p { font-size: 16px; opacity: 0.85; }

.demo-modal__box .btn { margin-top: 10px; }


/* ---------- Nav: utility odkazy vpravo ---------- */

.nav__utils {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav__utils a {
  text-decoration: none;
  font-size: 15px;
  opacity: 0.72;
  padding: 10px 0;
  white-space: nowrap;
}

.nav__utils a:hover { opacity: 1; }

/* Odkaz na kód galerie je pro klienta, ne pro kameramana. Drží se
   proto vzadu a menší, ať v liště nekřičí vedle přihlášení. */
.nav .nav__kod { font-size: 14px; opacity: 0.55; }
.nav .nav__kod:hover { opacity: 0.85; }

/* ============================================================
   Vstupni stranky (kod galerie, prihlaseni)
   ============================================================ */

/* Vstupní pole sedí o kus níž než v optickém středu: nad ním je jen
   šipka zpět, takže vycentrovaný blok působil, jako by se vznášel. */
.entry {
  min-height: 74vh;
  display: flex;
  align-items: center;
  padding: 140px 24px 70px;
}

.entry__box {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

.entry__logo {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 25px;
  text-decoration: none;
  margin-bottom: 38px;
  padding: 6px 0;
}

.entry__logo em { color: var(--brass); font-style: italic; }

.entry__box h1 { font-size: clamp(2.15rem, 5.4vw, 2.9rem); }

.entry__box p { opacity: 0.78; font-size: 17px; line-height: 1.6; }

.entry__form {
  display: flex;
  gap: 12px;
  margin: 30px 0 0;
}

.entry__form--stack { flex-direction: column; }

.entry__form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  padding: 17px 18px;
}

.entry--light .entry__form input { background: #fff; }

.entry__form input::placeholder { opacity: 0.45; letter-spacing: 0.04em; }

.entry__form input:focus { outline: 1px solid var(--brass); border-color: var(--brass); }

.entry__form button { white-space: nowrap; }

.entry__error {
  color: #D98F6C;
  font-size: 14.5px;
  margin-top: 14px;
  display: none;
}

.entry__error.show { display: block; }

.entry__hint {
  margin-top: 18px;
  font-size: 14.5px;
  opacity: 0.55;
}

.entry__alt {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.6;
  opacity: 0.7;
}

.entry__alt a {
  color: var(--brass);
  display: inline-block;
  padding: 11px 0;
}

.gate__alt {
  margin-top: 18px;
  font-size: 14.5px;
  opacity: 0.7;
}

.gate__alt a { color: var(--brass); }

/* ============================================================
   Responsivita
   ============================================================ */

@media (max-width: 900px) {
  .problem__grid,
  .gal-more__grid { grid-template-columns: 1fr; }
  .films__grid { grid-template-columns: repeat(2, 1fr); }
  .demos__grid { grid-template-columns: 1fr; }
  .inside__row { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 768px) {
  body { font-size: 16px; }

  .nav { gap: 0; }
  .nav__links { display: none; }
  .nav__utils { display: none; }
  .nav__burger { display: block; }

  .entry { min-height: 70vh; padding: 40px 20px; }
  .entry__form { flex-direction: column; }

  .problem { padding: 64px 0 48px; }
  .demos { padding: 24px 0 60px; }
  .inside { padding: 0 0 60px; }
  .pricing { padding: 62px 0; }

  .price-row { grid-template-columns: 1fr; gap: 4px; }
  .price-row__price { font-size: 26px; }

  /* Tabulka se na telefon nevejde a zalamovat sloupce pod sebe by
     rozbilo to jediné, k čemu je: porovnání vedle sebe. Necháme ji
     tedy posouvat do strany a první sloupec přišpendlíme, aby bylo
     pořád vidět, o kterou vlastnost jde. */
  /* Odsazení musí sedět na to, kolik zrovna odsazuje `.wrap`. Napevno
     psaných 24 px bylo na 360px displeji o 2,4 px víc a o ty dva pixely
     se pak dala celá stránka posunout do strany. */
  .tarif-obal {
    --presah: clamp(20px, 5.99vw, 92px);
    margin-left: calc(-1 * var(--presah));
    margin-right: calc(-1 * var(--presah));
    padding: 0 var(--presah);
  }
  .tarif { min-width: 700px; }
  .tarif thead th { padding: 0 12px 14px; }
  .tarif tbody td { padding: 13px 12px; font-size: 14.5px; }
  .tarif tbody th { padding-right: 16px; font-size: 15px; }
  .tarif__jmeno { font-size: 21px; }
  .tarif__cena { font-size: 22px; }

  .film-feature { aspect-ratio: 16 / 10; }
  .folio-head { padding: 40px 0 8px; }

  .gate__form { flex-direction: column; }
}

@media (max-width: 520px) {
  .films__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Nahrávací stránka (lokální nástroj)
   ============================================================ */

.upload { padding: 40px 24px 90px; max-width: 640px; }

.upload h1 { margin-bottom: 10px; }

.upload__lead { opacity: 0.8; margin-bottom: 24px; }

.upload__warn {
  border: 1px solid rgba(185, 138, 68, 0.5);
  background: #F6F0E4;
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 34px;
}

.upload__warn strong { display: block; margin-bottom: 4px; }

.upload__form { display: flex; flex-direction: column; gap: 22px; }

.upload__form label { display: block; }

.upload__form label > span {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 7px;
}

.upload__form input[type="text"],
.upload__form input[type="password"] {
  width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  padding: 13px 15px;
}

.upload__form input[type="file"] {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  padding: 12px 0;
}

.upload__form input:focus { outline: 1px solid var(--brass); border-color: var(--brass); }

.upload__form small {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  opacity: 0.6;
}

.upload__form button { align-self: flex-start; margin-top: 4px; }

.upload__progress { margin-top: 34px; }

.upload__bar {
  height: 8px;
  background: var(--ivory-2);
  border-radius: 999px;
  overflow: hidden;
}

.upload__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brass);
  transition: width 240ms;
}

.upload__stav {
  margin-top: 12px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.upload__done {
  margin-top: 34px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.upload__done h2 { font-size: 1.7rem; }

.upload__guid { font-size: 15px; }

.upload__guid code {
  background: var(--ivory-2);
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 14px;
}

.upload__tip { margin-top: 20px; font-size: 14.5px; opacity: 0.7; }

.upload__tip code { font-size: 13.5px; }

.upload__error {
  margin-top: 22px;
  color: #A6472A;
  font-size: 15px;
  display: none;
}

.upload__error.show { display: block; }

/* ============================================================
   Dashboard kameramana
   ============================================================ */

.nav__kdo { font-size: 14.5px; opacity: 0.6; }

.app { padding: 30px 24px 90px; }

.app__hlavicka {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.app__hlavicka > * { min-width: 0; }

.app__hlavicka h1 { margin: 0; }

.app__prostor { min-width: 240px; }

.app__prostor-pruh {
  height: 6px;
  background: var(--ivory-2);
  border-radius: 999px;
  overflow: hidden;
}

.app__prostor-pruh span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brass);
  transition: width 300ms;
}

.app__prostor p {
  margin: 8px 0 0;
  font-size: 14.5px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.app__varovani { color: #A6472A; opacity: 1; }

.app__sekce { padding: 38px 0; border-bottom: 1px solid var(--line); }

.app__sekce h2 { font-size: 1.6rem; margin-bottom: 20px; }

.app__form { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }

.app__radek {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.app__radek > * { min-width: 0; }

.app__form label { display: block; }

.app__form label > span {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

.app__form input[type="text"],
.app__form input[type="date"],
.app__form select,
.app__form textarea {
  width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
}

.app__form textarea { resize: vertical; }

.app__form input:focus, .app__form select:focus, .app__form textarea:focus {
  outline: 1px solid var(--brass);
  border-color: var(--brass);
}

.app__form small { display: block; margin-top: 5px; font-size: 13px; opacity: 0.6; }

.app__form button { align-self: flex-start; }

.app__vyber { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 0; }

.app__vyber legend { font-size: 14.5px; font-weight: 600; padding: 0 6px; }

.app__zaskrt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  min-height: 44px;
  font-size: 15.5px;
  cursor: pointer;
}

.app__zaskrt input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--brass);
}

.app__zaskrt em { font-style: normal; font-size: 13px; opacity: 0.55; }

.app__prazdno { opacity: 0.6; font-size: 15px; margin: 0; }

.app__video, .app__galerie-radek {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
}

.app__video:first-child, .app__galerie-radek:first-child { border-top: none; }

.app__video strong, .app__galerie-radek strong { font-weight: 600; }

.app__znacka { font-size: 14px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.app__znacka--zpracovava { color: var(--brass-deep); opacity: 1; }
.app__znacka--chyba { color: #A6472A; opacity: 1; }

.app__druh { font-size: 13px; opacity: 0.5; margin-left: auto; }

.app__galerie-radek span { font-size: 14.5px; opacity: 0.65; }

.app__galerie-radek code, .app__udaj code {
  background: var(--ivory-2);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.app__galerie-radek a {
  margin-left: auto;
  font-size: 14.5px;
  display: inline-block;
  padding: 11px 4px;
  margin-top: -11px;
  margin-bottom: -11px;
}

.app__hotova {
  margin-top: 26px;
  border: 1px solid rgba(185, 138, 68, 0.5);
  background: #F6F0E4;
  border-radius: var(--radius);
  padding: 22px 24px;
}

.app__hotova h3 { margin-top: 0; }

.app__udaj { font-size: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.app__kopie {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  padding: 11px 14px;
  min-height: 40px;
  cursor: pointer;
  color: inherit;
}

.app__kopie:hover { background: var(--ivory-2); }

@media (max-width: 700px) {
  .app__hlavicka { grid-template-columns: 1fr; align-items: start; }
  .app__radek { grid-template-columns: 1fr; }
  .app__druh, .app__galerie-radek a { margin-left: 0; }
}

.app__nahled {
  margin: 0 0 26px;
  border: 1px solid rgba(185, 138, 68, 0.5);
  background: #F6F0E4;
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.6;
}

.app__nahled code { font-size: 13.5px; }

/* Nativní výběr souboru má v prohlížeči malou výšku, zvětšíme tlačítko uvnitř. */
input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 15px;
  padding: 11px 16px;
  margin-right: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ivory-2);
  color: var(--text);
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover { background: #DFD8CA; }

/* ---------- Fronta nahrávání ---------- */

.fronta {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.fronta__souhrn {
  padding: 13px 18px;
  background: var(--ivory-2);
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fronta__radek {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 6px 18px;
  align-items: center;
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}

.fronta__nazev {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fronta__stav {
  font-size: 13.5px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fronta__pruh {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--ivory-2);
  border-radius: 999px;
  overflow: hidden;
}

.fronta__pruh span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brass);
  transition: width 240ms;
}

.fronta__radek--hotovo .fronta__stav { color: #4A6B4F; opacity: 1; }
.fronta__radek--hotovo .fronta__pruh span { background: #7A9B7F; }
.fronta__radek--chyba .fronta__stav { color: #A6472A; opacity: 1; }
.fronta__radek--chyba .fronta__pruh span { background: #C4785C; }

/* Druhá fáze: soubor je u Bunny, ale ještě se překódovává.
   Pruh má jiný odstín a jemně dýchá, ať je poznat, že se pořád něco děje
   i ve chvílích, kdy procenta chvíli stojí na místě. */
.fronta__radek--koduje .fronta__stav { color: var(--brass-deep); opacity: 1; }
.fronta__radek--koduje .fronta__pruh { background: rgba(185, 138, 68, 0.16); }
.fronta__radek--koduje .fronta__pruh span {
  background: var(--brass-deep);
  animation: dychani 2.2s ease-in-out infinite;
}

@keyframes dychani {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .fronta__radek--koduje .fronta__pruh span { animation: none; }
}

@media (max-width: 600px) {
  .fronta__radek { grid-template-columns: 1fr; }
  .fronta__stav { text-align: left; }
}

/* Galerie, jejíž film se ještě překódovává */
.player--ceka {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #171512;
  cursor: default;
  text-align: center;
}

.player__ceka {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  opacity: 0.75;
  padding: 24px;
}

.player__ceka small {
  font-family: var(--font-sans);
  font-size: 14.5px;
  opacity: 0.75;
}

/* ============================================================
   Přehled galerií a detail (nový tok: nejdřív galerie, pak filmy)
   ============================================================ */

.app__zpet {
  display: inline-block;
  font-size: 14.5px;
  opacity: 0.7;
  padding: 10px 0;
  margin-bottom: 6px;
}

.app__zpet:hover { opacity: 1; }

.app__hlavicka--detail { align-items: start; }

.app__podnadpis {
  margin: 4px 0 0;
  font-size: 16px;
  opacity: 0.7;
}

.app__radek-nadpis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.app__radek-nadpis h2 { margin: 0; }

.app__prepnout {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 15px;
  padding: 11px 18px;
  cursor: pointer;
  color: inherit;
}

.app__prepnout:hover { background: var(--ivory-2); }

.app__sekce--bez-cary { border-bottom: none; }

/* Karty galerií */

.app__galerie-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.app__galerie-mrizka > * { min-width: 0; }

.galerie-karta {
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color 180ms, background 180ms;
}

.galerie-karta:hover {
  border-color: var(--brass);
  background: #F7F3EB;
}

.galerie-karta strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 3px;
}

.galerie-karta__kdy {
  display: block;
  font-size: 14.5px;
  opacity: 0.65;
  margin-bottom: 14px;
}

.galerie-karta__stav {
  display: block;
  font-size: 14.5px;
  margin-bottom: 12px;
}

.galerie-karta__stav--prazdna { opacity: 0.55; }

.galerie-karta__kod {
  font-size: 13px;
  background: var(--ivory-2);
  padding: 3px 8px;
  border-radius: 4px;
}

/* Sdílení galerie */

.sdileni {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  max-width: 640px;
}

.sdileni__polozka {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 0;
}

.sdileni__stitek {
  font-size: 14px;
  font-weight: 600;
  min-width: 52px;
}

.sdileni__polozka code {
  background: var(--ivory-2);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 14px;
  word-break: break-all;
}

.sdileni__pozn {
  font-size: 14px;
  opacity: 0.7;
  margin: 12px 0 18px;
}

/* Seznam videí v galerii */

.video-radek {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.video-radek:first-child { border-top: none; }

.video-radek__nazev {
  font-weight: 600;
  font-size: 15.5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-radek__nahled {
  flex: 0 0 auto;
  width: 76px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: #171512;
}

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

.video-radek__hlavni {
  display: inline-block;
  margin-left: 8px;
  font-style: normal;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.video-radek__akce {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.app__kopie--smazat:hover { background: #F3DED6; border-color: #C4785C; }

.app__zaskrt--samostatny {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15.5px;
  cursor: pointer;
  min-height: 44px;
}

.app__zaskrt--samostatny input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--brass);
}

@media (max-width: 600px) {
  .app__galerie-mrizka { grid-template-columns: 1fr; }
  .video-radek__akce { margin-left: 0; width: 100%; }
}

/* ============================================================
   SVATEBNÍ GALERIE, v2 vzhledový systém
   Motivy nastavuje body[data-motiv], akcent jde přepsat proměnnou
   --g-accent (editor v detailu galerie). Vše ostatní se odvozuje.
   ============================================================ */

body.svatba {
  --g-bg-motiv: #F7F4EE; --g-bg: #F7F4EE;
  --g-bg2: #EFEAE0;
  --g-text: #2C2823;
  --g-soft: #6E675C;
  --g-accent: #A88349;
  --g-line: rgba(44, 40, 35, 0.16);
  --g-names: 'Cormorant Garamond', Georgia, serif;
  background: var(--g-bg);
  color: var(--g-text);
}
body.svatba[data-motiv="noir"] {
  --g-bg-motiv: #121110; --g-bg: #121110; --g-bg2: #1A1816; --g-text: #F2EFE9; --g-soft: #B5AFA4;
  --g-accent: #B98A44; --g-line: rgba(242, 239, 233, 0.16);
}
body.svatba[data-motiv="ruze"] {
  --g-bg-motiv: #F9F2EF; --g-bg: #F9F2EF; --g-bg2: #F3E8E3; --g-text: #43302F; --g-soft: #8A6F6C;
  --g-accent: #B97E72; --g-line: rgba(67, 48, 47, 0.15);
}
body.svatba[data-motiv="oliva"] {
  --g-bg-motiv: #F5F4EC; --g-bg: #F5F4EC; --g-bg2: #ECEADD; --g-text: #2F342A; --g-soft: #6F7465;
  --g-accent: #7E8757; --g-line: rgba(47, 52, 42, 0.15);
}
body.svatba[data-motiv="pulnoc"] {
  --g-bg-motiv: #16202B; --g-bg: #16202B; --g-bg2: #1D2936; --g-text: #EFEAE0; --g-soft: #A9B0B8;
  --g-accent: #C5A15C; --g-line: rgba(239, 234, 224, 0.16);
}
body.svatba[data-motiv="pisek"] {
  --g-bg-motiv: #F6F1E8; --g-bg: #F6F1E8; --g-bg2: #EDE5D7; --g-text: #3A3229; --g-soft: #7A6F5F;
  --g-accent: #B08A5A; --g-line: rgba(58, 50, 41, 0.15);
}
body.svatba[data-motiv="mech"] {
  --g-bg-motiv: #182019; --g-bg: #182019; --g-bg2: #202B21; --g-text: #E8EDE6; --g-soft: #A3B09F;
  --g-accent: #93A87F; --g-line: rgba(232, 237, 230, 0.15);
}
body.svatba[data-motiv="inkoust"] {
  --g-bg-motiv: #131A24; --g-bg: #131A24; --g-bg2: #1B2430; --g-text: #E6EAF0; --g-soft: #9BA7B8;
  --g-accent: #8FA9C7; --g-line: rgba(230, 234, 240, 0.15);
}
/* Bez ozdob a bez teplé barvy. Pro páry, kterým i porcelán přijde moc. */
body.svatba[data-motiv="bila"] {
  --g-bg-motiv: #FFFFFF; --g-bg: #FFFFFF; --g-bg2: #F4F4F4; --g-text: #1A1A1A; --g-soft: #6B6B6B;
  --g-accent: #6E6E6E; --g-line: rgba(26, 26, 26, 0.14);
}
body.svatba[data-motiv="vino"] {
  --g-bg-motiv: #F7EFF0; --g-bg: #F7EFF0; --g-bg2: #EFE1E3; --g-text: #3B2126; --g-soft: #86636A;
  --g-accent: #8E4A55; --g-line: rgba(59, 33, 38, 0.15);
}

/* ---------- motivy mimo svatbu ----------

   Porcelán a růže se na výroční konferenci ani na školní fotky nehodí
   a přebarvit je o odstín nestačí: firemní galerie potřebuje chladný
   papír a ostrý akcent, portrét bílou stěnu galerie, škola tabuli.
   Proto vlastní sada, ne varianta té svatební. */

/* firemní akce */
body.svatba[data-motiv="grafit"] {
  --g-bg-motiv: #1C1F24; --g-bg: #1C1F24; --g-bg2: #23272E; --g-text: #EDEFF2; --g-soft: #A0A7B1;
  --g-accent: #6E9BD1; --g-line: rgba(237, 239, 242, 0.16);
}
body.svatba[data-motiv="ocel"] {
  --g-bg-motiv: #F4F6F8; --g-bg: #F4F6F8; --g-bg2: #E8ECF1; --g-text: #1F252C; --g-soft: #5D6772;
  --g-accent: #2F6BA8; --g-line: rgba(31, 37, 44, 0.14);
}
body.svatba[data-motiv="marina"] {
  --g-bg-motiv: #0F2233; --g-bg: #0F2233; --g-bg2: #162C40; --g-text: #E9EFF5; --g-soft: #9FB3C4;
  --g-accent: #4FA3B8; --g-line: rgba(233, 239, 245, 0.16);
}

/* portrét */
body.svatba[data-motiv="galerie"] {
  --g-bg-motiv: #FAFAF9; --g-bg: #FAFAF9; --g-bg2: #F0F0EE; --g-text: #111111; --g-soft: #5F5F5C;
  --g-accent: #111111; --g-line: rgba(17, 17, 17, 0.13);
}
body.svatba[data-motiv="uhel"] {
  --g-bg-motiv: #17181A; --g-bg: #17181A; --g-bg2: #202224; --g-text: #F0EFEC; --g-soft: #A6A49F;
  --g-accent: #D8D3C8; --g-line: rgba(240, 239, 236, 0.16);
}

/* škola */
body.svatba[data-motiv="tabule"] {
  --g-bg-motiv: #1F3229; --g-bg: #1F3229; --g-bg2: #273D33; --g-text: #F1F3EE; --g-soft: #AFBCB2;
  --g-accent: #E4C97E; --g-line: rgba(241, 243, 238, 0.16);
}
body.svatba[data-motiv="krida"] {
  --g-bg-motiv: #FBFAF6; --g-bg: #FBFAF6; --g-bg2: #F1F0EA; --g-text: #23262B; --g-soft: #666B72;
  --g-accent: #3E7CA6; --g-line: rgba(35, 38, 43, 0.13);
}

/* párové focení */
body.svatba[data-motiv="len"] {
  --g-bg-motiv: #F5F0E9; --g-bg: #F5F0E9; --g-bg2: #EBE4DA; --g-text: #38312A; --g-soft: #7C7266;
  --g-accent: #A8836B; --g-line: rgba(56, 49, 42, 0.15);
}

/* Písmo jmen: klasika (Cormorant), kaligrafie (Great Vibes), moderní verzálky */
body.svatba[data-pismo="script"] { --g-names: 'Great Vibes', cursive; }
body.svatba[data-pismo="moderni"] { --g-names: 'Instrument Sans', system-ui, sans-serif; }
body.svatba[data-pismo="klasika"] { --g-names: 'Playfair Display', Georgia, serif; }
body.svatba[data-pismo="rimske"] { --g-names: 'Cinzel', Georgia, serif; }
body.svatba[data-pismo="uzke"] { --g-names: 'Marcellus', Georgia, serif; }
body.svatba[data-pismo="italiana"] { --g-names: 'Italiana', Georgia, serif; }
body.svatba[data-pismo="tangerine"] { --g-names: 'Tangerine', cursive; }
/* Groteska pro firmu, kulaté pro školu, didone pro portrét. */
body.svatba[data-pismo="grotesk"] { --g-names: 'Inter', system-ui, sans-serif; }
body.svatba[data-pismo="kulate"] { --g-names: 'Nunito', system-ui, sans-serif; }
body.svatba[data-pismo="bodoni"] { --g-names: 'Bodoni Moda', Georgia, serif; }
/* Vlastní písmo dosadí skript do --g-names přímo na <body>, tenhle řádek
   jen zajistí, že se výběrem „vlastní" nespadne zpátky na serif. */
body.svatba[data-pismo="vlastni"] { --g-names: var(--g-vlastni, 'Cormorant Garamond', Georgia, serif); }

/* Psaná písma jsou drobná a plná ozdob, potřebují víc místa. */
body.svatba[data-pismo="tangerine"] .svat-cover h1 { font-size: clamp(3.4rem, 11vw, 7rem); }
body.svatba[data-pismo="rimske"] .svat-cover h1,
body.svatba[data-pismo="italiana"] .svat-cover h1 { letter-spacing: 0.04em; }
/* Groteska a kulaté písmo mají velkou střední výšku, ve verzálkách
   nadpisu by jinak působily o dvě čísla větší než serify. */
body.svatba[data-pismo="grotesk"] .svat-cover h1,
body.svatba[data-pismo="kulate"] .svat-cover h1 { font-size: clamp(2rem, 5.4vw, 3.6rem); letter-spacing: -0.01em; }
body.svatba[data-pismo="bodoni"] .svat-cover h1 { letter-spacing: 0.01em; }

body.svatba .btn {
  border: 1px solid var(--g-line);
  background: transparent;
  color: var(--g-text);
}
body.svatba .btn:hover { border-color: var(--g-tlacitka, var(--g-accent)); color: var(--g-tlacitka, var(--g-accent)); background: transparent; }
body.svatba .btn--brass {
  background: var(--g-tlacitka, var(--g-accent));
  border-color: var(--g-tlacitka, var(--g-accent));
  color: var(--g-bg);
}
body.svatba .btn--brass:hover { opacity: 0.88; color: var(--g-bg); }

/* ---------- Vstupní brána jako svatební oznámení ---------- */

body.svatba .gate { background: var(--g-bg); }
body.svatba .gate__box {
  max-width: 460px;
  border: 1px solid var(--g-line);
  outline: 1px solid var(--g-line);
  outline-offset: 5px;
  padding: 46px 34px 38px;
  background: var(--g-bg);
}
body.svatba .gate__brand {
  color: var(--g-accent);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
body.svatba .gate__box h1 {
  font-family: var(--g-names);
  font-size: clamp(2.2rem, 6vw, 3rem);
  margin: 10px 0 6px;
}
body.svatba[data-pismo="script"] .gate__box h1 { font-size: clamp(2.6rem, 7vw, 3.6rem); font-weight: 400; }
body.svatba[data-pismo="moderni"] .gate__box h1 { text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(1.6rem, 4.5vw, 2.2rem); font-weight: 600; }
body.svatba .gate__box p { color: var(--g-soft); }
body.svatba .gate__form input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--g-line);
  border-radius: 0;
  color: var(--g-text);
  text-align: center;
  letter-spacing: 0.06em;
}
body.svatba .gate__form input:focus { outline: none; border-bottom-color: var(--g-accent); }
body.svatba .gate__hint { color: var(--g-soft); }
body.svatba .gate__alt a { color: var(--g-accent); }

/* ---------- Ozdoby ---------- */

.orn { color: var(--g-accent); display: flex; justify-content: center; }
.orn svg { width: min(220px, 60vw); height: auto; }
.orn--maly svg { width: 120px; }
body.svatba[data-ozdoba="zadna"] .orn { display: none; }
body.svatba[data-ozdoba="linka"] .orn svg .jen-floral { display: none; }

.monogram {
  width: 74px; height: 74px;
  border: 1px solid var(--g-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
  font-family: var(--g-names);
  font-size: 1.5rem;
  color: var(--g-accent);
  letter-spacing: 0.04em;
}
body.svatba[data-monogram="ne"] .monogram { display: none; }

/* ---------- Úvodní cover ---------- */

/* Úvod je vizitka, ne celá obrazovka. Když zabere celý výhled, pár musí
   nejdřív scrollovat, aby zjistil, že tam vůbec nějaké filmy jsou.
   Střední výška je proto výchozí, plnou obrazovku si kameraman zapne sám. */
.svat-cover {
  min-height: 42vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 34px 22px 28px;
  position: relative;
  overflow: hidden;
}
/* Ve střední výšce se drobet stáhne i obsah, jinak by ho roztáhl zpátky
   a z „poloviny" by zbyly dvě třetiny. Odsazení šipky řeší pravidlo
   u samotné šipky níž, tady by ho stejně přebilo. */
.svat-cover .monogram { margin-bottom: 16px; }
body.svatba[data-vyska="vysoky"] .svat-cover { min-height: 88vh; padding: 72px 22px 56px; }
body.svatba[data-vyska="vysoky"] .svat-cover .monogram { margin-bottom: 22px; }
body.svatba[data-vyska="vysoky"] .svat-cover__sip { margin-top: 46px; }
body.svatba[data-vyska="nizky"] .svat-cover { min-height: 30vh; padding: 34px 22px 28px; }

/* U nižšího úvodu se musí zmenšit i to, co je uvnitř, jinak se to tam nevejde. */
body.svatba[data-vyska="nizky"] .monogram { width: 56px; height: 56px; font-size: 1.15rem; margin-bottom: 14px; }
body.svatba[data-vyska="nizky"] .svat-cover h1 { font-size: clamp(1.9rem, 6vw, 3.2rem); }
body.svatba[data-vyska="nizky"] .svat-cover__sip { margin-top: 18px; }
body.svatba[data-vyska="nizky"] .svat-cover__sip::after { height: 34px; }

/* ---------- Ozdoby v rozích úvodu ---------- */

.svat-roh {
  position: absolute;
  width: clamp(96px, 15vw, 190px);
  height: auto;
  color: var(--g-accent);
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}
.svat-roh svg { width: 100%; height: auto; display: block; }
.svat-roh--lh { top: 16px; left: 16px; }
.svat-roh--ph { top: 16px; right: 16px; transform: scaleX(-1); }
.svat-roh--ld { bottom: 16px; left: 16px; transform: scaleY(-1); }
.svat-roh--pd { bottom: 16px; right: 16px; transform: scale(-1, -1); }

body.svatba[data-rohy="zadne"] .svat-roh,
body.svatba:not([data-rohy]) .svat-roh { display: none; }

@media (max-width: 640px) {
  /* Na mobilu by rohy lezly do jmen, tak necháme jen horní dva a menší. */
  .svat-roh { width: 74px; opacity: 0.38; }
  .svat-roh--ld, .svat-roh--pd { display: none; }
}
.svat-cover__foto {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.38;
  filter: saturate(0.78);
  display: none;
}
/* Přes fotku musí jít přečíst jména i datum. Samotný přechod shora dolů
   na to nestačí, protože uprostřed, kde text sedí, zůstává fotka plná.
   Druhá vrstva ji proto ztlumí barvou pozadí po celé ploše. Starší
   prohlížeč bez color-mix použije první deklaraci a nic se nerozbije. */
.svat-cover__foto::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--g-bg) 0%, transparent 34%, transparent 62%, var(--g-bg) 100%);
  background:
    linear-gradient(180deg, var(--g-bg) 0%, transparent 32%, transparent 64%, var(--g-bg) 100%),
    color-mix(in srgb, var(--g-bg) 40%, transparent);
}
body.svatba[data-uvod="foto"] .svat-cover__foto,
body.svatba[data-uvod="video"] .svat-cover__foto { display: block; }

/* Běžící podklad. Fotka pod ním zůstává, takže než se video rozjede
   (a na pomalé lince i místo něj) úvod není prázdný. Ztlumení řeší
   stejná dvojitá vrstva jako u fotky, jen ji tady nese vlastní prvek,
   protože přes <video> se pseudoprvek nakreslit nedá. */
.svat-cover__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(0.78);
  display: none;
}
body.svatba[data-uvod="video"] .svat-cover__video:not([hidden]) { display: block; }

.svat-cover__zaclona {
  position: absolute; inset: 0;
  display: none;
  pointer-events: none;
  background: linear-gradient(180deg, var(--g-bg) 0%, transparent 32%, transparent 64%, var(--g-bg) 100%);
  background:
    linear-gradient(180deg, var(--g-bg) 0%, transparent 32%, transparent 64%, var(--g-bg) 100%),
    color-mix(in srgb, var(--g-bg) 40%, transparent);
}
body.svatba[data-uvod="video"] .svat-cover__zaclona { display: block; }

/* Komu systém říká, že nechce pohyb, tomu video nepustíme. */
@media (prefers-reduced-motion: reduce) {
  .svat-cover__video { display: none !important; }
}

/* Rohové ozdoby musí ze seznamu ven. Tenhle selektor má kvůli řetězu
   :not() vyšší váhu než .svat-roh, takže by jim přebil absolutní usazení,
   ony by spadly do sloupce s obsahem a naskládaly se doprostřed pod sebe. */
.svat-cover > :not(.svat-cover__foto):not(.svat-cover__video):not(.svat-cover__zaclona):not(.svat-roh) {
  position: relative;
}

.svat-cover__brand {
  font-size: 12.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--g-accent);
  margin-bottom: 26px;
}
.svat-cover h1 {
  font-family: var(--g-names);
  font-size: clamp(3rem, 9vw, 5.4rem);
  font-weight: 500;
  margin: 18px 0 10px;
}
body.svatba[data-pismo="script"] .svat-cover h1 { font-size: clamp(3.4rem, 10vw, 6.4rem); font-weight: 400; }
body.svatba[data-pismo="moderni"] .svat-cover h1 { text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 600; }
.svat-cover__meta {
  color: var(--g-soft);
  font-size: 15.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 14px 0 0;
}
.svat-cover__sip {
  margin-top: 22px;
  color: var(--g-soft);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
}
.svat-cover__sip::after {
  content: '';
  width: 1px; height: 42px;
  background: var(--g-line);
}
.svat-cover__sip:hover { color: var(--g-accent); }

/* ---------- Film v rámu ---------- */

.svat-film { padding: 26px 0 30px; }
.svat-ram {
  border: 1px solid var(--g-line);
  padding: 10px;
}
.svat-ram .player { border-radius: 2px; background: var(--g-bg2); }
.svat-titulek {
  text-align: center;
  margin: 22px 0 0;
  color: var(--g-soft);
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px;
}
body.svatba .player__play span { background: color-mix(in srgb, var(--g-text) 26%, transparent); }
body.svatba .player:hover .player__play span { background: var(--g-accent); }

/* ---------- Kapitoly (další videa) ---------- */

.svat-klipy { padding: 30px 0 26px; }
.svat-klipy h2, .svat-vice h2 {
  font-family: var(--g-names);
  text-align: center;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  margin-bottom: 6px;
}
body.svatba[data-pismo="script"] .svat-klipy h2, body.svatba[data-pismo="script"] .svat-vice h2 { font-size: clamp(2rem, 5vw, 2.9rem); }
.svat-klipy .klipy__grid { margin-top: 26px; }
body.svatba .klip strong { font-family: var(--g-names); font-weight: 500; font-size: 1.12rem; }
body.svatba .klip span { color: var(--g-soft); }
body.svatba .klip .player { background: var(--g-bg2); }

/* ---------- Trailer a soubory ---------- */

.svat-vice { padding: 26px 0 40px; }
body.svatba .trailer h3, body.svatba .download h3 {
  font-family: var(--g-names); font-weight: 500;
}
body.svatba .download {
  border: 1px solid var(--g-line);
  padding: 26px;
}
body.svatba .download__file { border-bottom: 1px dashed var(--g-line); color: var(--g-soft); }
body.svatba .trailer p { color: var(--g-soft); }

/* ---------- Vzkaz ---------- */

.svat-vzkaz {
  padding: 44px 22px 70px;
  text-align: center;
}
.svat-vzkaz blockquote {
  font-family: var(--g-names);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  line-height: 1.55;
  font-style: italic;
  max-width: 640px;
  margin: 26px auto 18px;
}
.svat-vzkaz figcaption { color: var(--g-soft); letter-spacing: 0.14em; text-transform: uppercase; font-size: 12.5px; }

body.svatba .powered { border-top: 1px solid var(--g-line); color: var(--g-soft); }
body.svatba .powered a { color: var(--g-accent); }

/* ---------- Demo modal v tématu ---------- */
body.svatba .demo-modal__box { background: var(--g-bg); color: var(--g-text); border: 1px solid var(--g-line); }
body.svatba .demo-modal__box p { color: var(--g-soft); }

@media (max-width: 640px) {
  .svat-cover { min-height: 76vh; padding-top: 56px; }
  body.svatba .gate__box { padding: 34px 20px 30px; }
  .svat-ram { padding: 6px; }
}

/* ============================================================
   Editor vzhledu v detailu galerie (kameramanská část)
   ============================================================ */

.vzhled__motivy { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 6px 0 18px; }
.vzhled__motiv {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  cursor: pointer;
  text-align: left;
  background: #fff;
  font: inherit;
}
.vzhled__motiv.aktivni { border-color: var(--brass); outline: 1px solid var(--brass); }
.vzhled__vzorek { display: flex; height: 34px; border-radius: 3px; overflow: hidden; margin-bottom: 8px; border: 1px solid var(--line); }
.vzhled__vzorek span { flex: 1; }
.vzhled__motiv small { color: rgba(14,13,11,0.62); }
.vzhled__radek { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-bottom: 16px; align-items: flex-end; }
.vzhled__radek label { display: flex; flex-direction: column; gap: 5px; font-size: 14.5px; }
.vzhled__radek select, .vzhled__radek input[type="color"] {
  font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; min-width: 170px;
}
.vzhled__radek input[type="color"] { min-width: 64px; height: 40px; padding: 3px; cursor: pointer; }
.vzhled__ulozeno { color: #2E7D4F; font-size: 14.5px; margin-left: 12px; }

.video-radek__poradi { display: inline-flex; gap: 4px; }
.video-radek__poradi button { min-width: 30px; }

/* ============================================================
   UKÁZKY NA ÚVODNÍ STRÁNCE

   Každá dlaždice nese barvy a písmo té galerie, do které vede.
   Návštěvník tak vidí rozsah dřív, než na cokoli klikne, a sekce
   sama je důkazem, že to není jedna šablona s jinou fotkou.
   ============================================================ */

.ukazky {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  align-items: start;
}

.ukazka {
  display: block;
  padding: 26px 24px 24px;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 160ms;
  min-height: 190px;
}
.ukazka:hover { border-color: currentColor; }

.ukazka__pruh {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 16px;
}
.ukazka__par {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 12px;
}
.ukazka__popis {
  display: block;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  opacity: 0.78;
}

/* Porcelán: teplá slonovina, patkové písmo. */
.ukazka--porcelan {
  --karta-bg: #F7F4EE;
  background: #F7F4EE;
  color: #2C2823;
  border-color: rgba(44, 40, 35, 0.14);
}
.ukazka--porcelan .ukazka__par { font-family: 'Cormorant Garamond', Georgia, serif; }
.ukazka--porcelan .ukazka__pruh { color: #A88349; opacity: 1; }

/* Půlnoc: tmavý sál, kapitálky. */
.ukazka--pulnoc {
  --karta-bg: #16202B;
  background: #16202B;
  color: #EFEAE0;
  border-color: rgba(239, 234, 224, 0.16);
}
.ukazka--pulnoc .ukazka__par {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 23px;
  letter-spacing: 0.05em;
}
.ukazka--pulnoc .ukazka__pruh { color: #C5A15C; opacity: 1; }

/* Růže: psané písmo, jemný květinový podklad. */
.ukazka--ruze {
  --karta-bg: #F9F2EF;
  background: #F9F2EF;
  color: #43302F;
  border-color: rgba(67, 48, 47, 0.14);
  background-image:
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="96" height="96"%3E%3Cg stroke="%23B97E72" stroke-width="0.9" fill="none" opacity="0.35"%3E%3Cpath d="M24 20c0-5 3-8 6-8s4 3 2 6-6 3-8 2Z"/%3E%3Cpath d="M24 20c0-5-3-8-6-8s-4 3-2 6 6 3 8 2Z"/%3E%3Cpath d="M24 20c2 3 2 7 0 10"/%3E%3Cpath d="M72 68c0-5 3-8 6-8s4 3 2 6-6 3-8 2Z"/%3E%3Cpath d="M72 68c0-5-3-8-6-8s-4 3-2 6 6 3 8 2Z"/%3E%3Cpath d="M72 68c2 3 2 7 0 10"/%3E%3C/g%3E%3C/svg%3E');
}
.ukazka--ruze .ukazka__par {
  font-family: 'Great Vibes', cursive;
  font-size: 40px;
  line-height: 1;
}
.ukazka--ruze .ukazka__pruh { color: #B97E72; opacity: 1; }

/* Bílá: nic navíc, jen text a linka. */
.ukazka--bila {
  --karta-bg: #FFFFFF;
  background: #FFFFFF;
  color: #1A1A1A;
  border-color: rgba(26, 26, 26, 0.16);
}
.ukazka--bila .ukazka__par {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.ukazka--bila .ukazka__pruh { color: #6B6B6B; opacity: 1; }

@media (max-width: 640px) {
  .ukazka { min-height: 0; padding: 22px 20px; }
  .ukazka--ruze .ukazka__par { font-size: 34px; }
}

/* ---------- Veřejné portfolio, doplňky k živým datům ---------- */

.folio-head__logo {
  max-height: 62px;
  max-width: 220px;
  object-fit: contain;
  margin-bottom: 14px;
}

.folio-head__text {
  max-width: 56ch;
  margin-top: 12px;
  opacity: 0.82;
}

.folio-prazdno {
  opacity: 0.7;
  max-width: 52ch;
  padding: 30px 0;
}

/* Karta filmu v portfoliu se chová jako přehrávač, ne jako odkaz. */
.film-card[role="button"] { cursor: pointer; }
.film-card .player { display: block; position: relative; }

/* Tlačítko stažení přímo u videa. Drží se zpátky, aby nepřebilo
   přehrávání, ale je po ruce tam, kde ho pár hledá. */
.stah-btn {
  display: inline-block;
  font: inherit;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 12px;
  padding: 8px 14px;
  border: 1px solid var(--g-line);
  border-radius: 6px;
  background: transparent;
  color: var(--g-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms, border-color 140ms;
}
.stah-btn:hover {
  border-color: var(--g-tlacitka, var(--g-accent));
  color: var(--g-tlacitka, var(--g-accent));
}
.stah-btn:disabled { opacity: 0.55; cursor: default; }

.stah-stav {
  font-size: 13.5px;
  margin-top: 10px;
  color: var(--g-soft);
  max-width: 52ch;
}

/* V dlaždici klipu je tlačítko menší, ať kartu nepřeválcuje. */
.klip .stah-btn { font-size: 12.5px; padding: 6px 11px; margin-top: 10px; }
.klip .stah-stav { font-size: 12.5px; }

/* Cesta dovnitř z úvodní stránky. Založení účtu je hlavní akce,
   ukázky jsou vedle jako text, ne jako druhé stejně velké tlačítko. */
.nav .nav__ucet {
  background: var(--ink);
  color: #F7F4EE;
  border-radius: 7px;
  padding: 10px 18px;
  font-size: 14.5px;
  text-decoration: none;
  opacity: 1;
}
.nav .nav__ucet:hover { background: #000; opacity: 1; }

.hero__akce {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.hero__odkaz {
  font-size: 15.5px;
  opacity: 0.86;
  /* Na dotykové obrazovce se do odkazu musí dát trefit prstem, tak mu
     dáme výšku i tam, kde je to jen text vedle tlačítka. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.hero__odkaz:hover { opacity: 1; }

/* ---------- Fotky v galerii ----------

   Mřížka drží poměr stran každé fotky dopředu, takže se stránka při
   dotahování náhledů nehýbe pod rukama. Dlaždice jsou schválně husté:
   fotek jsou stovky a tohle je rozcestník, ne výstava. */

.svat-fotky {
  padding: 72px 0;
  background: var(--g-bg2);
}

.fotky__nadpis {
  font-family: var(--g-names);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  color: var(--g-text);
  margin-bottom: 26px;
  font-weight: 400;
}

/* Řady srovnané do bloku: každá fotka si drží svůj poměr stran a řada
   se dopočítá na přesnou šířku. Šířku a výšku dlaždicím zapisuje skript,
   protože jen on ví, jak si je rozdělil do řad. */
.fotky__mrizka {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.fotka-obal {
  flex: none;
  /* Než skript dopočítá řady, drží dlaždice alespoň poměr stran, aby
     stránka nepodskočila. */
  aspect-ratio: var(--pomer, 1.5);
  height: 330px;
}

.fotka {
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--g-bg);
  cursor: zoom-in;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
}

.fotky__dalsi {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 15px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  opacity: 0.85;
}
.fotky__dalsi:hover { opacity: 1; border-color: var(--brass); }

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

.fotka:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }

.fotky__pata { margin-top: 26px; }

/* ---------- Prohlížeč fotky ---------- */

.lupa {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(12, 11, 10, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.lupa[hidden] { display: none; }

.lupa img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.lupa__zavrit,
.lupa__sip {
  position: absolute;
  border: 0;
  background: none;
  color: rgba(242, 239, 233, 0.72);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  padding: 12px 16px;
}

.lupa__zavrit:hover,
.lupa__sip:hover { color: #F2EFE9; }

.lupa__zavrit { top: 8px; right: 10px; font-size: 20px; }
.lupa__sip { top: 50%; transform: translateY(-50%); font-size: 40px; }
.lupa__sip--vlevo { left: 4px; }
.lupa__sip--vpravo { right: 4px; }

.lupa__pocet {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: rgba(242, 239, 233, 0.6);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .svat-fotky { padding: 48px 0; }
  .fotky__mrizka { gap: 6px; }
  .fotka-obal { height: 210px; }
  .lupa { padding: 56px 8px; }
  .lupa__sip { font-size: 32px; padding: 12px 8px; }
}

/* Značky na dlaždici. Vylézají až na najetí myší nebo když jsou zapnuté,
   ať mřížka v klidu vypadá jako fotky, ne jako ovládací panel. */
.fotka-obal { position: relative; }

.znacka {
  position: absolute;
  top: 7px;
  border: 0;
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 15, 14, 0.42);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  opacity: 0;
  padding: 0;
}

.znacka--vyber { left: 7px; }
.znacka--srdce { right: 7px; }

.fotka-obal:hover .znacka,
.znacka:focus-visible,
.znacka[aria-pressed="true"] { opacity: 1; }

.znacka[aria-pressed="true"] {
  background: var(--g-accent);
  color: #fff;
}

.znacka--srdce[aria-pressed="true"] svg { fill: currentColor; }

.znacka__pocet {
  position: absolute;
  bottom: -3px; right: -4px;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--g-text);
  color: var(--g-bg);
  font-size: 10px;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
}

.znacka__pocet:empty { display: none; }

/* Na dotykových zařízeních není na co najet, tak jsou vidět pořád. */
@media (hover: none) {
  .znacka { opacity: 0.85; }
}


/* ============================================================
   ÚVOD HLAVNÍ STRÁNKY

   Postaveno přesně podle návrhu, který Kevin poslal: vlevo text,
   vpravo fotka od poloviny stránky až na okraj okna, pod textem tři
   body s ikonou. Níž šedý panel s oknem aplikace.

   Pár pravidel, která z návrhu plynou a nesmí se rozpustit:
   fotka je plná, bez zaoblení a bez masky (dřív se vlevo rozplývala,
   to v návrhu není), popisek nad nadpisem je šedý, ne mosazný, a
   okno aplikace je světlé, ne černé.
   ============================================================ */

/* Úvodní stránka má vlastní papír: chladnější a světlejší než galerie,
   a širší obsah. Drží se na body.web, aby se to nepropsalo do galerií. */
body.web {
  /* Písma podle předlohy: nadpisy Newsreader (stejný poměr střední
     výšky ke kapitálkám, 0,63, i podobný kontrast tahů), text Inter.
     Drží se na body.web, protože galerie a pracovna mají svoje. */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Newsreader', Georgia, serif;
  --ivory: #FFFFFF;
  --ivory-2: #F2F1EE;
  --line: #E4E2DF;
}

/* Bílé pozadí pod celou hlavní stránkou. Boxy (panel s aplikací, karty
   ukázek, tmavý ceník) si svoje pozadí drží dál — mění se opravdu jen
   plocha za nimi. */
body.web { background: #fff; }
body.web .hero,
body.web header.wrap { background: #fff; }

/* Okraje rostou s oknem: v předloze má stránka 1536 px na šířku a 92 px
   volného místa po stranách, tedy skoro 6 % šířky. Držíme ten poměr, jen
   ho zdola i shora zarazíme, ať se na mobilu nezúží na nulu a na velkém
   monitoru se řádek textu neroztáhne přes celou plochu. */
body.web .wrap {
  max-width: 1536px;
  padding-left: clamp(20px, 5.99vw, 92px);
  padding-right: clamp(20px, 5.99vw, 92px);
}

body.web header.wrap {
  max-width: none;
  border-bottom: 1px solid var(--line);
}
body.web header.wrap > .nav {
  max-width: 1360px;
  margin: 0 auto;
}

.hero { background: var(--ivory); padding: 0; overflow: hidden; }

.hero__content {
  display: grid;
  grid-template-columns: minmax(0, 634fr) minmax(0, 670fr);
  gap: 48px;
  align-items: center;
  padding-top: 51px;
  padding-bottom: 48px;
}

.hero__kdo {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.125em;
  text-transform: uppercase;
  color: #8C8A89;
  margin-bottom: 18px;
}

.hero__text h1 {
  font-size: clamp(2.4rem, 4.4vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: #171814;
  margin-bottom: 30px;
}

.hero__text > p {
  font-size: 17px;
  line-height: 1.6;
  color: #5F5D58;
  max-width: 500px;
  margin-bottom: 45px;
}

.hero__akce { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Dva dny zdarma sedí hned pod tlačítky — je to důvod, proč na ně
   kliknout, ne samostatné sdělení. Proužek s okrajem, protože jako
   samostatná řádka drobného textu úplně zanikal. */
.hero__zdarma {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  padding: 9px 16px 9px 13px;
  border: 1px solid rgba(163, 124, 66, 0.42);
  border-radius: 999px;
  background: rgba(198, 154, 82, 0.11);
  font-size: 14.5px;
  line-height: 1.4;
  color: #5A554C;
  max-width: 100%;
}

.hero__zdarma strong {
  font-weight: 600;
  color: #171814;
}

.hero__zdarma-znak {
  flex: none;
  display: block;
  width: 17px; height: 17px;
  color: #A37C42;
}

.hero__zdarma-znak svg { display: block; width: 100%; height: 100%; }

.btn--tmavy {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: #F7F4EE;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.2;
  padding: 13px 24px;
}
.btn--tmavy:hover { background: #000; }

.btn--obrys {
  background: #FBFAF8;
  border: 1px solid rgba(20, 19, 16, 0.16);
  color: var(--ink);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.2;
  padding: 13px 24px;
}
.btn--obrys:hover { border-color: var(--ink); }

/* Tři krátké body pod tlačítky.

   Každý má jen značku a jeden řádek textu. Popisek pod ním tu dřív byl,
   ale hero má prodat tři věci na jeden pohled, ne se číst — tři odstavce
   vedle sebe oko přeskočí úplně. */
.tri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 56px;
}

/* Značky mají každá jinou výšku (logo, tři odznaky, kód), ale řádky
   textu pod nimi musí být v jedné lince. Proto pevný řádek pro značku
   a zarovnání k jeho spodku, ne odsazení u každé zvlášť. */
.tri__bod {
  display: grid;
  grid-template-rows: 34px auto;
  gap: 12px;
  /* Řádky se nesmí roztáhnout na výšku nejvyššího souseda, jinak by
     se jednořádkový text propadl dolů, zatímco dvouřádkový vedle něj
     začíná nahoře. Značky se zarovnají k spodku svého řádku, texty
     všechny k hornímu okraji toho svého. */
  align-content: start;
  justify-items: start;
}
.tri__bod .tri__znak { align-self: end; }
.tri__bod strong { align-self: start; }
.tri__znak {
  display: block;
  width: 19px; height: 19px;
  color: var(--ink);
  opacity: 0.85;
}
.tri__bod strong {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: #171814;
}

/* Fotka vpravo se štítkem.

   Nekončí u vnitřní mřížky, ale jde až na pravý okraj okna: záporný
   okraj dorovná polovinu zbytku za obalem plus jeho vnitřní odsazení.
   Rohy jsou ostré a plocha plná, přesně jako v návrhu. */
/* Poměr stran drží fotku v předlohové výšce, dokud je vyšší než text
   vedle. Jakmile se text v užším okně natáhne, „stretch“ ho dožene a
   fotka končí přesně s ním. */
.hero__obraz {
  position: relative;
  aspect-ratio: 1.316;
  align-self: stretch;
  margin-right: calc(-1 * (clamp(20px, 5.99vw, 92px) + max(0px, 100vw - 1536px) / 2));
}
/* Výšku fotky určuje její vlastní poměr 4:3 z šířky, kterou dostane
   (sloupec plus přesah na okraj okna). Přesně jako v předloze: text
   vedle je o kus nižší a stojí uprostřed. */
.hero__obraz img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

.stitek {
  position: absolute;
  left: 26px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: #FBFAF9;
  border-radius: 10px;
  padding: 14px 24px 14px 16px;
  box-shadow: 0 10px 26px -16px rgba(20, 16, 10, 0.5);
}
.stitek__znak {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #F7F4EE;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.stitek strong { display: block; font-size: 14.5px; color: var(--ink); }
.stitek small { display: block; font-size: 13px; color: #7C7970; margin-top: 1px; }

/* ---------- ukázka pracovny ---------- */

/* Šedý panel uvnitř stránky, ne pruh přes celou šířku. */
.ukazka-app { background: var(--ivory); padding: 0 0 44px; }

.ukazka-app__grid {
  display: grid;
  grid-template-columns: minmax(0, 682fr) minmax(0, 542fr);
  gap: 58px;
  align-items: center;
  background: var(--ivory-2);
  border-radius: 12px;
  padding: 32px 34px;
}

/* Okno aplikace je světlé, s bílým tělem a jemným stínem. */
.okno {
  background: #FFF;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  box-shadow: 0 18px 44px -26px rgba(20, 16, 10, 0.4);
}

.okno__pas { padding: 18px 14px; background: #FCFBFA; border-right: 1px solid #ECEAE5; }
.okno__logo {
  display: block; font-family: var(--font-display);
  font-size: 16px; color: var(--ink); margin: 2px 0 20px 8px;
}
.okno__logo em { font-style: normal; }
.okno__polozka {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: #6E6B65;
  padding: 7px 8px; border-radius: 6px; margin-bottom: 2px;
}
.okno__polozka svg { width: 15px; height: 15px; flex: none; }
.okno__polozka.je-aktivni { background: #F1EFEB; color: var(--ink); }

.okno__telo { padding: 16px 18px 18px; }

.okno__zpet {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  color: #8A8780;
  margin-bottom: 10px;
}
.okno__zpet svg { width: 15px; height: 15px; }

.okno__hlava {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 16px;
}
.okno__nazev { flex: 1 1 auto; min-width: 0; }
.okno__nazev strong { display: block; font-size: 15.5px; color: var(--ink); }
.okno__nazev > span {
  display: block; font-size: 12.5px; margin-top: 3px;
  color: #8A8780;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.okno__vice {
  flex: none;
  font-size: 15px; line-height: 1;
  letter-spacing: 0.08em;
  color: #8A8780;
  padding: 4px 2px;
}

.okno__mrizka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.okno__dlazdice { position: relative; display: block; }
.okno__mrizka img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.okno__hrat {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #1B1A16;
  display: flex; align-items: center; justify-content: center;
}
.okno__hrat svg { width: 8px; height: 10px; margin-left: 1.5px; }

.ukazka-app__text h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 14px; }
.ukazka-app__text p { font-size: 16px; line-height: 1.62; color: #57544D; margin-bottom: 20px; }
.ukazka-app__odkaz {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; color: var(--ink);
}
.ukazka-app__odkaz::after { content: '→'; }

/* Do 1120 px se dvousloupec rozpadne: text by měl na tři body pod sebou
   míň než 400 px a nadpisy by se lámaly po slabikách. */
@media (max-width: 1199px) {
  .nav .nav__kod { display: none; }
}

@media (max-width: 1120px) {
  .hero__content { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 48px; }
  /* Ve složeném rozvržení už fotka nikam nepřesahuje: sedí ve stejných
     okrajích jako text pod ní, jinak by byla useknutá jen zprava. */
  .hero__obraz { order: -1; align-self: auto; aspect-ratio: auto; margin-right: 0; }
  .hero__obraz img { height: clamp(280px, 42vw, 520px); }
  /* Na mobilu je fotka na celou šířku, štítek proto blíž k okraji. */
  .stitek { left: 20px; bottom: 20px; padding: 10px 16px 10px 12px; }
  .stitek small { white-space: nowrap; }
  .tri { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 30px; }
  .ukazka-app { padding: 8px 0 44px; }
  .ukazka-app__grid { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px; }
  .okno { grid-template-columns: 1fr; }
  .okno__pas { display: flex; gap: 8px; align-items: center; border-right: 0;
    border-bottom: 1px solid #ECEAE5; overflow: hidden; }
  .okno__logo { margin: 0 6px 0 4px; }
  .okno__polozka { margin: 0; }
  /* Na mobilu se z pásu stane řádek a pět položek se do něj nevejde,
     zbytek by se jen useknul v půlce slova. Ukážeme první dvě. */
  .okno__pas > span:nth-of-type(n+4) { display: none; }
}

/* Pod 640 px už tři body vedle sebe nedávají smysl: sloupec by měl
   necelých 90 px a každé druhé slovo by se lámalo. */
@media (max-width: 640px) {
  .tri { grid-template-columns: 1fr; gap: 22px; }
  .tri__znak { margin-bottom: 10px; }
  .hero__text h1 { font-size: clamp(2.1rem, 8.6vw, 2.9rem); }
}



/* Ze vstupu kódem vedla dřív cesta zpátky jen přes logo, což není nic,
   co by někoho napadlo zkusit. Šipka je šipka. */
/* Zpět patří do levého horního rohu stránky, tam ho člověk hledá.
   Uvnitř boxu nad logem to vypadalo jako součást formuláře. */
.entry__zpet {
  position: absolute;
  top: 26px;
  left: 28px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14.5px;
  text-decoration: none;
  color: inherit;
  opacity: 0.72;
  min-height: 44px;
}
.entry__zpet svg { width: 17px; height: 17px; display: block; }
.entry__zpet:hover { opacity: 1; border-color: var(--brass); color: var(--brass); }

@media (max-width: 600px) {
  .entry__zpet { top: 16px; left: 16px; }
  .entry { padding-top: 108px; }
}

/* ---------- ukázky galerií ----------

   Karty byly jen barevné obdélníky s textem, což u služby, která prodává
   vzhled, působilo lacině. Pod textem je teď skutečný záběr z filmu.
   Průhlednost se liší podle motivu: světlé papíry unesou míň, tmavý sál
   naopak potřebuje víc, jinak by fotka zmizela. */

.ukazka { position: relative; overflow: hidden; }
.ukazka > *:not(.ukazka__foto) { position: relative; z-index: 1; }

.ukazka__foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  transition: opacity 220ms, transform 400ms;
}
.ukazka:hover .ukazka__foto { opacity: 0.42; transform: scale(1.03); }

/* Text musí zůstat čitelný i nad světlým místem fotky, a to u světlého
   papíru i u tmavého sálu. Závoj proto není šedý, ale v barvě té karty:
   u porcelánu slonovinový, u půlnoci noční modrá. */
.ukazka__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--karta-bg, #F7F4EE) 8%, transparent 58%);
  opacity: 0.85;
}

.ukazka--pulnoc .ukazka__foto { opacity: 0.42; }
.ukazka--pulnoc:hover .ukazka__foto { opacity: 0.55; }
.ukazka--bila .ukazka__foto { opacity: 0.24; }
.ukazka--bila:hover .ukazka__foto { opacity: 0.34; }

/* ---------- fajfky v ceníku ---------- */

.tarif__fajfka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(185, 138, 68, 0.2);
  color: #D9A85F;
  font-size: 13.5px;
  line-height: 1;
}
.tarif td small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  opacity: 0.6;
}

/* ---------- úpravy textů přímo v náhledu ----------

   Jen v editoru (galerie.html?nahled=1). Klient nic z toho nevidí:
   atribut na <body> přidává skript, který v ostré galerii neběží. */

body[data-upravy-textu] [data-text-klic] {
  cursor: move;
  outline: 1px dashed transparent;
  outline-offset: 4px;
  transition: outline-color 120ms;
}
body[data-upravy-textu] [data-text-klic]:hover {
  outline-color: rgba(185, 138, 68, 0.75);
}
body[data-upravy-textu] [data-text-vybrany] {
  outline: 1px solid var(--g-accent, #B98A44);
  outline-offset: 4px;
}

/* ============================================================
   Hlavní stránka: druhá vlna úprav
   ============================================================ */

/* ---------- tlačítka ----------

   Na hlavní stránce zůstává tmavé jediné tlačítko: „Založit účet"
   v pravém horním rohu. Když jsou tmavá dvě nebo tři, přestane být
   jasné, co má člověk udělat, a stránka vypadá jako rozcestník. */
body.web .btn:not(.nav__ucet) {
  background: #FBFAF8;
  border: 1px solid rgba(20, 19, 16, 0.16);
  color: var(--ink);
}
body.web .btn:not(.nav__ucet):hover {
  background: #fff;
  border-color: var(--ink);
}

/* ---------- box „dva dny zdarma" u tlačítka Založit účet ----------

   Tmavý na světlé stránce schválně: je to jediné místo na hlavní straně,
   které má tmavé pozadí, takže oko na něj padne samo. Křížek si zapamatuje
   prohlížeč — kdo ho jednou zavře, nemá ho dostat na každé další stránce
   znovu, to už není nabídka, ale otrava. */
.nav__ucet-obal { position: relative; display: inline-block; }

.bublina {
  position: absolute;
  top: calc(100% + 18px);
  right: -4px;
  z-index: 40;
  width: max-content;
  max-width: 24rem;
  padding: 15px 44px 15px 20px;
  border-radius: 12px;
  background: var(--ink);
  color: #F2EFE9;
  text-align: left;
  box-shadow: 0 16px 40px rgba(20, 19, 16, 0.28);
  transform: translateY(-8px) scale(0.96);
  opacity: 0;
  transition: opacity 320ms ease, transform 380ms cubic-bezier(.2,.9,.3,1.4);
}

.bublina__text {
  display: block;
  font-size: 16.5px;
  line-height: 1.45;
}

.bublina strong {
  color: #E4614C;
  font-weight: 600;
}

/* Špička nahoru, ať je vidět, ke kterému tlačítku to patří. */
.bublina::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 26px;
  border: 9px solid transparent;
  border-bottom-color: var(--ink);
}

.bublina__zavrit {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: rgba(242, 239, 233, 0.55);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  padding: 0;
}
.bublina__zavrit:hover {
  color: #F2EFE9;
  background: rgba(242, 239, 233, 0.12);
}

.bublina.je-videt {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- tři body v hero: logo, rozlišení, kód ---------- */

.tri__bod .tri__znak--logo { width: 34px; height: 34px; opacity: 1; color: var(--ink); }
.tri__znak--logo svg { width: 100%; height: 100%; display: block; }

.tri__bod .tri__znak--kvalita {
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto; height: 28px;
}
.tri__znak--kvalita em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.03em;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: #6B6862;
  background: #fff;
}
.tri__znak--kvalita .je-nej {
  border-color: var(--ink);
  background: var(--ink);
  color: #F7F4EE;
  font-weight: 600;
}

/* Ukázka odkazu, který klient dostane. Není to `a`, schválně: v hero
   je to obrázek toho, co přijde do zprávy, ne odkaz, kam se dá kliknout.
   Kdyby to odkaz byl, vedl by na neexistující galerii. */
.tri__bod .tri__znak--odkaz {
  display: inline-flex;
  align-items: center;
  width: auto; height: 28px;
  padding: 0 10px;
  border: 1px solid #D8D3C8;
  border-radius: 6px;
  background: #fff;
  color: #171814;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: rgba(23, 24, 20, 0.55);
  text-underline-offset: 2px;
}

/* ---------- hero: video a filmový pás ---------- */

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #E7E4DE;
}

/* Štítek je teď drobný a sedí v levém horním rohu, ať nepřekrývá záběr. */
.hero__obraz .stitek {
  position: absolute;
  top: 16px; left: 16px;
  right: auto; bottom: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(20, 19, 16, 0.14);
  font-size: 12.5px;
  max-width: none;
}
.hero__obraz .stitek strong { font-size: 12.5px; font-weight: 600; }
.hero__obraz .stitek__znak {
  width: 17px; height: 17px;
  font-size: 10px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: #F7F4EE;
}

/* Pás z fotobudky: perforace nahoře i dole, políčka mezi nimi, jede doleva
   pořád dokola. Druhá polovina snímků je kopie první, takže se posun po
   půlce vrátí na začátek a nikdo si nevšimne švu. */
.pas {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 74px;
  overflow: hidden;
  background: #17181A;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pas::before,
.pas::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 9px;
  z-index: 2;
  background-image: repeating-linear-gradient(to right,
    rgba(255,255,255,0.62) 0 7px, transparent 7px 15px);
  background-size: 15px 4px;
  background-repeat: repeat-x;
  background-position: center;
  pointer-events: none;
}
.pas::before { top: 0; }
.pas::after { bottom: 0; }

.pas__posun {
  display: flex;
  gap: 6px;
  height: 100%;
  padding: 11px 0;
  width: max-content;
  animation: pas-jede 34s linear infinite;
}

.pas__policko {
  flex: none;
  width: clamp(58px, 4.4vw, 96px);
  height: 100%;
  overflow: hidden;
  border-radius: 2px;
  background: #24252A;
}
.pas__policko img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes pas-jede {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .pas__posun { animation: none; }
  .bublina { transition: none; }
}

@media (max-width: 620px) {
  .pas { height: 58px; }
  .pas__policko { width: 58px; }
  .bublina { max-width: 15rem; padding: 14px 38px 14px 16px; }
  .bublina__text { font-size: 15px; }
}


/* ---------- hero na velkém monitoru ----------

   Fotka jde vždycky až k pravému okraji okna. Dokud byl text zaražený
   v 1536px mřížce, zůstávala nalevo od něj čím dál větší prázdná plocha
   a stránka vypadala rozvázaně. Nad tuhle šířku proto pouštíme hero
   přes celé okno: text začíná od okraje stejně jako fotka končí u toho
   druhého. Sloupec s textem si přitom drží čitelnou šířku sám. */
@media (min-width: 1537px) {
  body.web .hero .wrap,
  body.web header.wrap {
    max-width: none;
    padding-left: clamp(92px, 6.5vw, 190px);
    padding-right: clamp(92px, 6.5vw, 190px);
  }
  .hero__content {
    grid-template-columns: minmax(0, 620fr) minmax(0, 780fr);
    gap: clamp(48px, 5vw, 110px);
  }
  /* Obal už není zaražený v 1536px, takže záporný okraj nesmí dorovnávat
     zbytek za ním — jinak fotka přeteče o polovinu té bývalé rezervy ven
     z okna a objeví se vodorovný posuvník. */
  .hero__obraz { margin-right: calc(-1 * clamp(92px, 6.5vw, 190px)); }
  .hero__text h1 { font-size: clamp(4.2rem, 3.6vw, 5rem); }
  .hero__text > p { font-size: 18px; max-width: 34ch; }
  .tri { gap: clamp(35px, 3vw, 56px); }
  /* Poměr fotky se s rostoucí šířkou natahuje, jinak by na širokém
     monitoru byla vyšší než celá obrazovka. */
  .hero__obraz { aspect-ratio: 1.45; }
}

@media (min-width: 2000px) {
  .hero__obraz { aspect-ratio: 1.62; }
  .hero__content { padding-top: 76px; padding-bottom: 76px; }
}

/* ---------- ceník: zbytek tabulky pod tlačítkem ----------

   Nad tabulkou je devatenáct řádků, z toho patnáct jsou fajfky u všech
   balíčků. Kdo si vybírá, potřebuje vidět místo; zbytek je ujištění,
   které chce až ten, kdo se rozhoduje doopravdy. */
.tarif__vic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 26px;
  padding: 18px 24px;
  border: 1px solid rgba(242, 239, 233, 0.28);
  border-radius: 12px;
  background: transparent;
  color: var(--ivory);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.tarif__vic-btn:hover {
  background: rgba(242, 239, 233, 0.06);
  border-color: rgba(242, 239, 233, 0.5);
}

.tarif__vic-sipka { transition: transform 220ms; font-size: 13px; }
.tarif__vic-btn[aria-expanded="true"] .tarif__vic-sipka { transform: rotate(180deg); }

.pricing__navic {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(242, 239, 233, 0.18);
  font-size: 15.5px;
  opacity: 0.8;
  max-width: 62ch;
}

/* ---------- samostatná stránka s ukázkami ---------- */

.ukazky-hlava { padding: 62px 0 8px; }
.ukazky-hlava h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.1; margin-bottom: 18px; }
.ukazky-hlava__lead { max-width: 62ch; font-size: 17px; line-height: 1.65; color: #5F5D58; }

.demos--samostatne { padding-top: 34px; }
.demos--samostatne .ukazky { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.demos--samostatne .ukazka { min-height: 340px; }

.ukazka__znaky {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid currentColor;
  border-image: none;
  opacity: 0.72;
  font-size: 12.5px;
}
.ukazka__znaky b { font-weight: 600; }

.ukazky-zbytek { padding: 24px 0 88px; }
.ukazky-zbytek h2 { margin-bottom: 30px; }

.ukazky-zbytek__mrizka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 40px;
}
.ukazky-zbytek__mrizka h3 { font-size: 17px; margin-bottom: 7px; }
.ukazky-zbytek__mrizka p { font-size: 15px; line-height: 1.6; color: #5F5D58; margin: 0; }

.ukazky-zbytek__akce { margin-top: 46px; }
.ukazky-zbytek__akce .btn { padding: 15px 28px; font-size: 16px; }


@media (max-width: 900px) {
  .demos--samostatne .ukazky { grid-template-columns: 1fr; }
  .ukazky-zbytek__mrizka { grid-template-columns: 1fr; gap: 24px; }
}

/* Právní stránky: dlouhý text, tak ať se dá číst. */
.pravni { padding: 46px 0 90px; }
.pravni .wrap { max-width: 820px; }
.pravni__zpet { margin-bottom: 26px; font-size: 14.5px; }
.pravni__zpet a { color: #6B6862; text-decoration: none; }
.pravni__zpet a:hover { color: var(--ink); text-decoration: underline; }
.pravni h1 { font-size: clamp(2rem, 4vw, 2.9rem); margin-bottom: 8px; }
.pravni__ucinnost { font-size: 14px; color: #8C877D; margin-bottom: 34px; }
.pravni h2 { font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin: 38px 0 10px; }
.pravni p { font-size: 16px; line-height: 1.72; color: #4A473F; margin-bottom: 14px; max-width: 68ch; }
.pravni ul { margin: 0 0 16px; padding-left: 22px; max-width: 68ch; }
.pravni li { font-size: 16px; line-height: 1.72; color: #4A473F; margin-bottom: 7px; }
.pravni a { color: #A37C42; }

.pravni__vystraha {
  margin: 0 0 30px;
  padding: 18px 22px;
  border: 1px solid rgba(163, 124, 66, 0.4);
  border-radius: 12px;
  background: rgba(198, 154, 82, 0.09);
}
.pravni__vystraha strong { display: block; margin-bottom: 6px; color: #171814; }
.pravni__vystraha p { margin: 0; font-size: 15px; }

/* ---------- filtry nad mřížkou fotek ----------

   Kameraman si u galerie pojmenuje skupiny („portrét", „prostředí",
   „první pohled") a klient si podle nich prochází jen to, co ho zajímá.
   Když galerie štítky nemá, pruh se vůbec nezobrazí. */
.fotky__filtry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.filtr {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.filtr:hover { border-color: var(--brass); }
.filtr span { font-size: 11.5px; opacity: 0.55; font-variant-numeric: tabular-nums; }

.filtr.je-vybrany {
  background: var(--brass);
  border-color: var(--brass);
  color: #14130F;
}
.filtr.je-vybrany span { opacity: 0.7; }

/* ---------- značka ----------

   Logo je jeden SVG soubor s `currentColor`, takže se obarví podle místa,
   kam se vloží — na světlé hlavičce je tmavé, v tmavém ceníku světlé,
   a nemusí se držet dvě varianty souboru. */
/* Pozor na název: `.znacka` už patří značkám na fotkách v galerii
   (srdíčko a výběr) a ta je absolutně pozicovaná — logo by se z toho
   smrsklo na nulu. Proto vlastní předpona.

   Šířku dopočítá poměr z viewBoxu, `flex: none` brání smrštění
   v pružném řádku navigace. */
.cf-logo {
  display: block;
  height: 32px;
  width: auto;
  flex: none;
  aspect-ratio: 1237.654 / 252.902;
}

.nav__logo { display: inline-flex; align-items: center; flex: none; padding: 4px 0; }
.footer__logo { display: inline-flex; }
.footer__logo .cf-logo { height: 29px; }

.okno__logo img { display: block; height: 18px; width: auto; }

.tri__bod .tri__znak--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 768px) {
  .cf-logo { height: 26px; }
}

/* Skupina lidí ve filtrech: kolečko s výřezem obličeje z existující fotky. */
.filtr--clovek { padding-left: 6px; }

.filtr__tvar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--ivory-2, #EEE);
  background-repeat: no-repeat;
  flex: none;
}

.filtr__delic {
  width: 1px;
  align-self: stretch;
  margin: 4px 6px;
  background: var(--line);
}

/* ---------- dotykové cíle ----------

   Na myš stačí odkaz vysoký jako řádek textu. Prst je hrubší nástroj,
   takže samostatné odkazy (ne ty uvnitř odstavce, tam by rozházely
   řádkování) dostanou na dotykových obrazovkách vyšší plochu. */
@media (pointer: coarse) {
  .nav__logo { padding: 12px 0; }
  .ukazka-app__odkaz,
  .pravni__zpet a,
  .powered__pravni a,
  .entry__zpet {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}