/* Logo lineup — eyebrow + heading above a responsive logo grid.
   Flat CSS: module stylesheets aren't run through the theme's PostCSS build,
   so no nesting here. */

.logo-lineup {
  /* Logo max-height is theme-scoped (one knob per size variant) so the row
     height stays consistent even when individual logos have different
     intrinsic aspect ratios. */
  --logo-max-h: 4rem;
  --logo-lineup-color: inherit;
  --logo-lineup-bg: transparent;

  background-color: var(--logo-lineup-bg);
  color: var(--logo-lineup-color);
  margin-inline: auto;
  max-width: var(--site-width, 1120px);
  padding-inline: 1.5rem;
  width: 100%;
}

/* ===== Section head ===== */
.logo-lineup__head {
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
  max-width: 42rem;
}

.logo-lineup--align-center .logo-lineup__head {
  margin-inline: auto;
  text-align: center;
}

.logo-lineup--align-left .logo-lineup__head {
  margin-inline: 0;
  text-align: left;
}

.logo-lineup__eyebrow {
  margin: 0 0 0.5rem;
}

.logo-lineup__heading {
  color: inherit;
  margin: 0;
}

.logo-lineup__description {
  color: inherit;
  margin-top: 0.75rem;
  opacity: 0.8;
}

.logo-lineup__description p {
  margin: 0;
}

.logo-lineup__description p + p {
  margin-top: 0.75em;
}

/* ===== Row ===== */
/* Flex-wrap so logos keep their intrinsic width (not forced into equal
   grid cells) and stay on one row until they can't fit, then wrap cleanly
   to a second row. Grid auto-fit was giving every logo the same column
   width, which made short wordmarks look awkward next to tall logo-marks. */
.logo-lineup__row {
  align-items: center;
  column-gap: clamp(1.5rem, 1rem + 2vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  row-gap: clamp(1rem, 0.75rem + 1vw, 2rem);
}

.logo-lineup--align-left .logo-lineup__row {
  justify-content: flex-start;
}

.logo-lineup__item {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* Phones: tighten gaps so wrapping to 2–3 rows reads naturally. */
@media (max-width: 639px) {
  .logo-lineup__row {
    column-gap: 1.25rem;
    row-gap: 1rem;
  }
}

/* ===== Logo image =====
   Optical sizing (--logo-balance token, shared with pillar CTA cards): a
   square logo is drawn at the full --logo-max-h, wider ones shorter, so a
   wordmark and a badge carry similar weight instead of every logo filling
   the same height. --logo-aspect (width / height) comes from module.html;
   a logo with no saved size is treated as a typical 3:1 wordmark.
   No hover effect on the image itself; linked logos get their own below. */
.logo-lineup__img {
  display: block;
  height: var(--logo-max-h);
  max-width: min(100%, 12rem);
  object-fit: contain;
  width: auto;
}

@supports (height: calc(1px * pow(2, 1))) {
  .logo-lineup__img {
    height: calc(var(--logo-max-h) * pow(var(--logo-aspect, 3), var(--logo-balance)));
  }
}

/* ===== Size variants ===== */
.logo-lineup--size-small  { --logo-max-h: 3rem; }
.logo-lineup--size-medium { --logo-max-h: 4rem; }
.logo-lineup--size-large  { --logo-max-h: 5rem; }

/* ===== Background variants =====
   Default (--bg-none) is transparent — the module blends into whatever
   section hosts it. The explicit variants exist for one-off placements
   where the module is dropped onto an untinted page and needs its own
   band color. Editor is expected to upload the version of each logo
   (black on light, white on dark) that matches the chosen background —
   no CSS filters applied, so brand fidelity is preserved. */
.logo-lineup--bg-none {
  --logo-lineup-bg: transparent;
}

.logo-lineup--bg-light {
  --logo-lineup-bg: rgb(var(--brand-color-white));
  --logo-lineup-color: rgb(var(--brand-color-deep-blue));
}

.logo-lineup--bg-cream {
  --logo-lineup-bg: rgb(var(--brand-color-cream));
  --logo-lineup-color: rgb(var(--brand-color-deep-blue));
}

.logo-lineup--bg-dark {
  --logo-lineup-bg: rgb(var(--brand-color-deep-blue));
  --logo-lineup-color: rgb(var(--brand-color-white));
}

/* ===== Links =====
   Only clickable logos react on hover/focus — a slight transparency change,
   no transform. Non-linked logos stay perfectly still. */
.logo-lineup__link {
  align-items: center;
  color: inherit;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
  transition: opacity 180ms linear;
}

.logo-lineup__link:hover {
  opacity: 0.7;
}

.logo-lineup__link {
  --focus-ring-offset: 4px;
  border-radius: var(--radius-sm);
}

.logo-lineup__link:focus-visible {
  opacity: 1;
}