/* Home: logo strip (Figma 307:3113) */
.s-logos { padding-block: var(--section-y); }
.s-logos__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.s-logos__title { color: var(--text-medium); text-align: center; text-wrap: balance; }

/* Mobile: 2-column grid of logos */
.s-logos__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding-block: var(--space-2);
}
.s-logos__item { display: flex; align-items: center; justify-content: center; padding: var(--space-4) var(--space-2); }
.s-logos__logo { width: auto; max-width: 100%; zoom: 0.8; }

/* Tablet: one 5-column grid, so the 10 logos sit in 2 even rows */
@media (min-width: 768px) {
  .s-logos__list { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block: var(--space-4); }
  .s-logos__item { padding: var(--space-5) var(--space-2); }
  .s-logos__logo { zoom: 0.85; }
}

/* Desktop: centred wrapping rows, as in the design (5 + 5) */
@media (min-width: 1024px) {
  .s-logos .s-logos__list { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1164px; padding-block: var(--space-4); }
  .s-logos__item { min-height: 66px; padding: var(--space-4) var(--space-8); }
  .s-logos__logo { zoom: 1; }
}
@media (min-width: 1280px) {
  .s-logos__item { padding-inline: var(--space-12); }
}

/* Interactions: the title and logos enter via data-reveal (css/motion.css). On hover the pointed-at logo
   lifts and the rest step back, so the strip reads as one row being scanned. Transforms sit on the <img>,
   never the <li>, because the <li> is the reveal target. */
.s-logos__logo {
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease);
}
@media (hover: hover) {
  .s-logos__list:hover .s-logos__logo { opacity: 0.35; filter: grayscale(1); }
  .s-logos__list .s-logos__item:hover .s-logos__logo { opacity: 1; filter: none; transform: translateY(-3px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .s-logos__logo { transition: opacity var(--dur) linear; }
  .s-logos__list .s-logos__item:hover .s-logos__logo { transform: none; }
}