/* =========================================================
   Sai Mai — Ostrava / Dárkové poukazy
   Load after base.css and branch.css.

   The page is built around one idea: the customer should see the
   thing they are buying. The hero shows a real voucher card, and the
   order form re-renders that same card live as they type (see
   initVoucherPreview in js/main.js). Everything else — steps, types,
   recipients — leads to that form.
   ========================================================= */

/* =========================================================
   Voucher card — živý náhled v objednávce

   Karta vypadá jako skutečná tištěná poukázka (předloha: PDF od
   klienta, strana 1 — v projektu už není, najdeš ho v historii gitu,
   naposledy v commitu f20dc85 jako darkovy_poukaz_finalni_zobrazeni_k_nahrade.pdf).
   Pozadí je ta strana vyrenderovaná z PDF BEZ textu —
   rámeček, logo, lotosy, fotka i tři bílá pole jsou obrázek, všechen
   text je HTML, aby ho šlo živě přepisovat a aby jedna grafika
   posloužila Ostravě i Opavě (liší se jen název pobočky v HTML).

   Pozice textu jsou v procentech výšky karty a velikosti písma v cqw
   (šířka karty), změřené z PDF — karta drží poměr strany A4, takže se
   všechno škáluje spolu s ní a text zůstává v polích při jakékoli
   šířce. Když se grafika poukazu změní, je potřeba ji znovu
   vyrenderovat a čísla níž přeměřit.

   Originál je sázený v Minion Pro, který na Google Fonts není;
   Crimson Text je mu nejblíž.
   ========================================================= */
.voucher {
  --v-ink: #3d2f28;
  --v-label: #6b5b52;
  --v-faint: rgba(61, 47, 40, .38);
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 880 / 1245;
  border-radius: 4px;
  background: #f3e4d4 url("../assets/spolecne/poukaz_predni_prazdny.webp") center / 100% 100% no-repeat;
  box-shadow: var(--shadow-3);
  overflow: hidden;
  font-family: "Crimson Text", var(--font-serif);
  color: var(--v-ink);
  text-align: center;
}
/* Každý text sedí účařím na změřené výšce: line-height 1 a posun
   o 0.85em nahoru staví účaří přesně na `top`. */
.voucher__line {
  position: absolute;
  left: 8%;
  right: 8%;
  margin-top: -.85em;
  line-height: 1;
  white-space: nowrap;
}

.voucher__tag  { top: 27.07%; font-size: 3.05cqw; letter-spacing: .25em; }
.voucher__city { top: 30.28%; font-size: 4.55cqw; letter-spacing: .3em; }
/* letter-spacing přidává mezeru i za poslední písmeno — srovnat střed. */
.voucher__tag,
.voucher__city { text-indent: .28em; }

/* Tři bílá pole. Rámeček boxu = bílá plocha pole (bez zlaté ikonky
   vlevo); boční odsazení je stejné z obou stran, aby popisek i hodnota
   stály na středu stránky jako v originále. */
.voucher__fields { margin: 0; }
.voucher__field {
  position: absolute;
  left: 8.5%;
  right: 7.5%;
  height: 7.1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.15cqw 6cqw 0;
}
.voucher__field:nth-child(1) { top: 37.21%; }
.voucher__field:nth-child(2) { top: 46.24%; }
.voucher__field:nth-child(3) { top: 55.19%; }
.voucher__field dt {
  font-size: 1.9cqw;
  line-height: 1;
  color: var(--v-label);
}
.voucher__field dd {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 100%;
  margin: 0 0 .6cqw;
  font-size: 4cqw;
  line-height: 1.1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.voucher__field dd > span { overflow: hidden; text-overflow: ellipsis; }

/* Věnování nemá na tištěném poukazu vlastní pole — sedí volně pod
   poli, nad číslem poukazu. Tři řádky na 180 znaků z formuláře. */
.voucher__note {
  position: absolute;
  top: 63%;
  left: 14%;
  right: 14%;
  margin: 0;
  font-style: italic;
  font-size: 2.6cqw;
  line-height: 1.2;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.voucher__note:empty::before {
  content: "Vaše věnování se objeví tady…";
  color: var(--v-faint);
}

/* Číslo poukazu se přiděluje až při vystavení (feedback 8/2026), takže
   místo vzorového čísla z PDF stojí tady, kdy ho dostanou. */
.voucher__noLabel { top: 71%;    font-size: 2.55cqw; }
.voucher__no      { top: 73.9%;  font-size: 2.55cqw; font-style: italic; color: var(--v-label); }
.voucher__noLabel,
.voucher__no { text-shadow: 0 0 .6em rgba(247, 236, 224, .9); }

/* Ještě nevyplněno — slabší kurzíva, ať je vidět, co se teprve doplní. */
.voucher .is-empty { font-style: italic; color: var(--v-faint); }

/* =========================================================
   Hero — copy left, voucher card right
   ========================================================= */
/* =========================================================
   Hero — photo of the real gift vouchers, styled like the other
   photo heroes (.ohero / .mhero / .khero): full-bleed image with a
   scrim and light copy. The photo's subject (vouchers + flower) sits
   on the right, its left is empty cream — so the scrim is weighted to
   the LEFT, darkening the empty side just enough for the text while the
   vouchers stay bright on the right.
   ========================================================= */
.phero--photo {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 560px;   /* matches the Kontakt hero */
  padding: var(--s12) var(--edge);
  background: var(--hero-dark);
  overflow: hidden;
}
/* Ořez je vytažený doprava (right center), takže text v levé půlce hera
   stojí na prázdné ploše stolu a poukázky zůstávají vpravo, kde je vidí.
   Fotka je zároveň to jediné, co na téhle stránce ukazuje, jak poukázka
   doopravdy vypadá — proto nesmí zmizet pod scrimem. */
.phero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hero-img), var(--stripe);
  background-size: cover, auto;
  background-position: right center, 0 0;
  background-repeat: no-repeat, repeat;
}
.phero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(26, 17, 8, .88) 0%, rgba(26, 17, 8, .58) 38%, rgba(26, 17, 8, .12) 66%, rgba(26, 17, 8, 0) 100%),
    linear-gradient(to top, rgba(26, 17, 8, .45), rgba(26, 17, 8, 0) 40%);
}

.phero__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  max-width: 560px;
}
.phero__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 60px;
  line-height: var(--lh7);
  color: var(--cream-hi);
}
.phero__lede { max-width: 480px; font-size: 17px; line-height: var(--lh3); color: rgba(246, 243, 238, .82); }
.phero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s1); }
.phero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin-top: var(--s2);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: var(--lh2);
  color: rgba(246, 243, 238, .7);
}
.phero__trust li { display: flex; align-items: center; gap: 6px; }
.phero__trust li::before { content: "✓"; color: var(--gold); font-weight: 700; }


/* Sekce "Vyberte ten pravý poukaz" (.ptypes / .ptype) je odstraněná.
   Tři karty jen převyprávěly to, co o pár řádků níž nabízí rozbalovací
   pole "Typ poukazu" v objednávce — a stály mezi člověkem a formulářem,
   ke kterému ho celá stránka vede. Všechny tři typy jsou dál k výběru
   tam, kde se vybírají doopravdy.

   Zmizel s ní i jediný uživatel data-pick, který v js/main.js typ
   předvyplňoval; ta obsluha je neškodná, když nic neobslouží, a hodí se,
   kdyby se karty někdy vrátily. */

/* =========================================================
   Objednávka — sticky live preview + form
   ========================================================= */
.order {
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: var(--s12) var(--edge);
}
.order__inner {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 480fr 720fr;
  align-items: start;
  gap: var(--s10);
}

/* Left rail follows the form down the page. */
.order__aside {
  position: sticky;
  top: 152px;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.order__previewNote {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1.2px;
  color: var(--muted);
  text-transform: uppercase;
  text-align: center;
}
/* Pod živým náhledem stojí skutečná poukázka — jak vypadá vytištěná,
   ne jak ji vykresluje web. Poměr stran je nastavený na 2:1, což je
   přesně poměr té grafiky, takže se nic neořízne ani nelemuje: box má
   tvar poukázky. Když sem půjde jiná grafika, srovnej --ar s ní.

   Krémové pozadí a vlásková linka drží tvar, i kdyby soubor chyběl —
   dřív tu byla pruhovaná výplň z --stripe a vypadala jako rozbitý
   obrázek, protože jím taky byla: cesta, na kterou box mířil, nikdy
   neexistovala. */
.order__photo {
  aspect-ratio: var(--ar, 2 / 1);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px var(--line-card);
}
.order__photoNote {
  margin-top: var(--s1);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1.2px;
  color: var(--muted);
  text-transform: uppercase;
  text-align: center;
}

.order__form { display: flex; flex-direction: column; gap: var(--s5); }
.order__title {
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 32px;
  line-height: var(--lh5);
  color: var(--ink);
}

/* ---------- Form primitives ---------- */
.fset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.fset__legend {
  padding: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1.2px;
  color: var(--gold);
  text-transform: uppercase;
}
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field--full { grid-column: 1 / -1; }
.field__label {
  padding: 0 4px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1.2px;
  color: var(--body);
  text-transform: uppercase;
}
.field__label span { color: var(--copper); }   /* required marker */

.field__input,
.field__select,
.field__area {
  width: 100%;
  min-height: 56px;
  padding: var(--s2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: #fff;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field__input::placeholder,
.field__area::placeholder { color: var(--grey); }
.field__input:focus,
.field__select:focus,
.field__area:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.field__area { min-height: 96px; resize: vertical; }

/* Native arrow replaced so the control matches the rest of the type. */
.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s6);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--copper) 50%),
    linear-gradient(135deg, var(--copper) 50%, transparent 50%);
  background-position: right var(--s3) center, right calc(var(--s3) - 5px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field__hint {
  padding: 0 4px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh2);
  color: var(--muted);
}
.field__error {
  padding: 0 4px;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh2);
  color: #A6402B;
}
.field__error:empty { display: none; }
.field.is-invalid .field__input,
.field.is-invalid .field__select,
.field.is-invalid .field__area { border-color: #A6402B; }

/* ---------- Radio / checkbox ---------- */
.choices { display: flex; flex-wrap: wrap; gap: var(--s2); }
.choice {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--lh2);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.choice:hover { border-color: var(--gold); }
.choice input { accent-color: var(--copper); width: 18px; height: 18px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: var(--lh2);
  color: var(--body);
  cursor: pointer;
}
.consent input { accent-color: var(--copper); width: 18px; height: 18px; margin-top: 3px; flex: none; cursor: pointer; }
/* Odkaz na obchodní podmínky uvnitř souhlasu. Je to <button>, protože
   podmínky nikam nevedou — otevírají se jako popup. Musí proto ze sebe
   shodit veškerý vzhled tlačítka a vypadat jako odkaz uprostřed věty:
   font se v tlačítku nedědí, takže se nastavuje ručně.

   Podtržený je schválně: barvou se od okolního textu odlišit nemůže,
   celý řádek je drobný text v jednom odstínu. */
.consent__link {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--brown);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color .25s ease;
}
.consent__link:hover { color: var(--gold); }

/* ---------- Submit block ---------- */
.order__submit {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  border-top: 1px solid var(--line-soft);
  padding-top: var(--s4);
}
/* ---------------------------------------------------------
   Co se stane po odeslání

   Byl to jeden odstavec drobného textu nad tlačítkem a nikdo ho nečetl
   — klientka se právem ptala, jestli je vůbec vidět, co odesláním
   vzniká. Teď je to očíslovaný seznam v rámečku: tři kroky, které
   dopředu řeknou, že se zatím nic neplatí. Stejná trojice se po
   odeslání zopakuje v potvrzení, aby na sebe navazovaly.
   --------------------------------------------------------- */
.order__next {
  padding: var(--s3);
  border-radius: var(--radius-sm);
  background: var(--cream);
  border: 1px solid var(--line-soft);
}
.order__nextHead {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  line-height: var(--lh2);
  letter-spacing: 1.1px;
  color: var(--muted);
  text-transform: uppercase;
}
/* Čísla kreslí counter, ne list-style: potřebují být zlatá a v Loře,
   a marker se takhle detailně stylovat nedá napříč prohlížeči.

   Odsazení dělá padding-left a číslo visí v něm absolutně — NE grid se
   dvěma sloupci. Tahle položka obsahuje <strong>, a grid container dělá
   samostatnou položku mřížky z každého potomka i z každého kusu textu
   mezi nimi: „Objednávka dorazí k nám na", <strong>, „. Nic se zatím
   neplatí." byly tři buňky, které si popadaly přes sebe do dvou sloupců.
   Uvnitř textového odstavce grid nemá co dělat. */
.order__nextList {
  counter-reset: onext;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-top: var(--s2);
}
.order__nextList li {
  counter-increment: onext;
  position: relative;
  padding-left: var(--s3);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--lh2);
  color: var(--body);
}
.order__nextList li::before {
  content: counter(onext) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-num);
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--copper);
}
.order__nextList strong { font-weight: 600; color: var(--ink); }
.order__fine {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: 12px;
  line-height: var(--lh2);
  color: var(--muted);
}

/* Confirmation panel, revealed after a valid submit. */
.order__done {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  border-radius: var(--radius-sm);
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.order__done[hidden] { display: none; }
.order__done h3 {
  font-family: var(--font-note);
  font-weight: 400;
  font-size: 22px;
  line-height: var(--lh3);
  color: var(--ink);
}
.order__done p { font-family: var(--font-ui); font-size: 14px; line-height: var(--lh2); color: var(--body); }
.order__done strong { color: var(--brown); }
.order__done a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }

/* Rekapitulace objednávky — plní ji JS po odeslání. Když JS neběží,
   zůstane [hidden] a zbytek potvrzení dává smysl i bez ní. */
.order__recap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s1) var(--s3);
  margin: var(--s1) 0;
  padding: var(--s3);
  border-radius: var(--radius-sm);
  background: rgba(255, 250, 242, .7);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--lh2);
}
.order__recap[hidden] { display: none; }
.order__recap dt { color: var(--muted); }
.order__recap dd { color: var(--ink); }
.order__doneNext { border-top: 1px solid rgba(197, 160, 89, .4); padding-top: var(--s2); }

/* =========================================================
   Pro koho — occasions + recipient cards
   ========================================================= */
.giftees {
  display: grid;
  grid-template-columns: 400fr 880fr;
  align-items: start;
  gap: var(--s8);
  padding-bottom: var(--s12);
}
.giftees__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.giftees__text { color: var(--body); }
.occasions { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.occasions li {
  padding: 6px var(--s3);
  border-radius: 9999px;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: var(--lh2);
  color: var(--brown);
}
/* ---------------------------------------------------------
   Pro koho — fotka pod krémovým závojem

   These were four cream boxes with a line icon at the top. Correct and
   completely interchangeable with any other four-up feature grid; the
   page is about giving someone an experience and the cards showed a
   pictogram of a heart.

   Now the photograph is the card and a cream veil rises over its lower
   half, so the copy sits on the page's own paper rather than on a scrim.
   Závoj je skutečný prvek, ne ::after: uměl při hoveru sjet dolů a vrátit
   kartu fotce. To gesto je pryč — karta nikam nevede, takže slibovalo
   akci, která tam není. Prvek zůstal, nese svůj vlastní spád a výškovou
   korekci níž.
   --------------------------------------------------------- */
.giftees__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.giftee {
  position: relative;
  min-height: 384px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s1);
  padding: var(--s5);
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* Hnědá, ne krémová: kdyby se fotka nenačetla, karta zůstane tmavá
     a světlý text na ní bude pořád čitelný. */
  background: var(--brown-deep);
  box-shadow: var(--shadow-2);
}

.giftee__media { position: absolute; inset: 0; z-index: 0; }
.giftee__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hnědý závoj přes celou kartu, ne krémový doběh u dna.

   Nejdřív tu byl krém: fotka nahoře, text dole na papíru stránky. Fungovalo
   to, ale nic to neříkalo — čtyři světlé kartičky na světlé stránce splynuly
   s okolím a sekce zmizela. Tohle je ta samá karta v hnědé: závoj drží fotku
   po celé ploše, takže čtveřice čte jako jeden teplý blok, který se od krémové
   stránky odráží.

   Odstín je rgba(58, 34, 21) — stejná hněď, jakou používá scrim na CTA kartě
   v branch.css, aby se tmavá místa na webu shodovala. Spád je vážený ke dnu:
   nahoře jen tolik, aby fotka zůstala fotkou, dole tolik, aby text nikdy
   nezáleželo na tom, co je pod ním. */
/* VÝŠKA 130 %, NE 110 %. Vzniklo to jako oprava sjíždění při hoveru:
   závoj má nahoře krytí .3, ne nulu, takže má viditelnou horní hranu,
   a při 110 % ta hrana vjela do karty jako ostrá vodorovná čára. Hover
   je pryč, geometrie zůstává — na ni jsou přepočítané zastávky spádu
   a jinou výškou by se změnilo rozložení tmavého na fotce.

   Zastávky jsou přepočítané na novou výšku: stop na N % elementu leží
   na (N % × 1,3 − 10 %) výšky karty. Když se sáhne na výšku, musí se
   přepočítat i ony. */
.giftee__veil {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -10%;
  height: 130%;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(58, 34, 21, .94) 0%,
    rgba(58, 34, 21, .93) 8%,
    rgba(58, 34, 21, .88) 31%,
    rgba(58, 34, 21, .68) 48%,
    rgba(58, 34, 21, .44) 65%,
    rgba(58, 34, 21, .3) 85%,
    rgba(58, 34, 21, 0) 100%);
}

/* The line icons that used to head each card are gone. They landed on
   bare photograph, and a 1.5px copper stroke over a photo is unreadable
   at any exposure. They were also the most generic thing on the card —
   a pictogram of a heart standing in for a photograph of two people, on
   a page selling an experience. */
.giftee__title,
.giftee__desc { position: relative; z-index: 2; }

.giftee__title {
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 20px;
  line-height: var(--lh3);
  color: var(--cream-hi);
}
.giftee__desc { font-size: 14px; line-height: var(--lh2); color: rgba(246, 236, 225, .82); }

/* =========================================================
   FAQ band
   ========================================================= */
.pfaq { background: var(--surface); padding: var(--s11) var(--edge) 0; }
.pfaq__inner { max-width: var(--content); margin: 0 auto; }

/* =========================================================
   Obchodní podmínky — popup

   Byla to sekce na konci stránky. Teď je to okno, které se otevře
   z odkazu u zaškrtávátka, protože podmínky se čtou v jediný okamžik:
   těsně před odsouhlasením. Jako sekce jen natahovaly objednávku
   o obrazovku textu, kterou skoro nikdo nečte.

   Skladba okna je hlavička / rolovatelné tělo / patička s tlačítky.
   Výška je omezená na 84vh a roluje jen prostředek — tlačítko
   „souhlasím" tak zůstává vidět pořád a nikdo ho nemusí hledat pod
   osmi odstavci.
   ========================================================= */
.modal {
  position: fixed;
  /* 200 stejně jako .lightbox v page-o-nas.css — na tomhle webu je
     to hladina překryvných oken. Nad lepivou hlavičkou (50) i nad
     skip-linkem (100), aby oknu nic neleželo přes roh. */
  z-index: 200;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  background: rgba(20, 12, 5, .72);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }

.modal__panel {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: 84vh;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(20, 12, 5, .45);
  overflow: hidden;
  transform: translateY(12px);
  transition: transform .3s var(--ease-out);
}
.modal.is-open .modal__panel { transform: none; }

.modal__head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line-soft);
}
.modal__title {
  font-family: var(--font-note);
  font-weight: 400;
  font-size: 24px;
  line-height: var(--lh3);
  color: var(--ink);
}
.modal__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--line-soft);
  background: transparent;
  font-size: 15px;
  color: var(--body);
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.modal__close:hover { background: var(--cream); color: var(--ink); }

/* Jediná rolovatelná část okna. overscroll-behavior brání tomu, aby
   se po dojetí na konec seznamu začala rolovat stránka pod oknem. */
.modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--s4) var(--s5);
}
.modal__lede {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--body);
}

.modal__foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  padding: var(--s3) var(--s5) var(--s4);
  border-top: 1px solid var(--line-soft);
  background: var(--cream);
}
.modal__dismiss {
  border: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: var(--lh2);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .25s ease;
}
.modal__dismiss:hover { color: var(--ink); }

/* Osm bodů pod sebou, každý s vlastním číslem. V okně o šířce 720 px
   by dva sloupce daly řádky o 40 znacích — na souvislý text málo. */
.terms {
  counter-reset: term;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-top: var(--s4);
}
.terms__item {
  counter-increment: term;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
}
/* Číslo bodu jako zlatá číslice nad nadpisem — týž zápis jako .why__num
   na homepage, aby se očíslované seznamy po webu chovaly stejně. */
.terms__item::before {
  content: "0" counter(term);
  font-family: var(--font-num);
  font-size: 13px;
  line-height: var(--lh2);
  letter-spacing: 1.3px;
  color: var(--copper);
}
.terms__title {
  font-family: var(--font-note);
  font-weight: 400;
  font-size: 19px;
  line-height: var(--lh3);
  color: var(--ink);
}
.terms__item p {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--lh2);
  color: var(--body);
}
.terms__item strong { font-weight: 600; color: var(--brown); }

/* Sazby za prodloužení platnosti jsou jediné místo v podmínkách, kde se
   text láme do odrážek. Globální reset v base.css bere seznamům puntíky
   i odsazení, takže si je bod musí nakreslit sám — zlatý ::before jako
   ve FAQ, aby oba výčty stejných čísel vypadaly stejně. */
.terms__list {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--lh2);
  color: var(--body);
}
.terms__list li { position: relative; padding-left: var(--s3); }
.terms__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.terms__foot {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--lh2);
  color: var(--muted);
}
.terms__foot a { color: var(--brown); text-decoration: underline; text-underline-offset: 2px; }
.terms__foot a:hover { color: var(--gold); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .phero__title { font-size: 48px; line-height: var(--lh6); }


  .order__inner { grid-template-columns: 1fr; gap: var(--s7); }
  .order__aside { position: static; flex-direction: row; align-items: flex-start; }
  .order__aside .voucher { max-width: 380px; }
  /* Vedle sebe: poukázka si drží svůj poměr, jen se zúží. */
  .order__aside > * { flex: 1; }

  .giftees { grid-template-columns: 1fr; gap: var(--s6); }
}

@media (max-width: 860px) {
  .phero--photo { min-height: 520px; padding-top: var(--s10); padding-bottom: var(--s10); }
  .phero__title { font-size: 40px; line-height: var(--lh5); }
  /* Narrow: the vouchers no longer sit clear to the side, so lean the
     scrim toward a full bottom-weighted wash for legible copy. */
  .phero__bg { background-position: 72% center; }
  .phero__scrim {
    background:
      linear-gradient(90deg, rgba(26, 17, 8, .9) 0%, rgba(26, 17, 8, .55) 55%, rgba(26, 17, 8, .35) 100%),
      linear-gradient(to top, rgba(26, 17, 8, .6), rgba(26, 17, 8, 0) 55%);
  }
  .order__aside { flex-direction: column; align-items: stretch; }
  /* Na výšku by karta v poměru A4 přes celou šířku zabrala víc než
     obrazovku — drží se v rozumné velikosti a na středu. */
  .order__aside .voucher { max-width: 400px; margin-inline: auto; }
}

@media (max-width: 640px) {
  .phero__title { font-size: 32px; line-height: var(--lh4); }
  .phero__lede { font-size: 16px; line-height: var(--lh2); }

  .fgrid { grid-template-columns: 1fr; }
  .giftees__grid { grid-template-columns: 1fr; }

  .order__recap { grid-template-columns: 1fr; gap: 0 0; }
  .order__recap dt { margin-top: var(--s1); font-size: 12px; }

  /* Na telefonu okno vyplní obrazovku až na malý rám — 84vh a 16px
     rámu by z něj udělalo úzký proužek uprostřed. Tlačítka jdou pod
     sebe a to hlavní přes celou šířku. */
  .modal { padding: var(--s2); align-items: flex-end; }
  .modal__panel { max-height: 92vh; }
  .modal__head, .modal__body { padding-inline: var(--s3); }
  .modal__foot { padding-inline: var(--s3); }
  .modal__title { font-size: 20px; line-height: var(--lh3); }
  .modal__foot .btn { width: 100%; justify-content: center; }

  .voucher { padding: var(--s4) var(--s3) var(--s3); }
  .voucher__title { font-size: 24px; line-height: var(--lh3); }
  .voucher__val dd { font-size: 26px; line-height: var(--lh3); }
  .choices { flex-direction: column; }
  .choice { width: 100%; }

  /* Mobil — fotky se ořezávají odshora (proč, viz branch.css).
     Hero měl ořez vytažený doprava, aby text vlevo stál na prázdném
     stole a poukázky zůstaly vidět. Na telefonu žádné „vlevo a vpravo"
     není — text leží přes celou šířku na scrimu, takže se ořez vrací
     na střed a drží horní hranu.

     .order__photo se nemění: má poměr stran shodný s grafikou poukázky,
     takže se z ní nic neořezává a posouvat není co. */
  .phero__bg { background-position: center top, 0 0; }
  .giftee__media img { object-position: center top; }
}

/* =========================================================
   Mobil — ladění (10/2026)
   ========================================================= */
@media (max-width: 860px) {
  /* Náhled přesunutý do formuláře před odeslání (placePreview v main.js). */
  .is-inform {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s2);
    padding-top: var(--s5);
    border-top: 1px solid var(--line-soft);
  }
  .is-inform .voucher { width: min(100%, 360px); }
  .is-inform .order__previewNote::before { content: "Kontrola: "; }
}
@media (max-width: 640px) {
  /* iPhone při klepnutí do pole s písmem pod 16 px stránku sám přiblíží
     a po vyplnění zůstane uživatel v přiblížené stránce. */
  .field__input,
  .field__select,
  .field__area { font-size: 16px; }
  .consent__link { min-height: 32px; }
  .order__nextHead { font-size: 12px; }
}