.hes-logo-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hes-space-3);
  text-align: center;
  padding-block: var(--hes-space-6);
}

.hes-logo-strip__label {
  font-size: var(--hes-text-caption-size);
  font-weight: var(--hes-text-caption-weight);
  letter-spacing: var(--hes-text-caption-letter-spacing);
  text-transform: uppercase;
  color: var(--hes-color-text-secondary);
  margin: 0;
}

/* nowrap + overflow-x: auto instead of flex-wrap - once an admin adds
   enough engagement logos to overflow the container width, the row
   scrolls horizontally instead of wrapping to a second line (wrapping
   and horizontal scrolling can't both apply to the same row). Centered
   via justify-content while everything still fits; once scrolling
   kicks in the browser anchors to the start, which is the expected
   scrollable-row behavior. */
.hes-logo-strip__list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--hes-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.hes-logo-strip__item {
  flex: 0 0 auto;
  font-size: var(--hes-text-small-size);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hes-color-text-secondary);
  transition: color 0.15s ease;
}

/* Fixed white background regardless of theme - an uploaded logo's own
   colors are unknown in advance (e.g. a transparent PNG with dark
   artwork, confirmed invisible against dark mode's dark page
   background). See logo-strip.twig's comment on this element. */
.hes-logo-strip__logo-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hes-color-white);
  border-radius: var(--hes-radius-md);
  padding: var(--hes-space-2) var(--hes-space-3);
}

.hes-logo-strip__logo {
  display: block;
  height: 72px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

@keyframes hes-logo-strip-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Plays once per hover, not on a repeating loop - `infinite` made it
   keep zooming in/out continuously the whole time the pointer sat
   still over an item, reported directly as distracting/wrong. Each
   fresh :hover/:focus-within match (e.g. a new mouseenter) restarts
   the animation once. */
.hes-logo-strip__item:hover,
.hes-logo-strip__item:focus-within {
  animation: hes-logo-strip-pulse 0.4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .hes-logo-strip__item:hover,
  .hes-logo-strip__item:focus-within {
    animation: none;
  }
}