/* Partner grid: restrained reveals and smooth pointer/keyboard feedback. */

.partners {
  --seam: #dfe6ec;
  --ground: #eef2f6;
  padding: 96px 0 104px;
  background: var(--ground);
}

.partners__head {
  max-width: 46rem;          /* keeps the paragraph under ~75 characters */
  margin: 0 0 44px;
}

.partners__head h2 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #121c22;
}

.partners__head p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #55646f;
}

/* The count is content, not ornament: "22 organisations" is the claim the
   grid then substantiates. */
.partners__count {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0066ff;
}

.partners__grid {
  display: grid;
  /* Doubled tracks: six visible columns are twelve tracks, each tile spans two.
     That is what lets a short last row be centred — see the start rules at the
     end of this file and partners.rs::last_row_start. */
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  /* The seams used to be this element's grey background showing through the
     1px gap. That paints every empty area grey too, so a centred last row
     would sit between two grey blocks. Each tile now draws its own seam as a
     1px spread shadow, which fills the gap from both sides and leaves the
     space beside a short row as plain page ground. */

  /* NOT clipped, deliberately. A hovered cell lifts 2px, and with
     `overflow: clip` here that lift pushed the top row's upper edge — and
     with it the top of its focus ring — outside the grid's content box,
     where it was cut off. Every other row looked fine, which is what made it
     read as "no outline on the top tiles".
     
     The reveal mask that needs clipping lives on `.partners__cell`, so
     nothing depends on clipping at this level. Square corners suit a panel
     schedule better than a 3px radius anyway. */
  overflow: visible;
}

.partners__cell {
  grid-column: span 2;
  box-shadow: 0 0 0 1px var(--seam);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  min-height: 116px;
  padding: 18px 22px;
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: -2px;
  overflow: clip;
  transition: background-color .32s ease, box-shadow .36s ease,
              transform .36s cubic-bezier(.22, 1, .36, 1),
              outline-color .28s ease, opacity .5s ease,
              translate .55s cubic-bezier(.22, 1, .36, 1);
}

.partners__cell img {
  /* Assets are pre-normalised to a 440x220 canvas by ink area, so every mark
     already carries the same optical weight. These are just display bounds. */
  width: auto;
  height: auto;
  max-width: min(172px, 100%);
  max-height: 64px;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}

/* A subtle lift and a fading blue border; neighbouring logos stay readable. */
.partners__cell:focus-within {
  z-index: 2;
  background: #f8fbff;
  outline-color: #0066ff;
  box-shadow: 0 0 0 1px var(--seam), 0 8px 22px -10px rgba(18, 28, 34, .22);
}
@media (hover: hover) and (pointer: fine) {
  .partners__cell:hover {
    z-index: 2;
    background: #f8fbff;
    transform: translateY(-3px);
    outline-color: #0066ff;
    box-shadow: 0 0 0 1px var(--seam), 0 8px 22px -10px rgba(18, 28, 34, .22);
  }
  .partners__cell:hover img { transform: scale(1.035); }
}

.partners__cell a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* No ring of its own: :focus-within on the cell already draws one, and two
   concentric outlines just look like a mistake. */
.partners__cell a:focus-visible { outline: none; }

/* Reveal the tile itself using translate, independent of the hover transform
   and logo scaling. No clipping or transform competition on linked images. */
.partners__grid.is-armed .partners__cell:not(.is-in) {
  opacity: 0;
  translate: 0 14px;
}
.partners__grid.is-armed .partners__cell.is-in {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0s, 0s, 0s, 0s, var(--d, 0ms), var(--d, 0ms);
}
.partners__grid.is-armed .partners__cell:focus-within {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0s;
}

@media (max-width: 1199px) { .partners__grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 767px)  {
  .partners { padding: 64px 0 72px; }
  .partners__grid { grid-template-columns: repeat(6, 1fr); }
  .partners__cell { min-height: 92px; padding: 12px 14px; }
  .partners__cell img { max-height: 48px; max-width: min(120px, 100%); }
}
@media (max-width: 419px)  { .partners__grid { grid-template-columns: repeat(4, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .partners__cell,
  .partners__cell img { transition: none !important; }
  .partners__grid.is-armed .partners__cell { translate: none; opacity: 1; }
  .partners__cell:hover, .partners__cell:hover img { transform: none; }
}

/* ── centring a short last row ────────────────────────────────────────────
 * The server tags the tile that opens an incomplete last row with where it
 * starts: `s6-6` is "at six columns, start on line 6". On doubled tracks a row
 * of r tiles leaves (columns - r) free tracks on EACH side, so the row sits
 * dead centre whatever r is — including one logo under six columns, which on
 * single tracks would have needed a start of 3.5.
 *
 * Every breakpoint first resets the tags of the others, then applies its own.
 * Same specificity throughout, so source order does the switching. The Rust
 * test every_class_the_server_can_emit_has_a_rule_in_the_stylesheet fails if
 * a tag the renderer can produce has no rule here.
 */
.partners__grid > .s6-2 { grid-column: 2 / span 2; }
.partners__grid > .s6-3 { grid-column: 3 / span 2; }
.partners__grid > .s6-4 { grid-column: 4 / span 2; }
.partners__grid > .s6-5 { grid-column: 5 / span 2; }
.partners__grid > .s6-6 { grid-column: 6 / span 2; }

@media (max-width: 1199px) {
  .partners__grid > .partners__cell { grid-column: span 2; }
  .partners__grid > .s4-2 { grid-column: 2 / span 2; }
  .partners__grid > .s4-3 { grid-column: 3 / span 2; }
  .partners__grid > .s4-4 { grid-column: 4 / span 2; }
}

@media (max-width: 767px) {
  .partners__grid > .partners__cell { grid-column: span 2; }
  .partners__grid > .s3-2 { grid-column: 2 / span 2; }
  .partners__grid > .s3-3 { grid-column: 3 / span 2; }
}

@media (max-width: 419px) {
  .partners__grid > .partners__cell { grid-column: span 2; }
  .partners__grid > .s2-2 { grid-column: 2 / span 2; }
}