/* Client logo grid. Loaded only by index.html and clients/index.html.
   Uses the shared tokens from style.css (--surface, --line, --radius, --shadow) so it follows the site theme. */

.client-grid{
  --cols:6; --gap:16px;
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gap);
}
/* fixed column count per breakpoint; a short last row is centred rather than left-stranded */
.client-grid>li{
  flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width:0;
}

.client-logo{
  display:block; aspect-ratio:1/1;
  padding:clamp(10px,1.8vw,20px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.client-logo picture{display:block; width:100%; height:100%}
/* logos are supplied as circles: contain keeps the whole circle, never stretched or cropped.
   The hairline ring keeps white logos visible on white cards and dark logos visible in the dark theme. */
.client-logo img{
  display:block; width:100%; height:100%;
  object-fit:contain; border-radius:50%;
  box-shadow:0 0 0 1px rgba(127,138,153,.28);
}
@media (hover:hover){
  .client-logo:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--muted)}
}

/* homepage showcase: fewer logos, so keep it compact on small screens */
.clients-more{display:flex; justify-content:center; margin-top:28px}

/* ---- column counts ---- */
@media (max-width:1000px){.client-grid{--cols:5}}
@media (max-width:860px){.client-grid{--cols:4}}
@media (max-width:640px){.client-grid{--cols:3; --gap:12px}}
@media (max-width:420px){
  .client-grid{--cols:2}
  .client-grid--home{--cols:3; --gap:10px}      /* 12 logos = 4 rows instead of 6 */
  .client-grid--home .client-logo{padding:9px}
}