/**
 * Partner strip — compositional primitive.
 *
 * Horizontal row of partner / licensor / cinema-chain / retailer logos.
 * Used in pitch decks ("Our partners"), sell-sheets, footers, and the
 * Sugoi.au homepage.
 *
 * Two variants:
 *   - inline — logos sit in a single row, equal height, optional eyebrow
 *   - bordered — logos sit in a card-shaped envelope with subtle border
 *
 * Markup:
 *   <section class="ds-partner-strip">
 *     <p class="ds-partner-strip__eyebrow">Trusted by</p>
 *     <ul class="ds-partner-strip__items">
 *       <li><img src="cygames.svg" alt="Cygames" /></li>
 *       <li><img src="aniplex.svg" alt="Aniplex" /></li>
 *       <li><img src="imax.svg" alt="IMAX" /></li>
 *     </ul>
 *   </section>
 */

.ds-partner-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-md);
  padding: var(--ds-space-lg) 0;
  text-align: center;
}

.ds-partner-strip__eyebrow {
  font-size: var(--ds-text-caption);
  font-weight: var(--ds-weight-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-color-text-muted);
  margin: 0;
}

.ds-partner-strip__items {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-xl);
  width: 100%;
}

.ds-partner-strip__items > li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--ds-space-xl);          /* 48px logo height — consistent rhythm */
  flex-shrink: 0;
}

.ds-partner-strip__items > li > img,
.ds-partner-strip__items > li > svg {
  max-height: 100%;
  width: auto;
  display: block;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--ds-duration-default) var(--ds-ease-default),
              opacity var(--ds-duration-default) var(--ds-ease-default);
}

.ds-partner-strip__items > li:hover > img,
.ds-partner-strip__items > li:hover > svg {
  filter: grayscale(0);
  opacity: 1;
}

/* Allow text-only fallback for missing logos */
.ds-partner-strip__items > li > .ds-partner-strip__text {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-heading-md);
  font-weight: var(--ds-weight-display);
  color: var(--ds-color-text-secondary);
  letter-spacing: 0.04em;
  opacity: 0.7;
  transition: color var(--ds-duration-default) var(--ds-ease-default),
              opacity var(--ds-duration-default) var(--ds-ease-default);
}
.ds-partner-strip__items > li:hover > .ds-partner-strip__text {
  color: var(--ds-color-text-heading);
  opacity: 1;
}

/* ─── Density modifiers ─────────────────────────────────────── */
.ds-partner-strip--compact { padding: var(--ds-space-sm) 0; gap: var(--ds-space-xs); }
.ds-partner-strip--compact .ds-partner-strip__items { gap: var(--ds-space-lg); }
.ds-partner-strip--compact .ds-partner-strip__items > li { height: var(--ds-space-lg); }

/* ─── Bordered variant ─────────────────────────────────────── */
.ds-partner-strip--bordered {
  padding: var(--ds-space-lg);
  background: var(--ds-color-surface-raised);
  border: 1px solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-card);
}

/* ─── Inverse modifier ────────────────────────────────────── */
.ds-partner-strip--inverse .ds-partner-strip__eyebrow { color: var(--ds-color-text-inverse); opacity: 0.7; }
.ds-partner-strip--inverse .ds-partner-strip__items > li > img,
.ds-partner-strip--inverse .ds-partner-strip__items > li > svg {
  filter: grayscale(1) brightness(2);  /* lift greyscale logos to white-ish on dark */
  opacity: 0.8;
}
.ds-partner-strip--inverse .ds-partner-strip__items > li:hover > img,
.ds-partner-strip--inverse .ds-partner-strip__items > li:hover > svg {
  filter: grayscale(0);
  opacity: 1;
}
.ds-partner-strip--inverse .ds-partner-strip__items > li > .ds-partner-strip__text { color: var(--ds-color-text-inverse); }