/* ==========================================================================
   Svatební web — Martin & Michaela
   Světlý béžový směr, hero varianta B, mobile-first
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Proměnné
   -------------------------------------------------------------------------- */
:root {
  /* Barvy — světlá teplá paleta (hnědá jen pro text a linky) */
  --color-cream: #FAF7F1;       /* dominantní pozadí */
  --color-beige: #F1E9DC;       /* tmavší pásy sekcí */
  --color-sand: #E3D5BE;        /* linky, RSVP pás */
  --color-caramel: #B08D5F;     /* akcent: tlačítka, linky, & */
  --color-caramel-dark: #8A6A42;/* text na světlém v akcentní roli, hover */
  --color-text: #3E3630;        /* hlavní text */
  --color-text-soft: #8A7A6A;   /* vedlejší text */
  --color-on-caramel: #FFFDF8;  /* text na karamelové */
  --color-mocca: #2E2620;       /* nejtmavší tón — patička, overlay finále */

  /* Typografie */
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", system-ui, sans-serif;

  /* Mezery — mobil; na desktopu se zvětší přes media query */
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 24px;
  --space-section: 56px;   /* běžná sekce */
  --space-section-l: 72px; /* zvýrazněná sekce (Program, RSVP) */

  --content-width: 680px;
}

@media (min-width: 1000px) {
  :root {
    --space-section: 96px;
    --space-section-l: 120px;
  }
}

/* --------------------------------------------------------------------------
   2. Základ
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  /* Rezervuje místo pro scrollbar i ve chvíli, kdy je overflow:hidden
     (scroll-lock během intra) — bez toho scrollbar při odemčení
     zmenší dostupnou šířku a hero se viditelně posune (layout shift).
     Fallback pro prohlížeče bez podpory řeší script.js (padding-right
     na body, jen pokud tato vlastnost není podporovaná). */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-cream);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}

.amp {
  font-style: italic;
  color: var(--color-caramel);
}

/* Tenká akcentní linka */
.rule {
  width: 40px;
  height: 1px;
  background: var(--color-caramel);
  margin: var(--space-s) 0;
}

/* --------------------------------------------------------------------------
   2b. Úvodní přechod — litery "M & M" jako rostoucí díra do stránky
   Zobrazuje se při každém příchodu na web. JEDNA implementace, jeden
   princip — žádné další vrstvy nebo alternativní varianty vedle sebe.

   GEOMETRIE — jeden zdroj pravdy:
   Celé intro je JEDNO SVG bez viewBoxu (.intro-svg), takže 1 SVG
   jednotka = vždy přesně 1 CSS pixel. Tvar "M & M" existuje v
   dokumentu JEDNOU (#introLogoShape, v <defs>, nevykreslený sám
   o sobě) a je použit JEDNÍM <use> (#introMaskUse) jako skutečná díra
   uvnitř masky — žádná viditelná "tmavá" kopie. M&M je transparentní
   otvor už od úplně prvního snímku.

   DŮLEŽITÉ: transformace (scale) se ZDE NEANIMUJE přes CSS a neběží
   na sdíleném #introLogoShape — script.js na každém animačním snímku
   spočítá JEDNU hodnotu progress a z ní sestaví JEDEN řetězec SVG
   transformace (translate → scale → translate zpět, střed spočtený
   z getBoundingClientRect() JEDNOU před startem), který nastaví na
   #introMaskUse. Je to tedy deterministická SVG transformace, ne
   odhad přes CSS transform-origin.

   PANEL A DÍRA:
   #introPanelRect (bílý = neprůhledný, s SVG atributem mask="…")
   trvale kryje celou plochu masky (rect 0,0,100%,100%) — nikdy se
   needituje. #introMaskUse je JEDINÁ skutečná díra — jen fill, žádný
   stroke, žádná dilatace, žádný filtr. Naprostou většinu animace
   odkrývá čistě rostoucí scale. Zbylé procenty vyřeší jediná opacity
   změna na celém #intro (viz script.js, sekce 0) — nejlevnější možná
   operace pro prohlížeč, žádné další maskovací výpočty.

   Přesné časování viz komentáře v script.js, sekce 0. -------------------------------------------------------------------------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100; /* nad navigací (60) i mobilním menu (50) */
}

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

#introPanelRect {
  fill: var(--color-cream);
}

#introLogoShape {
  font-family: var(--font-heading);
  font-size: clamp(44px, 10vw, 100px);
}

#introMaskUse {
  fill: #000; /* v masce = díra, bez ohledu na to, co dědí .intro-svg */
}

/* Dokud intro běží: stránka nescrolluje a navigace/hero text/scroll-cue
   jsou schované — jinak by je rostoucí díra prozradila dřív, než má. */
body.intro-running {
  overflow: hidden;
}

body.intro-running .nav,
body.intro-running .hero-text,
body.intro-running .scroll-cue {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nav,
.hero-text,
.scroll-cue {
  transition: opacity .45s ease;
}

/* Bezpečný fallback: chybí-li podpora CSS masky nebo je-li povoleno
   omezení pohybu, script.js smyčku requestAnimationFrame vůbec
   nespustí (viz sekce 0) — stačí tedy celý panel krátce prolnout. */
#intro.intro-simple {
  transition: opacity .4s ease;
}

#intro.intro-simple.intro-go {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .intro {
    transition: opacity .4s ease;
  }

  .intro.intro-go {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   3. Navigace
   -------------------------------------------------------------------------- */
.header {
  position: relative;
}

/* Navigace leží PŘES fotku (průhledná), ne nad ní.
   z-index musí být NAD otevřeným menu (50), jinak by křížek
   hamburgeru nešel zmáčknout — nav tvoří vlastní stacking context */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  background: transparent;
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-on-caramel); /* leží na fotce s tmavým pruhem */
  text-decoration: none;
  letter-spacing: .08em;
  transition: color .3s;
}

/* Při otevřeném menu je logo na krémové — ztmavne */
body.menu-otevrene .nav-logo {
  color: var(--color-text);
}

.nav-links {
  display: none; /* na mobilu navigaci obsluhuje hamburger menu */
}

.nav-links a {
  color: var(--color-on-caramel);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 4px 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.active {
  border-bottom-color: var(--color-sand); /* .active = kapitola na obrazovce */
}

/* --------------------------------------------------------------------------
   3b. Mobilní menu — hamburger + celoobrazovkové kapitoly
   -------------------------------------------------------------------------- */
.nav-burger {
  display: none; /* zobrazuje se jen na mobilu */
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 60; /* nad otevřeným menu, aby šlo zavřít */
}

.nav-burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--color-on-caramel);
  transition: transform .5s ease, background .3s ease, opacity .4s ease;
}

/* Otevřeno: čárky se zkříží a ztmavnou (leží na krémovém menu) */
.nav-burger.open span {
  background: var(--color-text);
}

.nav-burger.open span:first-child {
  transform: translateY(4.25px) rotate(45deg);
}

.nav-burger.open span:last-child {
  transform: translateY(-4.25px) rotate(-45deg);
}

/* Levitující karta: odsazená od krajů, zaoblená, poloprůsvitná
   s rozmazáním pozadí (frosted glass) — stránka za ní jemně prosvítá */
.menu {
  position: fixed;
  inset: 12px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-m);
  border-radius: 20px;
  background: rgba(250, 247, 241, .8);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(227, 213, 190, .7);
  opacity: 0;
  transform: translateY(10px) scale(.985);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.22, .8, .3, 1);
}

.menu.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
}

.menu-links a {
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--color-text);
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease, color .2s;
}

.menu-links a:hover,
.menu-links a:focus-visible {
  color: var(--color-caramel-dark);
}

/* Kapitoly se vynoří postupně — stejný rukopis jako reveal při scrollu.
   Zpoždění platí jen při otevírání; zavření proběhne naráz. */
.menu.open .menu-links a {
  opacity: 1;
  transform: none;
}

.menu.open .menu-links a:nth-child(2) { transition-delay: .05s; }
.menu.open .menu-links a:nth-child(3) { transition-delay: .10s; }
.menu.open .menu-links a:nth-child(4) { transition-delay: .15s; }
.menu.open .menu-links a:nth-child(5) { transition-delay: .20s; }

.menu-meta {
  margin: var(--space-m) 0 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  opacity: 0;
  transition: opacity .45s ease .28s;
}

.menu.open .menu-meta {
  opacity: 1;
}

@media (max-width: 999px) {
  .nav-burger {
    display: flex;
    /* Fixed vůči viewportu, aby zůstal dostupný i při scrollu (jinak
       by odscrolloval pryč spolu s .nav, který je jen position:absolute
       v rámci .header). Ani .header, ani .nav nemají transform/filter/
       perspective/will-change, takže containing block pro fixed je
       čistě viewport — žádný obchvat struktury není potřeba.
       top/right kopírují původní vizuální pozici danou paddingem .nav
       (--space-s / --space-m), navíc s odsazením o safe-area (notch /
       dynamic island). Zůstává potomkem .nav, takže ho beze změny dál
       schovává body.intro-running .nav (opacity/visibility) a dál je
       nad .menu díky stávající stacking-context hierarchii (.nav: 60
       > .menu: 50) — z-index samotného tlačítka měnit nebylo potřeba. */
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--space-s));
    right: calc(env(safe-area-inset-right, 0px) + var(--space-m));
  }
}

@media (min-width: 700px) {
  .nav-links {
    display: flex;
    gap: var(--space-m);
  }
}

/* --------------------------------------------------------------------------
   4. Hero — fotografie přes celou obrazovku, text položený na ní
   Mobil: portrétní fotka (hero-mobile.jpg), text v dolní třetině.
   Desktop: široká fotka, text vlevo uprostřed.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh;  /* fallback */
  height: 100svh;
}

.hero-photo {
  position: absolute;
  inset: 0;
  overflow: hidden; /* ořízne zvětšenou fotku při parallaxu */
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
  display: block;
  /* Bez CSS tonace — barevnost se ladí přímo ve zdrojových fotkách */
}

@media (max-width: 999px) {
  /* Mobilní fotka je komponovaná pro tento formát (rozšířená dolů),
     stačí ji vystředit na vás dva */
  .hero-photo img {
    object-position: 42% 50%;
  }
}

/* Mobil: nahoře tenký pruh pod navigací; dolní polovina se plynule
   rozpouští do béžové — text je tmavý na světlém a hero přeteče
   přímo do béžového prologu (jeden souvislý tón, žádná černá) */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(62, 54, 48, .25) 0, rgba(62, 54, 48, 0) 110px),
    linear-gradient(180deg,
      rgba(241, 233, 220, 0) 44%,
      rgba(241, 233, 220, .55) 62%,
      rgba(241, 233, 220, .88) 80%,
      var(--color-beige) 100%);
}

.hero-text {
  position: relative;
  z-index: 1;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* mobil: text kotvený dole nad gradientem */
  align-items: flex-start;
  text-align: left;
  padding: 0 var(--space-m) 12vh;
}

/* Mobil: text tmavý na světlém rozpuštění do béžové */
.hero-text h1,
.hero-text .date {
  color: var(--color-text);
}

.hero-text .amp {
  color: var(--color-caramel);
}

.hero-text .place {
  color: var(--color-text-soft);
}

h1 {
  /* Mobil: jména výrazná (~15 % šířky displeje), desktop strop 93 px */
  font-size: clamp(48px, 15vw, 93px);
}

.date {
  /* Mobil: datum jako caps popisek systému (na fotce) */
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0;
}

.place {
  font-size: 14px;
  font-weight: 300;
  margin: 6px 0 0;
}

@media (min-width: 1000px) {
  /* Desktop — fotografie je pozadím CELÉHO hero (od kraje ke kraji,
     od horního okraje stránky; navigace na ní opticky leží).
     Text není vedlejší sloupec, ale vrstva položená přes fotku vlevo;
     čitelnost zajišťuje krémový overlay, který fotku překrývá. */
  .hero {
    height: 100vh;  /* fallback */
    height: 100svh; /* fotka přes celou obrazovku */
  }

  /* Jen rozdíly proti mobilu: užší blok, svislé centrování, levý okraj */
  .hero-text {
    max-width: 640px;
    justify-content: center;
    padding: var(--space-m) var(--space-m) var(--space-m) 6%;
  }

  .hero-photo img {
    /* Široká fotka: na 16:9 se nezoomuje vůbec; při mírném svislém
       ořezu (nižší okna) držíme horní část s fasádami (40 %) */
    object-position: 50% 40%;
  }

  /* Tři vrstvy overlaye:
     1. tenký tmavý pruh nahoře pod navigací (zůstává),
     2. velmi jemný teplý „stín" vlevo — hnědo-béžový, ~20 % → 0 %
        s dlouhým přechodem do středu; jen sjednocuje zeď pod textem,
     3. spodních ~180 px se rozpouští do krémové další sekce. */
  .hero-photo::after {
    background:
      linear-gradient(180deg, rgba(62, 54, 48, .30) 0, rgba(62, 54, 48, 0) 140px),
      linear-gradient(90deg,
        rgba(110, 91, 69, .20) 0%,
        rgba(110, 91, 69, .12) 22%,
        rgba(110, 91, 69, .05) 38%,
        rgba(110, 91, 69, 0) 52%),
      linear-gradient(180deg,
        rgba(241, 233, 220, 0) calc(100% - 150px),
        rgba(241, 233, 220, .25) calc(100% - 60px),
        rgba(241, 233, 220, .78) calc(100% - 12px),
        var(--color-beige) 100%);
  }

  /* Desktop: stejný caps popisek jako mobil, jen o chlup větší —
     jeden obsah, jeden styl */
  .hero-text .date {
    font-size: 15px;
  }

  .hero-text .place {
    font-size: 16px;
  }

  /* Desktop: text leží na ztmavené zdi — světlé tóny */
  .hero-text h1,
  .hero-text .date {
    color: #F7F2EA;
  }

  .hero-text .amp,
  .hero-text .place {
    color: var(--color-sand);
  }

}

/* --------------------------------------------------------------------------
   5. Sekce — společné
   -------------------------------------------------------------------------- */
.section {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-section) var(--space-m);
}

.section.roomy {
  padding-top: var(--space-section-l);
  padding-bottom: var(--space-section-l);
}

.section p {
  text-align: center;
  color: var(--color-text-soft);
}

/* Tmavší pásy přes celou šířku — rytmus stránky */
.band {
  background: var(--color-beige);
}

/* Pískový akcent — emoční vrchol světlé části (Dary) */
.band-sand {
  background: var(--color-sand);
}

/* --------------------------------------------------------------------------
   6. Scroll-cue v hero (jen desktop — na mobilu je text hned pod fotkou)
   -------------------------------------------------------------------------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-m);
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--color-on-caramel);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.scroll-cue::after {
  content: "";
  width: 1px;
  height: 44px;
  background: rgba(255, 253, 248, .7);
}

/* Pomalý „dech" — jediný pohyblivý prvek klidného hero */
@keyframes dych {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.scroll-cue {
  animation: dych 2.6s ease-in-out infinite;
}

@media (min-width: 1000px) {
  .scroll-cue {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   7. Prolog — osobní věta pod hero
   -------------------------------------------------------------------------- */
.prolog {
  /* Nejsvětlejší písková ze stávající palety — fotka hero se rozpouští
     přímo do ní, žádná bílá */
  background: var(--color-beige);
  padding: var(--space-section-l) var(--space-m);
  text-align: center;
}

.prolog-line {
  /* Hlas L — stejná velikost jako citát v Darech (jeden rukopis) */
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.5;
  max-width: 620px;
  margin: 0 auto var(--space-m);
}

.prolog-meta {
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. Kapitoly — štítek s vláskovou linkou
   -------------------------------------------------------------------------- */
h2.chapter-label {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .22em; /* Popisek L — jednotný proklad kapitol */
  text-transform: uppercase;
  color: var(--color-caramel-dark);
  text-align: left;
  margin: 0 0 var(--space-m);
}

h2.chapter-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-sand);
  margin: 0;
}

/* Na pískovém pozadí by písková linka zanikla */
.band-sand h2.chapter-label::after {
  background: rgba(138, 106, 66, .28);
}

/* --------------------------------------------------------------------------
   9. Program — „menu dne"
   -------------------------------------------------------------------------- */
.menu-dne {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 520px; /* záměrně vlevo, ne centrované — editorial asymetrie */
}

.menu-dne li {
  display: flex;
  align-items: baseline;
  gap: var(--space-m);
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--color-sand);
}

.menu-dne li:last-child {
  border-bottom: none;
}

.menu-dne .time {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--color-caramel);
  min-width: 76px;
  text-align: right;
}

.menu-dne .event {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10. Předěl — fotografie přes celou šířku
   -------------------------------------------------------------------------- */
.predel {
  position: relative;
  height: 55vh;  /* fallback */
  height: 55svh;
  overflow: hidden; /* ořízne zvětšenou fotku při parallaxu */
}

.predel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Držet spodní část záběru (ovce) při jakémkoli poměru okna */
  object-position: 50% 85%;
  display: block;
}


/* --------------------------------------------------------------------------
   11. Kapitola Místo — sticky foto vlevo, obsah vpravo (desktop)
   -------------------------------------------------------------------------- */
.chapter-misto {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-section) var(--space-m);
}

.misto-media {
  order: 2; /* mobil: fotka až pod textem — velký obraz už má předěl */
  margin-top: var(--space-m);
}

.misto-media img {
  width: 100%;
  height: auto;
  display: block;
  /* Rezervuje prostor předem (skutečný poměr fotky) — bez toho by se
     stránka po načtení obrázku posunula (layout shift). */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Rozklikávací galerie místa — stejný princip jako otázky (details) */
.galerie summary {
  cursor: pointer;
  list-style: none; /* schová výchozí šipku */
}

.galerie summary::-webkit-details-marker {
  display: none;
}

.galerie-hint {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 2px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-caramel-dark);
  border-bottom: 1px solid var(--color-sand);
}

.galerie-plus {
  font-size: 20px;
  color: var(--color-caramel);
  transition: transform .2s;
}

.galerie[open] .galerie-plus {
  transform: rotate(45deg); /* z + se stane × */
}

.galerie-grid {
  display: grid;
  /* minmax(0, …) — sloupce se smí zmenšit pod přirozenou šířku fotek;
     bez toho velké fotky roztáhnou celý layout */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: var(--space-s);
  /* Plynulé rozbalení/sbalení — výšku animuje script.js */
  overflow: hidden;
  transition: max-height .6s ease, opacity .6s ease;
}

.galerie-grid img {
  width: 100%;
  height: auto;
  display: block;
  /* 4:3 na šířku — blízko přirozenému formátu fotek z telefonu,
     ořezává minimálně a dvojice vedle sebe působí klidně */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s ease;
}

/* Jemné přiblížení fotky pod kurzorem */
.galerie-grid img:hover {
  transform: scale(1.02);
}

/* Decentní focus místo modrého rámečku prohlížeče */
.galerie summary:focus-visible {
  outline: 1px solid var(--color-caramel);
  outline-offset: 4px;
}

/* Tichá varianta galerie v řádcích seznamu (ubytování) —
   jen drobný textový spouštěč, žádná linka ani velký akcent */
.galerie-radek .galerie-hint {
  justify-content: flex-start;
  gap: var(--space-xs);
  padding: 6px 0 0;
  font-size: 11px;
  color: var(--color-text-soft);
  border-bottom: none;
}

.galerie-radek .galerie-plus {
  font-size: 16px;
}

.galerie-radek .galerie-grid {
  max-width: 560px; /* fotky ubytování nemají zabrat celý sloupec */
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.misto-title {
  font-size: clamp(32px, 5vw, 52px);
  margin: 0 0 var(--space-s);
}

/* Atmosférický úvod — osobní hlas */
.misto-atmo {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-text-soft);
  margin: 0;
}

/* Vláskový seznam praktických údajů */
.misto-list {
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: 0;
}

.misto-list li {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--color-sand);
  font-size: 15px;
}

.misto-list li:last-child {
  border-bottom: none;
}

.misto-list .k {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  padding-top: 3px;
}

/* Textový odkaz s podtržením — nahrazuje tlačítka uvnitř obsahu */
.text-link {
  position: relative;
  display: inline-block;
  margin-top: var(--space-m);
  color: var(--color-caramel-dark);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-sand);
  padding-bottom: 4px;
  transition: color .2s;
}

/* Podtržení, které se při najetí vykreslí zleva */
.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--color-text);
  transition: width .35s ease;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--color-text);
}

.text-link:hover::after,
.text-link:focus-visible::after {
  width: 100%;
}

/* Menší varianta odkazu uvnitř řádků seznamu */
.text-link-maly {
  margin-top: var(--space-xs);
  font-size: 11px;
}

/* Podkapitola (Ubytování) */
h3.sub-label {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin: 48px 0 var(--space-xs);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .22em; /* Popisek S — o stupeň tišší než kapitola */
  text-transform: uppercase;
  color: var(--color-text-soft);
}

h3.sub-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-sand);
}

@media (min-width: 1000px) {
  .chapter-misto {
    display: grid;
    /* minmax(0, …) chrání sloupce před roztažením velkými fotkami */
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 7%;
    align-items: start;
    padding-top: var(--space-section-l);
    padding-bottom: var(--space-section-l);
  }

  .misto-media {
    order: 0;
    margin-top: 0;
    position: sticky;
    top: var(--space-m); /* fotka „drží", zatímco obsah vedle scrolluje */
  }
}

/* --------------------------------------------------------------------------
   12. Mezihra — obří citát s duchem monogramu & (Dary)
   -------------------------------------------------------------------------- */
.mezihra {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-section-l) var(--space-m);
  text-align: center;
}

.mezihra-amp {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  z-index: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(260px, 38vw, 520px);
  line-height: 1;
  color: var(--color-beige); /* duch — o odstín světlejší než pískové pozadí */
  pointer-events: none;
  user-select: none;
}

.mezihra-quote {
  position: relative;
  z-index: 1;
  margin: 0;
}

.mezihra-quote p {
  /* Hlas L — shodný s prologem */
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.5;
  max-width: 640px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   13. Co na sebe — paleta jako pás pruhů přes celou šířku
   -------------------------------------------------------------------------- */
.dresscode-line {
  text-align: left;
  max-width: 520px;
  margin: 0;
}

.palette {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
}

.palette li {
  flex: 1;
  height: 100px; /* vzorník, ne banner — nesmí soupeřit s akcentem Darů */
  background: var(--c);
  position: relative;
}

.palette li span {
  position: absolute;
  left: 50%;
  bottom: var(--space-s);
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t);
  white-space: nowrap;
}

@media (min-width: 700px) {
  .palette li {
    height: 140px;
  }
}

/* --------------------------------------------------------------------------
   14. Dobré vědět — otevřené otázky, na desktopu dva sloupce
   -------------------------------------------------------------------------- */
.dobre-vedet {
  max-width: 900px;
}

.qa-grid {
  display: grid;
  gap: 0 48px;
}

@media (min-width: 700px) {
  .qa-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.faq-item {
  border-bottom: 1px solid var(--color-sand);
}

.faq-item summary {
  cursor: pointer;
  font-family: var(--font-heading); /* otázky serifem — hlas hosta */
  font-size: 20px;
  font-weight: 400;
  padding: var(--space-s) 0;
  list-style: none; /* schová výchozí šipku */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 22px;
  color: var(--color-caramel);
  transition: transform .2s;
}

.faq-item[open] summary::after {
  transform: rotate(45deg); /* z + se stane × */
}

.faq-item summary:hover {
  color: var(--color-caramel-dark);
}

.faq-item p {
  text-align: left;
  margin: 0 0 var(--space-s);
}

/* --------------------------------------------------------------------------
   15. Finále — „Těšíme se na vás" přes celoobrazovkovou fotografii
   -------------------------------------------------------------------------- */
.finale {
  position: relative;
  overflow: hidden; /* ořízne zvětšenou fotku při parallaxu */
  min-height: 88vh;  /* fallback */
  min-height: 88svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-section) var(--space-m);
  box-sizing: border-box;
}

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

/* Teplé ztmavení — dole silnější, plynule naváže na mocca patičku */
.finale::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(46, 38, 32, .42) 0%,
              rgba(46, 38, 32, .62) 100%);
}

.finale-content {
  position: relative;
  z-index: 1;
}

.finale-title {
  /* Emocionální podpis webu — kurzíva uzavírá hlas z prologu a Darů */
  font-style: italic;
  font-size: clamp(40px, 7vw, 88px);
  color: var(--color-on-caramel);
  margin: 0 0 var(--space-m);
}

.finale-amp {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  color: var(--color-caramel);
  margin: 0 0 var(--space-s);
}

.finale-names {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--color-on-caramel);
  margin: 0;
}

.finale-meta {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin: var(--space-xs) 0 0;
}

/* --------------------------------------------------------------------------
   16. Animace — decentní, „neviditelné"
   -------------------------------------------------------------------------- */
/* Vstup obsahu hero po načtení (čisté CSS, postupné zpoždění řádků) */
@keyframes vstup {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Klidový stav (odpovídá 0 % klíčového snímku "vstup") — animace se
   spustí až přidáním body.hero-enter (script.js, po dokončení intra).
   Bez tohoto gatování by časová osa animace běžela od načtení
   stránky, tedy NEVIDITELNĚ během celého intra, a po jeho skončení
   by byla už z velké části (nebo úplně) odehraná. */
.hero-text > * {
  opacity: 0;
  transform: translateY(16px);
}

body.hero-enter .hero-text > * {
  animation: vstup .8s ease-out both;
}

body.hero-enter .hero-text > *:nth-child(2) { animation-delay: .08s; }
body.hero-enter .hero-text > *:nth-child(3) { animation-delay: .16s; }
body.hero-enter .hero-text > *:nth-child(4) { animation-delay: .24s; }
body.hero-enter .hero-text > *:nth-child(5) { animation-delay: .32s; }
body.hero-enter .hero-text > *:nth-child(6) { animation-delay: .40s; }

/* Odhalování při scrollu — třídu .reveal přiděluje script.js.
   Bez JavaScriptu třída neexistuje, obsah je normálně viditelný. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Parallax fotek řídí script.js — prohlížeči předem hlásíme změny */
.hero-photo img,
.predel img,
.finale-photo {
  will-change: transform;
}

/* Respekt k systémovému omezení pohybu */
@media (prefers-reduced-motion: reduce) {
  .hero-text > * {
    /* Základní stav teď má opacity:0 (viz výše, čeká na .hero-enter) —
       bez animace by tak zůstal navždy; zde ho vracíme na viditelný. */
    opacity: 1;
    transform: none;
    animation: none;
  }

  .scroll-cue {
    animation: none;
  }

  .galerie-grid img:hover {
    transform: none;
  }

  .menu,
  .menu-links a,
  .menu-meta {
    transition: none;
    transform: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}