/**
 * Recruiters carousel — R7.
 * Native CSS scroll-snap; arrow buttons drive scrollBy via nav.js.
 */

.wc-recruiters {
  padding-block: var(--wc-space-2xl);
  background: var(--wc-color-bg);
}

.wc-recruiters__heading {
  /* Capped at 3rem (48px) per the document-wide max. */
  font-family: var(--wc-font-sans);
  font-size: clamp(1.5rem, 2.7vw, 3rem);
  font-weight: var(--wc-fw-light);
  letter-spacing: var(--wc-tracking-tight);
  color: var(--wc-color-brand);
  text-align: center;
  margin: 0 0 var(--wc-space-xl);
}

/* Carousel chassis — track centered, arrows live in the outer rails. */
.wc-carousel {
  /* Tighter padding so all 3 cards remain visible at desktop after
     the main-page gutter bump on 2026-05-11. */
  position: relative;
  padding-inline: clamp(1.5rem, 3vw, 2.5rem);
}

.wc-carousel__arrow {
  appearance: none;
  background: transparent;
  color: var(--wc-color-accent);
  border: 0;
  padding: 6px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: color var(--wc-transition-fast), transform var(--wc-transition-fast);
}

.wc-carousel__arrow--prev { left: 0; }
.wc-carousel__arrow--next { right: 0; }

.wc-carousel__arrow:hover,
.wc-carousel__arrow:focus-visible {
  color: var(--wc-color-accent-dark);
  transform: translateY(-50%) scale(1.08);
}

.wc-carousel__arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.wc-carousel__arrow-glyph {
  /* Uniform red chevrons across the page (2026-05-11) — Source Serif 4
     Regular, matching the inline » glyphs in the hero + bottom CTAs. */
  display: block;
  font-family: var(--wc-font-serif);
  font-weight: var(--wc-fw-regular);
  font-size: 2.6rem;
  line-height: 1;
}

.wc-carousel__track {
  list-style: none;
  margin: 0;
  padding: var(--wc-space-xs) 0;
  display: flex;
  /* Bumped 15% on 2026-05-12 — slightly more breathing room between
     each recruiter card. */
  gap: calc(var(--wc-space-md) * 1.15);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* hide scrollbar but stay accessible */
  scrollbar-width: thin;
  scrollbar-color: var(--wc-color-divider) transparent;
}

.wc-carousel__track::-webkit-scrollbar {
  height: 6px;
}
.wc-carousel__track::-webkit-scrollbar-thumb {
  background: var(--wc-color-divider);
  border-radius: 3px;
}

.wc-carousel__card {
  flex: 0 0 calc((100% - var(--wc-space-md) * 1.15 * 2) / 3);
  /* Prevent nowrap content (recruiter contact line) from expanding
     the card past its flex-basis. */
  min-width: 0;
  scroll-snap-align: start;
  text-align: center;
  padding: var(--wc-space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Equal heights via flex parent default `align-items: stretch`
     combined with min-height keeps the LinkedIn icon aligned across
     profiles regardless of bio length. */
  min-height: 100%;
}

@media (max-width: 960px) {
  .wc-carousel__card {
    flex-basis: calc((100% - var(--wc-space-md) * 1.15) / 2);
  }
}

@media (max-width: 600px) {
  .wc-carousel__card {
    /* Cards take the full visible track width on mobile so scroll-snap
       lands each profile cleanly with no neighbouring text bleeding
       in from the sides (per design feedback 2026-05-11). */
    flex-basis: 100%;
  }
  .wc-carousel {
    padding-inline: 1rem;
  }
}

/* Card content */
.wc-recruiter__photo {
  width: clamp(160px, 18vw, 230px);
  height: clamp(160px, 18vw, 230px);
  /* Tighter so portrait → name reads as one unit. */
  margin: 0 0 0.55em;
  border-radius: var(--wc-radius-circle);
  overflow: hidden;
  /* Soft glacier-blue circular plate behind the portrait, per R7. */
  background: color-mix(in srgb, var(--wc-color-glacier) 60%, white);
}

.wc-recruiter__img,
.wc-recruiter__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Stopgap halftone read until designer delivers processed PNGs.
     Swap to <filter> SVG or pre-processed images when available. */
  filter: grayscale(1) contrast(1.08);
}

/* Recruiter name fixed at 2rem per design call 2026-05-11. */
h3.wc-recruiter__name {
  font-family: var(--wc-font-sans);
  font-size: 2rem;
  font-weight: var(--wc-fw-light);
  letter-spacing: var(--wc-tracking-tight);
  color: var(--wc-color-text);
  margin: 0 0 0.2em;
  line-height: 1;
}

.wc-recruiter__line {
  /* Phone + email on one line per design call. Sized to fit
     "949.887.5288 | longest@willis-consulting.com" within the card
     width at desktop. Header-copy class — keeps tight tracking. */
  font-family: var(--wc-font-sans);
  font-size: clamp(0.7rem, 0.78vw, 0.95rem);
  font-weight: var(--wc-fw-bold);
  letter-spacing: var(--wc-tracking-tight);
  color: var(--wc-color-brand);
  margin: 0 0 0.3em;
  white-space: nowrap;
}

.wc-recruiter__line a {
  color: inherit;
  text-decoration: none;
  transition: color var(--wc-transition-fast);
}

.wc-recruiter__line a:hover,
.wc-recruiter__line a:focus-visible {
  color: var(--wc-color-brand);
  text-decoration: none;
}

.wc-recruiter__bio {
  /* Bumped 2026-05-11. Body copy — normal tracking (0). */
  font-family: var(--wc-font-sans);
  font-size: clamp(0.85rem, 1.15vw, 1.35rem);
  font-weight: var(--wc-fw-light);
  line-height: 1.32;
  letter-spacing: normal;
  color: var(--wc-color-text);
  margin: 0.55em 0 0.55em;
  max-width: 36ch;
}

.wc-recruiter__bio-token {
  /* Bio tokens are Inter Semi Bold burgundy with no underline at any
     state per the 2026-05-08 design call (no underlines anywhere). */
  font-weight: var(--wc-fw-semibold);
  color: var(--wc-color-brand);
  text-decoration: none;
  transition: color var(--wc-transition-fast);
}

.wc-recruiter__bio-token:hover,
.wc-recruiter__bio-token:focus-visible {
  color: var(--wc-color-brand-dark);
}

/* Type-prefixed `p.` ties specificity with `.wc-page p` (0,1,1) so
   margin-top: auto actually pushes the LinkedIn icon to the bottom of
   the card. Without the prefix the token rule was clobbering it,
   leaving LinkedIn floating above the card bottom on shorter bios. */
p.wc-recruiter__linkedin {
  margin: 0;
  margin-top: auto;
  padding-top: 0.75em;
}

.wc-recruiter__linkedin a {
  /* Per Figma: 'LinkedIn' word link is Inter Bold burgundy at ~18px. */
  font-family: var(--wc-font-sans);
  font-size: var(--wc-fs-sm);
  font-weight: var(--wc-fw-bold);
  letter-spacing: var(--wc-tracking-tight);
  color: var(--wc-color-brand);
  text-decoration: none;
  transition: color var(--wc-transition-fast);
}

.wc-recruiter__linkedin a:hover,
.wc-recruiter__linkedin a:focus-visible {
  color: var(--wc-color-brand-dark);
  text-decoration: none;
}

@media (max-width: 600px) {
  .wc-carousel {
    padding-inline: 2rem;
  }

  .wc-carousel__arrow {
    width: 40px;
    height: 40px;
    padding: 4px;
  }

  .wc-carousel__arrow-glyph {
    width: 28px;
    height: 28px;
  }
}