/* ==========================================================================
   IBRA funding cards

   A row of scholarship logos, each with the award's value. The hard part is
   that the logos are other people's: different shapes, weights, colours and
   amounts of built-in whitespace. Everything here is aimed at holding them
   together as a set without cropping or distorting any of them.
   ========================================================================== */

.ibra-fcards.has-surface {
  background: var(--surface);
  padding-block: 56px;
}

/* No gutter here: the theme already pads every dnd-section by 1rem,
   and adding another would inset this section past its neighbours. */
.ibra-fcards__inner {
  max-width: var(--ibra-max, 1240px);
  margin-inline: auto;
}

.ibra-fcards__heading {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.ibra-fcards__heading--center { text-align: center; }
.ibra-fcards__heading--left { text-align: left; }

.ibra-fcards__intro {
  max-width: 78ch;
  margin: 0 auto 30px;
  line-height: 1.65;
}

.ibra-fcards__heading--left + .ibra-fcards__intro { margin-inline: 0; }

.ibra-fcards__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}

/* The card ---------------------------------------------------------------
   A hairline ring rather than a border, so the edge reads as a surface
   rather than as a drawn box, and a shadow that sits close at rest. */

.ibra-fcards__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #fff;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow:
    inset 0 0 0 1px rgba(16, 38, 48, .1),
    0 1px 2px rgba(16, 38, 48, .04),
    0 8px 20px -14px rgba(16, 38, 48, .35);
}

.ibra-fcards__card.is-link {
  transition:
    transform .28s cubic-bezier(.2, .7, .3, 1),
    box-shadow .28s ease;
}

.ibra-fcards__card.is-link:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--band, #7E1220) 30%, transparent),
    0 2px 4px rgba(16, 38, 48, .06),
    0 22px 40px -22px rgba(16, 38, 48, .5);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .ibra-fcards__card.is-link:hover {
    box-shadow:
      inset 0 0 0 1px rgba(126, 18, 32, .3),
      0 2px 4px rgba(16, 38, 48, .06),
      0 22px 40px -22px rgba(16, 38, 48, .5);
  }
}

.ibra-fcards__card.is-link:focus-visible {
  outline: 2px solid var(--band, #7E1220);
  outline-offset: 3px;
}

/* The logo ---------------------------------------------------------------
   A ratio rather than a pixel height: the box then scales with the column,
   so cards keep their proportions at every width. A fixed height is still
   available for a set of logos that genuinely needs one.

   Either way the box must have a definite height, or `max-height: 100%` on
   the image has nothing to resolve against and a tall logo sets the height
   of every card in the row. */

.ibra-fcards__logo {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 24px;
  aspect-ratio: 16 / 10;
}

.ibra-fcards--logo-3-2 .ibra-fcards__logo { aspect-ratio: 3 / 2; }
.ibra-fcards--logo-4-3 .ibra-fcards__logo { aspect-ratio: 4 / 3; }
.ibra-fcards--logo-1-1 .ibra-fcards__logo { aspect-ratio: 1 / 1; }

.ibra-fcards--logo-fixed .ibra-fcards__logo {
  aspect-ratio: auto;
  height: var(--logo-h, 120px);
}

.ibra-fcards__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: filter .3s ease, opacity .3s ease;
}

/* Muting mismatched logos to a common weight is the one reliable way to
   make a row of unrelated marks read as a set. Hovering returns the one
   the reader is looking at. */
.ibra-fcards.is-muted .ibra-fcards__logo img {
  filter: grayscale(1);
  opacity: .62;
}

.ibra-fcards.is-muted .ibra-fcards__card:hover .ibra-fcards__logo img,
.ibra-fcards.is-muted .ibra-fcards__card:focus-within .ibra-fcards__logo img {
  filter: grayscale(0);
  opacity: 1;
}

/* The fallback when a logo has not been uploaded yet */
.ibra-fcards__name {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: #33475B;
}

/* The value band ---------------------------------------------------------
   A small label above the figure gives the number something to be, rather
   than leaving a bare amount sitting in a coloured strip. */

.ibra-fcards__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 13px 14px;
  background: var(--band, #7E1220);
  color: #fff;
  text-align: center;
}

.ibra-fcards__caption {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
}

.ibra-fcards__value {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1023px) {
  .ibra-fcards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .ibra-fcards__grid { grid-template-columns: 1fr; gap: 16px; }

  /* One per row makes a 16:10 box unnecessarily tall */
  .ibra-fcards__logo,
  .ibra-fcards--logo-1-1 .ibra-fcards__logo { aspect-ratio: 5 / 2; }

  .ibra-fcards.has-surface { padding-block: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .ibra-fcards__card.is-link { transition: none !important; transform: none !important; }
  .ibra-fcards__logo img { transition: none !important; }
}