/* ═══════════════════════════════════════════════════════════════════════
   style-blog.css — komponenty blogového článku (.pdu-blo-*) + redesign
   šablonového výpisu článků na /blog/ a v rubrikách.
   Načítá: globálně z hlavičky šablony (HEAD, <link rel="stylesheet">), 3. v pořadí
            PDU CSS (global → sections → blog → category → pages → products)
            — viz meta/manual.md kap. 4. Na TESTu navíc script-blog.js v patičce.
   Prefix tříd: .pdu-blo- (jediná výjimka: SEKCE 15, viz mapa)
   ───────────────────────────────────────────────────────────────────────
   Duplicita patternů se sections/pages/style-pages.css je ZÁMĚRNÁ — per-page-type
   princip (manual.md kap. 2): každý page-type má self-contained CSS, žádný
   cross-import mezi sekcemi. Shoda .pdu-blo-* ↔ .pdu-pag-* je tedy kopie, ne chyba;
   každý soubor se opravuje nezávisle.
   Tokeny (--pdu-*) čerpá z eshop/global.css (root-level, dostupné všem sekcím) —
   změna designových tokenů probíhá VÝHRADNĚ tam, ne tady.
   ───────────────────────────────────────────────────────────────────────
   MAPA SEKCÍ (Ctrl+F na "SEKCE N."):
    1. Page wrapper + intro — root <article> .pdu-blo-page + perex .pdu-blo-intro
    2. Rozcestník — intent fork nahoře článku („stavím sám" × „na klíč")
    3. Prokliky — 4 navigační karty pod intrem (návody / blog / workshopy / rádce)
    4. Divider — tenká vodorovná linka mezi sekcemi
    5. Typografie sekce — .pdu-blo-sekce: H2 se zeleným pruhem, H3, p, ul/ol, CTA
    6. Pozadí světle-šedé (legacy) — neutrální blok bez okraje
    7. Galerie 3-col — čtvercová fotogalerie se Shoptet lightboxem
    8. Tipy — timeline — vertikální osa 6 tipů s emoji-dot
    9. Tlačítka pro mid-CTA — žluté .pdu-blo-btn-cta + ghost na tmavém pozadí
   10. Mid-CTA banner — tmavomodrý pruh s fotkou týmu (3 breakpointy)
   11. Related list — „Mohlo by vás také zajímat", plain UL/LI + ZOBRAZIT →
   12. CTA stack — karta „S čím pomůžeme" + box s formulářem (od 62em 2-col)
   13. Jak na to — číslovaný OL s kruhy (používá se uvnitř SEKCE 12)
   14. Rámeček šedý s mapou — 2-col box (mapa poboček + text) od 62em
   15. Výpis článků (blog listing) — JEDINÁ sekce, která NEcílí .pdu-blo-*:
       styluje šablonový Shoptet markup body.type-posts-listing (.news-item,
       .subcategories.with-image), ne náš vkládaný obsah
   16. A11y / reduced motion — vypnutí transformů a přechodů
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 1. PAGE WRAPPER + INTRO
   Kořenový obal blogového článku (.pdu-blo-page) a úvodní perex (.pdu-blo-intro).
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - .pdu-blo-page = root <article>: dědí font, nastavuje box-sizing celému podstromu
   - .pdu-blo-intro = úvodní odstavec (větší řádkování, sekundární barva textu)

   HTML:
     <article class="pdu-blo-page">
       <p class="pdu-blo-intro">Pokud potřebujete...</p>
       ...
     </article>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-page {
  font-family: inherit;
  font-size: var(--pdu-base-font-size);
  color: var(--pdu-barva-tmavomodra);
  box-sizing: border-box;
  max-width: 100%;
}
.pdu-blo-page *,
.pdu-blo-page *::before,
.pdu-blo-page *::after { box-sizing: border-box; font-family: inherit; }

.pdu-blo-intro {
  font-size: 1.1em;
  line-height: 1.65;
  color: var(--pdu-barva-tekst-zakladni);
  margin: 0 0 1.25em;
}
.pdu-blo-intro strong { color: var(--pdu-barva-tmavomodra); }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 2. ROZCESTNÍK
   Intent fork hned za page wrapperem: karta „Stavím sám" (aktivní = čtenář je tady)
   vs. „Na klíč" (off-ramp na /realizace-montaze/).
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - 2 karty side-by-side (mobile stack)
   - .is-active = karta odpovídající aktuálnímu článku
       → zelený border, světlé pozadí, "Tady jste" pill, žádný hover transform
   - druhá karta = link na alternativu (např. /realizace-montaze/)
       → 1px gray border, hover lift, šipka posun

   HTML (oba <div> — link je overlay <a class="pdu-blo-volba-link">, ne wrap):
     <section class="pdu-blo-rozcestnik">
       <p class="pdu-blo-rozcestnik-question">Co plánujete?</p>
       <div class="pdu-blo-rozcestnik-volby">
         <div class="pdu-blo-volba is-active">
           <span class="pdu-blo-volba-pill">Tady jste</span>
           <div class="pdu-blo-volba-ico" aria-hidden="true">🔨</div>
           <strong>Stavím si plot sám</strong>
           <span class="pdu-blo-volba-sub">Čtěte tento návod ↓</span>
         </div>
         <div class="pdu-blo-volba">
           <div class="pdu-blo-volba-ico" aria-hidden="true">🤝</div>
           <strong>Chci si plot nechat postavit</strong>
           <span class="pdu-blo-volba-sub">Spočítáme to za vás <em>→</em></span>
           <a class="pdu-blo-volba-link" href="/realizace-montaze/" aria-label="Chci si plot nechat postavit — spočítáme to za vás"></a>
         </div>
       </div>
     </section>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-rozcestnik { margin: 0 0 1.5em; }
.pdu-blo-rozcestnik-question {
  font-size: 1.05em;
  font-weight: 700;
  color: var(--pdu-barva-text-sekundarni);
  text-align: center;
  margin: 0 0 0.75em;
  letter-spacing: 0.01em;
}
.pdu-blo-rozcestnik-volby {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75em;
}
@media (min-width: 37.5em) {
  .pdu-blo-rozcestnik-volby { grid-template-columns: repeat(2, 1fr); }
}
.pdu-blo-volba {
  position: relative;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card);
  padding: 1.25em 1.125em 1.125em;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.375em;
  box-shadow: var(--pdu-stin-jemny);
  transition: all var(--pdu-prechod-dur-stredni) ease;
  color: var(--pdu-barva-tmavomodra);
}
/* overlay link — celá karta klikatelná (pattern paralelní s .pdu-pag-koho-link) */
.pdu-blo-volba-link {
  position: absolute; inset: 0;
  z-index: 10;
  text-decoration: none !important;
  border-radius: var(--pdu-radius-card);
}
/* link variant (karta která má .pdu-blo-volba-link uvnitř) — hover lift */
.pdu-blo-volba:has(.pdu-blo-volba-link):hover,
.pdu-blo-volba:has(.pdu-blo-volba-link):focus-within {
  box-shadow: var(--pdu-stin-vyrazny);
  transform: translateY(-0.1875em);
  border-color: var(--pdu-barva-zelena-akcent);
}
/* Fallback bez :has — vždy hover na všech volbach bez is-active */
.pdu-blo-volba:not(.is-active):hover {
  box-shadow: var(--pdu-stin-vyrazny);
  transform: translateY(-0.1875em);
  border-color: var(--pdu-barva-zelena-akcent);
}
/* active variant — kde čtenář je */
.pdu-blo-volba.is-active {
  border: 0.125em solid var(--pdu-barva-zelena-akcent);
  background: var(--pdu-barva-zelena-svetla-3);
  cursor: default;
}
.pdu-blo-volba.is-active:hover {
  box-shadow: var(--pdu-stin-jemny);
  transform: none;
}
/* "Tady jste" pill — jen pro is-active */
.pdu-blo-volba-pill {
  position: absolute; top: -0.625em; left: 50%;
  transform: translateX(-50%);
  background: var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-bila);
  font-size: .72em; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.25em 0.625em;
  border-radius: 999px;
  white-space: nowrap;
}
.pdu-blo-volba-ico {
  width: 3em; height: 3em;
  border-radius: 50%;
  background: var(--pdu-barva-zelena-svetla-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5em; line-height: 1;
  margin: 0 0 0.125em;
}
.pdu-blo-volba.is-active .pdu-blo-volba-ico {
  background: var(--pdu-barva-bila);
}
.pdu-blo-volba strong {
  font-size: 1.1em; font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  line-height: 1.3;
}
.pdu-blo-volba-sub {
  font-size: .92em;
  color: var(--pdu-barva-text-sekundarni);
  line-height: 1.45;
}
.pdu-blo-volba.is-active .pdu-blo-volba-sub {
  color: var(--pdu-barva-zelena-akcent-hover);
  font-weight: 700;
}
.pdu-blo-volba-sub em {
  font-style: normal;
  display: inline-block;
  transition: transform var(--pdu-prechod-dur-rychly) ease;
}
.pdu-blo-volba:not(.is-active):hover .pdu-blo-volba-sub em { transform: translateX(0.25em); }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 3. PROKLIKY
   Čtyři navigační karty pod intrem (návody / blog / workshopy / rádce) — quick-access
   pro čtenáře, který chce jít hlouběji.
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - Quick-access nav po intru: čtenář vidí 4 destinace pro „jdu hluboko"
   - 2×2 grid (mobile 1-col → ≥37.5em 2-col)
   - Color modifiers stejné jako u .pdu-blo-stat / .pdu-blo-topic:
     is-emerald / is-amber / is-blue / is-coral
   - Overlay-link pattern (pdu-blo-prokliky-link absolute inset) kvůli WYSIWYG safety

   HTML:
     <section class="pdu-blo-prokliky">
       <div class="pdu-blo-prokliky-karta is-emerald">
         <span class="pdu-blo-prokliky-ico" aria-hidden="true">📘</span>
         <strong class="pdu-blo-prokliky-titulek">On-line návody</strong>
         <span class="pdu-blo-prokliky-cta">Zobrazit <em>→</em></span>
         <a class="pdu-blo-prokliky-link" href="/navody/" aria-label="On-line návody"></a>
       </div>
       ... ×4
     </section>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-prokliky {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875em;
  margin: 1.25em 0 1.75em;
}
@media (min-width: 37.5em) {
  .pdu-blo-prokliky { grid-template-columns: repeat(2, 1fr); }
}
/* Horizontální layout (icon vlevo, text vpravo) — vizuálně odlišuje od rozcestníku (stacked centered). */
.pdu-blo-prokliky-karta {
  position: relative;
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-left: 0.25em solid var(--pdu-barva-zelena-akcent);
  border-radius: var(--pdu-radius-card);
  padding: 0.875em 1.125em;
  display: flex; flex-direction: row; align-items: center; gap: 0.875em;
  text-align: left;
  box-shadow: var(--pdu-stin-jemny);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-blo-prokliky-karta:hover,
.pdu-blo-prokliky-karta:focus-within {
  box-shadow: var(--pdu-stin-vyrazny);
  transform: translateX(0.1875em);
  border-color: var(--pdu-barva-zelena-akcent);
}
.pdu-blo-prokliky-link {
  position: absolute; inset: 0;
  z-index: 10;
  border-radius: var(--pdu-radius-card);
  text-decoration: none !important;
}
.pdu-blo-prokliky-ico {
  flex-shrink: 0;
  width: 2.5em; height: 2.5em;
  border-radius: 50%;
  background: var(--pdu-barva-zelena-svetla-3);
  color: var(--pdu-barva-zelena-akcent-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15em; line-height: 1;
}
.pdu-blo-prokliky-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 0.125em;
}
.pdu-blo-prokliky-titulek {
  font-size: 1em;
  font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  line-height: 1.3;
}
.pdu-blo-prokliky-cta {
  font-size: .8em; font-weight: 700;
  color: var(--pdu-barva-zelena-akcent);
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 0.25em;
}
.pdu-blo-prokliky-cta em {
  font-style: normal;
  transition: transform var(--pdu-prechod-dur-rychly) ease;
}
.pdu-blo-prokliky-karta:hover .pdu-blo-prokliky-cta em {
  transform: translateX(0.25em);
}
/* Color modifiers — left-border accent + tinted ico bg+color */
.pdu-blo-prokliky-karta.is-amber   { border-left-color: #F4B73F; }
.pdu-blo-prokliky-karta.is-amber   .pdu-blo-prokliky-ico { background: #FFF3D6; color: #B5740B; }
.pdu-blo-prokliky-karta.is-blue    { border-left-color: #4C8BF5; }
.pdu-blo-prokliky-karta.is-blue    .pdu-blo-prokliky-ico { background: #E0EBFF; color: #1A4FB8; }
.pdu-blo-prokliky-karta.is-coral   { border-left-color: #E66A52; }
.pdu-blo-prokliky-karta.is-coral   .pdu-blo-prokliky-ico { background: #FFE2DA; color: #B53A20; }
.pdu-blo-prokliky-karta.is-emerald { border-left-color: var(--pdu-barva-zelena-akcent); }
.pdu-blo-prokliky-karta.is-emerald .pdu-blo-prokliky-ico { background: var(--pdu-barva-zelena-svetla-3); color: var(--pdu-barva-zelena-akcent-hover); }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 4. DIVIDER
   Tenká vodorovná linka mezi sekcemi článku.
   Kopie patternu z pages/ (tam SEKCE 2 DIVIDER) — self-contained, viz hlavička.
   ───────────────────────────────────────────────────────────────────────
   HTML:
     <hr class="pdu-blo-divider" />
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-divider {
  border: 0;
  border-top: 1px solid var(--pdu-barva-okraj-jemny);
  margin: 1.75em 0;
  height: 0;
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 5. TYPOGRAFIE SEKCE
   Typografie obsahové sekce článku (.pdu-blo-sekce): H2 se zeleným levým pruhem,
   H3, odstavce, odkazy a seznamy + zelené CTA tlačítko na konci sekce.
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - .pdu-blo-sekce h2 = nadpis sekce (zelený levý pruh + bold tmavomodrá)
   - .pdu-blo-sekce h3 = podsekce
   - .pdu-blo-sekce-cta-wrap / -cta = malý green pill „Zobrazit nabídku X →"
     (mobile centered → od 48em zarovnaný vpravo; patří na konec těla sekce)

   HTML:
     <section class="pdu-blo-sekce">
       <h2>Online návody na stavbu plotu</h2>
       <p>Text odstavce...</p>
     </section>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-sekce { margin: 0 0 1.5em; }
.pdu-blo-sekce h2 {
  font-size: 1.4em;
  font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  margin: 0.75em 0 0.5em;
  line-height: 1.3;
  position: relative;
  padding-left: 0.75em;
}
.pdu-blo-sekce h2::before {
  content: ""; position: absolute;
  left: 0; top: 0.25em; bottom: 0.25em;
  width: 0.25em; border-radius: 0.125em;
  background: var(--pdu-barva-zelena-akcent);
}
.pdu-blo-sekce h3 {
  font-size: 1.15em;
  font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  margin: 1em 0 0.375em;
}
.pdu-blo-sekce p {
  line-height: 1.7;
  color: var(--pdu-barva-tekst-zakladni);
  margin: 0 0 0.875em;
}
.pdu-blo-sekce p a,
.pdu-blo-sekce li a {
  color: var(--pdu-barva-zelena-akcent) !important;
  text-decoration: none !important;
  font-weight: 600;
}
.pdu-blo-sekce p a:hover,
.pdu-blo-sekce li a:hover { text-decoration: underline !important; }
.pdu-blo-sekce ul,
.pdu-blo-sekce ol {
  margin: 0 0 1em;
  padding-left: 1.375em;
  line-height: 1.7;
}

/* CTA button uvnitř sekce — malý green pill „Zobrazit nabídku X →"
   Wrap pro layout (mobile centered → desktop right-aligned).
   Použití: na konci .pdu-blo-sekce body, před uzavřením section. */
.pdu-blo-sekce-cta-wrap {
  margin: 0.625em 0 1em;
  text-align: center;
}
@media (min-width: 48em) {
  .pdu-blo-sekce-cta-wrap { text-align: right; }
}
.pdu-blo-sekce-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375em;
  padding: 0.625em 1.125em;
  background: var(--pdu-barva-zelena-akcent);
  color: var(--pdu-barva-bila) !important;
  text-decoration: none !important;
  font-weight: 700;
  border-radius: var(--pdu-radius-m);
  font-size: 0.92em;
  border: 1px solid var(--pdu-barva-zelena-akcent);
  transition: all var(--pdu-prechod-dur-stredni) ease;
}
.pdu-blo-sekce-cta:hover,
.pdu-blo-sekce-cta:focus-visible {
  background: var(--pdu-barva-bila);
  color: var(--pdu-barva-tmavomodra) !important;
  border-color: var(--pdu-barva-tmavomodra);
  transform: translateY(-1px);
  outline: none;
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 6. POZADÍ SVĚTLE-ŠEDÉ (LEGACY)
   Neutrální blok na plnou šířku jen se světle šedým pozadím a paddingem — bez
   borderu, radiusu i stínu. V původní mapě označen jako legacy pattern.
   ───────────────────────────────────────────────────────────────────────
   HTML:
     <div class="pdu-blo-pozadi-svetlesede-bez-okraje">obsah</div>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-pozadi-svetlesede-bez-okraje {
  width: 100%;
  background-color: var(--pdu-barva-sede-svetla);
  padding: 0.625em 1.875em;
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 7. GALERIE 3-COL
   Čtvercová fotogalerie 2 sloupce (mobil) → 3 sloupce od 37.5em, otevírá se ve
   vestavěném Shoptet lightboxu. Kopie patternu z pages/ (tam SEKCE 12 GALERIE 3-COL).
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - Grid 2 cols (mobile) → 3 cols (≥37.5em)
   - Square aspect 1:1, hover scale + magnifier 🔍
   - <a data-gallery="lightbox"> = Shoptet built-in lightbox
   - Lichý počet fotek na mobilu: poslední item se vystředí (orphan center)

   HTML:
     <div class="pdu-blo-galerie-grid">
       <a class="pdu-blo-galerie-item" href="..." data-gallery="lightbox">
         <img src="..." alt="..." loading="lazy">
       </a>
       ×3
     </div>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-galerie-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625em;
  margin: 1.25em 0 1.5em;
}
@media (min-width: 37.5em) {
  .pdu-blo-galerie-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Orphan center: mobil 2-col, pokud je počet lichý, poslední item se vystředí
   (např. 3 fotky → 1+1 řada, 3. uprostřed; 5 fotek → 2+2 řady, 5. uprostřed). */
@media (max-width: 37.4375em) {
  .pdu-blo-galerie-grid > a:nth-child(odd):last-child:not(:first-child) {
    grid-column: 1 / -1;
    width: calc(50% - 0.3125em);
    justify-self: center;
  }
}
.pdu-blo-galerie-item {
  display: block; position: relative;
  aspect-ratio: 1/1; overflow: hidden;
  border-radius: var(--pdu-radius-card);
  box-shadow: var(--pdu-stin-jemny);
  cursor: pointer;
  transition: all var(--pdu-prechod-dur-stredni) ease;
  text-decoration: none !important;
}
.pdu-blo-galerie-item:hover {
  transform: scale(1.04);
  box-shadow: 0 0.625em 1.75em rgba(0, 0, 0, .14);
}
.pdu-blo-galerie-item img {
  width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
  border-radius: 0 !important; border: none !important;
  margin: 0 !important; padding: 0 !important;
}
.pdu-blo-galerie-item::after {
  content: "🔍"; position: absolute;
  right: 0.5em; bottom: 0.5em;
  background: rgba(255, 255, 255, .92);
  width: 2em; height: 2em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875em; opacity: 0;
  transition: opacity var(--pdu-prechod-dur-stredni) ease;
}
.pdu-blo-galerie-item:hover::after { opacity: 1; }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 8. TIPY — VERTIKÁLNÍ TIMELINE
   Blok „Základní tipy ke stavbě plotu svépomocí" — H2 + vertikální timeline
   6 položek (emoji-dot vlevo, titulek a text vpravo), bez karet a borderů.
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - H2 nadpis + vertikální timeline 6 položek
   - Každá položka: emoji-dot vlevo (kruh s emoji) + body (titulek + krátký text) vpravo
   - Mezi dots vertikální linka (::before na li) — visual flow
   - Žádné karty/bordery — vzdušnější než grid pattern

   HTML:
     <section class="pdu-blo-tipy">
       <h2 class="pdu-blo-tipy-title">Základní tipy ke stavbě plotu svépomocí</h2>
       <ol class="pdu-blo-timeline">
         <li class="pdu-blo-timeline-item">
           <span class="pdu-blo-timeline-dot" aria-hidden="true">📏</span>
           <div class="pdu-blo-timeline-body">
             <strong class="pdu-blo-timeline-titulek">Začněte přesným zaměřením</strong>
             <p>Bez správného zaměření hrozí...</p>
           </div>
         </li>
         ... ×6
       </ol>
     </section>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-tipy {
  margin: 1.75em auto;
  max-width: 44em;
}
.pdu-blo-tipy-title {
  font-size: 1.45em;
  font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  margin: 0 0 1.25em;
  text-align: center;
}
.pdu-blo-timeline {
  list-style: none;
  margin: 0; padding: 0;
}
.pdu-blo-timeline-item {
  position: relative;
  padding: 0 0 1.5em 3.5em;
  min-height: 2.75em;
}
.pdu-blo-timeline-item:last-child { padding-bottom: 0; }
/* vertikální linka mezi dots */
.pdu-blo-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.25em;
  top: 2.75em;
  bottom: -0.25em;
  width: 2px;
  background: var(--pdu-barva-okraj-jemny);
}
.pdu-blo-timeline-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5em; height: 2.5em;
  border-radius: 50%;
  background: var(--pdu-barva-zelena-svetla-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15em; line-height: 1;
  z-index: 1;
  border: 2px solid var(--pdu-barva-bila);
  box-shadow: 0 0 0 2px var(--pdu-barva-zelena-svetla-3);
}
.pdu-blo-timeline-body {
  padding-top: 0.25em;
}
.pdu-blo-timeline-titulek {
  display: block;
  font-size: 1.08em;
  font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  margin: 0 0 0.25em;
  line-height: 1.3;
}
.pdu-blo-timeline-body p {
  margin: 0;
  line-height: 1.65;
  color: var(--pdu-barva-tekst-zakladni);
  font-size: 0.96em;
}
.pdu-blo-timeline-body a {
  color: var(--pdu-barva-zelena-akcent) !important;
  text-decoration: none !important;
  font-weight: 600;
}
.pdu-blo-timeline-body a:hover,
.pdu-blo-timeline-body a:focus-visible { text-decoration: underline !important; }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 9. TLAČÍTKA PRO MID-CTA
   Dvojice tlačítek používaných v mid-CTA banneru (SEKCE 10): žluté primární
   a ghost s bílým okrajem pro tmavé pozadí.
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - .pdu-blo-btn-cta   = žlutý CTA (silnější visual hierarchy)
   - .pdu-blo-btn-ghost = transparentní s bílým borderem (pro mid-CTA na tmavém bg)
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-btn-cta,
.pdu-blo-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.875em 1.75em; font-size: 1.05em; font-weight: 700;
  text-decoration: none !important; border-radius: var(--pdu-radius-m);
  transition: all var(--pdu-prechod-dur-stredni) ease;
  text-align: center; cursor: pointer; line-height: 1.2;
}
.pdu-blo-btn-cta {
  background-color: var(--pdu-barva-zluta-cta);
  color: var(--pdu-barva-tmavomodra) !important;
  border: 1px solid var(--pdu-barva-zluta-cta);
  font-weight: 800;
  box-shadow: 0 0 0 1px var(--pdu-barva-okraj-jemny);
}
.pdu-blo-btn-cta:hover,
.pdu-blo-btn-cta:focus-visible {
  background-color: var(--pdu-barva-bila);
  color: var(--pdu-barva-tmavomodra) !important;
  border-color: var(--pdu-barva-tmavomodra);
  transform: translateY(-1px);
  outline: none;
}
.pdu-blo-btn-ghost {
  background: transparent;
  color: var(--pdu-barva-bila) !important;
  border: 1px solid rgba(255, 255, 255, .7);
}
.pdu-blo-btn-ghost:hover,
.pdu-blo-btn-ghost:focus-visible {
  background: var(--pdu-barva-bila);
  color: var(--pdu-barva-tmavomodra) !important;
  border-color: var(--pdu-barva-bila);
  transform: translateY(-1px);
  outline: none;
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 10. MID-CTA BANNER
   Tmavomodrý CTA pruh s gradientem a fotkou týmu v pozadí (3 breakpointy obrázku).
   Kopie patternu z pages/ (tam SEKCE 17 MID CTA).
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - Tmavomodré pozadí s gradient overlay + foto týmu (3 breakpointy)
   - Bílý text s text-shadow
   - 2 tlačítka: yellow CTA + ghost (white border) — viz SEKCE 9

   HTML:
     <section class="pdu-blo-cta-mid">
       <h3 class="pdu-blo-cta-mid-title">Nechcete řešit montáž sami?</h3>
       <p class="pdu-blo-cta-mid-text">...</p>
       <div class="pdu-blo-cta-mid-akce">
         <a href="/realizace-montaze/" class="pdu-blo-btn-cta">Chci nabídku →</a>
         <a href="/kontakt-obchodni-zastupci/" class="pdu-blo-btn-ghost">Obchodní zástupci</a>
       </div>
     </section>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-cta-mid {
  background-color: var(--pdu-barva-tmavomodra);
  background-image: linear-gradient(rgba(25, 25, 50, .55), rgba(25, 25, 50, .55)),
                    url('https://cdn.myshoptet.com/usr/www.levne-pletivo.cz/user/documents/upload/fotografie/team/tym-ploty-dobry-768w.jpg');
  background-size: cover; background-position: center center; background-repeat: no-repeat;
  color: var(--pdu-barva-bila);
  padding: 2.375em 1.625em;
  border-radius: var(--pdu-radius-xl);
  text-align: center;
  margin: 2em 0;
}
@media (min-width: 48em) {
  .pdu-blo-cta-mid {
    background-image: linear-gradient(rgba(25, 25, 50, .55), rgba(25, 25, 50, .55)),
                      url('https://cdn.myshoptet.com/usr/www.levne-pletivo.cz/user/documents/upload/fotografie/team/tym-ploty-dobry-1280w.jpg');
  }
}
@media (min-width: 90em) {
  .pdu-blo-cta-mid {
    background-image: linear-gradient(rgba(25, 25, 50, .55), rgba(25, 25, 50, .55)),
                      url('https://cdn.myshoptet.com/usr/www.levne-pletivo.cz/user/documents/upload/fotografie/team/tym-ploty-dobry-1920w.jpg');
  }
}
.pdu-blo-cta-mid-title {
  font-size: 1.6em; font-weight: 800;
  margin: 0 0 0.75em;
  color: var(--pdu-barva-bila);
  text-shadow: 0 1px 0.125em rgba(0, 0, 0, .4);
}
.pdu-blo-cta-mid-text {
  font-size: 1.1em; line-height: 1.55;
  margin: 0 auto 1.375em; max-width: 38.75em;
  color: var(--pdu-barva-bila);
  text-shadow: 0 1px 0.125em rgba(0, 0, 0, .4);
}
.pdu-blo-cta-mid-text strong { color: var(--pdu-barva-bila); }
.pdu-blo-cta-mid-akce {
  display: flex; gap: 0.625em;
  justify-content: center; flex-wrap: wrap;
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 11. RELATED LIST
   Blok „Mohlo by vás také zajímat" — <aside> s nadpisem a seznamem klikatelných
   řádků (titulek vlevo, „ZOBRAZIT →" vpravo).
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - <aside> blok s nadpisem + UL klikatelných řádků
   - Každý řádek = titulek vlevo, „ZOBRAZIT →" vpravo (flex space-between)
   - Hover: jemný bg highlight, posun šipky

   HTML:
     <aside class="pdu-blo-related">
       <h3 class="pdu-blo-related-title">Mohlo by vás také zajímat</h3>
       <ul>
         <li><a href="/blog/postavte-si-plot-svepomoci-vychytavky/">
           <span class="pdu-blo-related-text">Vychytávky a pomůcky pro stavbu plotu</span>
           <span class="pdu-blo-related-cta">ZOBRAZIT <em>→</em></span>
         </a></li>
         ...
       </ul>
     </aside>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-related {
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card);
  padding: 1.125em 1.25em;
  margin: 1.5em 0 1.75em;
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-blo-related-title {
  font-size: 1.1em;
  font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  margin: 0 0 0.625em;
}
.pdu-blo-related ul {
  list-style: none;
  margin: 0; padding: 0;
}
.pdu-blo-related li {
  border-top: 1px solid var(--pdu-barva-okraj-svetly);
}
.pdu-blo-related li:first-child { border-top: 0; }
.pdu-blo-related li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  padding: 0.75em 0.5em;
  color: var(--pdu-barva-tmavomodra) !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: background var(--pdu-prechod-dur-rychly) ease;
  border-radius: var(--pdu-radius-s);
}
.pdu-blo-related li a:hover {
  background: var(--pdu-barva-zelena-svetla-3);
}
.pdu-blo-related-text { flex: 1; min-width: 0; }
.pdu-blo-related-cta {
  font-size: .85em;
  font-weight: 800;
  color: var(--pdu-barva-zelena-akcent);
  letter-spacing: 0.025em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}
.pdu-blo-related-cta em {
  font-style: normal;
  transition: transform var(--pdu-prechod-dur-rychly) ease;
}
.pdu-blo-related li a:hover .pdu-blo-related-cta em {
  transform: translateX(0.25em);
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 12. CTA STACK
   Závěrečný CTA blok: karta „S čím vám pomůžeme" (foto týmu, seznam, kroky)
   a box s poptávkovým formulářem. Mobil stack, od 62em vedle sebe.
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - Na mobilu vždy stacked vertikálně (text první → form druhý)
   - Oboje centered, max-width pro čitelnost (pomoc ~46em, form ~32em)
   - Od 62em 2-col side-by-side (pomoc + form-box vedle sebe)

   HTML:
     <section class="pdu-blo-cta-stack">
       <div class="pdu-blo-cta-pomoc">
         <img class="pdu-blo-tym-foto" src=".../obchodni-tym.jpg" alt="...">
         <h2>S čím vám pomůžeme?</h2>
         <ul>...</ul>
         <h3>Jak na to?</h3>
         <ol class="pdu-blo-jaknato">...</ol>
       </div>
       <div class="pdu-blo-form-box">
         <script src="https://se-forms.cz/..."></script>
       </div>
     </section>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-cta-stack {
  display: flex; flex-direction: column;
  gap: 1.25em;
  margin: 1.75em auto;
  max-width: 38em;
  align-items: stretch;
}
.pdu-blo-cta-stack > * { width: 100%; }
/* Desktop ≥62em: 2-col side-by-side (pomoc + form-box vedle sebe) */
@media (min-width: 62em) {
  .pdu-blo-cta-stack {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5em;
    max-width: 64em;
  }
  .pdu-blo-cta-stack > * { flex: 1; min-width: 0; }
}
.pdu-blo-cta-pomoc {
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card);
  padding: 1.5em 1.5em 1.25em;
  box-shadow: var(--pdu-stin-jemny);
  text-align: center;
}
.pdu-blo-cta-pomoc h2 {
  font-size: 1.45em; font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  margin: 0 0 0.5em;
}
.pdu-blo-cta-pomoc h3 {
  font-size: 1.15em; font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  margin: 1.25em 0 0.625em;
}
.pdu-blo-cta-pomoc ul {
  margin: 0 auto 0.875em;
  padding-left: 1.375em;
  line-height: 1.7;
  text-align: left;
  max-width: 24em;
}
.pdu-blo-tym-foto {
  display: block;
  width: 100%; max-width: 18em;
  height: auto;
  margin: 0 auto 1em;
  border-radius: var(--pdu-radius-card);
  box-shadow: var(--pdu-stin-jemny);
}
.pdu-blo-form-box {
  background: var(--pdu-barva-bila);
  border: 1px solid var(--pdu-barva-okraj-jemny);
  border-radius: var(--pdu-radius-card);
  padding: 1.125em 1.25em;
  box-shadow: var(--pdu-stin-jemny);
  min-height: 14em;
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 13. JAK NA TO — ČÍSLOVANÝ OL S KRUHY
   Číslovaný seznam kroků se zelenými kruhy místo klasického markeru.
   Používá se uvnitř .pdu-blo-cta-pomoc (SEKCE 12).
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-jaknato {
  list-style: none;
  counter-reset: pdu-blo-jaknato-counter;
  padding: 0; margin: 0 auto 1em;
  display: flex; flex-direction: column;
  gap: 0.75em;
  text-align: left;
  max-width: 28em;
}
.pdu-blo-jaknato > li {
  counter-increment: pdu-blo-jaknato-counter;
  position: relative;
  padding-left: 2.875em;
  line-height: 1.65;
  color: var(--pdu-barva-tekst-zakladni);
}
.pdu-blo-jaknato > li::before {
  content: counter(pdu-blo-jaknato-counter);
  position: absolute;
  left: 0; top: 0;
  width: 2.125em; height: 2.125em;
  border-radius: 50%;
  background: var(--pdu-barva-zelena-svetla-3);
  color: var(--pdu-barva-zelena-akcent);
  font-weight: 800; font-size: 1.05em;
  display: flex; align-items: center; justify-content: center;
}
.pdu-blo-jaknato > li a {
  color: var(--pdu-barva-zelena-akcent) !important;
  text-decoration: none !important;
  font-weight: 700;
}
.pdu-blo-jaknato > li a:hover { text-decoration: underline !important; }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 14. RÁMEČEK ŠEDÝ S MAPOU
   Šedě orámovaný <aside> s mapou poboček a textem. Mobil stack (mapa nahoře),
   od 62em 2-col grid. Kopie patternu z pages/ (tam SEKCE 26 RÁMEČEK ŠEDÝ).
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - Mobile: stack (mapa nahoře centered → body pod)
   - Desktop ≥62em: 2-col grid (mapa vlevo / body vpravo, vertikálně center)
   - .pdu-blo-ramecek-mapa = wrapper kolem <img> (umožní 2-col grid bez float)
   - .pdu-blo-ramecek-body = wrapper kolem h2/ul/h2/p

   HTML:
     <aside class="pdu-blo-ramecek-sedy">
       <div class="pdu-blo-ramecek-mapa">
         <img src=".../mapa-vsechny-pobocky-2026m.png" alt="..." />
       </div>
       <div class="pdu-blo-ramecek-body">
         <h2><strong>Proč to nechat na nás?</strong></h2>
         <ul>...</ul>
         <h2><strong>Co o nás říkají zákazníci?</strong></h2>
         <p>...</p>
       </div>
     </aside>
   ─────────────────────────────────────────────────────────────────────── */
.pdu-blo-ramecek-sedy {
  border: 0.125em solid var(--pdu-barva-sede-stredni);
  background: var(--pdu-barva-bila);
  border-radius: var(--pdu-radius-m);
  padding: 1.125em 1.375em;
  margin: 1.125em 0;
}
.pdu-blo-ramecek-mapa {
  text-align: center;
  margin: 0 0 0.875em;
}
.pdu-blo-ramecek-mapa img {
  display: inline-block;
  max-width: 14em; width: 100%; height: auto;
  border-radius: var(--pdu-radius-m);
}
.pdu-blo-ramecek-body > h2:first-child { margin-top: 0; }
.pdu-blo-ramecek-sedy h2 {
  margin: 0.875em 0 0.5em;
  font-size: 1.3em; font-weight: 800;
  color: var(--pdu-barva-tmavomodra);
  line-height: 1.3;
}
.pdu-blo-ramecek-sedy ul {
  margin: 0 0 0.875em;
  padding-left: 1.375em;
  line-height: 1.7;
}
.pdu-blo-ramecek-sedy ul li { margin-bottom: 0.25em; }
.pdu-blo-ramecek-sedy p { margin: 0 0 0.5em; line-height: 1.7; }
.pdu-blo-ramecek-sedy a {
  color: var(--pdu-barva-zelena-akcent) !important;
  text-decoration: none !important;
  font-weight: 700;
}
.pdu-blo-ramecek-sedy a:hover { text-decoration: underline !important; }

/* Desktop ≥62em: 2-col grid (mapa vlevo, body vpravo) */
@media (min-width: 62em) {
  .pdu-blo-ramecek-sedy {
    display: grid;
    grid-template-columns: minmax(0, 18em) minmax(0, 1fr);
    gap: 1.75em;
    align-items: center;
    padding: 1.5em 1.75em;
  }
  .pdu-blo-ramecek-mapa { margin: 0; }
  .pdu-blo-ramecek-mapa img { max-width: 100%; }
}


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 15. VÝPIS ČLÁNKŮ (BLOG LISTING)
   JEDINÁ sekce v tomto souboru, která NEcílí .pdu-blo-* — styluje šablonový Shoptet
   markup výpisu /blog/ a rubrik (body.type-posts-listing), ne náš vkládaný obsah.
   ───────────────────────────────────────────────────────────────────────
   Popis:
   - Scope: body.type-posts-listing = /blog/ + všechny rubriky
     (:not(.in-radce-pro-vyber-vhodneho-oploceni) — rádce má vlastní
     kartový styling v style-sections.css, nekolidovat)
   - Karta: foto nahoře (3/2 cover), text pod ním, zelený spodní akcent,
     stretched-link přes .title::after, hover lift + zoom
   - width:auto na .image přebíjí šablonové @media(min-width:1200px)
     {.news-item .image{width:370px}} (stejný trik jako rádce hub)
   - Součástí sekce jsou i pill karty rubrik nahoře (ul.subcategories.with-image)

   Šablonový markup (needitovatelný, Shoptet Classic):
     <div id="newsWrapper" class="news-wrapper">
       <div class="news-item">
         <div class="image"><a><img (velké foto)></a></div>
         <div class="text">
           <a class="title">…</a>
           <time datetime="…">…</time>
           <div class="description"><p>…</p></div>
         </div>
       </div>
     </div>
   ─────────────────────────────────────────────────────────────────────── */
/* jednotná mřížka — všechny karty STEJNĚ VELKÉ (Simča): pevná výška nadpisu (2 řádky) +
   stejná výška řádku (grid stretch), aby délka nadpisu neměnila velikost boxu */
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25em;
  margin: 0.75em 0 1.5em;
}
@media (min-width: 48em) {
  body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper { grid-template-columns: repeat(2, 1fr); }
}
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item {
  position: relative;
  cursor: pointer;
  margin: 0; /* rozestup řeší grid gap */
  padding: 0; /* šablonový base .news-item{padding-bottom:40px} pod 480px */
  display: flex;
  flex-direction: column;
  background: var(--pdu-barva-bila, #fff);
  border: 1px solid var(--pdu-barva-okraj-jemny, #e0e0e0);
  border-bottom: 0.125em solid var(--pdu-barva-zelena-akcent, #00b46e);
  border-radius: var(--pdu-radius-card, 0.625em);
  overflow: hidden;
  box-shadow: var(--pdu-stin-jemny, 0 0.25em 0.625em rgba(0, 0, 0, 0.04));
  transition: box-shadow var(--pdu-prechod-dur-stredni, 0.25s) ease, transform var(--pdu-prechod-dur-stredni, 0.25s) ease;
}
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item:hover {
  box-shadow: var(--pdu-stin-stredni, 0 0.375em 1.25em rgba(0, 0, 0, 0.06));
  transform: translateY(-2px);
}
/* head.css „Rozestup mezi clanky blogu" má ID specificitu (div#newsWrapper… margin-bottom:35px)
   → přebít stejně silným selektorem (rozestup řeší grid gap) */
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) div#newsWrapper.news-wrapper div.news-item { margin: 0; }
/* foto — plná šířka karty, pevný poměr, cover; width:auto přebíjí šablonových 370px */
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item .image {
  margin: 0;
  width: auto;
  min-width: 0;
  overflow: hidden;
}
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item .image a { display: block; line-height: 0; }
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item .image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--pdu-prechod-dur-stredni, 0.25s) ease;
}
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item:hover .image img { transform: scale(1.04); }
/* textová část karty */
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item .text {
  padding: 1em 1.15em 1.15em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  flex: 1 1 auto;
}
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item .title {
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.35;
  color: var(--pdu-barva-tmavomodra, #191932);
  text-decoration: none;
  /* pevná výška 2 řádky — 1řádkový nadpis rezervuje stejné místo → karty stejně vysoké (Simča) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em; /* 2 × line-height 1.35 */
}
/* celá karta proklikávací (stretched link přes odkaz titulku) */
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item .title::after {
  content: '';
  position: absolute;
  inset: 0;
}
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item:hover .title { color: var(--pdu-barva-zelena-akcent, #00b46e); }
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item time {
  order: -1;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pdu-barva-text-sekundarni, #5b5b6e);
}
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item .description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  color: var(--pdu-barva-text-sekundarni, #5b5b6e);
  font-size: 0.9em;
  line-height: 1.5;
}
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item .description p { margin: 0; }
/* karta bez obrázku (šablona <div class="image"> negeneruje) — v jednotné mřížce se roztáhne
   na výšku sousedů; obsah svisle vycentrovaný (ne prázdno nahoře), jemné zelené pozadí, delší perex */
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item:not(:has(.image)) {
  background: var(--pdu-barva-zelena-svetla-2, #f5faf5);
}
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item:not(:has(.image)) .text {
  justify-content: center;
}
body.type-posts-listing:not(.in-radce-pro-vyber-vhodneho-oploceni) .news-wrapper .news-item:not(:has(.image)) .description {
  -webkit-line-clamp: 5;
  line-clamp: 5;
}
/* rubriky nahoře (šablonové ul.subcategories.with-image) — pill karty se zeleným hoverem */
body.type-posts-listing .subcategories.with-image { display: flex; flex-wrap: wrap; gap: 0.75em; padding: 0; margin: 0.5em 0 1.25em; list-style: none; }
body.type-posts-listing .subcategories.with-image li { width: auto; padding: 0; float: none; }
/* šablonové pseudo-elementy: ::before = shoptet font šipka vpravo, ::after = hranatý hover overlay → pryč */
body.type-posts-listing .subcategories.with-image li a::before,
body.type-posts-listing .subcategories.with-image li a::after { content: none; }
body.type-posts-listing .subcategories.with-image li a {
  display: flex;
  align-items: center;
  gap: 0.55em;
  height: auto; /* šablonových 51px fixní výšky pryč */
  padding: 0.45em 0.9em 0.45em 0.55em;
  background: var(--pdu-barva-bila, #fff);
  border: 1px solid var(--pdu-barva-okraj-jemny, #e0e0e0);
  border-radius: 2em;
  box-shadow: var(--pdu-stin-jemny, 0 0.25em 0.625em rgba(0, 0, 0, 0.04));
  text-decoration: none;
  color: var(--pdu-barva-tmavomodra, #191932);
  font-weight: 700;
  font-size: 0.95em;
  transition: border-color var(--pdu-prechod-dur-stredni, 0.25s) ease, box-shadow var(--pdu-prechod-dur-stredni, 0.25s) ease, color var(--pdu-prechod-dur-stredni, 0.25s) ease;
}
body.type-posts-listing .subcategories.with-image li a:hover {
  border-color: var(--pdu-barva-zelena-akcent, #00b46e);
  color: var(--pdu-barva-zelena-akcent, #00b46e);
  box-shadow: var(--pdu-stin-stredni, 0 0.375em 1.25em rgba(0, 0, 0, 0.06));
}
body.type-posts-listing .subcategories.with-image li a .image { margin: 0; line-height: 0; width: auto; }
body.type-posts-listing .subcategories.with-image li a .image img {
  display: block;
  width: 2.4em;
  height: auto;
  aspect-ratio: 7 / 5;
  object-fit: contain;
}
body.type-posts-listing .subcategories.with-image li a .text { padding: 0; width: auto; max-height: none; }


/* ───────────────────────────────────────────────────────────────────────
   SEKCE 16. A11Y / REDUCED MOTION
   Vypnutí transformů a přechodů pro prefers-reduced-motion. Poslední sekce souboru;
   pravidla mají !important, takže přebíjejí animace ze sekcí výše.
   ─────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pdu-blo-galerie-item,
  .pdu-blo-galerie-item:hover,
  .pdu-blo-related-cta em,
  .pdu-blo-related li a:hover .pdu-blo-related-cta em,
  .pdu-blo-btn-cta,
  .pdu-blo-btn-cta:hover,
  .pdu-blo-btn-ghost,
  .pdu-blo-btn-ghost:hover,
  .pdu-blo-volba,
  .pdu-blo-volba:hover,
  .pdu-blo-volba-sub em,
  .pdu-blo-volba:not(.is-active):hover .pdu-blo-volba-sub em,
  .pdu-blo-prokliky-karta,
  .pdu-blo-prokliky-karta:hover,
  .pdu-blo-prokliky-cta em,
  .pdu-blo-prokliky-karta:hover .pdu-blo-prokliky-cta em,
  body.type-posts-listing .news-wrapper .news-item,
  body.type-posts-listing .news-wrapper .news-item:hover,
  body.type-posts-listing .news-wrapper .news-item .image img,
  body.type-posts-listing .subcategories.with-image li a {
    transform: none !important;
    transition: none !important;
  }
}