/* Toplo veče – vzhled aplikace: karty se stíny, chipy, spodní lišta, výrazné zaoblení */
:root {
  --tv-braon: #96612c;
  --tv-braon-tamna: #5f3d1c;
  --tv-tirkiz: #59c0c0;
  --tv-plava: #2273c3;
  --tv-plava-tamna: #18599b;
  --tv-pozadina: #faf7f5;
  --tv-pesak: #f3ebe2;
  --tv-tekst: #2d241b;
  --tv-siv: #5d5045;
  --tv-radijus: 28px;
  --tv-senka: 0 10px 30px rgba(95, 61, 28, .14), 0 2px 6px rgba(95, 61, 28, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.tv-body, body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tv-tekst);
  background: var(--tv-pozadina);
  padding-bottom: 92px;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: "Lora", Georgia, serif; line-height: 1.22; margin: 0 0 .5em; color: var(--tv-braon-tamna); }
h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; }
h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; }
h3 { font-size: 22px; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--tv-plava); }

.tv-sirina { width: min(1160px, 100% - 40px); margin-inline: auto; }
.tv-sirina--uska { width: min(820px, 100% - 40px); }

/* ---------- horní lišta (app bar) ---------- */
.tv-traka {
  position: sticky; top: 0; z-index: 50;
  background: var(--tv-braon-tamna);
  box-shadow: 0 4px 18px rgba(45, 36, 27, .25);
}
.tv-traka__in {
  width: min(1160px, 100% - 32px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 72px;
}
.tv-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 25px;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.tv-logo__ikona {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--tv-braon); display: grid; place-items: center;
}

/* ---------- tlačítka ---------- */
.tv-dugme, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 64px; padding: 14px 30px;
  border-radius: 999px; border: 0;
  font-family: "Roboto", Arial, sans-serif; font-weight: 700; font-size: 19px;
  text-decoration: none; text-align: center; white-space: nowrap;
  background: var(--tv-plava); color: #fff;
  box-shadow: 0 8px 20px rgba(34, 115, 195, .35);
  transition: transform .15s ease, background .15s ease;
  cursor: pointer;
}
.tv-dugme:hover, .btn:hover { background: var(--tv-plava-tamna); transform: translateY(-2px); }
.tv-dugme--mini { min-height: 50px; padding: 10px 22px; font-size: 17px; background: var(--tv-tirkiz); color: #0f2f2f; box-shadow: none; }
.tv-dugme--mini:hover { background: #7fd3d3; }
.tv-dugme--glavno { min-height: 86px; min-width: 340px; padding: 18px 40px; font-size: 24px; }
.tv-dugme--plavo { min-height: 66px; }
.tv-dugme--siroko { width: 100%; max-width: 560px; }

/* ---------- chipy ---------- */
.tv-cip {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  background: var(--tv-pesak); color: var(--tv-braon-tamna);
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  margin-bottom: 14px;
}
.tv-cip--svetao { background: #fff; box-shadow: 0 2px 8px rgba(95, 61, 28, .12); }
.tv-cip--tirkiz { background: var(--tv-tirkiz); color: #0f2f2f; }
.tv-cip--braon { background: var(--tv-braon-tamna); color: #fff; }
.tv-cipovi { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tv-cipovi .tv-cip { margin: 0; background: #fff; border: 2px solid var(--tv-tirkiz); }

/* ---------- hero ---------- */
.tv-uvod { background: linear-gradient(180deg, var(--tv-pesak) 0%, var(--tv-pozadina) 100%); padding: 56px 0 64px; }
.tv-uvod__mreza { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.tv-uvod__perex { font-size: 20px; color: var(--tv-siv); max-width: 34em; margin-bottom: 26px; }
.tv-uvod__slika { margin: 0; position: relative; }
.tv-uvod__slika::before {
  content: ""; position: absolute; inset: 22px -18px -18px 22px;
  background: var(--tv-tirkiz); border-radius: var(--tv-radijus); z-index: 0;
}
.tv-uvod__slika img {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%;
  border-radius: var(--tv-radijus); box-shadow: var(--tv-senka);
}

/* ---------- nadpisy sekcí ---------- */
.tv-naslov { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.tv-naslov p { color: var(--tv-siv); }
.tv-naslov--svetao h2 { color: #fff; }

/* ---------- kontrolní seznam ---------- */
.tv-lista { padding: 80px 0; background: #fff; }
.tv-lista__mreza { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.tv-kolaz { position: relative; min-height: 470px; }
.tv-kolaz__plocha { position: absolute; border-radius: var(--tv-radijus); }
.tv-kolaz__plocha--a { left: 0; top: 0; width: 64%; height: 70%; background: var(--tv-pesak); }
.tv-kolaz__plocha--b { right: 0; bottom: 0; width: 58%; height: 52%; background: var(--tv-tirkiz); opacity: .55; }
.tv-kolaz__foto { position: absolute; object-fit: cover; border-radius: 22px; box-shadow: var(--tv-senka); border: 6px solid #fff; }
.tv-kolaz__foto--velika { left: 6%; top: 6%; width: 68%; aspect-ratio: 1 / 1; }
.tv-kolaz__foto--mala { right: 4%; bottom: 6%; width: 58%; aspect-ratio: 16 / 10; }
.tv-stavke { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tv-stavka {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--tv-pozadina); border-radius: 22px; padding: 18px 18px;
  box-shadow: 0 4px 14px rgba(95, 61, 28, .09);
}
.tv-stavka p { margin: 0; font-size: 17px; }
.tv-kvacica {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px;
  background: var(--tv-braon); color: #fff; display: grid; place-items: center;
}
.tv-kvacica svg { width: 22px; height: 22px; }
.tv-zakljucak {
  margin: 44px auto 0; max-width: 900px; text-align: center;
  background: var(--tv-pesak); border-radius: var(--tv-radijus); padding: 32px 36px;
}
.tv-zakljucak p { font-size: 19px; }

/* ---------- barevné pásy ---------- */
.tv-pojas { padding: 80px 0; }
.tv-pojas--braon { background: var(--tv-braon-tamna); color: #fff; }
.tv-pojas--tirkiz { background: var(--tv-tirkiz); }
.tv-pojas--peskovit { background: var(--tv-pesak); }

.tv-brojke { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tv-brojka {
  background: #fff; color: var(--tv-tekst); border-radius: var(--tv-radijus);
  padding: 30px 28px; box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
}
.tv-brojka__vrednost { font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 38px; line-height: 1.15; color: var(--tv-braon); margin-bottom: 12px; }
.tv-izvor { font-size: 14px; color: var(--tv-siv); margin: 0; border-top: 1px solid #eadfd3; padding-top: 10px; }

/* ---------- recenze ---------- */
.tv-utisci { padding: 80px 0; background: #fff; }
.tv-utisci__mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tv-utisak {
  margin: 0; background: var(--tv-pozadina); border-radius: var(--tv-radijus);
  padding: 28px; box-shadow: var(--tv-senka);
}
.tv-zvezdice { display: block; margin-bottom: 12px; }
.tv-utisak blockquote { margin: 0 0 18px; font-family: "Lora", Georgia, serif; font-size: 21px; font-style: italic; color: var(--tv-braon-tamna); }
.tv-utisak figcaption { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 16px; color: var(--tv-siv); }
.tv-avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--tv-tirkiz); color: #0f2f2f;
  display: grid; place-items: center; font-weight: 700;
}

/* ---------- nabídka ---------- */
.tv-ponuda {
  background: #fff; border-radius: 36px; padding: 48px; box-shadow: 0 20px 50px rgba(15, 47, 47, .25);
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; align-items: start;
}
.tv-ponuda__tekst p { color: var(--tv-siv); }
.tv-koraci { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tv-koraci li { display: flex; gap: 16px; align-items: flex-start; background: var(--tv-pozadina); border-radius: 20px; padding: 16px 18px; }
.tv-koraci li p { margin: 2px 0 0; font-size: 16px; color: var(--tv-siv); }
.tv-koraci__br {
  flex: 0 0 40px; height: 40px; border-radius: 13px; background: var(--tv-plava); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 18px;
}
.tv-ponuda .tv-dugme--siroko { grid-column: 1 / -1; justify-self: center; }

/* ---------- FAQ ---------- */
.tv-pitanja { padding: 80px 0; background: #fff; }
.tv-harmonika { display: grid; gap: 14px; }
.tv-pitanje { background: var(--tv-pozadina); border-radius: 22px; box-shadow: 0 4px 14px rgba(95, 61, 28, .08); overflow: hidden; }
.tv-pitanje summary {
  cursor: pointer; list-style: none; padding: 20px 60px 20px 24px; position: relative;
  font-weight: 700; font-size: 19px; color: var(--tv-braon-tamna);
}
.tv-pitanje summary::-webkit-details-marker { display: none; }
.tv-pitanje summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 10px; background: var(--tv-pesak);
  display: grid; place-items: center; font-size: 22px; line-height: 1;
}
.tv-pitanje[open] summary::after { content: "–"; background: var(--tv-tirkiz); }
.tv-pitanje p { padding: 0 24px 20px; margin: 0; color: var(--tv-siv); }

/* ---------- zajímavosti ---------- */
.tv-kartice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tv-kartica { background: #fff; border-radius: var(--tv-radijus); padding: 28px; box-shadow: var(--tv-senka); display: flex; flex-direction: column; }
.tv-kartica p { font-size: 17px; }
.tv-kartica .tv-izvor { margin-top: auto; }
.tv-kartica__ikona {
  width: 52px; height: 52px; border-radius: 16px; background: var(--tv-braon); color: #fff;
  display: grid; place-items: center; margin-bottom: 16px;
}
.tv-kartica__ikona svg { width: 28px; height: 28px; }

/* ---------- závěr ---------- */
.tv-kraj { padding: 80px 0; background: #fff; }
.tv-kraj__mreza { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.tv-kraj__slika { margin: 0; position: relative; }
.tv-kraj__slika::before {
  content: ""; position: absolute; inset: -16px 26px 26px -16px; background: var(--tv-pesak);
  border-radius: var(--tv-radijus);
}
.tv-kraj__slika img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--tv-radijus); box-shadow: var(--tv-senka); }
.tv-kraj__tekst p { font-size: 19px; color: var(--tv-siv); }

/* ---------- patička ---------- */
.tv-podnozje { background: var(--tv-tekst); color: #e9dfd5; padding: 40px 0 34px; font-size: 15px; }
.tv-podnozje__in { text-align: center; }
.tv-podnozje__znak { font-family: "Lora", Georgia, serif; font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.tv-podnozje__linkovi { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 16px 0; }
.tv-podnozje__linkovi a { color: #e9dfd5; font-size: 14px; }
.tv-podnozje__mali { font-size: 14px; margin: 0; opacity: .8; }

/* ---------- podstránky ---------- */
.tv-stranica { padding: 56px 0 72px; }
.tv-list {
  background: #fff; border-radius: var(--tv-radijus); box-shadow: var(--tv-senka);
  padding: 44px 48px; width: min(860px, 100% - 32px); margin-inline: auto;
}
.tv-list h1 { font-size: clamp(30px, 3.6vw, 42px); }
.tv-list h2 { font-size: 24px; margin-top: 1.4em; }
.tv-list ul { padding-left: 1.2em; }
.tv-list li { margin-bottom: .4em; }
.tv-list__uvod { font-size: 20px; color: var(--tv-siv); }
.tv-vrednosti { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.tv-vrednost { background: var(--tv-pesak); border-radius: 20px; padding: 20px 22px; }
.tv-vrednost h3 { font-size: 20px; margin-bottom: .3em; }
.tv-vrednost p { margin: 0; font-size: 17px; }
.tv-forma { display: grid; gap: 16px; margin-top: 20px; }
.tv-forma label { display: grid; gap: 6px; font-weight: 500; }
.tv-forma input, .tv-forma textarea {
  font: inherit; padding: 14px 16px; border-radius: 16px; border: 2px solid #e2d4c5; background: var(--tv-pozadina);
}
.tv-forma input:focus, .tv-forma textarea:focus { outline: 3px solid var(--tv-tirkiz); border-color: var(--tv-tirkiz); }
.tv-forma button { justify-self: start; font-size: 19px; }
.tv-hvala { background: var(--tv-pesak); border-radius: 20px; padding: 24px; font-size: 19px; margin-top: 20px; }
.tv-hvala[hidden] { display: none; }
.tv-mejl-kartica { display: flex; align-items: center; gap: 14px; background: var(--tv-pesak); border-radius: 20px; padding: 18px 22px; margin: 18px 0 8px; }
.tv-mejl-kartica a { font-weight: 700; font-size: 19px; word-break: break-all; }

/* ---------- popup ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(30, 20, 10, .8);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal {
  position: relative; width: min(660px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--tv-pozadina); border-radius: 34px; padding: 46px 44px 40px; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45); border-top: 10px solid var(--tv-tirkiz);
}
.modal .close {
  position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: var(--tv-braon-tamna); color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
}
.modal .close:hover { background: var(--tv-braon); }
.modal .badge {
  display: inline-block; background: #c0392b; color: #fff; font-weight: 700; font-size: 15px;
  letter-spacing: .05em; padding: 7px 18px; border-radius: 999px; margin-bottom: 14px;
}
.modal h3 { font-size: 44px; line-height: 1.12; color: var(--tv-braon-tamna); margin: 0 0 12px; }
.modal > p { font-size: 19px; color: var(--tv-siv); }
.modal .offer { background: #fff; border-radius: 22px; padding: 18px 22px; margin: 18px 0 24px; text-align: left; box-shadow: 0 4px 14px rgba(95, 61, 28, .1); }
.modal .offer p { margin: 6px 0; font-size: 18px; color: var(--tv-tekst); }
.btn-cta { background: var(--tv-plava); color: #fff; }
.btn-cta-xl { min-height: 86px; width: 100%; font-size: 24px; padding: 18px 26px; white-space: normal; }

/* ---------- spodní lišta (app bottom bar) ---------- */
.sticky-cta {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 900;
  width: min(760px, calc(100% - 20px));
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--tv-braon-tamna); color: #fff; border-radius: 999px;
  padding: 8px 8px 8px 26px; box-shadow: 0 12px 30px rgba(45, 36, 27, .35);
  font-weight: 500; font-size: 17px;
}
.sticky-cta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .btn { min-height: 60px; font-size: 18px; padding: 10px 26px; flex: 0 0 auto; }

/* ---------- mobil ---------- */
@media (max-width: 900px) {
  .tv-uvod__mreza, .tv-lista__mreza, .tv-ponuda, .tv-kraj__mreza { grid-template-columns: 1fr; }
  .tv-uvod { padding: 32px 0 48px; }
  .tv-uvod__slika::before { inset: 14px -8px -10px 14px; }
  .tv-kolaz { min-height: 0; aspect-ratio: 1 / .9; max-width: 520px; width: 100%; margin: 0 auto; }
  .tv-brojke, .tv-utisci__mreza, .tv-kartice { grid-template-columns: 1fr; }
  .tv-kraj__slika { order: -1; }
}
@media (max-width: 640px) {
  body { font-size: 17px; padding-bottom: 84px; }
  .tv-traka__in { min-height: 62px; }
  .tv-logo { font-size: 20px; gap: 8px; }
  .tv-logo__ikona { width: 36px; height: 36px; border-radius: 11px; }
  .tv-dugme--mini { min-height: 46px; padding: 8px 16px; font-size: 16px; }
  .tv-dugme--glavno { min-width: 0; width: 100%; font-size: 21px; min-height: 78px; padding: 16px 20px; }
  .tv-dugme--plavo { width: 100%; font-size: 18px; white-space: normal; }
  .tv-stavke { grid-template-columns: 1fr; }
  .tv-lista, .tv-pojas, .tv-utisci, .tv-pitanja, .tv-kraj { padding: 56px 0; }
  .tv-ponuda { padding: 28px 20px; border-radius: 28px; }
  .tv-zakljucak { padding: 24px 20px; }
  .tv-list { padding: 30px 22px; }
  .tv-vrednosti { grid-template-columns: 1fr; }
  .modal { padding: 40px 20px 26px; border-radius: 26px; }
  .modal h3 { font-size: 32px; }
  .btn-cta-xl { font-size: 20px; min-height: 72px; }
  .sticky-cta { padding: 6px 6px 6px 16px; font-size: 14px; bottom: 8px; }
  .sticky-cta .btn { min-height: 52px; font-size: 16px; padding: 8px 18px; }
}
.tv-pojas--peskovit .tv-cip { background: #fff; box-shadow: 0 2px 8px rgba(95, 61, 28, .12); }
.tv-kolaz__foto--velika { object-position: 45% 60%; }
@media (max-width: 640px) {
  .tv-dugme--glavno { white-space: normal; font-size: 20px; }
  .sticky-cta .tv-dalje { display: none; }
  .sticky-cta span { font-size: 15px; }
}

/* popup-vzor-zalomeni: vzorový text tlačítka popupu je dlouhý – smí se zalomit a nesmí přetékat */
.modal .btn, .modal .cta { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.25; max-width: 100%; box-sizing: border-box; }
@media (max-width: 600px) { .modal .btn, .modal .cta { padding-left: 16px; padding-right: 16px; } }

/* lista-vzor-zalomeni: vzorový text spodní lišty se na mobilu zalomí, tlačítko zůstane celé */
.modal .btn-cta-xl { text-wrap: balance; }
@media (max-width: 600px) {
  .sticky-cta { flex-wrap: nowrap !important; gap: 10px; }
  .sticky-cta > span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; min-width: 0; flex: 1 1 auto; font-size: 13px !important; line-height: 1.25; display: block !important; }
  .sticky-cta .btn, .sticky-cta .cta { flex: 0 0 auto !important; white-space: nowrap !important; max-width: none; }
}