/* =====================================================================
   EV-INFO KIT v1.6: sdílený komponentový kit pro informační stránky
   Ecce Vita · 18. 8. 2026

   v1.6 přidává blok 10 s obrazovými a citačními prvky, aby na kitu mohla
   stát i stránka O nás. Ta do té doby měla vlastní styly pod .ev-about,
   které si šablona Shoptetu přebíjela.

   Dále v1.6 opravuje tři věci:
   1. Ve světlé variantě CTA pruhu (--soft) bylo tlačítko ghost bílé na
      šedém podkladu, tedy neviditelné. Bílá tlačítka teď patří jen do
      tmavého pruhu.
   2. Obrázky v kartách nedodržovaly pevnou výšku, protože je přebíjelo
      pravidlo .ev-info img{height:auto} se stejnou vahou selektoru.
   3. Mezi posledním blokem a disclaimerem byla mezera přes 120 px.

   URČENO PRO: Davida (implementace)
   Barvy jsou odečtené ze živého webu (ne z /terapeuti/, ta stránka
   používá vlastní odstín hnědé #36200B, který se od šablony liší).

   NASAZENÍ: vložit JEDNOU globálně (Shoptet: Vzhled a obsah > Editor
   HTML kódu > vlastní CSS), NE do každé stránky zvlášť. Jednotlivé
   stránky pak obsahují už jen HTML markup.

   Vše je scopované pod .ev-info, nic mimo tento kontejner neovlivní.
   Barvy se mění jen v bloku :root níže (pro Kláru).
   ===================================================================== */

.ev-info{
  /* ---- TOKENY: jediné místo, kde se mění barvy a rozměry ----
     Hodnoty odečtené ze živého webu 10. 8. 2026:
     text #4A494A, nadpisy #36200B, hlavička #36200B, linky #E2E2E2,
     písmo Inter. Hnědá je barva POZADÍ a nadpisů, ne běžného textu. */
  --ev-text:#36200B;             /* běžný text, shodné s webem */
  --ev-heading:#36200B;          /* nadpisy, shodné s H1 na webu */
  --ev-dark:#36200B;             /* tmavá pozadí: CTA pruh, tlačítka, čísla kroků */
  --ev-mut:#36200B;              /* sekundární text, neutrální šedá */
  --ev-soft:#F5F5F5;             /* podklad karet a pilulek */
  --ev-paper:#fff;
  --ev-line:#E2E2E2;             /* linky a rámečky, shodné s webem */
  --ev-warn-bg:#FDF6E7;          /* podklad upozornění */
  --ev-warn-line:#E8D4A8;

     /* Chcete nadpisy černé místo hnědých? Změňte --ev-heading
        a --ev-dark na #000000. Pozor: H1 na ostatních stránkách webu
        šablona vykresluje hnědě, takže by se to rozešlo. */
  --ev-radius:10px;
  --ev-pill:999px;
  --ev-gap:20px;

  width:100%;
  padding:0 30px;
  margin:34px 0 72px;
  color:var(--ev-text);
  font-size:15px;
  font-weight:300;
  line-height:1.55;
}
.ev-info,.ev-info *{box-sizing:border-box}
.ev-info img{max-width:100%;height:auto}
.ev-info a{color:inherit}
.ev-info h1,.ev-info h2,.ev-info h3,.ev-info h4,.ev-info h5,.ev-info h6{font-weight:600!important}

/* ---------- TYPOGRAFIE ---------- */
.ev-info__title{margin:0 0 38px;color:var(--ev-heading);font:inherit;font-size:clamp(24px,2.25vw,29px);font-weight:600;letter-spacing:-.04em;line-height:1.25}
.ev-info__block{margin:0 0 64px;scroll-margin-top:90px}
.ev-info__block-title{margin:0 0 10px;color:var(--ev-heading);font:inherit;font-size:clamp(30px,3vw,38px);font-weight:600;letter-spacing:-.055em;line-height:1.15}
.ev-info__sub{margin:36px 0 12px;color:var(--ev-heading);font:inherit;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.ev-info__lead{margin:0 0 27px;line-height:1.62;max-width:70ch}
.ev-info p{margin:0 0 14px}
.ev-info__muted{color:var(--ev-mut)}

/* ---------- NAVIGACE / KOTVY (jako na /terapeuti/) ---------- */
.ev-info__tabs{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 60px;padding:0;list-style:none}
.ev-info__tab{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 25px;border:1px solid transparent;border-radius:var(--ev-pill);background:var(--ev-soft);color:var(--ev-heading);font:inherit;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer}
.ev-info__tab:hover{border-color:var(--ev-heading)}

/* ---------- 1. TABULKA (souhrnná, scan layer) ---------- */
.ev-info__table-wrap{overflow-x:auto;margin:0 0 20px}
.ev-info__table{width:100%;border-collapse:collapse;font-size:15px}
.ev-info__table th,.ev-info__table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--ev-line);vertical-align:top}
.ev-info__table thead th{background:var(--ev-soft);color:var(--ev-heading);font-weight:600;white-space:nowrap;border-bottom:1px solid var(--ev-line)}
.ev-info__table tbody tr:last-child td{border-bottom:0}
.ev-info__table td strong{font-weight:600}
.ev-info__table--compact th,.ev-info__table--compact td{padding:9px 14px}
/* varianta klíč a hodnota (fakturační údaje, parametry), na mobilu se chová jinak než --stack */
.ev-info__table--kv td:first-child{width:34%;color:var(--ev-mut)}

/* ---------- 2. KARTY ---------- */
.ev-info__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--ev-gap)}
.ev-info__card{background:var(--ev-paper);border:1px solid var(--ev-line);border-radius:var(--ev-radius);padding:22px 24px;display:flex;flex-direction:column}
.ev-info__card--soft{background:var(--ev-soft);border-color:transparent}
.ev-info__card-title{margin:0 0 4px;color:var(--ev-heading);font:inherit;font-size:17px;font-weight:600;letter-spacing:-.02em}
.ev-info__card-role{margin:0 0 12px;font-size:13.5px;color:var(--ev-mut)}
.ev-info__card p{margin:0 0 8px}
.ev-info__card-foot{margin-top:auto;padding-top:12px}

/* ---------- 3. KROKY 1-2-3 ---------- */
.ev-info__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--ev-gap);counter-reset:evstep;padding:0;margin:0 0 20px;list-style:none}
.ev-info__step{position:relative;padding:24px;background:var(--ev-soft);border-radius:var(--ev-radius);counter-increment:evstep}
.ev-info__step::before{content:counter(evstep);display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:14px;border-radius:var(--ev-pill);background:var(--ev-dark);color:#fff;font-weight:600;font-size:15px}
.ev-info__step-title{margin:0 0 6px;color:var(--ev-heading);font:inherit;font-size:17px;font-weight:600;letter-spacing:-.02em}

/* ---------- 4. KONTAKTNÍ BLOK ---------- */
/* PRAVIDLO: odkaz se nikdy neroztahuje na celou šířku řádku.
   V gridu by se z něj stal blok přes celý sloupec a podtržení i hover
   by šly přes celou šířku, ne jen pod text. Proto justify-items:start
   a podtržení přes text-decoration, ne přes border-bottom. */
.ev-info__contact{display:grid;justify-items:start;gap:2px;margin:0 0 6px;font-size:15px}
.ev-info__contact a{text-decoration:underline;text-decoration-color:var(--ev-line);text-underline-offset:3px}
.ev-info__contact a:hover{text-decoration-color:var(--ev-heading)}
.ev-info__contact .ev-info__name{color:var(--ev-heading);font-weight:600}
.ev-info__hours{display:grid;grid-template-columns:auto 1fr;gap:2px 18px;margin:10px 0 0;font-size:14.5px}
.ev-info__hours dt{color:var(--ev-mut)}
.ev-info__hours dd{margin:0}

/* ---------- 5. TIMELINE ---------- */
.ev-info__timeline{list-style:none;margin:0 0 20px;padding:0}
.ev-info__timeline li{display:grid;grid-template-columns:96px 1fr;gap:22px;padding:14px 0;border-bottom:1px solid var(--ev-line)}
.ev-info__timeline li:last-child{border-bottom:0}
.ev-info__timeline b{color:var(--ev-heading);font-weight:600}

/* ---------- 6. FAQ ---------- */
.ev-info__faq{border-top:1px solid var(--ev-line)}
.ev-info__faq details{border-bottom:1px solid var(--ev-line)}
.ev-info__faq summary{cursor:pointer;padding:18px 40px 18px 0;color:var(--ev-heading);font-weight:600;list-style:none;position:relative}
.ev-info__faq summary::-webkit-details-marker{display:none}
.ev-info__faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2px solid var(--ev-mut);border-bottom:2px solid var(--ev-mut);transform:rotate(45deg);transition:transform .15s}
.ev-info__faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.ev-info__faq details > *:not(summary){margin-bottom:18px}

/* ---------- 7. CTA PRUH ---------- */
.ev-info__cta{background:var(--ev-dark);color:#fff;border-radius:var(--ev-radius);padding:38px 40px;margin:0}
.ev-info__cta .ev-info__block-title,.ev-info__cta p{color:#fff}
.ev-info__cta .ev-info__block-title{margin-bottom:14px}
.ev-info__cta p{max-width:60ch;opacity:.9;margin-bottom:22px}
.ev-info__cta p:last-child{margin-bottom:0}
.ev-info__cta .ev-info__btn{margin-bottom:0}
.ev-info__cta--soft{background:var(--ev-soft);color:var(--ev-text)}
.ev-info__cta--soft .ev-info__block-title{color:var(--ev-heading)}
.ev-info__cta--soft p{color:var(--ev-text);opacity:1}

/* ---------- 8. UPOZORNĚNÍ ---------- */
.ev-info__note{background:var(--ev-warn-bg);border:1px solid var(--ev-warn-line);border-radius:var(--ev-radius);padding:18px 22px;margin:0 0 20px}
.ev-info__note :last-child{margin-bottom:0}
.ev-info__note--plain{background:var(--ev-soft);border-color:transparent}

/* ---------- 9. SEZNAM PRODEJNÍCH MÍST ---------- */
.ev-info__places{list-style:none;margin:0;padding:0}
.ev-info__place-row{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:start;padding:14px 0;border-bottom:1px solid var(--ev-line)}
.ev-info__place-row:last-child{border-bottom:0}
.ev-info__place-name{display:block;color:var(--ev-heading);font-weight:600}
.ev-info__place-addr{display:block;color:var(--ev-mut);font-size:14px;margin-top:2px}
.ev-info__place-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;align-items:center}
.ev-info__place-links a{display:inline-flex;align-items:center;min-height:36px;padding:4px 14px;border:1px solid var(--ev-line);border-radius:var(--ev-pill);font-size:14px;text-decoration:none;white-space:nowrap}
.ev-info__place-links a:hover{border-color:var(--ev-heading)}
.ev-info__count{margin-left:7px;color:var(--ev-mut);font-weight:400}
.ev-info__region summary{font-size:17px}
@media(max-width:768px){
  .ev-info__place-row{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .ev-info__place-links{justify-content:flex-start}
  .ev-info__place-links a{min-height:44px;padding:6px 16px}
  .ev-info__region summary{font-size:16px}
}

/* ---------- 10. OBRAZOVÉ A CITAČNÍ PRVKY (O nás, prodejna) ---------- */
.ev-info__figure{margin:0}
.ev-info__figure img{width:100%;border-radius:var(--ev-radius);display:block}
.ev-info__caption{margin:8px 0 0;font-size:13.5px;color:var(--ev-mut);line-height:1.5}
/* Pozor na specificitu: .ev-info img výše nastavuje height:auto a má stejnou
   váhu jako .ev-info__card-img. Proto je tu selektor psaný jako
   .ev-info img.ev-info__card-img, jinak by se pevná výška neuplatnila. */
.ev-info img.ev-info__card-img{width:100%;height:180px;object-fit:cover;border-radius:calc(var(--ev-radius) - 4px);margin:0 0 16px;display:block}
.ev-info img.ev-info__portrait{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:calc(var(--ev-radius) - 4px);margin:0 0 16px;display:block}
.ev-info__quote{margin:26px 0 0;padding:0 0 0 20px;border-left:3px solid var(--ev-line);color:var(--ev-heading);font-size:17px;line-height:1.55}
.ev-info__quote p{margin:0 0 10px}
.ev-info__quote cite{display:block;font-size:14px;font-style:normal;color:var(--ev-mut)}
.ev-info__logos{display:flex;flex-wrap:wrap;gap:26px;align-items:center;margin:20px 0 0}
.ev-info__logos img{height:56px;width:auto}
/* Předchází mu .ev-info__block s odstupem 64 px, vlastní horní okraj proto
   nemá. Jinak by mezi posledním blokem a linkou vznikla mezera přes 120 px. */
.ev-info__disclaimer{margin:0;padding:22px 0 0;border-top:1px solid var(--ev-line);font-size:13px;color:var(--ev-mut);line-height:1.55}

/* ---------- TLAČÍTKA ---------- */
.ev-info__btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 25px;margin:4px 8px 4px 0;border:1px solid var(--ev-dark);border-radius:var(--ev-pill);background:var(--ev-dark);color:#fff !important;font:inherit;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer}
.ev-info__btn:hover{opacity:.88}
.ev-info__btn--ghost{background:transparent;color:var(--ev-dark) !important}
.ev-info__btn--ghost:hover{background:var(--ev-soft);opacity:1}
/* Bílá tlačítka patří jen do tmavého CTA pruhu. Ve světlé variantě --soft
   by bílý text na šedém podkladu nebyl vidět, proto :not(). */
.ev-info__cta:not(.ev-info__cta--soft) .ev-info__btn{background:#fff;border-color:#fff;color:var(--ev-dark) !important}
.ev-info__cta:not(.ev-info__cta--soft) .ev-info__btn--ghost{background:transparent;border-color:#fff;color:#fff !important}
.ev-info__cta--soft .ev-info__btn--ghost{background:var(--ev-paper)}
.ev-info__cta--soft .ev-info__btn--ghost:hover{background:var(--ev-paper);opacity:.8}

/* ---------- MAPA ---------- */
.ev-info__map{border-radius:var(--ev-radius);overflow:hidden;border:1px solid var(--ev-line);line-height:0}
.ev-info__map iframe{width:100%;height:380px;border:0;display:block}

/* ---------- POMOCNÉ ---------- */
.ev-info__split{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:start}
.ev-info__split > *{min-width:0}
.ev-info__todo{background:#fff3bf;padding:0 .3em;border-radius:3px}

/* ---------- MOBIL ---------- */
@media(max-width:768px){
  .ev-info{width:100%;margin:24px 0 48px}
  .ev-info__block{margin-bottom:48px}

  /* typografie: na mobilu srovnat poměr H1 a nadpisů sekcí */
  .ev-info__title{font-size:22px;margin-bottom:26px}
  .ev-info__block-title{font-size:26px;letter-spacing:-.03em}
  .ev-info__sub{font-size:17px;margin-top:28px}
  .ev-info__lead{margin-bottom:22px}

  /* kotvy: vodorovný scroll se zarážkou a náznakem, že seznam pokračuje */
  .ev-info__tabs{margin-bottom:34px;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;padding:0 26px 8px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
  .ev-info__tabs::-webkit-scrollbar{display:none}
  .ev-info__tab{white-space:nowrap;min-height:44px;padding:8px 18px;scroll-snap-align:start}

  .ev-info__split{grid-template-columns:1fr;gap:24px}
  .ev-info__timeline li{grid-template-columns:1fr;gap:2px}
  .ev-info__cta{padding:26px 22px}
  .ev-info__map iframe{height:280px}
  .ev-info__card{padding:20px}
  .ev-info__cards,.ev-info__steps{gap:14px}
  .ev-info img.ev-info__card-img{height:160px}
  .ev-info__quote{font-size:16px;margin-top:22px}
  .ev-info__logos{gap:18px}
  .ev-info__logos img{height:44px}

  /* telefony a e-maily musí mít tapovatelnou výšku, ne 24 px.
     Inline-flex zajistí, že se odkaz smrskne na text a nepodtrhne celý řádek. */
  .ev-info__contact{gap:0}
  .ev-info__contact a{display:inline-flex;align-items:center;min-height:44px}
  .ev-info__contact .ev-info__name{padding:8px 0 2px}

  /* A) tabulka se překlopí do karet. Vyžaduje data-label na každém <td>. */
  .ev-info__table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ev-info__table--stack tr{display:block;border:1px solid var(--ev-line);border-radius:var(--ev-radius);padding:6px 14px;margin-bottom:12px}
  .ev-info__table--stack td{display:block;overflow:hidden;text-align:right;border-bottom:1px solid var(--ev-line);padding:9px 0}
  .ev-info__table--stack td::before{content:attr(data-label);float:left;max-width:48%;margin-right:14px;font-weight:600;color:var(--ev-mut);text-align:left}

  /* B) tabulka klíč a hodnota, popisek se posadí nad hodnotu. Bez data-label. */
  .ev-info__table--kv,.ev-info__table--kv tbody,.ev-info__table--kv tr,.ev-info__table--kv td{display:block;width:auto}
  .ev-info__table--kv tr{padding:11px 0;border-bottom:1px solid var(--ev-line)}
  .ev-info__table--kv tr:last-child{border-bottom:0}
  .ev-info__table--kv td{padding:0;border:0}
  .ev-info__table--kv td:first-child{width:auto;font-size:13px;color:var(--ev-mut);margin-bottom:1px}
  .ev-info__table--kv td:last-child{font-size:15.5px}
}

/* ---------- TISK ---------- */
@media print{
  .ev-info__tabs,.ev-info__map{display:none}
  .ev-info__faq details{page-break-inside:avoid}
  .ev-info__faq details > *:not(summary){display:block !important}
}