@layer app {
  /* ============================================================
     EU co-funding disclosure
     ============================================================ */

  /* The emblems ship as a transparent PNG and the funder wants them published
     that way, so this block never paints a surface behind them. */
  .eu-funding {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    background: transparent;
  }

  /* Emblems above the disclosure, both centred on the page at every width.
     Keeping the two halves in one container is the point: they cannot drift
     apart, which is what the publicity rules are about. */
  .eu-funding__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  /* The emblems are the trigger, so they sit in a button stripped back to the
     image. It is a button rather than a click handler on the image so the
     keyboard and screen readers get the toggle too. */
  .eu-funding__toggle {
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
    line-height: 0;
  }

  /* The grant sets a 40px floor on emblem height at every breakpoint, so the
     image keeps its intrinsic size instead of flexing with the column. */
  .eu-funding__emblems {
    display: block;
    width: 184px;
    height: 107px;
    min-height: 40px;
  }

  .eu-funding__details {
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
    color: var(--color-muted);
  }

  .eu-funding__label {
    margin-bottom: var(--space-4);
    letter-spacing: 0.08em;
    font-weight: 600;
  }

  /* One row per fact, label above value on a phone and beside it on a wider
     screen. Nothing is dropped at either width: the funder needs every line. */
  .eu-funding__facts {
    display: grid;
    gap: var(--space-3);
    margin-bottom: 0;
    text-align: start;
  }

  .eu-funding__fact {
    display: grid;
    gap: var(--space-1);
  }

  .eu-funding__term {
    letter-spacing: 0.08em;
    font-weight: 600;
  }

  .eu-funding__value {
    margin-bottom: 0;
    color: var(--color-body);
  }

  /* The project title leads the list and the grant asks for it in bold. */
  .eu-funding__fact:first-child .eu-funding__value {
    font-weight: 600;
  }
}

@media (min-width: 768px) {
  @layer app {
    .eu-funding__fact {
      grid-template-columns: 12rem 1fr;
      gap: var(--space-3);
      align-items: baseline;
    }
  }
}