/****** STYLY PRO BLOGOVÉ ČLÁNKY prefix .pdu-blo- ******/
/****** Self-contained — patterny zkopírované z pages/, žádný cross-import. ******/
/****** Tokens (--pdu-*) pocházejí z eshop/global.css (root-level, dostupné všem sekcím). ******/

/****
 ÚVODNÍ MAPA (Ctrl+F na "BLOK N." najde sekci)

 — BLOK 0.  PAGE WRAPPER + INTRO (.pdu-blo-page, .pdu-blo-intro)
 — BLOK 1.  DIVIDER (.pdu-blo-divider) — copy z pages 91
 — BLOK 2.  TYPOGRAFIE SEKCE (.pdu-blo-sekce h2, h3) — H2 se zeleným levým pruhem
 — BLOK 3.  POZADÍ SVĚTLE-ŠEDÉ legacy (.pdu-blo-pozadi-svetlesede-bez-okraje)
 — BLOK 4.  GALERIE 3-COL (.pdu-blo-galerie-grid, .pdu-blo-galerie-item) — copy z pages 2319
 — BLOK 4b. TIPY („Základní tipy ke stavbě plotu svépomocí" — vertikální timeline 6 položek)
 — BLOK 5.  TLAČÍTKA pro MID-CTA (.pdu-blo-btn-cta, .pdu-blo-btn-ghost)
 — BLOK 6.  MID-CTA BANNER (.pdu-blo-cta-mid) — copy z pages 691, tmavomodré + foto týmu
 — BLOK 7.  RELATED LIST (.pdu-blo-related) — plain UL/LI, titulek + ZOBRAZIT →
 — BLOK 8.  CTA STACK (.pdu-blo-cta-stack, .pdu-blo-cta-pomoc, .pdu-blo-tym-foto, .pdu-blo-form-box)
 — BLOK 9.  JAK NA TO OL (.pdu-blo-jaknato) — kruhy s čísly
 — BLOK 10. RÁMEČEK ŠEDÝ s mapou (.pdu-blo-ramecek-sedy) — copy z pages 1357
 — BLOK 11. A11Y / REDUCED MOTION
 ****/


/****
 ÚVODNÍ MAPA — pokračování (intent fork hned za page wrapperem)

 — BLOK 0b. ROZCESTNÍK (.pdu-blo-rozcestnik, .pdu-blo-volba + is-active)
            Intent-fork karta nahoře článku: "Stavím sám" (active = čte tento článek)
            vs. "Na klíč" (off-ramp na /realizace-montaze/).
 — BLOK 0c. PROKLIKY (.pdu-blo-prokliky, .pdu-blo-prokliky-karta + is-*)
            4 navigační karty pod intro (návody / blog / workshopy / rádce).
 ****/


/* ╔══════════════════════════════════════════════════════════════
   📄 BLOK 0. PAGE WRAPPER + INTRO
   ──────────────────────────────────────────────────────────────
   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); }


/* ╔══════════════════════════════════════════════════════════════
   🚦 BLOK 0b. ROZCESTNÍK — intent fork nahoře článku
   ──────────────────────────────────────────────────────────────
   - 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); }


/* ╔══════════════════════════════════════════════════════════════
   🟦 BLOK 0c. PROKLIKY — 4 navigační karty pod intro
   ──────────────────────────────────────────────────────────────
   - 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); }


/* ╔══════════════════════════════════════════════════════════════
   ➖ BLOK 1. DIVIDER (copy z pages SEKCE 0b)
   <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;
}


/* ╔══════════════════════════════════════════════════════════════
   📰 BLOK 2. TYPOGRAFIE SEKCE
   ──────────────────────────────────────────────────────────────
   - .pdu-blo-sekce h2 = nadpis sekce (zelený levý pruh + bold tmavomodrá)
   - .pdu-blo-sekce h3 = podsekce
   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;
}


/* ╔══════════════════════════════════════════════════════════════
   📦 BLOK 3. POZADÍ SVĚTLE-ŠEDÉ legacy (bez okraje, neutrální blok)
   <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;
}


/* ╔══════════════════════════════════════════════════════════════
   🖼️ BLOK 4. GALERIE 3-COL (copy z pages SEKCE 31)
   ──────────────────────────────────────────────────────────────
   - Grid 2 cols (mobile) → 3 cols (≥37.5em)
   - Square aspect 1:1, hover scale + magnifier 🔍
   - <a data-gallery="lightbox"> = Shoptet built-in lightbox
   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; }


/* ╔══════════════════════════════════════════════════════════════
   💡 BLOK 4b. TIPY — vertikální TIMELINE
   ──────────────────────────────────────────────────────────────
   - 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; }


/* ╔══════════════════════════════════════════════════════════════
   🟢 BLOK 5. TLAČÍTKA pro MID-CTA (yellow CTA + ghost)
   ──────────────────────────────────────────────────────────────
   - .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;
}


/* ╔══════════════════════════════════════════════════════════════
   🎯 BLOK 6. MID-CTA BANNER (copy z pages SEKCE 7)
   ──────────────────────────────────────────────────────────────
   - Tmavomodré pozadí s gradient overlay + foto týmu (3 breakpointy)
   - Bílý text s text-shadow
   - 2 tlačítka: yellow CTA + ghost (white border)
   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;
}


/* ╔══════════════════════════════════════════════════════════════
   🔗 BLOK 7. RELATED LIST („Mohlo by vás také zajímat" — plain seznam)
   ──────────────────────────────────────────────────────────────
   - <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);
}


/* ╔══════════════════════════════════════════════════════════════
   🤝 BLOK 8. CTA STACK (tým + newsletter form, oboje centered max-width)
   ──────────────────────────────────────────────────────────────
   - Vždy stacked vertikálně (text první → form druhý)
   - Oboje centered, max-width pro čitelnost (pomoc ~46em, form ~32em)
   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;
}


/* ╔══════════════════════════════════════════════════════════════
   🔢 BLOK 9. JAK NA TO — číslovaný OL s kruhy
   ══════════════════════════════════════════════════════════════ */
.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; }


/* ╔══════════════════════════════════════════════════════════════
   🗺️ BLOK 10. RÁMEČEK ŠEDÝ s mapou — 2-col na desktopu
   ──────────────────────────────────────────────────────────────
   - 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%; }
}


/* ╔══════════════════════════════════════════════════════════════
   ♿ BLOK 11. A11Y / REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@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 {
    transform: none !important;
    transition: none !important;
  }
}