/* ============================================================================
   EU visibility. Read docs/eu-visibility.md before changing anything here.

   The draft design had a 14px flag next to a 40px project logo and 80px
   partner logos, and read "Funded by the EU". All three are breaches:
     - the emblem must be at least as large as the biggest other logo
     - it must be no smaller than 1cm (~38px at 96dpi)
     - the statement must be spelled out in full
   ========================================================================== */

/* The official lockup SVG already contains the words "Funded by the European
   Union", so the statement is not repeated as text beside it. */
.eu-lockup {
  display: flex;
  align-items: center;
  flex: none;
}

/* A DEFINITE height, and flex: none. The official SVG declares only a viewBox,
   no width or height, so it has an intrinsic ratio but no intrinsic size. With
   `height: auto` and `max-height` it was a shrinkable flex item inside
   .eu-lockup with no width to resist with, so its flex base size could resolve
   to zero: all that rendered was this rule's own 2px padding and 2px radius, a
   small white dot after the last nav item. That is an Article 17 breach, not
   just a cosmetic one, because the emblem has to be at least as large as the
   biggest other logo and at least 1cm high. */
.eu-lockup__emblem {
  flex: none;
  height: var(--logo-max-h-mobile);
  width: auto;
  /* Never recolour, round, or overlay the emblem. If the surface behind it is
     busy or low-contrast, it sits on a white plate instead. */
  background: #ffffff;
  padding: 2px;
  border-radius: 2px;
}

@media (min-width: 36em) {
  .eu-lockup__emblem {
    height: var(--logo-max-h);
  }
}

/* Footer variant: at least as tall as the largest partner logo on the site. */
.eu-funding {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
}

/* Definite height here too. Its parent is a grid rather than a flex row, so it
   does not collapse today, but the SVG has no intrinsic size either and the
   failure mode is one layout change away. */
.eu-funding__emblem {
  height: var(--logo-max-h-footer);
  width: auto;
  background: #ffffff;
  padding: var(--s-2);
  border-radius: var(--radius);
}

.eu-funding__statement {
  font-size: var(--t-base);
  font-weight: var(--fw-medium);
}

/* Sits in the footer's small print, not beside the emblem. */
.eu-funding__disclaimer {
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
  color: var(--c-ink-muted);
  max-width: 100ch;
}

/* Every other logo on the site is capped below the emblem. This is what keeps
   the "at least as large as the biggest other logo" rule true automatically. */

/* Images: cap the height and let the width follow, so the aspect holds.
   The cap has to track the emblem at every breakpoint, not just the widest one.
   The emblem is 36px below 36em and 48px above it, so a flat 48px cap here left
   every other logo taller than the emblem on a small phone, which is the one
   thing this file exists to prevent. Same base value as the emblem, raised in
   the same media query below. */
.partner-card__logo img,
.brand__logo,
.partner-logo {
  max-height: var(--logo-max-h-mobile);
  width: auto;
}

/* Lower again for the header wordmark on a phone; see the token. The media
   query below restores it with the others from 36em. */
.brand__logo {
  max-height: var(--logo-max-h-brand-mobile);
}

@media (min-width: 36em) {
  .partner-card__logo img,
  .brand__logo,
  .partner-logo {
    max-height: var(--logo-max-h);
  }
}