/* =====================================================================
   OUR PARTNERS  ·  logo wall
   Used by resources/views/partials/partners.blade.php. Loaded on the
   homepage only (see PageController::home). If the partial is ever
   included on another page, add this sheet to that page's $styles too.

   Sized from the real uploads (2026-09-09): logos arrive as OPAQUE
   rectangles, not transparent PNGs — two sit on #F7F7F7 and one is a
   solid #1E4F31 green block. Two consequences drive the rules below:

   1. Tiles are painted #F7F7F7, not white, so the light logos blend into
      their tile instead of showing a faint grey rectangle on white.
   2. No greyscale-at-rest. That treatment suits transparent logos; on
      these it turns the green block into a muddy grey square and drains
      the gold out of the HiO mark. Logos show in full colour.

   Every tile is a fixed box with the logo object-fit: contain inside it,
   so nothing is cropped or stretched however odd the aspect ratio — the
   uploads run from 800x344 to 400x400.
   ===================================================================== */

.partner-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--hairline, rgba(11,11,15,0.10));
  border: 1px solid var(--hairline, rgba(11,11,15,0.10));
  border-radius: 14px;
  overflow: hidden;
}

/* The 1px grid gap above is the hairline; each tile paints over it. */
.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 26px;
  min-height: 148px;
  background: #F7F7F7;
  text-decoration: none;
  transition: background .25s ease;
}

.partner img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 76px;
  object-fit: contain;
  transition: transform .25s ease;
}

/* Only linked tiles react — an unlinked tile that lifts on hover implies
   a click that does nothing. All three current partners are unlinked. */
a.partner:hover,
a.partner:focus-visible {
  background: #FFFFFF;
}

a.partner:hover img,
a.partner:focus-visible img {
  transform: scale(1.04);
}

a.partner:focus-visible {
  outline: 2px solid var(--gold, #F8BF3D);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .partner,
  .partner img { transition: none; }
  a.partner:hover img,
  a.partner:focus-visible img { transform: none; }
}

@media (max-width: 760px) {
  .partner-wall {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .partner {
    padding: 24px 18px;
    min-height: 112px;
  }
  .partner img { max-height: 56px; }
}