/*
 * People cards use Bootstrap card, ratio and stretched-link as their base.
 * Custom CSS adds the portrait ratio, restrained interaction, collective image
 * framing and a clearer active filter state. Listing behavior stays intact.
 */

.people-filter__link.nav-link.active {
  color: #b21b2a;
  font-weight: 700;
  background-color: transparent;
  box-shadow: none;
}

.people-filter__link.nav-link {
  border-radius: 0;
}

.people-filter__link.nav-link:focus-visible {
  outline: 3px solid rgba(178, 27, 42, 0.45);
  outline-offset: 2px;
}

@media (min-width: 1200px) {
  .people-filter__nav {
    border-top: 2px solid #b21b2a;
    border-bottom: 2px solid #b21b2a;
  }
}

@media (max-width: 1199.98px) {
  .people-filter__nav.nav-pills {
    padding-block: 0.25rem;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .people-filter__nav.nav-pills::-webkit-scrollbar {
    display: none;
  }

  .people-filter__nav.nav-pills .nav-item {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  .people-filter__nav.nav-pills .people-filter__link.nav-link {
    color: #2e3145;
    border: 1px solid #e1e3eb;
    background-color: #ffffff;
  }

  .people-filter__nav.nav-pills .people-filter__link.nav-link.active {
    color: #ffffff;
    border-color: #b21b2a;
    background-color: #b21b2a;
  }

  .people-filter__nav.nav-pills .people-filter__link.nav-link:focus-visible {
    outline-offset: -3px;
  }
}

.people-card {
  overflow: hidden;
  box-shadow: 0 0.25rem 0.75rem rgba(46, 49, 69, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.people-card__media.ratio {
  aspect-ratio: auto;
}

.people-card__media--portrait {
  --bs-aspect-ratio: 125%;
}

.people-card--collective .people-card__image {
  object-position: center;
}

.people-card__image {
  transition: transform 0.3s ease;
}

.people-card:focus-within {
  border-color: rgba(178, 27, 42, 0.65);
  box-shadow: 0 0.75rem 1.75rem rgba(46, 49, 69, 0.12);
  transform: translateY(-3px);
}

.people-card__link:focus-visible {
  outline: 3px solid rgba(178, 27, 42, 0.45);
  outline-offset: -3px;
}

@media (hover: hover) {
  .people-card:hover {
    border-color: rgba(178, 27, 42, 0.65);
    box-shadow: 0 0.75rem 1.75rem rgba(46, 49, 69, 0.12);
    transform: translateY(-3px);
  }

  .people-card:hover .people-card__image {
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .people-card,
  .people-card__image {
    transition: none;
  }

  .people-card:focus-within,
  .people-card:hover,
  .people-card:hover .people-card__image {
    transform: none;
  }
}