/* ============================================
   Sponsor Logos Section (Shared Component)
   ============================================ */

.sponsor-logos-section {
  padding: 0!important;
  background-color: #fff;
  position: relative;
  z-index: 9;
  border-bottom: 1px solid #d9d9d9;
}

/* Light/dark mode color fade */
.sponsor-logos-section,
.sponsor-logo-item {
  transition: background-color 0.5s ease, border-color 0.5s ease;
}

.sponsor-logos-section > div{
  padding: 0!important;
}
.sponsor-logos__wrapper {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #ffffff;
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
}

/* Left side: 2 logos */
.sponsor-logos__left {
  display: flex;
  align-items: center;
  flex: 0 0 40%;
}

/* Right side: 3 logos */
.sponsor-logos__right {
  display: flex;
  align-items: center;
  flex: 1;
}

.sponsor-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 30px;
  flex: 1;
  border-right: 1px solid #d9d9d9;
  height: 100%;
}

/* Keep center divider; remove only the far-right divider */
.sponsor-logos__right .sponsor-logo-item:last-child {
  border-right: none;
}

.sponsor-logo-item a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sponsor-logo-item img {
  max-height: 32px;
  width: auto;
  display: block;
}

@media screen and (max-width: 1100px) {
  .sponsor-logos-section {
    z-index: 9;
  }

  .sponsor-logos__left .sponsor-logo-item:first-child {
    border-left: none;
  }
}

@media (max-width: 767px) {
  .sponsor-logos-section {
    padding: 20px 0;
  }
}

/* Override global section padding rule */
@media only screen and (max-width: 700px) {
  section.sponsor-logos-section.sponsor-logos-section {
    padding: 0 !important;
  }
}

@media (max-width: 767px) {
  
  .sponsor-logos__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  
  /* Make left/right containers flow their children into the grid */
  .sponsor-logos__left,
  .sponsor-logos__right {
    display: contents;
  }
  
  .sponsor-logo-item {
    padding: 16px 20px;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
  }
  
  /* Left side: show both logos (2 items - top row) */
  .sponsor-logos__left .sponsor-logo-item:nth-child(1) {
    border-right: 1px solid #d9d9d9;
  }
  
  .sponsor-logos__left .sponsor-logo-item:nth-child(2) {
    border-right: none;
  }
  
  /* Right side: show only first 2 logos (bottom row), hide the 3rd */
  .sponsor-logos__right .sponsor-logo-item:nth-child(1) {
    border-right: 1px solid #d9d9d9;
    border-bottom: none;
  }
  
  .sponsor-logos__right .sponsor-logo-item:nth-child(2) {
    border-right: none;
    border-bottom: none;
  }
  
  /* Hide the 3rd logo from right side on mobile */
  .sponsor-logos__right .sponsor-logo-item:nth-child(n+3) {
    display: none;
  }
  
  .sponsor-logo-item img {
    max-height: 24px;
  }
}

.dark-mode .sponsor-logos__wrapper {
  border-color: #2B2B2B !important;
}

.dark-mode .sponsor-logos-section,
.dark-mode .sponsor-logo-item {
  border-color: #2B2B2B !important;
  background-color: #151515 !important;
}

/* Light/dark logo switching: show only one set at a time.
   Default (light mode) shows the light logo; dark mode swaps to the dark logo.
   Kept here in the shared component so it works on every page that uses this
   block (e.g. the About page), not just the homepage. */
.sponsor-logos-section .dark-mode-img {
  display: none !important;
}

.dark-mode .sponsor-logos-section .light-mode-img {
  display: none !important;
}

.dark-mode .sponsor-logos-section .dark-mode-img {
  display: block !important;
  filter: none !important;
}