/* ── Partners & Sponsors — Infinite Dual-Row Marquee ─────────────── */

/* Section */
.carousel-section { overflow: hidden; }

.carousel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.carousel-header > div { max-width: 100%; }
.carousel-header > div p {
  margin: 10px 0 0;
  color: var(--color-copy);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Row wrapper */
.carousel-row {
  position: relative;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.carousel-row:last-child { margin-bottom: 0; }

.carousel-row-label {
  margin: 0 0 1rem;
  color: var(--color-forest-soft);
  font: 600 .7rem/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Viewport — clips the scrolling track */
.carousel-viewport {
  overflow: hidden;
  margin: 0 calc(-1 * var(--container-pad, 24px));
  padding: 0 var(--container-pad, 24px);
  /* soft edge fade */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* Track — holds all cloned sets in a single flex row */
.carousel-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* One set of logos — flex row with gap */
.carousel-set {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 36px);
  padding-right: clamp(20px, 2.4vw, 36px); /* same as gap for seamless seam */
}

/* Animation state — only activate after JS clones content */
.carousel-track.is-marquee {
  animation-name: marquee-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--marquee-duration, 36s);
}

/* Partners → left */
[data-marquee="left"] .carousel-track.is-marquee {
  animation-direction: normal;
}

/* Sponsors → right */
[data-marquee="right"] .carousel-track.is-marquee {
  animation-direction: reverse;
}

/* Pause on hover — scoped per row */
.carousel-row:hover .carousel-track.is-marquee {
  animation-play-state: paused;
}

/* Keyframes — translate by exactly one set width (set by JS) */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-set-width))); }
}

/* ── Logo cell ─────────────────────────────────────────────────── */

.carousel-logo-cell { flex: 0 0 auto; }

.carousel-logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

a.carousel-logo-link { cursor: pointer; }

.carousel-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(150px, 18vw, 220px);
  height: 100px;
  padding: 16px 20px;
  border-radius: 14px;
  overflow: hidden;
}

.carousel-logo-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: var(--carousel-logo-filter, none);
}

[data-theme="dark"] .carousel-logo-box img {
  filter: brightness(1.3) contrast(0.9);
}

.carousel-logo-placeholder {
  color: var(--color-copy);
  font: 500 .68rem/1 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .55;
  text-align: center;
}

/* ── Responsive: tablet ────────────────────────────────────────── */
@media (max-width: 960px) {
  .carousel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .carousel-logo-box {
    width: clamp(130px, 26vw, 180px);
    height: 86px;
    padding: 14px 16px;
  }
}

/* ── Responsive: mobile ────────────────────────────────────────── */
@media (max-width: 640px) {
  .carousel-section .container {
    width: min(100% - 28px, 1200px);
  }

  .carousel-viewport {
    margin: 0 calc(-1 * 14px);
    padding: 0 14px;
  }

  .carousel-row-label { font-size: .64rem; }

  .carousel-logo-box {
    width: clamp(120px, 38vw, 160px);
    height: 74px;
    padding: 12px 14px;
    border-radius: 11px;
  }

  .carousel-logo-placeholder { font-size: .6rem; }
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    animation: none !important;
    transform: none !important;
  }
}