/* mp-sponsors — the sponsor strip (home) and the tiered grid (/sponsors/). CSS only.
   Contract: COMPONENTS.md §7.65. Logos are <img> on white or transparent backgrounds:
   mix-blend-mode multiply drops the white into whatever surface they sit on. */
@layer components {
  /* ---------------------------------------------------------------- the strip */
  /* As a top-level block it is its own white band (inc/blocks.php): the band edge to edge, its
     words and logos on the page's content edges, a section's gap above. */
  .mp-band--sponsors-strip { padding-block: 0; }
  .mp-prose > .mp-band--sponsors-strip { margin-block-start: var(--mp-space-section); }
  .mp-band--sponsors-strip > .mp-sponsors--strip { grid-column: full; padding-inline: var(--mp-pad-bleed); }

  .mp-sponsors--strip {
    --_logo: var(--mp-h-logo-s);
    display: grid;
    gap: var(--mp-space-xs);
    padding-block: var(--mp-space-s);
    border-block: var(--mp-border) solid var(--mp-color-line);
    background-color: var(--mp-color-surface);
  }
  .mp-sponsors__label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mp-space-3xs) var(--mp-space-s);
  }
  .mp-sponsors__link {
    display: inline-flex;
    align-items: center;
    gap: var(--mp-space-3xs);
    min-block-size: var(--mp-tap);
    font-size: var(--mp-fs-sm);
  }
  .mp-sponsors__track {
    --_dur: max(var(--mp-dur-marquee-min), var(--_n, 4) * var(--mp-dur-marquee));
    display: flex;
    min-inline-size: 0;
    overflow: hidden;
    /* the soft edges: a mask reads only alpha, so any opaque colour will do */
    mask-image: linear-gradient(90deg, transparent 0, currentColor var(--mp-space-xl), currentColor calc(100% - var(--mp-space-xl)), transparent 100%);
  }
  /* Each lane is at least the track's width (a short list spreads out), so the two always
     cover it and the loop never shows an empty end. */
  .mp-sponsors__lane {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-around;
    gap: var(--mp-space-2xl);
    min-inline-size: 100%;
    margin: 0;
    padding: 0 var(--mp-space-2xl) 0 0; /* the gap after the last logo, so the copy follows at the same pace */
    list-style: none;
    animation: mp-sponsors-scroll var(--_dur) linear infinite;
  }
  .mp-sponsors__item { flex: none; }
  .mp-sponsors__mark {
    display: flex;
    align-items: center;
    min-block-size: var(--mp-tap);
    color: var(--mp-color-text);
    text-decoration: none;
  }
  .mp-sponsors--strip .mp-sponsors__logo {
    display: block;
    inline-size: auto;
    block-size: var(--_logo);
    max-inline-size: none;
    filter: grayscale(1);
    mix-blend-mode: multiply;
    opacity: .78;
    transition: filter var(--mp-dur-fast) var(--mp-ease-out), opacity var(--mp-dur-fast) var(--mp-ease-out);
  }
  .mp-sponsors__mark:is(:hover, :focus-visible) .mp-sponsors__logo { filter: none; opacity: 1; }
  .mp-sponsors__wordmark {
    font: var(--mp-weight-display) var(--mp-fs-display-2xs) / var(--mp-lh-tight) var(--mp-font-display);
    letter-spacing: var(--mp-track-display);
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* Hover holds the strip still; a keyboard user gets it at rest from the start, so the
     focused logo scrolls into view rather than sliding away. */
  .mp-sponsors__track:hover .mp-sponsors__lane { animation-play-state: paused; }
  .mp-sponsors__track:focus-within .mp-sponsors__lane { animation: none; }

  @media (width >= 48rem) {
    .mp-sponsors--strip {
      --_logo: var(--mp-h-logo);
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: var(--mp-space-l);
      min-block-size: var(--mp-h-strip);
      padding-block: 0;
    }
    .mp-sponsors__label {
      flex-direction: column;
      align-items: flex-start;
      align-self: stretch;
      justify-content: center;
      gap: 0;
      padding-inline-end: var(--mp-space-l);
      border-inline-end: var(--mp-border) solid var(--mp-color-line);
    }
    .mp-sponsors__link { min-block-size: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mp-sponsors__track { mask-image: none; }
    .mp-sponsors__lane {
      flex: 1 1 auto;
      flex-wrap: wrap;
      gap: var(--mp-space-xs) var(--mp-space-xl);
      padding: 0;
      animation: none;
    }
    .mp-sponsors__lane[aria-hidden="true"] { display: none; }
  }

  /* ----------------------------------------------------------------- the grid */
  .mp-sponsors--grid { display: grid; gap: var(--mp-space-xl); }
  .mp-sponsors__tier { display: grid; gap: var(--mp-space-s); }
  .mp-sponsors__heading {
    display: flex;
    align-items: center;
    gap: var(--mp-space-s);
    margin: 0;
    color: var(--mp-color-text-2);
    font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-label);
    text-transform: uppercase;
  }
  .mp-sponsors__heading::after {
    content: "";
    flex: 1;
    border-block-start: var(--mp-border) solid var(--mp-color-line);
  }
  .mp-sponsors__cards {
    display: grid;
    gap: var(--mp-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (width >= 48rem) {
    .mp-sponsors__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-sponsors__cards--feature { grid-template-columns: minmax(0, 1fr); }
  }

  /* A card: the logo tile, then the name, the line and the meta row. The name's link covers
     the card (the mp-product block-link pattern). */
  .mp-sponsors__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--mp-space-2xs);
    padding: var(--mp-space-s);
    border-radius: var(--mp-radius-md);
    background-color: var(--mp-color-surface);
    box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line);
    transition: box-shadow var(--mp-dur-fast) var(--mp-ease-out);
  }
  .mp-sponsors__card:has(.mp-sponsors__site):hover { box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line-hover); }
  .mp-sponsors__card:has(.mp-sponsors__site:focus-visible) {
    outline: var(--mp-focus-width) solid var(--mp-color-focus);
    outline-offset: var(--mp-focus-offset);
  }
  .mp-sponsors__tile {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr); /* one definite cell: the logo's max sizes resolve against it */
    place-items: center;
    block-size: calc(var(--mp-w-logo-tile) * 2 / 3); /* a definite height (a 3:2 tile beside the words), so the logo is contained, never sized by its file */
    padding: var(--mp-space-s);
    border-radius: var(--mp-radius-sm);
    background-color: var(--mp-color-surface-2);
  }
  .mp-sponsors__tile .mp-sponsors__logo {
    inline-size: auto;
    block-size: auto;
    max-inline-size: 100%;
    max-block-size: 100%;
    min-block-size: 0;
    object-fit: contain;
    mix-blend-mode: multiply;
  }
  .mp-sponsors__name {
    margin: 0;
    font-size: var(--mp-fs-display-xs);
  }
  .mp-sponsors__site { color: inherit; text-decoration: none; }
  .mp-sponsors__site::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .mp-sponsors__site:focus-visible { outline: 0; }
  .mp-sponsors__card:hover .mp-sponsors__site { text-decoration: underline; text-decoration-thickness: var(--mp-border); text-underline-offset: .12em; }
  .mp-sponsors__line {
    margin: 0;
    color: var(--mp-color-text-2);
    font-size: var(--mp-fs-sm);
    line-height: var(--mp-lh-snug);
  }
  .mp-sponsors__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mp-space-2xs);
    margin: 0;
    color: var(--mp-color-accent-text);
    font-size: var(--mp-fs-xs);
    font-weight: var(--mp-weight-ui);
  }
  .mp-sponsors__dot { color: var(--mp-color-text-2); }
  .mp-sponsors__arrow { transition: translate var(--mp-dur-fast) var(--mp-ease-out); }
  .mp-sponsors__card:hover .mp-sponsors__arrow { translate: var(--mp-space-3xs) 0; }

  /* From a wide phone: the tile at the left (180 px), the words beside it as one group,
     centred on the tile (the empty first and last rows take the slack; an absent line or meta
     row adds no gap: the spacing is margins). */
  @media (width >= 30rem) {
    .mp-sponsors__card {
      grid-template-columns: var(--mp-w-logo-tile) minmax(0, 1fr);
      grid-template-rows: 1fr auto auto auto 1fr;
      gap: 0 var(--mp-space-m);
    }
    .mp-sponsors__tile { grid-column: 1; grid-row: 1 / -1; }
    .mp-sponsors__name { grid-column: 2; grid-row: 2; }
    .mp-sponsors__line { grid-column: 2; grid-row: 3; margin-block-start: var(--mp-space-3xs); }
    .mp-sponsors__meta { grid-column: 2; grid-row: 4; margin-block-start: var(--mp-space-xs); }
  }

  /* The presenting sponsor: one wide card on the soft panel, the logo on a white tile. */
  .mp-sponsors__card--feature { background-color: var(--mp-color-surface-2); box-shadow: none; }
  .mp-sponsors__card--feature .mp-sponsors__tile { block-size: var(--mp-w-logo-tile); background-color: var(--mp-color-surface); }
  .mp-sponsors__card--feature .mp-sponsors__name { font-size: var(--mp-fs-display-s); }
  .mp-sponsors__card--feature .mp-sponsors__line { font-size: var(--mp-fs-base); }
  @media (width >= 48rem) {
    .mp-sponsors__card--feature {
      grid-template-columns: calc(var(--mp-w-logo-tile) * 1.5) minmax(0, 1fr);
      column-gap: var(--mp-space-xl);
      padding: var(--mp-space-card);
    }
  }
}

@keyframes mp-sponsors-scroll {
  from { translate: 0 0; }
  to   { translate: -100% 0; }
}