/* 10 — Logo wall (Figma desktop 712:9166 / mobile 353:2700) */
.logo-wall {
  font-family: var(--font);
  color: var(--text-ink);
  /* subtle grey top, white band (446px) at the bottom — panel straddles the two */
  background: linear-gradient(to bottom, var(--surface-subtle) 0, var(--surface-subtle) calc(100% - 446px), var(--surface-white) calc(100% - 446px), var(--surface-white) 100%);
}
.logo-wall__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 64px 48px var(--section-pad);
}
.logo-wall__panel {
  width: 100%;
  max-width: calc(100% - 400px); /* narrower than the content area, as requested (wide screens only) */
  margin: 0 auto;
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-radius: var(--radius-16);
  box-sizing: border-box;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  overflow: hidden;
}

/* heading */
.logo-wall__heading {
  width: 806.75px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.logo-wall__title {
  margin: 0;
  width: 100%;
  font: 500 38px/42px var(--font);
  letter-spacing: -1.14px;
  color: var(--text-inverse);
  text-align: center;
}
.logo-wall__title .accent { color: inherit; }

/* logos row */
.logo-wall__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-wall__cell {
  flex: 1 0 0;
  min-width: 1px;
  height: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-wall__logo { display: block; flex-shrink: 0; object-fit: contain; }
.logo-wall__logo--puma  { width: 80px;  height: 40px; }
.logo-wall__logo--met   { width: 50.2px; height: 50px; }
.logo-wall__logo--nyt   { width: 201.34px; height: 34px; }
.logo-wall__logo--bsa   { width: 108px; height: 40px; }
.logo-wall__logo--umich { width: 143.62px; height: 28.57px; }
.logo-wall__more {
  font: 600 16px/20px var(--font);
  letter-spacing: -0.64px;
  color: var(--text-inverse);
  white-space: nowrap;
}

/* quote card */
.logo-wall__quote {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-section);
  color: var(--text-ink);
  border-radius: var(--radius-16);
  padding: 48px;
  /* fixed height so switching between a short and a long quote does not resize the card */
  min-height: 232px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  overflow: hidden;
}
.logo-wall__quote-text, .logo-wall__name-group { transition: opacity .25s ease; }
.logo-wall__quote.is-swapping .logo-wall__quote-text, .logo-wall__quote.is-swapping .logo-wall__name-group { opacity: 0; }
.logo-wall__quote-text {
  margin: 0;
  width: 100%;
  font: 400 28px/32px var(--font);
  letter-spacing: -1.12px;
  color: var(--text-ink);
}
.logo-wall__quote-footer {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}
.logo-wall__author { display: flex; align-items: center; gap: 16px; }
/* portrait of whoever is speaking, next to the name (88px desktop / 40px mobile) */
.logo-wall__portrait {
  width: 88px; height: 88px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--surface-subtle);
  flex-shrink: 0;
}
.logo-wall__name-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: nowrap;
}
.logo-wall__name { font: 600 15px/20px var(--font); color: var(--text-ink); }
.logo-wall__role { font: 400 14px/18px var(--font); letter-spacing: -0.56px; color: var(--text-muted); }

.logo-wall__picker {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 0; /* Figma: 52px ring frame + 4px vertical padding = 60px row */
}
.logo-wall__avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--surface-subtle);
  cursor: pointer;
}
.logo-wall__ring { position: absolute; top: -4px; left: -4px; width: 52px; height: 52px; max-width: none; pointer-events: none; transform: rotate(-90deg); }
.logo-wall__ring-track { fill: none; stroke: var(--brand-secondary); stroke-width: 2; opacity: 0; transition: opacity .3s ease; }
.logo-wall__ring-progress { fill: none; stroke: var(--brand-primary); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 157.08; stroke-dashoffset: 157.08; }
.logo-wall__avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius-full); object-fit: cover; display: block; transition: opacity .25s ease; opacity: .55; }
.logo-wall__avatar:hover .logo-wall__avatar-img { opacity: .8; }
.logo-wall__avatar.is-active .logo-wall__avatar-img { opacity: 1; }
.logo-wall__avatar.is-active .logo-wall__ring-track { opacity: 1; }
.logo-wall__avatar.is-active .logo-wall__ring-progress { animation: logo-ring-fill var(--rotate-ms, 5000ms) linear forwards; }
@keyframes logo-ring-fill { from { stroke-dashoffset: 157.08; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .logo-wall__avatar.is-active .logo-wall__ring-progress { animation: none; stroke-dashoffset: 0; } }
.logo-wall__dots { display: none; }

/* certification badge */
.logo-wall__cert {
  width: 440px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 16px;
  border-radius: var(--radius-12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}
.logo-wall__cert-icons { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.logo-wall__cert-icons img { display: block; width: 48px; height: 48px; }
.logo-wall__cert-icons .logo-wall__cert-pci { width: 74px; height: 28.11px; margin: 13px 0; }
.logo-wall__cert-text {
  margin: 0;
  width: 100%;
  font: 400 12px/16px var(--font);
  letter-spacing: -0.48px;
  color: var(--text-inverse);
  text-align: center;
}

/* tablet: let logos wrap */
@media (max-width: 1100px) {
  .logo-wall__logos { height: auto; flex-wrap: wrap; }
  .logo-wall__cell { flex: 1 0 33%; height: 96px; }
}

@media (max-width: 1599px) {
  .logo-wall__panel { max-width: none; } /* on 1440-class screens the panel uses the full content width */
}

/* ---------- mobile (375) ---------- */
@media (max-width: 767px) {
  /* Figma 353:2700: subtle grey section, full-bleed dark panel, 64px top/bottom */
  .logo-wall { background: var(--surface-subtle); }
  .logo-wall__inner { padding: 64px 0 0; } /* the panel meets the review photo directly */
  .logo-wall__panel { border-radius: 0; padding: 48px 24px; gap: 24px; }

  .logo-wall__heading { width: 100%; gap: 12px; }
  .logo-wall__title { font: 500 28px/32px var(--font); letter-spacing: -0.84px; }

  /* logos: 2 x 2 grid (Puma / Met, NYT / BSA) + full-width "+500 more"; Michigan has no slot */
  .logo-wall__logos { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 1px; }
  .logo-wall__cell { height: 56px; flex: none; padding: 0 16px; }
  .logo-wall__cell:nth-child(1) { order: 1; }
  .logo-wall__cell:nth-child(2) { order: 2; }
  .logo-wall__cell:nth-child(3) { order: 3; }
  .logo-wall__cell:nth-child(4) { order: 4; }
  .logo-wall__cell:nth-child(5) { display: none; }
  .logo-wall__cell:nth-child(6) { order: 5; grid-column: 1 / -1; }
  .logo-wall__logo--puma { width: 80px; height: 40px; }
  .logo-wall__logo--met  { width: 40.16px; height: 40px; }
  .logo-wall__logo--nyt  { width: 147.5px; height: 24.9px; }
  .logo-wall__logo--bsa  { width: 108px; height: 40px; }

  /* quote card */
  .logo-wall__panel { max-width: none; }
  .logo-wall__quote { padding: 24px; gap: 24px; min-height: 0; }
  .logo-wall__quote-text, .logo-wall__name-group { transition: opacity .25s ease; }
.logo-wall__quote.is-swapping .logo-wall__quote-text, .logo-wall__quote.is-swapping .logo-wall__name-group { opacity: 0; }
.logo-wall__quote-text { font: 400 18px/24px var(--font); letter-spacing: -0.54px; margin-bottom: -8px; } /* 24 gap - 8 = 16 to attribution */
  .logo-wall__quote-footer { flex-direction: column; align-items: flex-start; gap: 24px; }
  .logo-wall__author { width: 100%; }
  .logo-wall__author { gap: 12px; }
  .logo-wall__portrait { width: 40px; height: 40px; }
  .logo-wall__name-group { white-space: normal; }
  .logo-wall__picker { display: none; }

  /* dots progress bar: active dot 24 x 8 fills over the autorotate interval */
  .logo-wall__dots { display: flex; align-items: center; gap: 8px; }
  .logo-wall__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--surface-accent); position: relative; overflow: hidden; transition: width .3s ease; }
  .logo-wall__dot.is-active { width: 48px; }
  .logo-wall__dot.is-active::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
    background: var(--brand-primary); border-radius: inherit;
    transform-origin: left center; transform: scaleX(0);
    animation: logo-dot-fill var(--rotate-ms, 5000ms) linear forwards;
  }
  @keyframes logo-dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) { .logo-wall__dot.is-active::after { animation: none; transform: scaleX(1); } }

  /* certification: two overlapping ISO badges + left-aligned text in one row */
  .logo-wall__cert { width: 100%; flex-direction: row; align-items: center; gap: 8px; }
  .logo-wall__cert-icons { gap: 0; }
  .logo-wall__cert-icons img:nth-child(1) { margin-right: -16px; }
  .logo-wall__cert-icons img:nth-child(3),
  .logo-wall__cert-icons .logo-wall__cert-pci { display: none; }
  .logo-wall__cert-text { flex: 1 0 0; min-width: 1px; width: auto; text-align: left; }
}