/**
 * "Companies we've supported" logo wall — homepage, right after the
 * "Who we work with" pills band. Scrolls left to right in an infinite
 * loop (see marquee.css for the scrolling mechanics); this file is just
 * the tile styling and the flex row they sit in.
 *
 * Deliberately a small, separate file (same pattern as tips-filter.css,
 * bea.css): one feature, one file, so it can be iterated on without
 * touching the shared styles.css. No unsafe-inline — this is the only
 * styling for the section, loaded as an ordinary external stylesheet.
 */

.client-wall {
  display: flex;
  width: max-content;
  gap: 16px;
}

.client-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  flex: 0 0 auto;
  padding: 18px 14px;
  background: var(--bg-card, #FBFCFE);
  border: 1px solid var(--border, #E1E7F2);
  border-radius: 14px;
  text-align: center;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.client-tile:hover {
  border-color: var(--border-str, #C9D6EC);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 26, 60, 0.06);
}

.client-tile__mark {
  width: 100%;
  height: 64px;
  object-fit: contain;
}

.client-tile__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted, #566080);
  line-height: 1.3;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .client-tile { width: 150px; padding: 14px 10px; }
  .client-tile__mark { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .client-tile { transition: none; }
  .client-tile:hover { transform: none; }
}