/* ==========================================================================
   Block: Client logo wall
   ========================================================================== */

.awx-logo-wall__header {
  /* No max-width here — see the identical comment on .awx-card-grid__header. */
  margin-bottom: var(--awx-space-lg);
  text-align: center;
}

.awx-logo-wall__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}

@media (min-width: 40rem) {
  .awx-logo-wall__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 62rem) {
  .awx-logo-wall__grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Fixed, not min-height: a min-height still lets a mark smaller than the
   cell render at its own small size. Every cell needs to be identical
   regardless of how big the source file happens to be. */
.awx-logo-wall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.625rem; /* ~90px */
}

/* Every mark rests desaturated to a single grey (white, on a dark surface)
   so no one brand dominates — but the logos are uploaded in full colour,
   and hovering one reveals it, so the proof point still reads as a real
   brand mark on inspection rather than a permanently flattened one.

   height (not max-height) on the mark is what actually makes every logo
   occupy a uniform, optically balanced cell: max-height only ever shrinks
   an oversized mark, it does not grow an undersized one, which is exactly
   how logos uploaded at very different native resolutions were ending up
   at wildly different rendered sizes (~30px next to ~90px) even with the
   fixed-height cell above. max-width: 80% keeps a very wide wordmark from
   touching its neighbours. */
.awx-logo-wall__mark {
  height: 100%;
  width: auto;
  max-width: 80%;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.75);
  /* Its own explicit timing rather than --awx-transition (200ms) — the
     fade reads better a little slower than the site's default UI timing. */
  transition: filter 300ms ease;
}

[data-surface="inverse"] .awx-logo-wall__mark,
[data-surface="image"] .awx-logo-wall__mark {
  filter: grayscale(100%) brightness(0) invert(1) opacity(0.55);
}

/* Dropping the filter entirely (not just raising opacity) is what reveals
   colour — grayscale() is what flattens it, and the dark-surface rule above
   additionally forces it to a white silhouette via brightness(0) invert(1),
   so hover has to clear that whole chain too, not just grayscale(). One
   rule covers every surface: its specificity already beats both base rules
   above, so it does not need its own [data-surface] scoping to win.

   @media (hover: hover) guard was missing — without it, a touchscreen tap
   can latch :hover indefinitely (no pointer to move away and clear it),
   leaving one mark stuck in full colour until the visitor taps elsewhere.
   Restricting this to devices that can actually hover keeps every mark
   uniformly grey at rest on touch. */
@media (hover: hover) {
  .awx-logo-wall__item:hover .awx-logo-wall__mark {
    filter: opacity(1);
  }
}

/* Shown when a Brand Logo has no featured image yet. */
.awx-logo-wall__fallback {
  color: var(--surface-muted);
  font-family: var(--awx-font-display);
  font-size: var(--awx-step--1);
  text-align: center;
  text-transform: uppercase;
}

.awx-logo-wall__footnote {
  max-width: 62ch;
  margin: var(--awx-space-lg) auto 0;
  color: var(--surface-muted);
  font-size: var(--awx-step--1);
  text-align: center;
}

.awx-logo-wall__actions {
  margin-top: var(--awx-space-md);
  text-align: center;
}