/* =========================================================
   CAROUSEL SPONSORSHIP PARTNERS (LOGOS)
   ========================================================= */

:root{
  /* EDIT HERE: Brand accent for borders/glow */
  --mpx-sponsor-accent: rgba(247,199,34,.55);
  --mpx-sponsor-accent-soft: rgba(247,199,34,.18);
}

/* Section */
.mpx-sponsors-section{
  padding: 34px 0;
  position: relative;
}

/* Headline */
.mpx-sponsors-head{
  text-align: center;
  margin-bottom: 12px;
}

.mpx-sponsors-title{
  margin: 0 0 8px;
  font-weight: 900;
  letter-spacing: .3px;
  color: #ffffff;
  padding-bottom: 10px;
}

.mpx-sponsors-sub{
  margin: 0 auto;
  max-width: 520px;
  line-height: 1.7;
  color: rgba(255,255,255,.75);
  padding-bottom: 20px;
}

/* Carousel container */
.mpx-sponsors-carousel{
  margin-top: 12px;
}

/* =========================================================
   EDIT HERE: spacing + size
   - "items" count is controlled in JS Owl settings:
     mobile: 2, desktop: 5 (change to 6 if needed)
   - tile height + logo max-height control logo presentation
   ========================================================= */

/* Each owl item wrapper (tight spacing) */
.mpx-sponsor-item{
  padding: 3px; /* reduced from 8px */
}

/* The clickable tile (keeps everything centered) */
.mpx-sponsor-link{
  display: flex;
  align-items: center;
  justify-content: center;

  /* EDIT HERE: tile height (gives consistent row height) */
  height: 86px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);

  /* EDIT HERE: inner padding around the frame */
  padding: 6px;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  text-decoration: none;
  overflow: hidden;
}

.mpx-sponsor-link:hover{
  transform: translateY(-1px);
  border-color: var(--mpx-sponsor-accent-soft);
  box-shadow: 0 0 0 1px rgba(247,199,34,.10), 0 12px 22px rgba(0,0,0,.35);
  background: rgba(247,199,34,.05);
}

/* ✅ Frame border around the IMAGE itself (shrink-wrapped) */
.mpx-sponsor-frame{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* EDIT HERE: how tight the border hugs the logo */
  padding: 6px;

  border-radius: 1px;
  border: 0px solid var(--mpx-sponsor-accent);
  background: rgba(0,0,0,.10);

  transition: .18s ease;
}

.mpx-sponsor-link:hover .mpx-sponsor-frame{
  border-color: rgba(247,199,34,.75);
  box-shadow: 0 0 0 1px rgba(247,199,34,.10), 0 10px 18px rgba(0,0,0,.35);
}

/* Logo image (NO grayscale, no filter) */
.mpx-sponsor-logo{
  /* EDIT HERE: logo max height */
  max-height: 52px;

  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;

  filter: none !important;
  opacity: 1 !important;
}

/* Owl dots */
.mpx-sponsors-carousel.owl-theme .owl-dots{
  margin-top: 10px;
}

.mpx-sponsors-carousel.owl-theme .owl-dots .owl-dot span{
  background: rgba(255,255,255,.25);
}

.mpx-sponsors-carousel.owl-theme .owl-dots .owl-dot.active span{
  background: rgba(247,199,34,.90);
}

/* Optional nav arrows (if you enable nav:true in JS) */
.mpx-sponsors-carousel.owl-theme .owl-nav{
  margin-top: 0;
}

.mpx-sponsors-carousel.owl-theme .owl-nav button{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  width: 46px;
  height: 42px;
  border-radius: 12px;
  color: #fff !important;
  transition: .18s ease;
}

.mpx-sponsors-carousel.owl-theme .owl-nav button:hover{
  border-color: rgba(247,199,34,.28) !important;
  box-shadow: 0 0 0 1px rgba(247,199,34,.10), 0 12px 24px rgba(0,0,0,.35);
}

/* Mobile: 2 logos side-by-side; smaller tiles */
@media (max-width: 575.98px){
  .mpx-sponsor-item{ padding: 2px; }
  .mpx-sponsor-link{ height: 72px; padding: 5px; border-radius: 12px; }
  .mpx-sponsor-frame{ padding: 5px 8px; border-radius: 10px; }
  .mpx-sponsor-logo{ max-height: 44px; }
}

/* =========================================================
   HARD OVERRIDES: kill any old grayscale rules in other CSS
   (you had grayscale in #mpxIndex rules)
   ========================================================= */
#mpxIndex .mpx-sponsor-item img,
#mpxIndex .mpx-sponsor-item:hover img{
  filter: none !important;
  opacity: 1 !important;
}