/* ===== Sponsor ticker: "Proud to sponsor Care Over Cost" =====
   Slim scrolling strip of sponsor logos directly under the hero.
   The logo list itself lives in index.html (two copies for a seamless loop). */

.sponsor-band {
  background: #F5F0EB;
  padding: 1rem 0 3.25rem; /* extra bottom room so the next section's wave never covers the tiles */
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  z-index: 5; /* an enlarged hovered logo floats above the wave section below */
}

.sponsor-band-heading {
  margin: 0 1rem 0.65rem;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8C7F77;
}

/* The viewport of the ticker: clips the track, fades both edges.
   Vertical padding (cancelled by equal negative margins so the band keeps
   its height) gives an enlarged hovered tile room INSIDE the clip and mask
   box, so it is never cut off top or bottom. The mask gradient only fades
   horizontally, so the extra vertical space stays fully visible. */
.sponsor-ticker2 {
  overflow: hidden;
  width: 100%;
  padding: 24px 0;
  margin: -24px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* Four identical sets sit side by side; shifting one set width (-25%) loops
   seamlessly and keeps logos on screen edge to edge with no empty gap */
.sponsor-track2 {
  display: flex;
  width: max-content;
  animation: sponsor-scroll 26s linear infinite;
}

.sponsor-ticker2:hover .sponsor-track2,
.sponsor-ticker2:focus-within .sponsor-track2 {
  animation-play-state: paused;
}

@keyframes sponsor-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

.sponsor-set {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0 0.5rem;
}

.sponsor-set a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(92, 84, 80, 0.12);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(92, 84, 80, 0.07);
  padding: 0.55rem 1.1rem;
  min-height: 44px;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.sponsor-set a:hover,
.sponsor-set a:focus-visible {
  transform: scale(1.2);
  z-index: 10;
  box-shadow: 0 14px 36px rgba(92, 84, 80, 0.28);
}

.sponsor-set a:focus-visible {
  outline: 3px solid #D96A84;
  outline-offset: 2px;
}

.sponsor-set img {
  display: block;
  height: 64px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
}

/* Round Obsessive marks render larger without growing their tile:
   the extra height expands into the tile's padding via negative margins */
.sponsor-set img.logo-boost {
  height: 80px;
  margin: -8px 0;
}

@media (min-width: 768px) {
  .sponsor-band { padding: 1.15rem 0 3.75rem; }
  .sponsor-set { gap: 1.6rem; padding: 0 0.8rem; }
  .sponsor-set img { height: 84px; max-width: 380px; }
  .sponsor-set img.logo-boost { height: 106px; margin: -11px 0; }
}

/* Reduced motion: no animation, show one centred wrapping row */
@media (prefers-reduced-motion: reduce) {
  .sponsor-track2 {
    animation: none;
    width: auto;
    justify-content: center;
  }
  .sponsor-set {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.75rem;
  }
  .sponsor-set-dupe { display: none; }
  .sponsor-ticker2 {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* No scaling animation: just the shadow change on hover/focus */
  .sponsor-set a:hover,
  .sponsor-set a:focus-visible {
    transform: none;
  }
}