/* Design systém — Monika Zelená / ORIGO. Viz design-system.md pro vysvětlení. */

:root {
  /* barvy */
  --barva-pozadi: #FBF8F4;
  --barva-zlata: #C6A15B;
  --barva-zlata-svetla: #E8D9BC;
  --barva-zelena: #A9C4A5;
  --barva-zelena-tmava: #5F7A5C;
  --barva-ruzova: #E9C2CC;
  --barva-ruzova-tmava: #B06C7C;
  --barva-fialova: #D3C3E0;
  --barva-fialova-tmava: #7A5F94;
  --barva-text: #3B362F;
  --barva-text-svetly: #6B6459;
  --barva-tmava-sekce: #3F3A4A;
  --barva-bila: #FFFFFF;

  /* typografie */
  --font-kurziva: 'Dancing Script', cursive;
  --font-nadpis: 'Playfair Display', serif;
  --font-text: 'Jost', sans-serif;

  /* rozestupy a tvary */
  --radius: 20px;
  --radius-male: 10px;
  --stin: 0 14px 38px rgba(59, 54, 47, 0.11);
  --stin-jemny: 0 6px 18px rgba(59, 54, 47, 0.07);
  --sirka-textu: 760px;
}

* { box-sizing: border-box; }

.stred { text-align: center; }

body {
  margin: 0;
  background:
    radial-gradient(circle, rgba(198,161,91,0.16) 1.1px, transparent 1.6px) 0 0 / 30px 30px,
    var(--barva-pozadi);
  color: var(--barva-text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: var(--font-nadpis);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.01em;
  margin: 0 0 0.55em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.3rem; letter-spacing: 0.015em; }

.kurziva {
  font-family: var(--font-kurziva);
  color: var(--barva-zlata);
  font-weight: 700;
}

p { margin: 0 0 1em; }

.sekce {
  padding: 100px 24px;
}

.obsah {
  max-width: var(--sirka-textu);
  margin: 0 auto;
}

.paticka {
  background: var(--barva-tmava-sekce);
  color: var(--barva-zlata-svetla);
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.8;
  padding: 28px 24px;
}
.paticka a { color: var(--barva-zlata-svetla); }

.sekce--zelena { background: var(--barva-zelena); color: var(--barva-zelena-tmava); }
.sekce--ruzova { background: var(--barva-ruzova); color: var(--barva-ruzova-tmava); }
.sekce--fialova { background: var(--barva-fialova); color: var(--barva-fialova-tmava); }
.sekce--tmava { background: var(--barva-tmava-sekce); color: var(--barva-zlata-svetla); }
.sekce--tmava h1, .sekce--tmava h2 { color: var(--barva-bila); }

.tlacitko {
  display: inline-block;
  padding: 17px 40px;
  border-radius: 999px;
  background: var(--barva-fialova-tmava);
  color: var(--barva-bila);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.015em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: var(--stin);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tlacitko:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(59, 54, 47, 0.18);
}

.tlacitko--zlate {
  background: linear-gradient(180deg, #D4B06C, var(--barva-zlata));
  color: var(--barva-text);
}

.karta {
  background: var(--barva-bila);
  border-radius: var(--radius);
  padding: 34px 32px;
  box-shadow: var(--stin-jemny);
  border-top: 3px solid var(--barva-zlata-svetla);
}

.karta--zelena { background: var(--barva-zelena); color: #3D5139; }
.karta--ruzova { background: var(--barva-ruzova); color: #7D3E4E; }
.karta--fialova { background: var(--barva-fialova); color: #51406B; }
.karta--zelena h3, .karta--ruzova h3, .karta--fialova h3 { color: inherit; }
.karta--zelena p, .karta--ruzova p, .karta--fialova p {
  font-weight: 700;
}

.cena {
  font-family: var(--font-text);
  color: var(--barva-zlata);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cena--preskrtnuta {
  font-family: var(--font-text);
  text-decoration: line-through;
  text-decoration-color: #B2394A;
  text-decoration-thickness: 2px;
  color: #B2394A;
  font-weight: 600;
  opacity: 0.9;
}

.stitek-zlaty {
  display: inline-block;
  background: linear-gradient(180deg, #D4B06C, var(--barva-zlata));
  color: var(--barva-text);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.karta--cenova {
  background: var(--barva-bila);
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.28);
  border-top: 3px solid var(--barva-zlata);
}

.usetris {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1rem;
  color: var(--barva-zelena-tmava);
  margin: 2px 0 10px;
}

.fotka-cela-sirka {
  width: 100%;
  min-height: 520px;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .sekce { padding: 56px 20px; }
  .fotka-cela-sirka { min-height: 320px; }
}