/* ==========================================================================
   TINOTE — landing pages (zatím facility management)

   Stavební prvky jsou stejné jako na homepage: vlasové linky místo karet,
   krátká zelená čárka pod nadpisem, tečkovaná kreslená dráha, odznak s ikonou.
   Nic z toho se tu nezavádí znovu — jen se skládá jinak.

   Načítá se pouze na stránkách, které si o něj řeknou ($page_css = 'facility').
   ========================================================================== */

/* --- Hlava sekce s pořadovým číslem --------------------------------------
   Číslování je z wireframu. Drží stránce rytmus a čtenář ví, kolik toho ještě
   je — u sedmi sekcí za sebou to není zbytečné. */

.fm-head { max-width: 720px; }
.fm-head .eyebrow { display: flex; align-items: center; gap: var(--sp-3); }
/* Korektura 1. 9. 2026: kroužek měl --green-deep (#1D5939). Zadavatel:
   „tohle není Tinote zelená – takhle to působí, jako bychom vzali nějakou cizí
   šablonu.“ Teď je to zelená přímo z loga (#56CE8F) a číslo antracitové
   (#3B3B4E, druhá barva loga) — kontrast 4,8:1, bílá by na ní měla jen 2:1. */
.fm-head__cislo {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink);
  background: var(--green);
  border-radius: 50%;
}
.section--dark .fm-head__cislo { background: var(--green); color: var(--dark); }

/* --- Náhled obrazovky aplikace -------------------------------------------
   Screenshoty jsou z ostré aplikace, tedy anglicky a s ukázkovými daty.
   Rámeček a popisek proto musí být jednoznačné: čtenář se dívá do systému,
   ne na součást webu. */

.snimek { margin-top: var(--sp-7); }
.snimek--siroky { margin-top: var(--sp-8); }

.snimek__ramecek {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.section--dark .snimek__ramecek { border-color: rgba(255, 255, 255, .14); }

.snimek__ramecek img { display: block; width: 100%; height: auto; }

.snimek__popisek {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}
.snimek__popisek .icon { color: var(--green-ink); }
.section--dark .snimek__popisek { color: rgba(255, 255, 255, .55); }
.section--dark .snimek__popisek .icon { color: var(--green); }

/* ==========================================================================
   1. Celý majetek na jednom místě
   ========================================================================== */

.fm-prehled__grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}
/* Varianta bez řady čísel (korektura 1. 9. 2026): vedle stromu stojí rovnou snímek
   z aplikace, takže sloupec nezůstane prázdný. */
.fm-prehled__grid--se-snimkem { align-items: center; }
.fm-prehled__grid--se-snimkem .snimek { margin-top: 0; }

/* --- Strom majetku ------------------------------------------------------- */

.strom {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
}
.strom__koren > .strom__uzel > .strom__radek { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-xs); }

.strom__radek {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 0;
}
.strom__ikona { flex: none; color: var(--green-ink); }
.strom__uzel--polozka > .strom__radek { color: var(--ink-muted); }
.strom__uzel--polozka .strom__ikona { color: var(--ink-faint); }

/* Odsazení dětí kreslí svislá linka — stejný tah jako vlasové linky jinde. */
.strom__deti {
  margin-left: 10px;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--line);
}

/* --- Dlaždice přehledu ---------------------------------------------------
   Čísla jsou ukázková data jednoho areálu, ne tvrzení o produktu (kap. 33).
   Proto sedí v mockupovém rámečku s popiskem a nikdy nestojí volně na stránce. */

.mockup {
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.mockup__dlazdice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  gap: 1px;
}
.mockup__dlazdice > li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 var(--sp-3);
  padding: var(--sp-5);
  background: var(--white);
}
.mockup__ikona { grid-row: span 2; color: var(--green-ink); }
.mockup__cislo {
  align-self: end;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-strong);
}
.mockup__label { align-self: start; font-size: var(--fs-sm); color: var(--ink-muted); }
.mockup__popisek { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-faint); }

/* ==========================================================================
   2. Mapa areálu a budov
   ========================================================================== */

.fm-mapa__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: var(--sp-6);
  align-items: start;
}
.fm-mapa__grid .snimek { margin-top: 0; }

.objekt {
  padding: var(--sp-5);
  background: var(--dark-soft);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
}
.objekt__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-h3);
}
.objekt__title .icon { color: var(--green); }

.objekt__radky { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); font-size: var(--fs-sm); }
.objekt__radek { display: flex; align-items: center; gap: var(--sp-3); }
.objekt__radek .icon { flex: none; color: rgba(255, 255, 255, .45); }
.objekt__radek.is-warn  .icon { color: #F5A524; }
.objekt__radek.is-alert .icon { color: #F0616D; }

.objekt__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  padding: .5rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--green);
  border: 1px solid rgba(86, 206, 143, .4);
  border-radius: var(--r-md);
}

/* ==========================================================================
   3. Plán údržby a revizí
   ========================================================================== */

.filtry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.filtry__pilulka {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .45rem .9rem;
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.filtry__pilulka .icon { color: var(--ink-faint); }

.fm-plan__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: var(--sp-6);
  align-items: start;
}
.fm-plan__grid .snimek { margin-top: 0; }

.terminy {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.terminy__title { font-size: var(--fs-h3); }
.terminy__list { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.terminy__polozka { display: flex; align-items: flex-start; gap: var(--sp-3); }

.terminy__tecka {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.terminy__polozka.is-alert .terminy__tecka { background: #E5484D; }
.terminy__polozka.is-warn  .terminy__tecka { background: #F5A524; }
.terminy__polozka.is-ok    .terminy__tecka { background: var(--green); }

.terminy__text { display: grid; gap: 2px; }
.terminy__label { font-weight: 600; font-size: var(--fs-sm); }
.terminy__za { font-size: var(--fs-xs); color: var(--ink-faint); }

.terminy__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--green-ink);
}

/* ==========================================================================
   4. Práce techniků
   ========================================================================== */

.fm-technici__grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.fm-technici__grid .snimek { margin-top: 0; }

.rozpisy { display: grid; gap: var(--sp-4); }
.rozpis {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.rozpis__hlava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
}
.rozpis__kdo { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; }
.rozpis__kdo .icon { color: var(--green-ink); }

.rozpis__ukoly { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-sm); }
.rozpis__ukoly > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--sp-4);
}
.rozpis__cas { grid-row: span 2; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--green-ink); }
.rozpis__kde { font-size: var(--fs-xs); color: var(--ink-faint); }

.fm-technici__cta { margin-top: var(--sp-6); }

/* Štítky stavů — jediné místo, kde na světlé ploše smí být barva mimo zelenou.
   Rozlišují stav, ne značku, a bez barvy by ztratily smysl. */
.stitek {
  display: inline-block;
  padding: .2rem .6rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.stitek--interni { color: var(--green-deep); background: var(--green-soft); }
.stitek--externi { color: var(--ink-muted);  background: var(--surface); border: 1px solid var(--line); }
.stitek--warn    { color: #8A4B00; background: #FEF3E2; }
.stitek--plan    { color: #7A5B00; background: #FDF6DA; }
.stitek--assign  { color: #1E4B8F; background: #E7F0FD; }

/* ==========================================================================
   5. Karta zařízení
   ========================================================================== */

.zarizeni {
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.zarizeni__hlava {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: start;
}
.zarizeni__title { font-size: var(--fs-h3); }
.zarizeni__umisteni {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.zarizeni__umisteni .icon { color: var(--ink-faint); }

.zarizeni__parametry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
.zarizeni__parametry dt { font-size: var(--fs-xs); color: var(--ink-faint); }
.zarizeni__parametry dd { margin-top: 2px; font-weight: 600; font-variant-numeric: tabular-nums; }

.zarizeni__qr { text-align: center; }
.zarizeni__qr img {
  display: block;
  width: 96px;
  height: 96px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.zarizeni__qr figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-faint); max-width: 110px; }

/* Záložky jsou náhled aplikace, ne ovládání stránky — proto bez hover stavu. */
.zalozky {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
}
.zalozka.is-active {
  position: relative;
  font-weight: 700;
  color: var(--ink-strong);
}
.zalozka.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--sp-3) * -1 - 1px);
  height: 2px;
  background: var(--green);
}

.historie { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); font-size: var(--fs-sm); }
.historie > li {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
}
.historie__tecka { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.historie__datum { font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.historie__kdo { color: var(--ink-faint); font-size: var(--fs-xs); }

.zarizeni__cta { margin-top: var(--sp-6); }

/* ==========================================================================
   6. Závady a požadavky
   ========================================================================== */

/* Průběh je tentýž kreslený tah jako životní cyklus na homepage. */
.prubeh {
  --pb-dot: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.prubeh__krok {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  text-align: center;
}
.prubeh__medailon {
  display: grid;
  place-items: center;
  width: var(--pb-dot);
  height: var(--pb-dot);
  color: var(--green-deep);
  background: var(--green-soft);
  border-radius: 50%;
}
.prubeh__label { font-size: var(--fs-sm); font-weight: 600; }

.prubeh__krok::after {
  content: "";
  position: absolute;
  top: calc(var(--pb-dot) / 2);
  left: calc(50% + var(--pb-dot) / 2 + 10px);
  right: calc(-50% + var(--pb-dot) / 2 + 10px);
  border-top: 2px dotted rgba(42, 127, 82, .45);
}
.prubeh__krok:last-child::after { content: none; }

.fm-zavady__grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}

/* --- Náhled mobilu -------------------------------------------------------
   Statická ukázka formuláře v aplikaci. Není to <form> schválně: dva formuláře
   na jedné stránce by mátly čtečku i uživatele. */

.mobil {
  padding: 10px;
  background: var(--ink-strong);
  border-radius: 30px;
  box-shadow: var(--shadow-lg);
}
.mobil__telo {
  padding: var(--sp-5) var(--sp-4);
  background: var(--white);
  border-radius: 22px;
}
.mobil__title { font-size: var(--fs-body); font-weight: 700; }
.mobil__pole { margin-top: var(--sp-4); }
.mobil__label { display: block; margin-bottom: 4px; font-size: var(--fs-xs); color: var(--ink-faint); }
.mobil__value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: .5rem .7rem;
  font-size: var(--fs-sm);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.mobil__value--text { min-height: 56px; align-items: flex-start; color: var(--ink-muted); }
.mobil__value .icon { flex: none; color: var(--ink-faint); }

.mobil__priloha {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--green-ink);
}
.mobil__submit {
  margin-top: var(--sp-4);
  padding: .7rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  color: var(--white);
  background: var(--green-deep);
  border-radius: var(--r-md);
}

.otevrene {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.otevrene__title { font-size: var(--fs-h3); }
.otevrene__list { display: grid; margin-top: var(--sp-4); }
.otevrene__list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-soft);
}
.otevrene__list > li:last-child { border-bottom: 0; }
.otevrene__text { display: grid; gap: 2px; }
.otevrene__co { font-weight: 600; }
.otevrene__kde { font-size: var(--fs-xs); color: var(--ink-faint); }
.otevrene__cta { margin-top: var(--sp-4); }

/* ==========================================================================
   7. Dokumentace a revize — vlasová mřížka, ne osm kartiček
   ========================================================================== */

.dokumenty {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: var(--sp-8);
  border-top: 1px solid rgba(42, 127, 82, .2);
}
.dokument {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid rgba(42, 127, 82, .2);
  border-right: 1px solid rgba(42, 127, 82, .2);
}
.dokument:nth-child(4n + 1) { padding-left: 0; }
.dokument:nth-child(4n)     { padding-right: 0; border-right: 0; }
.dokument:nth-last-child(-n + 4) { border-bottom: 0; }
.dokument__ikona { flex: none; color: var(--green-ink); }
.dokument__label { font-weight: 600; font-size: var(--fs-sm); }

/* ==========================================================================
   Zlomy
   ========================================================================== */

@media (max-width: 1099px) {
  .fm-prehled__grid,
  .fm-mapa__grid,
  .fm-plan__grid,
  .fm-technici__grid,
  .fm-zavady__grid { grid-template-columns: 1fr; }

  /* Snímek je hlavní sdělení sekce — ve stohu patří nad doplňkovou kartu. */
  .fm-technici__grid .snimek { order: -1; }
  .mobil { max-width: 300px; }
  .dokumenty { grid-template-columns: repeat(2, 1fr); }
  .dokument:nth-child(4n + 1) { padding-left: var(--sp-6); }
  .dokument:nth-child(4n)     { padding-right: var(--sp-6); border-right: 1px solid rgba(42, 127, 82, .2); }
  .dokument:nth-child(2n + 1) { padding-left: 0; }
  .dokument:nth-child(2n)     { padding-right: 0; border-right: 0; }
  .dokument:nth-last-child(-n + 4) { border-bottom: 1px solid rgba(42, 127, 82, .2); }
  .dokument:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (max-width: 767px) {
  .mockup__dlazdice { grid-template-columns: repeat(2, 1fr); }
  .zarizeni__hlava { grid-template-columns: 1fr; }
  .zarizeni__qr { justify-self: start; text-align: left; }
  .zarizeni__qr figcaption { max-width: none; }

  /* Pět kroků vedle sebe je na mobilu nečitelných — přejde to na dva sloupce
     a tečkovaná spojnice zmizí, protože už nevede tam, kam ukazuje. */
  .prubeh { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .prubeh__krok::after { content: none; }

  .historie > li { grid-template-columns: auto auto minmax(0, 1fr); }
  .historie__kdo { grid-column: 2 / -1; }

  .mockup { padding: var(--sp-4); }
  .mockup__dlazdice > li { padding: var(--sp-4); }
}

@media (max-width: 479px) {
  .dokumenty { grid-template-columns: 1fr; }
  .dokument { padding-inline: 0 !important; border-right: 0 !important; }
  .dokument:not(:last-child) { border-bottom: 1px solid rgba(42, 127, 82, .2); }
  .dokument:last-child { border-bottom: 0; }
  .mockup__dlazdice { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Univerzální sekce landing pages (sections/lp-sekce.php)

   Wireframy tří scénářů stojí na pár opakujících se útvarech. Tohle jsou ony.
   ========================================================================== */

/* --- Mřížka dlaždic ------------------------------------------------------- */

.dlazdice {
  display: grid;
  grid-template-columns: repeat(var(--sl, 3), minmax(0, 1fr));
  gap: var(--sp-5);
}
.dlazdice--2 { --sl: 2; }
.dlazdice--3 { --sl: 3; }
.dlazdice--4 { --sl: 4; }

.dlazdice__karta {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.dlazdice__karta:hover { border-color: rgba(86, 206, 143, .55); box-shadow: var(--shadow-md); }
.section--dark .dlazdice__karta {
  background: var(--dark-soft);
  border-color: rgba(255, 255, 255, .12);
}
.section--dark .dlazdice__karta:hover { border-color: rgba(86, 206, 143, .45); box-shadow: none; }

/* Korektura 1. 9. 2026: ikona byla samotný tah v --green-ink. Zadavatel:
   „a tady totéž – jiná zelená. Pokud by to bylo s naší zelenou málo výrazné,
   dá se piktogram udělat bílou na zeleném podkladu.“ Podklad je zelená z loga,
   piktogram antracit — bílá by na téhle zelené měla kontrast 2:1. */
.dlazdice__ikona {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--green); color: var(--ink);
}
.section--dark .dlazdice__ikona { background: var(--green); color: var(--dark); }
/* [05-08] „trochu zvýraznit hlavní nadpisy“ — o stupeň větší a tmavší. */
.dlazdice__title { font-size: 1.0625rem; font-weight: 700; line-height: var(--lh-head); color: var(--ink-strong); }
.section--dark .dlazdice__title { color: var(--white); }
.dlazdice__desc  { font-size: var(--fs-sm); color: var(--ink-muted); }
.section--dark .dlazdice__desc { color: rgba(255, 255, 255, .68); }

.dlazdice__list { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-muted); }
.dlazdice__list > li { position: relative; padding-left: var(--sp-4); }
.dlazdice__list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
}

/* --- Text vedle náhledu obrazovky ---------------------------------------- */

.lp-snimek {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-9));
  align-items: center;
}
.lp-snimek--obraceno { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.lp-snimek--obraceno .lp-snimek__text { order: 2; }
.lp-snimek .snimek { margin-top: 0; }

.lp-snimek__text > p { color: var(--ink-muted); }
.section--dark .lp-snimek__text > p { color: rgba(255, 255, 255, .72); }

/* --- Odrážky s fajfkou ---------------------------------------------------- */

.odrazky { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.odrazky > li { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); }
.odrazky .icon { flex: none; margin-top: 3px; color: var(--green-ink); }
.section--dark .odrazky .icon { color: var(--green); }

.odrazky--velke { margin-top: 0; gap: var(--sp-4); }
.odrazky--velke > li { font-size: var(--fs-body); }

/* --- Číslovaný postup ----------------------------------------------------- */

.postup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.postup__krok {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.postup__cislo {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--green-ink);
}
.postup__ikona { margin-top: var(--sp-2); color: var(--ink-strong); }
/* [05-06] „trochu zvýraznit hlavní kroky“ — o stupeň větší a tmavší. */
.postup__title { font-size: 1.0625rem; font-weight: 700; color: var(--ink-strong); }
.postup__desc  { font-size: var(--fs-sm); color: var(--ink-muted); }

/* Tečkovaná dráha mezi kroky — tentýž kreslený tah jako jinde na webu.
   Poslední ve své řadě ji nemá; řádkuje se po třech. */
.postup__krok::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--sp-5);
  border-top: 2px dotted rgba(42, 127, 82, .4);
}
.postup__krok:nth-child(3n)::after,
.postup__krok:last-child::after { content: none; }

/* --- Důvody + přínosy ----------------------------------------------------- */

.lp-duvody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-9));
  align-items: start;
}

.prinosy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.prinosy > li {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--white);
}
.prinosy__ikona { color: var(--green-ink); }
.prinosy__title { font-size: var(--fs-sm); font-weight: 700; }
.prinosy__desc  { font-size: var(--fs-sm); color: var(--ink-muted); }

/* --- Typy produktů (jen ikona a název) ------------------------------------ */

.typy {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-4);
}
.typy__polozka {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
}
.typy__ikona {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--green-deep);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.typy__ikona .icon { width: 28px; height: 28px; }
.typy__label { font-size: var(--fs-sm); font-weight: 600; }

.lp-sekce__pod {
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* --- Zlomy ---------------------------------------------------------------- */

@media (max-width: 1099px) {
  .dlazdice--4 { --sl: 2; }
  .typy { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .postup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .postup__krok::after { content: none; }
}

@media (max-width: 899px) {
  .dlazdice { --sl: 2 !important; }
  /* Ve stohu je snímek hlavní sdělení — patří nad text, ne pod něj. */
  .lp-snimek,
  .lp-snimek--obraceno { grid-template-columns: 1fr; }
  .lp-snimek--obraceno .lp-snimek__text { order: 0; }
  .lp-snimek .snimek { order: -1; }
  .lp-duvody { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .dlazdice { --sl: 1 !important; }
  .postup { grid-template-columns: 1fr; }
  .prinosy { grid-template-columns: 1fr; }
  .typy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}