/* Partners page. Loaded after team.css, whose intro block this page shares. */

body.page-partners {
  background:
    radial-gradient(420px 320px at -60px 320px, rgba(142, 168, 108, 0.18), transparent 70%),
    radial-gradient(420px 320px at calc(100% + 80px) 240px, rgba(142, 168, 108, 0.14), transparent 70%),
    linear-gradient(180deg, #f7faf7 0%, var(--bg) 100%);
}

/* Two lines of heading, so a step down from the one-line team headline --
   otherwise the block dominates a page whose subject is the cards below it. */
.partners-headline { font-size: clamp(1.75rem, 2.9vw, 2.6rem); }

/* Section labels. The page now carries two lists -- the funder and the
   organisations -- so each needs naming. Reuses the intro pill rather than a
   plain heading, so the labels read as siblings of the eyebrow above them
   instead of introducing a third heading style to the page. */
.partners-section-label {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 1.6rem;
  background: var(--primary-soft);
  color: var(--primary);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .4rem 1.1rem;
  border-radius: 999px;
}
/* The headline block no longer carries a paragraph, so the funder label needs
   its own gap above it. */
.partners-section-label { margin-top: .25rem; }

/* Intro line for the organisations, sitting between the funder panel and the
   card grid. Centred and narrow to match the headline block it moved from. */
.partners-orgs-intro {
  max-width: 720px;
  margin: 3.25rem auto 2.5rem;
  text-align: center;
}

/* The funding partner: one tall portrait sheet supplied by the client, so the
   panel is capped well short of the container -- at full width the artwork
   would run past two screens of scroll. The anchor wraps the whole thing
   because the client asked for the image itself to be the link. */
.partners-funder {
  display: block;
  max-width: 560px;
  margin: 0 auto;
  text-decoration: none;
  color: inherit;
}

.partners-funder-sheet {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.partners-funder:hover .partners-funder-sheet,
.partners-funder:focus-visible .partners-funder-sheet {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--line-strong);
}

/* site.css sets a global img { width/height: 100%; object-fit: cover }, which
   would crop this sheet to the box; restated so the whole page of artwork is
   visible and scales with the panel. */
.partners-funder-sheet img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Readable link text under the image: a linked picture with an alt attribute
   alone gives a screen reader no sense of where the link goes. */
.partners-funder-caption {
  display: block;
  margin-top: 1rem;
  text-align: center;
  font-weight: 700;
  color: var(--primary-strong);
}
.partners-funder-site {
  display: block;
  margin-top: .25rem;
  font-weight: 400;
  font-size: .85rem;
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.partners-funder:hover .partners-funder-site { color: var(--primary); }

/* Same three-across rhythm as the team grid, so the two pages read as a pair. */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.partners-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 0 0 1.6rem;
  overflow: hidden;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.partners-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: var(--line-strong);
}

/* Fixed-height panel rather than a fixed image size: the logos differ in
   proportion from near-square to a long wordmark, so what has to match across
   the row is the space each one sits in, not the picture itself. Kept white
   because two of the logos are raster sources with a white background -- a
   tinted panel would show them as pale rectangles. */
.partners-logo {
  /* Flex, not grid: the logo box below is capped with max-height, and a
     percentage cap only resolves against a definite height. An auto-sized grid
     row is indefinite, so the cap was silently dropped and only the logos wide
     enough to be caught by max-width stayed inside the panel. */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* The size band every logo is normalised into. Capping against the panel
   instead let each logo grow until it hit an edge, which sizes by bounding box
   rather than by how large the mark actually reads: the wide wordmarks ran the
   full width of the card and dwarfed the stacked eeef mark. A fixed pair of
   caps, well inside the panel, brings the whole set into one band -- the wide
   marks come down to the width cap, the tall ones to the height cap.

   Explicit px, not percentages, so the band holds at every breakpoint rather
   than tracking card width. min() keeps the guard against a card narrower than
   the cap, which the smallest phones can produce.

   site.css sets a global img { width/height: 100%; object-fit: cover } that
   would stretch and crop wordmarks, so every dimension is restated. Sizing
   stays on auto: max-* only ever shrinks, so no logo is scaled past its
   natural size. This relies on each file having intrinsic dimensions -- eeef.svg
   shipped with a viewBox and no width/height, which under auto sizing expands
   to the available width instead, so those attributes were added to the file. */
.partners-logo img {
  width: auto;
  height: auto;
  max-width: min(100%, 200px);
  max-height: 78px;
  object-fit: contain;
}

.partners-name {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 1.35rem 1.5rem .55rem;
  color: var(--primary-strong);
}

.partners-blurb {
  margin: 0 1.5rem;
  color: var(--text-soft);
  font-size: .92rem;
  line-height: 1.7;
}

/* Two across on tablets. */
@media (max-width: 1000px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (max-width: 600px) {
  .partners-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .partners-orgs-intro { margin: 2.5rem auto 2rem; }
  .partners-logo { height: 112px; padding: 1.1rem 1.25rem; }
  .partners-logo img { max-width: min(100%, 176px); max-height: 68px; }
  .partners-name { margin: 1.15rem 1.25rem .5rem; }
  .partners-blurb { margin: 0 1.25rem; }
}