/* ============================================================
   Svatební web · svatba.bramborovo.cz
   App-like design: full-screen karty + scroll snapping
   Paleta: 12 barev z paleta_barev.jpg — všechny jsou použité.
   ============================================================ */

:root {
  /* --- paleta (řádky odpovídají obrázku) --- */
  --pudrova:        #ffeeec;
  --kremova:        #f3e0da;
  --kakaova:        #d0ac9e;
  --sv-ruzova:      #fed2e1;
  --ruzova:         #f9c4d6;
  --staroruzova:    #e49eb6;
  --levandulova:    #efdbf4;
  --blankytna:      #bde2f2;
  --holubici-modra: #a4cedc;
  --vanilkova:      #fcecc8;
  --matova:         #d0e8ce;
  --salvejova:      #bccfb9;

  /* --- odvozené tmavší tóny pro text (čitelnost) --- */
  --inkoust:        #5d4a42;
  --inkoust-ruzovy: #a25d78;
  --inkoust-modry:  #4f7686;
  --inkoust-zeleny: #64775f;

  --pismo-nadpis: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --pismo-text: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --pismo-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;   /* scroluje jen kontejner karet */
}

body {
  font-family: var(--pismo-text);
  color: var(--inkoust);
  background: var(--pudrova);
  line-height: 1.56;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- přepínání fází: prvky jiné fáze se nerenderují --- */
[data-jen] { display: none !important; }
body[data-faze="pred"]  [data-jen="pred"],
body[data-faze="behem"] [data-jen="behem"],
body[data-faze="po"]    [data-jen="po"] { display: revert !important; }

/* karty aktivní fáze musí být flex (kvůli centrování obsahu) */
body[data-faze="pred"]  section[data-jen="pred"],
body[data-faze="behem"] section[data-jen="behem"],
body[data-faze="po"]    section[data-jen="po"] { display: flex !important; }

/* odpočet potřebuje inline-flex (revert výše by dal blokový div) */
body[data-faze="pred"] .odpocet { display: inline-flex !important; }

/* ============================================================
   TELEFON — na mobilu celá obrazovka, na desktopu mockup
   ============================================================ */
.telefon {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(180deg, var(--pudrova), #fff);
}

@media (min-width: 720px) {
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(ellipse 55% 45% at 18% 20%, var(--levandulova) 0%, transparent 70%),
      radial-gradient(ellipse 55% 45% at 82% 25%, var(--blankytna) 0%, transparent 70%),
      radial-gradient(ellipse 60% 50% at 50% 90%, var(--sv-ruzova) 0%, transparent 70%),
      linear-gradient(180deg, var(--pudrova), var(--kremova));
  }

  .telefon {
    width: 400px;
    height: min(860px, 94vh);
    height: min(860px, 94dvh);
    border-radius: 44px;
    border: 10px solid var(--inkoust);
    box-shadow: 0 30px 80px rgba(93, 74, 66, 0.35);
  }
}

/* ============================================================
   KARTY — každá přes celý viewport, scroll snapping
   ============================================================ */
.karty {
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  /* skrytý scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.karty::-webkit-scrollbar { display: none; }

.karta {
  height: 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;   /* jedno švihnutí = jedna karta */
  display: flex;
  align-items: center;
  justify-content: center;
  /* vlevo o něco víc místa kvůli tečkám boční navigace */
  padding: 1.5rem 1.5rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem) 1.7rem;
}

.karta-obsah {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  max-width: 340px;
  max-height: 100%;
  min-height: 0;
  text-align: center;
}

/* --- pastelová témata karet (paleta napříč celým webem) --- */
.karta-uvod     { background: radial-gradient(ellipse 90% 65% at 50% 12%, var(--sv-ruzova) 0%, transparent 75%), linear-gradient(180deg, var(--pudrova), #fff); }
.karta-kde      { background: radial-gradient(ellipse 85% 55% at 50% 18%, color-mix(in srgb, var(--blankytna) 68%, #fff) 0%, transparent 74%), linear-gradient(180deg, var(--pudrova), #fff 88%); }
.karta-program  { background: linear-gradient(180deg, var(--levandulova), #fff 85%); }
.karta-paleta   { background: linear-gradient(180deg, var(--kremova), #fff 80%); }
.karta-rsvp     { background: linear-gradient(180deg, var(--vanilkova), #fff 85%); }
.karta-foto     { background: linear-gradient(180deg, var(--blankytna), #fff 85%); }
.karta-kontakty { background: linear-gradient(180deg, var(--levandulova), #fff 85%); }
.karta-dekujeme { background: radial-gradient(ellipse 90% 65% at 50% 12%, var(--sv-ruzova) 0%, transparent 75%), linear-gradient(180deg, var(--pudrova), #fff); }
.karta-galerie  { background: linear-gradient(180deg, var(--matova), #fff 85%); }

/* ============================================================
   TYPOGRAFIE
   ============================================================ */
h2 {
  font-family: var(--pismo-nadpis);
  font-size: clamp(1.7rem, 6.8vw, 2.15rem);
  font-weight: 400;
  line-height: 1.08;
}

h2::after {
  content: "";
  display: block;
  height: 4px;
  border-radius: 2px;
  margin: 0.4rem auto 0;
  width: 64%;
  background: linear-gradient(90deg, var(--ruzova), var(--levandulova), var(--blankytna));
}

.karta-uvodni { font-size: 1rem; line-height: 1.6; }
.karta-pozn   { font-size: 0.86rem; color: var(--kakaova); line-height: 1.55; }
.mini-pata    { font-size: 0.76rem; color: var(--kakaova); margin-top: 0.4rem; letter-spacing: 0.02em; }

/* ============================================================
   KARTA KDY & KDE
   ============================================================ */
.karta-kde-obsah {
  gap: 1.05rem;
}

.misto-karta {
  width: 100%;
  padding: 0.7rem 0.5rem 0.35rem;
}

.misto-den {
  font-family: var(--pismo-ui);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--inkoust-ruzovy);
}

.misto-datum {
  margin-top: 0.25rem;
  font-size: clamp(2.15rem, 10vw, 3.05rem);
  line-height: 1;
  color: var(--inkoust);
}

.misto-linka {
  width: 46%;
  height: 1px;
  margin: 1.1rem auto 0.95rem;
  background: linear-gradient(90deg, transparent, var(--kakaova), transparent);
}

.misto-nazev {
  font-size: 1.22rem;
  line-height: 1.25;
}

.misto-detail {
  margin-top: 0.15rem;
  color: var(--inkoust-modry);
  font-size: 0.98rem;
}

.misto-casy {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 0.2rem;
}

.misto-casy div {
  position: relative;
  padding: 0.25rem 0.7rem 0.15rem;
}

.misto-casy div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  width: 1px;
  height: 80%;
  background: linear-gradient(180deg, transparent, var(--holubici-modra), transparent);
}

.misto-casy span {
  display: block;
  font-family: var(--pismo-ui);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--inkoust-modry);
}

.misto-casy strong {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--pismo-nadpis);
  font-size: 1.15rem;
  font-weight: 400;
}

/* ============================================================
   ÚVODNÍ KARTA
   ============================================================ */
.hero-holubice svg { width: min(210px, 55vw); height: auto; }

.hero-predtitulek {
  font-family: var(--pismo-ui);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--inkoust-ruzovy);
}

.hero-jmena {
  font-family: var(--pismo-nadpis);
  font-size: clamp(2.25rem, 10vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
}

.hero-jmena .amp {
  color: var(--staroruzova);
  font-style: italic;
  padding: 0 0.1em;
}

.hero-datum { font-size: 1.08rem; letter-spacing: 0.06em; line-height: 1.45; }
.hero-vyzva { color: var(--inkoust-ruzovy); font-size: 1rem; line-height: 1.55; }

/* --- odpočet: jemná kapsle s vlasovými předěly (bez krabiček) --- */
.odpocet {
  display: inline-flex;
  align-items: baseline;
  padding: 0.6rem 0.4rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 22px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--staroruzova) 14%, transparent);
}

.odpocet-pole {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.95rem;
}

/* vlasový svislý předěl mezi skupinami */
.odpocet-pole + .odpocet-pole::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  height: 76%;
  width: 1px;
  background: color-mix(in srgb, var(--kakaova) 28%, transparent);
}

.odpocet-pole span {
  font-family: var(--pismo-nadpis);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--inkoust-ruzovy);
  font-variant-numeric: tabular-nums;
}

.odpocet-pole small {
  font-family: var(--pismo-ui);
  margin-top: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.55rem;
  color: var(--kakaova);
}

/* --- nápověda swipe --- */
.swipe-napoveda {
  font-family: var(--pismo-ui);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  color: var(--kakaova);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  animation: nadskocit 2.2s ease-in-out infinite;
}

@keyframes nadskocit {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(-7px); opacity: 1; }
}

/* ============================================================
   BUBLINY (karty obsahu) A TLAČÍTKA
   ============================================================ */
.bublina {
  width: 100%;
  background: #fff;
  border-radius: 24px;
  padding: 1rem 1.2rem;
  box-shadow: 0 8px 24px rgba(93, 74, 66, 0.10);
  border: 2px solid transparent;
}

.bublina h3 {
  font-family: var(--pismo-nadpis);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.15;
}

.bublina-velke { font-size: 1.24rem; font-weight: 400; margin: 0.15rem 0; line-height: 1.25; }

.bublina-ruzova      { background: var(--sv-ruzova);   border-color: var(--ruzova); }
.bublina-modra       { background: #fff;               border-color: var(--holubici-modra); color: var(--inkoust-modry); }
.bublina-zelena      { background: var(--matova);      border-color: var(--salvejova); color: var(--inkoust-zeleny); }
.bublina-levandulova { background: var(--levandulova); border-color: var(--staroruzova); }
.bublina-vanilkova   { background: var(--vanilkova);   border-color: var(--kakaova); }

.tlacitko {
  font-family: var(--pismo-ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.7rem 2rem;
  background: linear-gradient(135deg, var(--ruzova), var(--staroruzova));
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 999px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--staroruzova) 45%, transparent);
  transition: transform 0.15s, box-shadow 0.15s;
}

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

.tlacitko-mensi { min-height: 44px; padding: 0.4rem 1.4rem; font-size: 0.9rem; margin-top: 0.4rem; }

/* ============================================================
   PROGRAM (časová osa)
   ============================================================ */
.program {
  list-style: none;
  width: 100%;
  text-align: left;
  overflow: visible;
  scrollbar-width: none;
  border-radius: 20px;
}
.program::-webkit-scrollbar { display: none; }

.program li {
  display: flex;
  gap: 0.8rem;
  padding: 0.42rem 0.85rem;
  border-radius: 14px;
  align-items: baseline;
  background: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.3rem;
  box-shadow: 0 2px 8px rgba(93, 74, 66, 0.06);
}

.program-cas {
  font-family: var(--pismo-nadpis);
  font-size: 1rem;
  color: var(--inkoust-ruzovy);
  min-width: 3.1rem;
  text-align: right;
}

.program-co { font-size: 0.9rem; line-height: 1.35; }

/* zvýraznění právě probíhajícího bodu (jen během svatby) */
.program li.ted {
  background: var(--vanilkova);
  border: 2px solid var(--kakaova);
  font-weight: 600;
}

.program li.ted .program-co::after {
  content: " ← právě teď";
  color: var(--inkoust-ruzovy);
  font-size: 0.85em;
}

/* ============================================================
   PALETA / DRESS CODE
   ============================================================ */
.paleta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem 0.4rem;
  width: 100%;
}

.vzorek {
  font-family: var(--pismo-ui);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.68rem;
}

.vzorek::before {
  content: "";
  width: clamp(44px, 13vw, 58px);
  height: clamp(44px, 13vw, 58px);
  border-radius: 50%;
  background: var(--b);
  border: 2px solid color-mix(in srgb, var(--b) 70%, var(--inkoust));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--b) 60%, transparent);
}

/* ============================================================
   BOČNÍ NAVIGACE — nenápadné svislé tečky (page indicator)
   Primární ovládání je swipe/scroll; tečky jen ukazují pozici
   a umožňují skok. Tečka = pseudoprvek, <a> nese větší dotykovou
   plochu.
   ============================================================ */
.bocni-nav {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.bocni-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;   /* dotyková plocha */
  -webkit-tap-highlight-color: transparent;
}

.bocni-nav a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kakaova) 42%, transparent);
  transition: height 0.3s ease, background 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .bocni-nav a:hover::before { background: var(--staroruzova); }
}

/* aktivní tečka se protáhne do jemné pilulky */
.bocni-nav a.aktivni::before {
  height: 20px;
  background: var(--staroruzova);
}