/* ==========================================================================
   grants.css
   Styles used only on the Grants page (grants/index.html).

   Contents
     0. Settings        ← change spacing and widths here
     1. Grant list (text on the left, logos on the right)
     2. Logos
     3. Other Grants (entries without logos)
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Settings (this page only)
   -------------------------------------------------------------------------- */

:root {
  /* Widths come from --content-max and --text-max in base.css */
  --grant-spacing: var(--entry-space); /* space above and below each grant (base.css) */
  --grant-line-gap: .3rem;             /* space between the detail lines of a grant */
}

/* Grant titles a touch smaller than the shared entry headings (base.css) */
.grant-list {
  --entry-title-size: var(--fs-subheading);   /* 19px: a step below the shared entry headings */
}


/* --------------------------------------------------------------------------
   1. Grant list
   Bold text (the grant) in full ink; the details in the softer colour,
   as on the News page.
   -------------------------------------------------------------------------- */

.grant-list {
  max-width: var(--content-max);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grant {
  display: grid;
  grid-template-columns: minmax(0, var(--text-max)) 14rem;   /* text | logos */
  justify-content: space-between;      /* logos at the right edge of the list */
  align-items: center;
  gap: 1rem 2.5rem;
  padding: var(--grant-spacing) 0;
  color: var(--ink);
  border-bottom: var(--rule);
}

.grant:first-child {
  padding-top: 0;
}

/* Detail lines under a grant's heading: one fact per line (funder, people,
   grant number, links), with a little space between them */
.grant-line {
  display: block;
}

.grant-line + .grant-line {
  margin-top: var(--grant-line-gap);
}

.grant-text strong {
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 640px) {
  .grant {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* --------------------------------------------------------------------------
   2. Logos
   -------------------------------------------------------------------------- */

.grant-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem 1rem;
}

.grant-logos a {
  display: block;
}

.grant-logos img {
  width: auto;
  max-width: 11rem;
  max-height: 64px;
  mix-blend-mode: multiply;            /* hides the logos' white boxes on the off-white page */
}

/* Two logos side by side share the column: size them by height, so wide
   logos (e.g. DFG) stay legible next to square ones */
.grant-logos img:not(:only-child),
.grant-logos a:not(:only-child) img {
  max-width: 7.5rem;
  max-height: 44px;
}

@media (max-width: 640px) {
  .grant-logos {
    justify-content: flex-start;
  }

  .grant-logos img {
    max-height: 48px;
  }
}

@media (forced-colors: active) {
  .grant-logos img {
    mix-blend-mode: normal;
  }
}


/* --------------------------------------------------------------------------
   3. Other Grants (heading, then the entries without logos)
   -------------------------------------------------------------------------- */

/* Same yellow label as the section labels elsewhere (e.g. News years) */
.grant-category {
  width: fit-content;
  margin: calc(var(--space) * 1.2) 0 1rem;
  padding: .1rem .55rem;
  font-family: var(--heading);
  font-size: var(--label-size);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  background: var(--highlight);
  border-radius: 2px;
}

.grant-list-more {
  --grant-spacing: var(--item-space);  /* the shorter entries without logos */
  border-top: var(--rule);
}

.grant-list-more .grant {
  grid-template-columns: minmax(0, var(--measure));
}

.grant-list-more .grant:first-child {
  padding-top: var(--grant-spacing);
}


/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .grant {
    break-inside: avoid;
  }

  .grant-category {
    background: none;
    border: 1px solid #000;
  }

  .grant-logos img {
    mix-blend-mode: normal;
  }
}