/* ════════════════════════════════════════════════════════════════════════
   13-awards.css — VOALA sekce „Ocenění"

   Zdroj: Figma VOALA_WEB_2025 → HOMEPAGE
   - desktop 13:644: tři čtvercové fotky 389 × 390 vedle sebe, mezera 27,
     pod každou nadpis 24/130 % a popis 18/150 % (15:1040 … 15:1048)
   - mobil 13:395: fotky 360 × 360 pod sebou, texty stejně velké

   Dvě varianty se stejným vzhledem:
   a) ručně v Divi: řádek o třech sloupcích, v každém Image + Text modul
   b) zkratka [vo_awards] v Code modulu (od 3. 9. 2026): karty spravuje
      klient v Šablona nastavení → Aktuálně u nás, vzhled řídí .vo-award*

   TŘÍDY
   .vo-section .vo-line-top   sdílená hlavička sekce (10-section.css)
   .vo-awards                 přidat na Section, řídí mřížku a texty

   Rozměry (optické, od verzálek / účaří):
                                 390        1440
   účaří nadpisu → fotky          50        100   (od 3. 9. 2026 sjednoceno
                                                    s ostatními sekcemi na
                                                    přání Tomáše; Figma 2. 9.
                                                    má 138, dřív 150)
   spodek fotky → verzálky titulku 30         42
   účaří titulku → verzálky popisu 25         25
   konec popisu → další sekce    100        150
   mezera mezi sloupci             —         27
   mezera mezi položkami (mobil)  50          —

   Mezery jsou doměřené v renderu (cap-to-cap), proto nejsou kulaté —
   viz komentář v 10-intro.css.
   ════════════════════════════════════════════════════════════════════════ */

.vo-awards {
  /* Mezera pod nadpisem = sdílená hodnota z 10-section.css (dřív měla
     sekce vlastních 150 → od 3. 9. 2026 stejný rytmus jako sousední sekce).
     Dole končí textem, ne obrázkem, proto o půlproklad menší padding. */
  --vo-section-pad-bottom: clamp(96px, calc(77.43px + 4.762vw), 146px);

  --vo-award-gap-col:   27px;
  --vo-award-gap-row:   46px;   /* mezi položkami, když se sloupce zalomí */
  --vo-award-gap-media: clamp(23.1px, calc(18.64px + 1.143vw), 35.1px);
  --vo-award-gap-text:  9.9px;
  --vo-award-title:     24px;
  --vo-award-text:      18px;
}

/* ── Mřížka sloupců ──────────────────────────────────────────────────────
   Row-gap přebíjí nulu ze sdíleného 10-section.css: tam je nula proto, aby
   se nesčítala s mezerami z designu, tady ale drží odstup mezi položkami
   po zalomení do jednoho sloupce.
   ──────────────────────────────────────────────────────────────────────── */
.vo-awards .et_pb_row {
  column-gap: var(--vo-award-gap-col) !important;
  row-gap: var(--vo-award-gap-row) !important;
}

/* Divi dává sloupcům width 29.6667 % — počítá s vlastním gutterem 5.5 %.
   My ale máme pevný column-gap 27 px, takže vpravo zbývalo ~80 px a řádek
   nebyl přes celé tělo stránky. Šířku tedy neřeší Divi, ale flex: sloupce
   si zbytek řádku rozdělí rovným dílem → (1222 − 2×27) / 3 ≈ 389 px,
   přesně dle Figmy. */
.vo-awards .et_pb_row > .et_pb_column {
  flex: 1 1 0;
  width: auto !important;
  max-width: none;
}

/* ── Fotka ───────────────────────────────────────────────────────────── */
.vo-awards .et_pb_image {
  margin: 0 !important;
  text-align: left;
}
.vo-awards .et_pb_image .et_pb_image_wrap,
.vo-awards .et_pb_image a {
  display: block;
  width: 100%;
}
.vo-awards .et_pb_image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-map);
}

/* Text pod fotkou */
.vo-awards .et_pb_image + .et_pb_module {
  margin-top: var(--vo-award-gap-media) !important;
}

/* ── Titulek a popis ─────────────────────────────────────────────────────
   Klient je píše do jednoho TEXT modulu pod obrázkem: titulek jako
   Nadpis 3, popis jako běžný odstavec. Obojí zarovnané doleva.
   ──────────────────────────────────────────────────────────────────────── */
.vo-awards .et_pb_text,
.vo-awards .et_pb_text .et_pb_text_inner {
  font-family: var(--font-base);
  color: var(--black-voala);
  text-align: left;
}

.vo-awards .et_pb_text h3,
.vo-awards .et_pb_text h4 {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: var(--vo-award-title);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--black-voala);
  text-align: left;
}

.vo-awards .et_pb_text p {
  margin: 0;
  padding: 0;
  font-size: var(--vo-award-text);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--black-voala);
  text-align: left;
}

.vo-awards .et_pb_text h3 + p,
.vo-awards .et_pb_text h4 + p,
.vo-awards .et_pb_text p + p {
  margin-top: var(--vo-award-gap-text);
}

/* ── Responsive ──────────────────────────────────────────────────────────
   Sloupce si zalamuje Divi samo; tady jen držíme, aby fotka zůstala
   čtvercová a texty se nezmenšovaly (v designu jsou na obou framech stejné).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Vrací Divi výchozí flex (0 1 auto), aby zalamování sloupců řídilo
     Divi jako dřív — desktopové flex: 1 1 0 by tu rozbilo stohování. */
  .vo-awards .et_pb_row > .et_pb_column {
    flex: 0 1 auto;
    width: 100% !important;
  }
}

/* ── Odkaz „více" v popisu ───────────────────────────────────────────────
   Figma 2179:35: červený, podtržený (decoration from-font). Platí pro obě
   varianty: Text modul stavěný ručně i zkratku [vo_awards].
   ──────────────────────────────────────────────────────────────────────── */
.vo-awards .et_pb_text p a,
.vo-awards .vo-award__link {
  color: var(--red-voala);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 2px;
  transition: color var(--t-fast);
}
.vo-awards .et_pb_text p a:hover,
.vo-awards .vo-award__link:hover {
  color: var(--red-voala-dark, var(--red-voala));
}

/* ── Zkratka [vo_awards] ─────────────────────────────────────────────────
   Stejná mřížka a typografie jako u Divi modulů výš, jen v jednom Code
   modulu: karty spravuje klient v Šablona nastavení → Aktuálně u nás
   (od 3. 9. 2026, dřív se stavěly na každé stránce zvlášť).
   ──────────────────────────────────────────────────────────────────────── */
.vo-awards-grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--vo-award-gap-col);
  row-gap: var(--vo-award-gap-row);
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}
.vo-award {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.vo-award__media {
  display: block;
  width: 100%;
  margin: 0;
}
.vo-award__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-map);
}
.vo-award__media + .vo-award__body {
  margin-top: var(--vo-award-gap-media);
}
.vo-award__title {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: var(--vo-award-title);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--black-voala);
  text-align: left;
}
.vo-award__text {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: var(--vo-award-text);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--black-voala);
  text-align: left;
}
.vo-award__title + .vo-award__text {
  margin-top: var(--vo-award-gap-text);
}
.vo-awards__empty {
  margin: 0;
  color: var(--red-voala);
}

@media (max-width: 980px) {
  .vo-award {
    flex: 0 1 auto;
    width: 100%;
  }
}