/* ==========================================================================
   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;
}

/* The figure reads as three parts at three sizes: the symbol raised to the
   cap height, the amount carrying the weight, and the unit small and
   set back. Baseline alignment keeps them sitting on one line however the
   sizes are tuned, which a vertical-align approach would not. */
.ibra-fcards__figure {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.ibra-fcards__cur {
  align-self: flex-start;
  font-size: .58em;
  font-weight: 600;
  line-height: 1.5;
  opacity: .85;
}

.ibra-fcards__value {
  letter-spacing: -.01em;
}

.ibra-fcards__unit {
  font-size: .56em;
  font-weight: 500;
  letter-spacing: .02em;
  opacity: .78;
  margin-left: 1px;
}

/* 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; }
}