/**
 * Logo Wall Cycle — ported 1:1 from the stellae resource. No color/font
 * swaps needed; this is pure layout CSS with no hardcoded brand colors.
 */
.logo-wall {
  display: flex;
  justify-content: center;
  width: 100%;
}

.logo-wall__collection {
  width: 100%;
}

.logo-wall__list {
  display: flex;
  flex-flow: wrap;
}

.logo-wall__item {
  width: 20%;
  position: relative;
  padding: 0.5em;
}

/* REQUIRED FIX (not part of the Osmo resource): this was a hardcoded
   "2 rows of 4" fallback (n+9). The per-instance row count is now set via
   the "Rows" ACF field (section-s008.php's $rows), which generates its own
   nth-child rule scoped to the section's own id — see the inline <style>
   block there. This bare rule is the fallback for the rare case that block
   somehow isn't output (e.g. $section['rows'] missing entirely), keeping a
   sane 2-row-of-5 default rather than showing every logo unfiltered. */
[data-logo-wall-list] [data-logo-wall-item]:nth-child(n+11) {
  display: none;
}

/* REQUIRED FIX (not part of the Osmo resource): this used to be a filled
   "card" per logo (background-color + inset hairline + shadow), added so
   the mix-blend-mode:multiply trick below had a light canvas to hide
   opaque-white logo backgrounds against. Checked all 77 real logo assets in
   use — every one is a genuinely transparent PNG, not opaque-white, so that
   trick was never actually needed for this asset library. Removed the card
   entirely per request; the hover lift stays for interactivity. */
.logo-wall__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 1.25em;
  transition: transform .25s ease, background-color .25s ease;
}

/* REQUESTED CHANGE (dark mode only — see light-mode.css reset): hover
   reveals each logo's true color (see .logo-wall__logo-img hover rule
   below), and several of the 77 real logo assets are themselves dark- or
   mid-toned (drawn for light backgrounds) — against this site's near-black
   dark-mode page they stay hard to read even at full color. A light card
   behind the logo on hover restores contrast without bringing back the
   permanent card removed above. */
.logo-wall__item:hover .logo-wall__logo {
  background-color: #f2f2f2;
  transform: translateY(-3px);
}

.logo-wall__logo-before {
  padding-top: 66.66%;
}

.logo-wall__logo-target {
  justify-content: center;
  align-items: center;
  width: 66.66%;
  height: 40%;
  display: flex;
  position: absolute;
}

.logo-wall__logo-img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  /* REQUIRED SWAP: nav.md's demo used SVG logos (mostly forgiving of a stretch
     fit); our raster logo assets are fixed at ~1.85:1 while this target box's
     own ratio works out to ~2.5:1 — width/height:100% alone force-stretches
     every image to match, and stretched raster text reads as "unsharp".
     object-fit:contain preserves native aspect ratio (letterboxed within the
     box) instead of distorting it. */
  object-fit: contain;
}

/* Dark mode (the baseline — no [data-color-mode] needed): logos read as
   muted/monochrome by default, revealing full color on hover.
   REQUIRED FIX (not part of the Osmo resource): the card background this
   used to sit on is gone (see .logo-wall__logo above), so mix-blend-mode:
   multiply no longer has a light canvas to darken against — against this
   site's near-black page background it would darken every logo further,
   making most of them illegible instead of just muted (most of these 77
   logo marks are themselves dark-toned, drawn for use on light backgrounds).
   invert(1) after grayscale(1) flips dark marks to light ones so they read
   clearly against the dark page; brightness(1.3) lifts the handful of
   already-light-toned marks (which go darker after inverting) back to a
   visible mid-tone without blowing out the rest (already-light marks after
   invert are already near-white, so extra brightness just clips harmlessly).
   Verified against real sample logo files spanning dark/mid/light tones.
   light-mode.css resets both properties when [data-color-mode="light"] —
   a plain white page needs no masking at all, logos show true color. */
.logo-wall__logo-img,
.logo-wall--static__img {
  filter: grayscale(1) invert(1) brightness(1.3);
  transition: filter 0.4s ease;
}

.logo-wall__item:hover .logo-wall__logo-img,
.logo-wall--static__item:hover .logo-wall--static__img {
  filter: grayscale(0) invert(0) brightness(1);
}

@media screen and (max-width: 991px) {
  .logo-wall__item {
    width: 33.333%;
  }

  /* Fallback only — see the n+11 comment above, same reasoning, scaled to
     this breakpoint's 3-per-row (section-s008.php generates the real
     per-instance rule at rows*3). */
  [data-logo-wall-list] [data-logo-wall-item]:nth-child(n+7) {
    display: none;
  }
}

/* ------------------------------------------------------------------------
   "Display All" mode — NOT part of the Osmo resource; added per explicit
   request. Every logo shown statically (no animation, no hidden pool),
   stacked in a single column ("visually below each other"), random order
   applied server-side in section-s008.php via shuffle().
   ------------------------------------------------------------------------ */
.logo-wall--static {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Card background removed — same reasoning as .logo-wall__logo above. */
.logo-wall--static__item {
  width: 66.66%;
  max-width: 12em;
  margin: 0.5em 0;
  padding: 1em 1.5em;
  display: flex;
  justify-content: center;
  transition: transform .25s ease;
}

.logo-wall--static__item:hover {
  transform: translateY(-3px);
}

.logo-wall--static__img {
  width: 100%;
  height: auto;
}