/* ==========================================================================
   Mercy Institute - Registration & Learning Support Marquee
   ========================================================================== */

:root {
  --mi-marquee-primary: #1A44B2;
  --mi-marquee-bg: #FFFFFF;
  --mi-marquee-bg-alt: #F5FBFF;
  --mi-marquee-text: #64748B;
  --mi-marquee-heading: #0158B9;
  --mi-marquee-border: #E2E8F0;
  --mi-marquee-border-light: #D8EAF8;
  --mi-marquee-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --mi-marquee-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --mi-marquee-radius: 12px;
  --mi-marquee-pill: 50px;
  --mi-marquee-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --mi-marquee-gap: 28px;
  --mi-marquee-item-width: 200px;
}

/* Base Section - Padding reduced by half */
.mi-partner-marquee {
  background-color: var(--mi-marquee-bg);
  padding: 32px 0;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

.mi-partner-marquee .mi-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header Area */
.mi-partner-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mi-partner-badge {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mi-marquee-primary);
  background-color: var(--mi-marquee-bg-alt);
  border: 1px solid var(--mi-marquee-border-light);
  padding: 6px 16px;
  border-radius: var(--mi-marquee-pill);
  margin-bottom: 16px;
}

/* Text size slightly increased */
.mi-partner-heading h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--mi-marquee-heading);
  line-height: 1.3;
  margin: 0 0 14px 0;
}

.mi-partner-heading p {
  font-size: 1.075rem;
  color: var(--mi-marquee-text);
  line-height: 1.6;
  margin: 0;
}

/* Marquee Container */
.mi-marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  margin-bottom: 24px;
  /* Fade edges for premium look */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Track & Animation */
.mi-marquee-track {
  display: flex;
  gap: var(--mi-marquee-gap);
  flex-shrink: 0;
  min-width: 100%;
  animation: mi-scroll-partner 35s linear infinite;
  padding: 12px 0; /* Room for shadow */
}

/* Reverse Direction */
.mi-marquee.reverse .mi-marquee-track {
  animation-direction: reverse;
}

/* Pause on Hover */
@media (hover: hover) and (pointer: fine) {
  .mi-marquee:hover .mi-marquee-track {
    animation-play-state: paused;
  }
}

@keyframes mi-scroll-partner {
  0% { transform: translateX(0); }
  /* Translates exactly 50% of the duplicated track width + half a gap */
  100% { transform: translateX(calc(-50% - (var(--mi-marquee-gap) / 2))); }
}

/* Logo Card - Size slightly increased */
.mi-logo-item {
  width: var(--mi-marquee-item-width);
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--mi-marquee-bg);
  border: 1px solid var(--mi-marquee-border);
  border-radius: var(--mi-marquee-radius);
  box-shadow: var(--mi-marquee-shadow);
  padding: 18px 26px;
  flex-shrink: 0;
  text-decoration: none;
  transition: var(--mi-marquee-transition);
}

/* Logo Image - Image size slightly increased */
.mi-logo-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: var(--mi-marquee-transition);
}

/* Hover Effects */
@media (hover: hover) and (pointer: fine) {
  .mi-logo-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--mi-marquee-shadow-hover);
    border-color: var(--mi-marquee-border-light);
  }

  .mi-logo-item:hover img {
    transform: scale(1.06);
  }
}

/* Disclaimer */
.mi-partner-disclaimer {
  margin-top: 36px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--mi-marquee-text);
  line-height: 1.6;
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--mi-marquee-bg-alt);
  padding: 16px 24px;
  border-radius: var(--mi-marquee-radius);
  border: 1px solid var(--mi-marquee-border-light);
}

.mi-partner-disclaimer strong {
  color: var(--mi-marquee-heading);
  font-weight: 600;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* 480px - Mobile L */
@media (min-width: 480px) {
  .mi-partner-marquee {
    padding: 36px 0; /* Reduced from 72px */
  }
  .mi-partner-heading h2 {
    font-size: 2.15rem;
  }
  :root {
    --mi-marquee-item-width: 220px;
  }
  .mi-logo-item {
    height: 115px;
  }
}

/* 768px - Tablet */
@media (min-width: 768px) {
  .mi-partner-heading {
    margin-bottom: 42px;
  }
  .mi-marquee {
    margin-bottom: 28px;
  }
  :root {
    --mi-marquee-item-width: 240px;
    --mi-marquee-gap: 32px;
  }
  .mi-logo-item {
    height: 125px;
    padding: 22px 34px;
  }
}

/* 992px - Desktop */
@media (min-width: 992px) {
  .mi-partner-marquee {
    padding: 48px 0; /* Reduced from 96px */
  }
  .mi-partner-heading h2 {
    font-size: 2.4rem;
  }
  .mi-partner-disclaimer {
    margin-top: 48px;
  }
  :root {
    --mi-marquee-item-width: 260px;
  }
  .mi-logo-item {
    height: 135px;
  }
}

/* 1200px - Large Desktop */
@media (min-width: 1200px) {
  .mi-partner-marquee {
    padding: 56px 0; /* Reduced from 112px */
  }
  .mi-partner-heading h2 {
    font-size: 2.65rem;
  }
  :root {
    --mi-marquee-gap: 40px;
  }
}

/* 1440px - Extra Large Desktop */
@media (min-width: 1440px) {
  .mi-partner-marquee {
    padding: 60px 0; /* Reduced from 120px */
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mi-marquee-track {
    animation-play-state: paused;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
  }
  .mi-marquee {
    mask-image: none;
    -webkit-mask-image: none;
  }
  .mi-logo-item {
    scroll-snap-align: start;
    transition: none;
  }
  .mi-logo-item img {
    transition: none;
  }
  .mi-logo-item:hover {
    transform: none;
  }
  .mi-logo-item:hover img {
    transform: none;
  }
}