/* ════════════════════════════════════════════════════════════════════════
   12-clients.css — VOALA loga klientů („Klienti")

   Zdroj: Figma VOALA_WEB_2025 → HOMEPAGE
   - desktop 13:644: 12 log 187 × 71 v šesti sloupcích, mezera 20,
     mezera řádků 35, tělo stránky 1222 (15:1024 … 15:1037)
   - mobil 13:395: loga 161 × 61 ve dvou sloupcích, mezera 34 / 25
   - nad tím linka a nadpis „Klienti" — řeší sdílený 10-section.css

   Markup: template-parts/clients.php → [vo_clients]
   Sekce v Divi dostává CSS Class „vo-section vo-line-top".

   Mřížka je flex, ne grid: loga si klient přidává sám a při jiném počtu
   než násobku šesti se poslední řádek sám vycentruje, místo aby zůstal
   nalepený vlevo.
   ════════════════════════════════════════════════════════════════════════ */

.vo-clients {
  --vo-clients-cols:    6;
  --vo-clients-gap-col: clamp(20px, calc(39.2px - 1.333vw), 34px);
  --vo-clients-gap-row: clamp(25px, calc(21.29px + 0.952vw), 35px);
  --vo-clients-ratio:   187 / 71;   /* poměr dlaždice z Figmy */

  font-family: var(--font-base);
}

/* ── Mřížka ──────────────────────────────────────────────────────────── */
.vo-clients__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vo-clients-gap-row) var(--vo-clients-gap-col);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vo-clients__grid > li { margin: 0; padding: 0; list-style: none; }
.vo-clients__grid > li::before { content: none; }   /* Divi si do li kreslí odrážky */

.vo-clients__item {
  flex: 0 0 calc(
    (100% - (var(--vo-clients-cols) - 1) * var(--vo-clients-gap-col)) / var(--vo-clients-cols)
  );
  max-width: calc(
    (100% - (var(--vo-clients-cols) - 1) * var(--vo-clients-gap-col)) / var(--vo-clients-cols)
  );
}

/* ── Dlaždice s logem ────────────────────────────────────────────────────
   Logo se vepisuje celé (contain), takže se nic neořízne ani nezdeformuje
   a klient nemusí hlídat přesný poměr stran nahrávaného souboru.
   ──────────────────────────────────────────────────────────────────────── */
.vo-clients .vo-client {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--vo-clients-ratio);
  text-decoration: none;
}

.vo-clients .vo-client__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Odkazované logo lehce zesvětlá, ať je poznat, že se dá kliknout */
.vo-clients a.vo-client { transition: opacity var(--t-fast); }
.vo-clients a.vo-client:hover { opacity: .7; }
.vo-clients a.vo-client:focus-visible {
  outline: 2px solid var(--red-voala);
  outline-offset: 6px;
  border-radius: 4px;
}

/* ── Prázdný stav (jen pro přihlášeného editora) ─────────────────────── */
.vo-clients__empty {
  margin: 0;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vo-clients { --vo-clients-cols: 4; }
}

@media (max-width: 720px) {
  /* Mobilní frame: dva sloupce */
  .vo-clients { --vo-clients-cols: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .vo-clients a.vo-client { transition: none; }
}