/* ═══════════════════════════════════════════════
   SPONSORS SECTION
═══════════════════════════════════════════════ */
.sponsors-section {
  padding: 80px 0 100px;
  background: var(--bg3);
  position: relative;
  overflow: hidden;
}

.sponsors-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

.sponsors-section::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url('../images/arabic-calligraphy_long.jpg') center / cover no-repeat;
  opacity: 0.18;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 0;
  transform: none;
}

.sponsors-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(248, 245, 239, 0.29);
  pointer-events: none;
  z-index: 1;
}

.dark .sponsors-section::before,
.dark .sponsors-section::after {
  display: none;
}

/* ─── HEADER ─── */
.sponsors-header {
  text-align: left;
  margin-bottom: 52px;
  position: relative;
  z-index: 2;
}

.sponsors-header h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 30px);
  color: var(--text);
  margin-bottom: 8px;
  font-weight: 700;
}

.sponsors-header h2 em {
  color: var(--gold);
  font-style: italic;
}

/* ═══════════════════════════════════════════════
   MARQUEE WRAPPER — the key edge-hiding trick
   ───────────────────────────────────────────────
   We break out of the parent's max-width and make
   the marquee as wide as the viewport so the fade
   zones sit over the very edges of the screen rather
   than biting into the sponsor logos.

   The CSS mask creates a left↔right gradient:
     transparent → opaque (left fade-in)
     opaque → transparent (right fade-out)
   Any spacing gap at the loop join point lands
   inside one of these transparent zones and is
   simply never visible to the user.
   The 8% fade width is wide enough to swallow a
   full sponsor-item gap (32 px) on all screen sizes.
═══════════════════════════════════════════════ */
.sponsors-marquee {
  /* Break out of the .sponsors-inner max-width so the
     fade zones reach the true screen edges */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 2;
  /* Vertical padding so hover-scale items aren't clipped */
  padding: 20px 0;
  margin: -20px 0;

  /* ── THE SEAM-HIDING TRICK ──
     A gradient mask that fades both edges to transparent.
     The fade region (0→8% left, 92→100% right) is wide
     enough to fully cover the inter-item gap (32 px)
     and any fractional-pixel spacing that appears at the
     loop join. Because the mask uses the viewport-wide
     wrapper, the fade zones are "outside" the inner
     content area on wide screens and only consume the
     very edge logos on narrow ones — a net-zero visual
     cost for the content, zero visible seam. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* Keep the legacy class name working in case any
   other template still references it */
.sponsors-scroll-wrapper {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 2;
  padding: 20px 0;
  margin: -20px 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* ─── SCROLL TRACK ─── */
.sponsors-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 0;
  margin: 0;
  gap: 32px;
  will-change: transform;
  animation: sponsorsScroll var(--sponsor-duration, 32s) linear infinite;
  flex-wrap: nowrap;
}

.sponsors-track:hover {
  animation-play-state: paused;
}

/* ─── SPONSOR ITEM ─── */
.sponsor-item {
  flex: 0 0 auto;
  width: 180px;
  height: 100px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

/* Strong Black & White Filter (before hover) */
.sponsor-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(94, 65, 8, 0.35),
    rgba(200, 180, 140, 0.25),
    rgba(32, 22, 1, 0.35)
  );
  mix-blend-mode: multiply;
  opacity: 0.85;
  pointer-events: none;
  transition: all 0.4s ease;
  z-index: 1;
}

/* Optional: Extra grayscale on the image itself */
.sponsor-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: grayscale(90%) brightness(0.75);
  transition: all 0.4s ease;
}

/* ─── HOVER EFFECTS ─── */
.sponsor-item:hover::before {
  opacity: 0.25;
  background: rgba(0, 0, 0, 0.35);
}

.sponsor-item:hover img {
  filter: grayscale(0%) brightness(1.05);
}

.sponsor-item:hover {
  transform: scale(1.1) translateY(-6px);
  background: rgba(201, 168, 76, 0.07);
  border-color: rgba(201, 168, 76, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

@keyframes sponsorsScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes sponsorsScrollExact {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

/* ─── RTL ─── */
[dir="rtl"] .sponsors-marquee,
[dir="rtl"] .sponsors-scroll-wrapper {
  direction: ltr;
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

[dir="rtl"] .sponsors-track {
  direction: ltr;
  flex-direction: row;
  animation: sponsorsScroll 35s linear infinite;
}

[dir="rtl"] .sponsors-header {
  text-align: right;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 992px)
   Narrow the fade zone slightly so the logos on
   tablet-wide viewports aren't over-consumed.
═══════════════════════════════════════════════ */
@media (max-width: 992px) {
  .sponsors-marquee,
  .sponsors-scroll-wrapper {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 6%,
      black 94%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 6%,
      black 94%,
      transparent 100%
    );
  }

  .sponsor-item {
    width: 150px;
    height: 88px;
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 768px)
   On narrow screens the viewport-wide breakout
   means the fade zones are proportionally larger
   relative to the logos, so we shrink the fade
   to 5% to keep enough logo visible, and reduce
   item size/gap so the loop feels dense and the
   mask hides the seam without eating logo area.
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sponsors-section {
    padding: 48px 0 60px;
    overflow: visible;
  }

  .sponsors-inner {
    overflow: visible;
  }

  .sponsors-header {
    padding: 0 16px;
    margin-bottom: 32px;
  }

  .sponsors-header h2 {
    font-size: clamp(18px, 5vw, 22px);
  }

  .sponsors-marquee,
  .sponsors-scroll-wrapper {
    /* Keep the full-bleed breakout but tighten the fade
       so it only covers the ~16 px padding on each side,
       not actual logo area */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
    padding: 14px 0;
    margin: -14px 0;
  }

  .sponsors-track {
    gap: 20px;
    animation: sponsorsScroll 28s linear infinite;
  }

  .sponsor-item {
    width: 120px;
    height: 76px;
    padding: 12px;
    border-radius: 8px;
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤ 480px)
═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .sponsors-marquee,
  .sponsors-scroll-wrapper {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 4%,
      black 96%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 4%,
      black 96%,
      transparent 100%
    );
  }

  .sponsors-track {
    gap: 16px;
    animation: sponsorsScroll 24s linear infinite;
  }

  .sponsor-item {
    width: 100px;
    height: 66px;
    padding: 10px;
    border-radius: 7px;
  }
}