@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;
  }

  /* The disclosure is two sentences of reference text under the emblems
     rather than page copy, so it is set a step down from the body size on a
     narrow measure and reads down the middle of the page at every width. */
  .eu-funding__details {
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
    margin-top: var(--space-3);
    color: var(--color-muted);
    font-size: 0.875rem;
    text-align: center;

    p {
      margin-bottom: var(--space-2);
    }

    p:last-child {
      margin-bottom: 0;
    }
  }
}