/* ════════════════════════════════════════════════════════════════════════
   23-o-nas-reference.css — stránky O nás (/o-nas/) a Reference (/reference/)

   Zdroj: Figma VOALA_WEB_2025 → KDO JSME (2159:1982) a REFERENCE (2176:2545),
   verze z 2. 9. 2026. Obě stránky vznikají seed skriptem
   (voala-seed-pages.php, mu-plugin) z Divi 5 bloků — tady jsou jen styly
   pro dílky, které jinde na webu nejsou. Sdílené sekce (page hero, intro,
   Aktuálně u nás = .vo-awards, Klienti = [vo_clients]) mají vlastní CSS.

   O NÁS
   - intro: „VOALA" červeně 48 (modul .vo-intro-kicker) hned nad H1
     (modul .vo-intro), pak řádek se DVĚMA sloupci textu 597 + 597, mezera 28
     (řádek .vo-twocol-row, moduly .vo-twocol, podpis .vo-twocol-sign
     červeně); text Inter 500 20/150 %, odstavce oddělené prázdným řádkem
   - rytmus: účaří H1 → verzálky sloupců 133, konec sloupců → linka 133

   REFERENCE
   - intro: H1 „Reference" + odstavec na střed (.vo-intro), pod tím loga
     [vo_clients] bez linky, pak seznam klientů ve TŘECH sloupcích 347,
     mezera 91 (řádek .vo-clientlist-row, moduly .vo-clientlist):
     Inter 500 16/150 %, název VERZÁLKAMI (píše se tak v textu), podtržené
     odkazy na reference, popis na dalším řádku, bez mezer mezi klienty
   - bloky Ocenění a soutěže / Média / Výstavy: sdílená hlavička sekce
     (.vo-section .vo-line-top) + karty .vo-awards (Image + Text) + řádek
     „po letech" ve třech sloupcích (.vo-years-row / .vo-years): stejná
     typografie jako seznam klientů, 130 px pod kartami

   TŘÍDY
   .vo-intro-kicker           Text modul s „VOALA" (červený nadpis nad H1)
   .vo-twocol-row             Divi Row (2 sloupce) v intro sekci
   .vo-twocol / .vo-twocol-sign  Text moduly ve sloupcích
   .vo-intro-section--tight   intro s menší mezerou dole (loga hned pod ním)
   .vo-section--no-top        sekce bez horního odsazení (loga pod introm)
   .vo-section--tight-bottom  sekce s menší mezerou dole (loga → seznam)
   .vo-clientlist-row / .vo-clientlist   seznam klientů
   .vo-years-row / .vo-years  bloky po letech
   ════════════════════════════════════════════════════════════════════════ */

/* ── O nás: červené „VOALA" nad nadpisem ─────────────────────────────── */
.vo-intro-section .vo-intro-kicker,
.vo-intro-section .vo-intro-kicker .et_pb_text_inner { text-align: center; }
.vo-intro-section .vo-intro-kicker p {
  max-width: none;
  margin: 0;
  font-size: var(--vo-intro-title);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--red-voala);
  text-align: center;
}
/* H1 navazuje hned pod „VOALA" (ve Figmě je to jeden text se zalomením) */
.vo-intro-section .vo-intro-kicker + .et_pb_module { margin-top: 0 !important; }

/* ── O nás: dva sloupce textu ────────────────────────────────────────────
   Účaří H1 → verzálky textu 133 (Figma 997 → 1130) = box nadpisu → box
   textu 107 px na 1440, na mobilu 48. Sloupce 597 + 28 + 597: Divi dává
   sloupcům pevnou šířku s vlastním gutterem, proto flex: 1 1 0 (stejná
   past jako u .vo-awards, viz 13-awards.css).
   ──────────────────────────────────────────────────────────────────────── */
.vo-intro-section > .et_pb_row.vo-twocol-row {
  margin-top: clamp(48px, calc(26.1px + 5.619vw), 107px) !important;
  column-gap: 28px !important;
  row-gap: 40px !important;
}
.vo-intro-section .vo-twocol-row > .et_pb_column {
  flex: 1 1 0;
  width: auto !important;
  max-width: none;
}
.vo-intro-section .vo-twocol,
.vo-intro-section .vo-twocol-sign {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  align-self: stretch;
}
.vo-intro-section .vo-twocol,
.vo-intro-section .vo-twocol .et_pb_text_inner,
.vo-intro-section .vo-twocol-sign,
.vo-intro-section .vo-twocol-sign .et_pb_text_inner { text-align: left; }
.vo-intro-section .vo-twocol p,
.vo-intro-section .vo-twocol-sign p {
  max-width: none;
  margin: 0;
  text-align: left;
}
.vo-intro-section .vo-twocol p + p { margin-top: 1.5em; }   /* prázdný řádek z designu */
.vo-intro-section .vo-twocol-sign p { color: var(--red-voala); }
/* Podpis je samostatný modul pod textem pravého sloupce — mezera jako mezi odstavci */
.vo-intro-section .vo-twocol + .vo-twocol-sign { margin-top: 1.5em !important; }

/* ── Reference: intro s logy hned pod ním ────────────────────────────── */
/* Odstavec → loga 116 (Figma 332 → 448) místo standardních 144 */
.vo-intro-section--tight { --vo-intro-pad-bottom: clamp(46px, calc(22.23px + 6.095vw), 110px); }
/* Sekce s logy bez linky: nahoře nic (mezeru dává intro), dole 108 k seznamu
   (Figma 625 → 742) */
.vo-section--no-top       { --vo-section-pad-top: 0px; }
.vo-section--tight-bottom { --vo-section-pad-bottom: clamp(40px, calc(14.75px + 6.476vw), 108px); }

/* ── Reference: seznam klientů a bloky po letech ─────────────────────────
   Tři sloupce 347 s mezerou 91 (Figma x = 109 / 547 / 984). Stejná
   typografie pro seznam i „roky": Inter 500 16/150 %, odkazy podtržené.
   ──────────────────────────────────────────────────────────────────────── */
.vo-section > .et_pb_row.vo-clientlist-row,
.vo-section > .et_pb_row.vo-years-row {
  column-gap: clamp(24px, calc(-0.88px + 6.381vw), 91px) !important;
  row-gap: 40px !important;
}
.vo-section .vo-clientlist-row > .et_pb_column,
.vo-section .vo-years-row > .et_pb_column {
  flex: 1 1 0;
  width: auto !important;
  max-width: none;
}
/* Řádek „po letech" pod kartami: konec textu karet → verzálky 140 (Figma
   2792 → 2932) = box → box ~130. Po nadpisu (Média) platí sdílená mezera. */
.vo-awards .et_pb_row:not(:has(.vo-section-title)) + .et_pb_row.vo-years-row {
  margin-top: clamp(48px, calc(17.54px + 7.81vw), 130px) !important;
}

.vo-section .vo-clientlist,
.vo-section .vo-clientlist .et_pb_text_inner,
.vo-section .vo-years,
.vo-section .vo-years .et_pb_text_inner {
  font-family: var(--font-base);
  color: var(--black-voala);
  text-align: left;
}
.vo-section .vo-clientlist p,
.vo-section .vo-years p {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--black-voala);
  text-align: left;
}
/* Ve Figmě (2179:38) jsou roky, položky i oddělovač „—" jen řádky pod
   sebou bez odstavcové mezery. 13-awards.css dává „p + p" mezeru 9,9 px
   (karty), tady ji rušíme (stejná specificita, pozdější soubor vyhrává). */
.vo-awards .vo-years p + p,
.vo-section .vo-years p + p { margin-top: 0; }

.vo-section .vo-clientlist a,
.vo-section .vo-years a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
.vo-section .vo-clientlist a:hover,
.vo-section .vo-years a:hover { color: var(--red-voala); }
/* Odkazy v „rocích" jsou ve Figmě (2179:38) černé podtržené, jen „více" u karet
   je červené; 13-awards.css barví `.vo-awards .et_pb_text p a` červeně, tady
   to pro roky vracíme (stejná specificita, pozdější soubor). */
.vo-awards .vo-years p a { color: var(--black-voala); }
.vo-awards .vo-years p a:hover { color: var(--red-voala); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Divi stohuje sloupce sám — vrátit mu výchozí flex (viz 13-awards.css) */
  .vo-intro-section .vo-twocol-row > .et_pb_column,
  .vo-section .vo-clientlist-row > .et_pb_column,
  .vo-section .vo-years-row > .et_pb_column {
    flex: 0 1 auto;
    width: 100% !important;
  }
}