/* Partner Logos — customer-tiles' logo tile, held still, in groups.
   The shell is --page-max / --page-x (the nav ruler). One switch between phone and desktop
   (1024px, audit-breakpoints.py): six tracks on desktop, four on the phone. A group spans
   as many tracks as it has logos, up to a full row (--d desktop, --m phone, set by the
   template; on the phone at least two, so a one-logo group's label stays on one line), and
   its own tiles use the same track width, so every tile on the wall is the same size
   whichever group it is in. The phone wall fits one screen (audit-mobile-sections.mjs).
   The plate is on the tile, never on the link: a filled link under 90px is a button to the
   corner law, and a tile is a card. */
.pl { background: #fff; padding: 96px 0; }
.pl__in { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-x); box-sizing: border-box; }
.pl__h { margin: 14px 0 0; }
.pl__wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 10px; margin-top: 44px; }
.pl__group { grid-column: span var(--d); min-width: 0; display: flex; flex-direction: column; }
/* a label that wraps (a long label in a narrow group) grows upward: the tiles of a row stay level */
.pl__gh { flex: 1 0 auto; display: flex; align-items: flex-end; flex-wrap: wrap; column-gap: 4px; margin: 0 0 12px; font: 500 13px/1.3 var(--font-body); letter-spacing: 0; color: var(--vu-grey-600); }
.pl__gn { font-weight: 400; color: var(--vu-grey-400); }
.pl__tiles { display: grid; grid-template-columns: repeat(var(--d), minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pl__tile { margin: 0; padding: 0; border-radius: var(--radius-card); background: #faf9f7; transition: background-color .45s ease; }
.pl__face { display: flex; align-items: center; justify-content: center; height: 100px; padding: 0 12px; border-radius: inherit; box-sizing: border-box; }
/* every logo gets the SAME visual area from its ink aspect (customer-tiles' sizeLogo rule:
   with this wall's own box: area 2000, capped at 40px high and 128px wide), so a wide wordmark sits lower than a compact
   mark and none outweighs the rest. Without sqrt() or without an aspect, a fixed box. */
.pl__logo { display: block; width: 120px; height: 34px; object-fit: contain; opacity: .5; transition: opacity .45s ease; }
@supports (width: calc(sqrt(4) * 1px)) {
  .pl__logo[style] { width: min(calc(sqrt(var(--r) * var(--pl-area, 2000)) * 1px), calc(var(--r) * var(--pl-maxh, 40px)), var(--pl-maxw, 128px)); height: auto; }
}
.pl__tile:has(> a:hover) { background: #f3f1ed; }
a.pl__face:hover .pl__logo, a.pl__face:focus-visible .pl__logo { opacity: .9; }
a.pl__face:focus-visible { outline: 2px solid var(--vu-black); outline-offset: 2px; }

@media (max-width: 1023px) {
  .pl { padding: 40px 0; }
  .pl__wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 6px; margin-top: 20px; }
  .pl__group { grid-column: span var(--m); }
  .pl__tiles { grid-template-columns: repeat(var(--m), minmax(0, 1fr)); gap: 6px; }
  .pl__face { height: 48px; padding: 0 6px; }
  .pl__gh { font-size: 12px; margin-bottom: 8px; }
  .pl__logo { width: 64px; height: 22px; --pl-area: 820; --pl-maxh: 26px; --pl-maxw: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl__tile, .pl__logo { transition: none; }
}