.edc-logos {
  padding: var(--edc-space-xl) 0;
  background: var(--edc-cream);
  border-top: 1px solid rgba(224, 221, 216, 0.3);
  border-bottom: 1px solid rgba(224, 221, 216, 0.3);
}
.edc-logos__inner {
  max-width: var(--edc-container);
  margin: 0 auto;
  padding: 0 var(--edc-space-gutter);
}
@media (min-width: 1024px) { .edc-logos__inner { padding: 0 var(--edc-space-xl); } }

/* ─── Head block: eyebrow pill · headline (with gold accent) ·
   gold divider · italic subhead. Solar Systems editorial rhythm. */
.edc-logos__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin: 0 auto var(--edc-space-lg);
  max-width: 960px;
}
.edc-logos__eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: var(--edc-radius-full);
  background: #fff;
  border: 1px solid var(--edc-gold-ring, rgba(242, 184, 27, 0.35));
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--edc-obsidian);
  box-shadow: 0 8px 24px -18px rgba(41, 41, 40, 0.16);
}
.edc-logos__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--edc-radius-full);
  background: var(--edc-solar-gold);
  box-shadow: 0 0 0 3px rgba(242, 184, 27, 0.22);
  flex: 0 0 auto;
}
.edc-logos__headline {
  font-family: var(--edc-font-heading);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.15;
  letter-spacing: var(--edc-track-headline);
  color: var(--edc-obsidian);
  margin: 0;
  text-wrap: balance;
  max-width: 900px;
}
.edc-logos__accent {
  color: var(--edc-solar-gold);
  background: linear-gradient(180deg, var(--edc-solar-gold) 0%, #d19a0d 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* Small centered gold ornament between headline and subhead. */
.edc-logos__divider {
  display: block;
  width: 48px;
  height: 3px;
  border-radius: var(--edc-radius-full);
  background: var(--edc-solar-gold);
  margin: 4px 0 2px;
}
.edc-logos__subhead {
  font-family: var(--edc-font-body);
  font-size: var(--edc-fs-body-lead);
  font-style: italic;
  color: var(--edc-slate);
  margin: 0;
}

/* Legacy plain eyebrow — kept as fallback when the redesigned pill
   isn't rendered (old widget instances rendered with the previous
   markup will still look reasonable). */
.edc-logos__eyebrow {
  text-align: center;
  font-family: var(--edc-font-body);
  font-size: var(--edc-fs-label);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--edc-slate);
  margin: 0 0 12px 0;
}
/* ─── Marquee ───────────────────────────────
   Two identical tracks sit side by side, each sized to its natural
   content width (flex-shrink:0 + flex-basis:auto). Both animate
   translateX from 0 → -100% of their own width in lockstep; because
   the second track sits exactly where the first ends, sliding both
   left by one track-width lands the second where the first started.
   Loop repeats — appears seamless.

   Includes explicit li height so the images have a container to
   letterbox into via object-fit:contain (some browsers collapse the
   li to 0-height without this, which hides the logos entirely). */
.edc-logos__marquee {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  /* Fade the edges so logos softly enter/exit against the cream band. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.edc-logos__track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 72px;
  padding-right: 72px;                     /* fills the seam gap so spacing looks continuous */
  animation: edc-logos-marquee 32s linear infinite;
  will-change: transform;
}
@media (min-width: 1024px) { .edc-logos__track { gap: 96px; padding-right: 96px; } }

.edc-logos__marquee:hover .edc-logos__track { animation-play-state: paused; }

.edc-logos__track li {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 48px;                             /* fixed row height — images letterbox into this */
  width: auto;
}
.edc-logos__track img {
  height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(0.35);
  opacity: 0.75;
  transition: opacity var(--edc-dur-quick) var(--edc-ease),
              filter var(--edc-dur-quick) var(--edc-ease);
}
.edc-logos__track img:hover { opacity: 1; filter: grayscale(0); }

@keyframes edc-logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .edc-logos__marquee { mask-image: none; -webkit-mask-image: none; overflow: visible; }
  .edc-logos__track   { animation: none; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .edc-logos__track[aria-hidden="true"] { display: none; }
}
