.candidate-carousel {
  margin: 1.25rem 0 2rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #132942 0%, #1c4162 62%, #285b78 100%);
  box-shadow: 0 14px 34px rgba(19, 41, 66, .16);
}

.carousel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.carousel-head .eyebrow { margin: 0 0 .2rem; color: #afdbea; }
.carousel-head h2 { margin: 0; color: #fff; font-size: clamp(1.35rem, 3vw, 2rem); }

.carousel-controls { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }
.carousel-controls button {
  min-width: 44px;
  min-height: 44px;
  padding: .45rem .75rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.carousel-controls button:first-child,
.carousel-controls button:last-child { font-size: 1.6rem; line-height: 1; }
.carousel-controls button:hover,
.carousel-controls button:focus-visible { outline: 3px solid #f8c85c; outline-offset: 2px; background: rgba(255, 255, 255, .2); }

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(156px, calc((100% - 3rem) / 5));
  gap: .75rem;
  overflow-x: auto;
  padding: .15rem .1rem .55rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.carousel-track::-webkit-scrollbar { display: none; }

.candidate-slide {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 14px;
  color: #fff;
  text-align: left;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
}
.candidate-slide:hover,
.candidate-slide:focus-visible { outline: 3px solid #f8c85c; outline-offset: -3px; background: rgba(255, 255, 255, .17); }
.candidate-slide-photo {
  position: relative;
  aspect-ratio: 4 / 4.7;
  overflow: hidden;
  background: #d8e7ed;
}
.candidate-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.candidate-slide-initials { display: none; place-items: center; width: 100%; height: 100%; color: #173952; font-size: 2rem; font-weight: 800; }
.candidate-slide-copy { display: flex; flex-direction: column; gap: .18rem; padding: .75rem; }
.candidate-slide-copy strong { font-family: "Source Serif 4", Georgia, serif; font-size: 1.05rem; line-height: 1.15; }
.candidate-slide-copy span { color: #d4e9f0; font-size: .78rem; line-height: 1.25; }

@media (max-width: 900px) {
  .carousel-track { grid-auto-columns: minmax(156px, calc((100% - 1.5rem) / 3)); }
}

@media (max-width: 620px) {
  .candidate-carousel { margin: .75rem 0 1.25rem; padding: 1rem .85rem; border-radius: 14px; }
  .carousel-head { align-items: flex-start; }
  .carousel-head h2 { max-width: 12ch; }
  .carousel-controls { gap: .3rem; }
  .carousel-controls button { min-width: 44px; min-height: 44px; padding: .35rem .6rem; }
  .carousel-controls #carousel-pause { min-width: 62px; }
  .carousel-track { grid-auto-columns: calc((100% - .75rem) / 2); }
}

@media (max-width: 380px) {
  .carousel-head { display: grid; }
  .carousel-head h2 { max-width: none; }
  .carousel-track { grid-auto-columns: 82%; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}