/* ════════════════════════════════════════════════════════════════════════
   15-content.css — VOALA obsahové stránky (PHP šablony) + typografie textu

   Pro tyhle stránky neexistuje ve Figmě návrh — vzhled je odvozený
   z homepage: stejné tokeny (00-tokens.css), stejný rytmus sekcí
   (10-section.css / 10-intro.css) a stejná šířka textu 972 px.

   TŘI VRSTVY
   1) .vo-page-section / .vo-page-container / .vo-page-title
      — kostra pro vlastní PHP šablony (page.php, 404.php, archivy…).
        Zrcadlí .vo-section, ale bez vazby na Divi třídy (.et_pb_section),
        protože v PHP šablonách žádné Divi moduly nejsou.
        .vo-line-top z 10-section.css funguje i tady (parent má position
        relative).
   2) .vo-content — „próza": typografie dlouhého textu (stránka bez
      builderu, detail příspěvku, obsah 404…). Max šířka 972 px
      (--vo-intro-text-width), text zarovnaný vlevo.
   3) Fallback pro Divi Builder BEZ tříd — stránka poskládaná z výchozích
      modulů (žádná vo-* třída) dostane stejnou typografii, aby vypadala
      „voala" i bez ručního stylování. Guard :not([class*="vo-"]) zajistí,
      že se pravidla nepletou do naladěných vo- sekcí.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1) Kostra PHP stránek ───────────────────────────────────────────── */

.vo-page-section {
  /* stejné fluidní hodnoty jako .vo-section (10-section.css) */
  --vo-page-gutter:     24px;
  --vo-page-pad-top:    clamp(41.8px, calc(25.64px + 4.143vw), 85.3px);
  --vo-page-pad-bottom: clamp(50px, calc(12.86px + 9.524vw), 150px);
  --vo-page-gap-title:  clamp(42.4px, calc(25.69px + 4.286vw), 87.4px);
  --vo-page-title-fs:   clamp(28px, calc(20.57px + 1.905vw), 48px);

  /* Linku nad sekcí kreslí .vo-line-top z 10-section.css a počítá si ji
     z proměnných .vo-section — v PHP šablonách je tedy musíme dodat sem,
     jinak vyjde šířka linky neplatná a linka se nevykreslí. */
  --vo-section-gutter:  var(--vo-page-gutter);
  --vo-section-line:    rgba(42, 49, 51, .25);

  position: relative;
  padding: var(--vo-page-pad-top) 0 var(--vo-page-pad-bottom);
  background: var(--white-voala);
  font-family: var(--font-base);
}
.vo-page-section--gray { background: var(--gray-voala); }

.vo-page-container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--vo-page-gutter));
  margin: 0 auto;
  padding: 0 var(--vo-page-gutter);
}

/* Nadpis stránky — stejný jako nadpis sekce na homepage */
.vo-page-title {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: var(--vo-page-title-fs);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--black-voala);
  text-align: center;
}

/* Mezera nadpis → obsah (stejný rytmus jako sekce na homepage) */
.vo-page-title + * { margin-top: var(--vo-page-gap-title); }

@media (max-width: 720px) {
  .vo-page-section { --vo-page-gutter: 16px; }
}


/* ── 2) Próza — .vo-content ──────────────────────────────────────────── */

.vo-content {
  max-width: 972px;              /* šířka odstavce z designu (10-intro.css) */
  margin-left: auto;
  margin-right: auto;
  display: flow-root;            /* uzavírá floaty (starý obsah má img.alignleft
                                    bez clearu — patička se pak lámala vedle nich) */
  font-family: var(--font-base);
  font-size: clamp(16px, calc(15.26px + 0.19vw), 18px);
  font-weight: 400;
  line-height: 1.65;
  color: var(--black-voala);
  text-align: left;
}

/* Zarovnání obrázků z klasického editoru (starý obsah je používá) */
.vo-content img.alignleft,
.vo-content .alignleft {
  float: left;
  margin: 4px 20px 12px 0;
}
.vo-content img.alignright,
.vo-content .alignright {
  float: right;
  margin: 4px 0 12px 20px;
}
.vo-content img.aligncenter,
.vo-content .aligncenter {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
}

/* Odstavce a mezery mezi bloky */
.vo-content p {
  margin: 0 0 1.15em;
  line-height: inherit;
}
.vo-content > *:last-child { margin-bottom: 0; }

/* Nadpisy v textu — Inter 500/600, menší než nadpis stránky */
.vo-content h2,
.vo-content h3,
.vo-content h4 {
  margin: 1.7em 0 .65em;
  padding: 0;
  font-family: var(--font-base);
  color: var(--black-voala);
  letter-spacing: 0;
  line-height: 1.3;
}
.vo-content h2 { font-size: clamp(24px, calc(20.29px + 0.952vw), 34px); font-weight: 500; }
.vo-content h3 { font-size: clamp(20px, calc(18.51px + 0.381vw), 24px); font-weight: 600; }
.vo-content h4 { font-size: 18px; font-weight: 600; }
.vo-content h2:first-child,
.vo-content h3:first-child,
.vo-content h4:first-child { margin-top: 0; }

/* Odkazy — brand červená, podtržení pro čitelnost v dlouhém textu */
.vo-content a {
  color: var(--red-voala);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
.vo-content a:hover { color: var(--red-voala-dark); }

/* Seznamy — 01-base.css nuluje padding, tady ho vracíme */
.vo-content ul,
.vo-content ol {
  margin: 0 0 1.15em;
  padding-left: 1.35em;
}
.vo-content li { margin: 0 0 .45em; }
.vo-content li > ul,
.vo-content li > ol { margin: .45em 0 0; }
.vo-content ul li::marker { color: var(--red-voala); }
.vo-content ol li::marker { color: var(--red-voala); font-weight: 600; }

/* Zvýraznění */
.vo-content strong,
.vo-content b { font-weight: 700; }

/* Citace */
.vo-content blockquote {
  margin: 1.5em 0;
  padding: .35em 0 .35em 1.25em;
  border-left: 3px solid var(--red-voala);
  color: var(--muted);
  font-size: 1.05em;
}
.vo-content blockquote p:last-child { margin-bottom: 0; }

/* Obrázky a galerie — radius 5 jako všude na webu */
.vo-content img {
  border-radius: var(--radius-sm);
  margin: 0 auto;
}
.vo-content figure {
  margin: 1.5em 0;
}
.vo-content figcaption {
  margin-top: .6em;
  font-size: var(--fs-small);
  color: var(--muted);
  text-align: center;
}
.vo-content .wp-block-image { margin: 1.5em 0; }

/* Oddělovač — stejná linka jako mezi sekcemi */
.vo-content hr {
  margin: 2.2em 0;
  border: 0;
  height: 1px;
  background: rgba(42, 49, 51, .25);
}

/* Tabulky */
.vo-content table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  font-size: .95em;
}
.vo-content th,
.vo-content td {
  padding: 10px 14px;
  border: 1px solid var(--line);
  text-align: left;
}
.vo-content th {
  font-weight: 600;
  background: var(--bg-soft);
}

/* Kód */
.vo-content code {
  padding: .15em .4em;
  background: var(--bg-soft);
  border-radius: 4px;
  font-size: .9em;
}
.vo-content pre {
  margin: 1.5em 0;
  padding: 16px 20px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.vo-content pre code { padding: 0; background: none; }

/* Stránkování dlouhého obsahu (wp_link_pages) */
.vo-content .page-links {
  margin-top: 1.5em;
  font-weight: 600;
}


/* ── 3) Fallback: Divi Builder bez tříd ──────────────────────────────────
   Stránka z výchozích Divi modulů (Text, Image…) bez jediné vo-* třídy.
   Guard :where(:not([class*="vo-"])) — nulová specificita, pravidla se
   nepřetahují s naladěnými vo- sekcemi ani je nepřebíjejí.
   ──────────────────────────────────────────────────────────────────────── */

/* Svislý rytmus sekce — Divi default je fixních 50 px (na mobilu se
   nezmenšuje a vypadá obrovsky). Stejné fluidní hodnoty jako
   .vo-page-section / .vo-section, takže builder stránka lícuje se
   stránkou bez builderu. */
.et_pb_section:where(:not([class*="vo-"])) {
  padding-top: clamp(41.8px, calc(25.64px + 4.143vw), 85.3px) !important;
  padding-bottom: clamp(50px, calc(12.86px + 9.524vw), 150px) !important;
}

/* Řádek na tělo stránky — výchozí Divi row má width 80 %, takže obsah byl
   odsazený víc než header/footer (na tabletu a mobilu výrazně). Stejné
   hodnoty jako .vo-section > .et_pb_row (10-section.css): plná šířka,
   kontejner 1222 + gutter 24/16. !important přebíjí Divi width i padding
   z 01-base.css. Svislý padding řádku (default 30 px) nulujeme — rytmus
   řídí sekce. */
.et_pb_section:where(:not([class*="vo-"])) > .et_pb_row {
  width: 100% !important;
  max-width: calc(var(--container) + 48px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 24px !important;
}

/* Divi 5 občas uloží na začátek stránky prázdný Text modul (wp:divi/placeholder)
   — má nulovou výšku, ale margin-bottom 30 px, který odsazoval první obsah. */
.et_pb_section:where(:not([class*="vo-"])) .et_pb_module:where(:has(> .et_pb_text_inner > p:only-child:empty)) {
  display: none;
}
@media (max-width: 720px) {
  /* Mobilní frame: boční okraje 16 px jako u vo- sekcí */
  .et_pb_section:where(:not([class*="vo-"])) > .et_pb_row {
    padding: 0 16px !important;
  }
}

.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner {
  font-family: var(--font-base);
  font-size: clamp(16px, calc(15.26px + 0.19vw), 18px);
  line-height: 1.65;
  color: var(--black-voala);
}

/* Rytmus odstavců (01-base.css nuluje margin) */
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner p { margin: 0 0 1.15em; }
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner > *:last-child { margin-bottom: 0; }

/* Nadpisy — místo boilerplate 800 designová 500/600 */
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner h1,
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner h2 {
  margin: 1.5em 0 .6em;
  font-size: clamp(28px, calc(20.57px + 1.905vw), 48px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner h3 {
  margin: 1.5em 0 .6em;
  font-size: clamp(24px, calc(20.29px + 0.952vw), 34px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner h4 {
  margin: 1.5em 0 .6em;
  font-size: clamp(20px, calc(18.51px + 0.381vw), 24px);
  font-weight: 600;
  line-height: 1.3;
}
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner h1:first-child,
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner h2:first-child,
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner h3:first-child,
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner h4:first-child { margin-top: 0; }

/* Odkazy, seznamy, citace — stejně jako próza */
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner a {
  color: var(--red-voala);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner a:hover { color: var(--red-voala-dark); }

.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner ul,
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner ol {
  margin: 0 0 1.15em;
  padding-left: 1.35em;
}
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner li { margin: 0 0 .45em; }
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner ul li::marker { color: var(--red-voala); }
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner ol li::marker { color: var(--red-voala); font-weight: 600; }

.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner blockquote {
  margin: 1.5em 0;
  padding: .35em 0 .35em 1.25em;
  border-left: 3px solid var(--red-voala);
  color: var(--muted);
}
/* Poslední odstavec citace bez spodní mezery — jinak rámeček přetéká */
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner blockquote > :last-child { margin-bottom: 0; }

/* Tabulky — stejně jako v próze (jinak zůstanou Divi defaulty: šedé linky
   #eee, th bez podkladu, jiný padding) */
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  font-size: .95em;
}
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner th,
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner td {
  padding: 10px 14px;
  border: 1px solid var(--line);
  text-align: left;
}
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner th {
  font-weight: 600;
  background: var(--bg-soft);
}

/* Oddělovač — stejná linka jako mezi sekcemi */
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner hr {
  margin: 2.2em 0;
  border: 0;
  height: 1px;
  background: rgba(42, 49, 51, .25);
}

/* Popisek obrázku */
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner figcaption {
  margin-top: .6em;
  font-size: var(--fs-small);
  color: var(--muted);
  text-align: center;
}

/* Obrázkový modul — radius 5 jako všude */
.et_pb_section:where(:not([class*="vo-"])) .et_pb_image img { border-radius: var(--radius-sm); }
.et_pb_section:where(:not([class*="vo-"])) .et_pb_text_inner img { border-radius: var(--radius-sm); }