/* Site Clients grid (patterns/site-clients.php) — light-bg replacement for
   the dark .logos marquee on the home page only. auto-enqueued via the
   assets/css/pages/*.css glob (inc/enqueue.php). Marquee CSS in
   assets/css/style.css (.logos/.marquee*) stays untouched — page-why-us
   still uses it. */

.site-clients {
  background: var(--surface);
  padding-block: clamp(64px, 9vw, 120px);
}

.site-clients-title {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}
body.lang-ar .site-clients-title { font-family: var(--ar-display); }

.site-clients-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
@media (max-width: 900px) {
  .site-clients-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Mobile: 33 logos at 2-col (old rule) rendered ~115px-tall cards per row --
   17 rows = a ~2350px wall for what's just a trust-logo strip. 3-col cuts
   row count to 11 and the tighter aspect-ratio below shortens each row, so
   the whole grid reads as a compact logo wall (matches the density of the
   partners/numbers grids elsewhere on this page) instead of ballooning. */
@media (max-width: 560px) {
  .site-clients-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .site-client-cell { aspect-ratio: 4 / 3; padding: 10px; }
}

.site-client-cell {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.2vw, 28px);
  /* Without this, a near-square logo (e.g. Monshaat, The Chapter) needs more
     height than the aspect-ratio budget allows; the flex item's automatic
     min-height (content-based) wins over aspect-ratio and the cell grows
     past its row, producing uneven row heights across the grid. */
  min-height: 0;
  transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.site-client-cell:hover {
  box-shadow: 0 10px 28px rgba(10, 10, 15, 0.08);
  border-color: var(--border-strong);
  transform: translateY(-3px);
}
.site-client-cell img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Per-cell escape hatch: only for a logo whose sole asset is a white/light
   version — gives it a dark canvas so it stays visible. Not used by any of
   the current 33 clients (all verified visible on white). */
.site-client-cell.is-dark {
  background: #0A0A0F;
  border-color: #0A0A0F;
}