/*
  Team Quote Carousel section — Careers "Meet Our Team".
  Source: Figma 840:11 (desktop 1440 × 657).

  Layout:
  - Header row: heading (left) + subheading (right, top-aligned). Stacks
    below 900px.
  - Stage: featured quote card on top (photo + credit | vertical divider |
    quote-mark + long testimonial), thumbnail row below (3 visible slots
    joined edge-to-edge, active thumb reversed to navy).
  - Controls row: prev arrow / dots / next arrow. Active dot teal.

  All 4 slides render in the DOM; JS toggles `.is-active` on the featured
  articles + matching thumb + dot. Below 768px the featured card stacks
  (photo above quote) and thumbs become a horizontal scroll row.
*/

.team-quote-carousel {
  padding-block: var(--section-padding-block);
}

.team-quote-carousel__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
  display: flex;
  flex-direction: column;
  gap: var(--space-10); /* 40px header→stage */
}

/* --------- Header --------- */
.team-quote-carousel__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 900px) {
  .team-quote-carousel__header {
    grid-template-columns: minmax(0, 687fr) minmax(0, 585fr);
    gap: var(--space-10);
  }
}

.team-quote-carousel__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-text-heading);
}

.team-quote-carousel__heading-accent {
  color: var(--color-green-2);
  font-weight: var(--font-weight-semibold);
}

.team-quote-carousel__subheading {
  margin: 0;
  align-self: end;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  color: var(--color-text-body);
}

/* --------- Stage: featured + thumbs, one rounded rectangle --------- */
.team-quote-carousel__stage {
  display: flex;
  flex-direction: column;
}

/* --------- Featured card --------- */
.team-quote-carousel__featured {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 8px 8px 0 0;
  padding: 33px;
}

.team-quote-carousel__slide {
  display: none;
  gap: 54px;
  align-items: flex-start;
}

.team-quote-carousel__slide.is-active {
  display: flex;
}

@media (max-width: 767px) {
  .team-quote-carousel__slide.is-active {
    flex-direction: column;
    gap: var(--space-6);
  }
  /* Photo spans the full featured-card width on mobile — 215px square
     looks cramped once the card is column-stacked. */
  .team-quote-carousel__credit {
    width: 100%;
  }
  .team-quote-carousel__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* Credit column — photo + name + position */
.team-quote-carousel__credit {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  flex-shrink: 0;
  width: 215px;
}

.team-quote-carousel__photo {
  width: 215px;
  height: 215px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-navy-blue);
}

.team-quote-carousel__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-quote-carousel__credit-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.team-quote-carousel__name {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: var(--color-text-heading);
}

.team-quote-carousel__position {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--color-text-body);
}

/* Vertical divider between photo column and quote */
.team-quote-carousel__divider {
  align-self: stretch;
  width: 1px;
  background: var(--color-card-border);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .team-quote-carousel__divider {
    display: none;
  }
}

/* Quote column */
.team-quote-carousel__quote {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.team-quote-carousel__quote-mark {
  width: 23px;
  height: 22px;
  color: var(--color-green-2);
  flex-shrink: 0;
}

.team-quote-carousel__quote-text {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--color-text-heading);
}

@media (max-width: 767px) {
  .team-quote-carousel__quote-text {
    font-size: 18px;
  }
}

/* --------- Thumbnails row (3 visible slots joined edge-to-edge) --------- */
.team-quote-carousel__thumbs-viewport {
  overflow: hidden;
  border-inline: 1px solid var(--color-card-border);
  border-bottom: 1px solid var(--color-card-border);
  border-radius: 0 0 8px 8px;
}

.team-quote-carousel__thumbs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0;
  transition: transform 0.35s ease-out;
}

.team-quote-carousel__thumbs > li {
  /* 3 slots visible at once; anything beyond overflows and is revealed
     by JS translating the row. Below 768px each thumb is 85% viewport
     so the next one peeks in as a swipe affordance. */
  flex: 0 0 calc(100% / 3);
  min-width: 0;
  border-right: 1px solid var(--color-card-border);
}

.team-quote-carousel__thumbs > li:last-child {
  border-right: 0;
}

@media (max-width: 767px) {
  .team-quote-carousel__thumbs > li {
    flex: 0 0 100%;
  }
}

/* Below 768px the photo tab strip is redundant: the prev / dots / next
   controls under the card already move between people, and the active
   slide shows that person's photo, name and position itself. Hiding the
   strip drops a full-width-per-thumb row that otherwise dominates the
   viewport. Kept in the DOM (not removed in PHP) so the JS tab wiring
   and the slides' aria-labelledby references stay intact. */
@media (max-width: 767px) {
  .team-quote-carousel__thumbs-viewport {
    display: none;
  }

  /* The thumb strip supplied the card's bottom corners + bottom border;
     with it hidden the featured card has to close itself off. */
  .team-quote-carousel__featured {
    border-radius: 8px;
  }
}

/* Thumb button */
.team-quote-carousel__thumb {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  width: 100%;
  padding: var(--space-7);
  background: var(--color-white);
  border: 0;
  color: var(--color-text-heading);
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background-color 0.22s ease-out, color 0.22s ease-out;
}

/* Active thumb — matches the featured card's slide. Navy bg, white text. */
.team-quote-carousel__thumb.is-active {
  background: var(--color-navy-blue);
  color: var(--color-text-on-dark);
}

.team-quote-carousel__thumb:hover:not(.is-active),
.team-quote-carousel__thumb:focus-visible:not(.is-active) {
  background: var(--color-background);
}

.team-quote-carousel__thumb-photo {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-navy-blue);
  flex-shrink: 0;
}

.team-quote-carousel__thumb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-quote-carousel__thumb-credit {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.team-quote-carousel__thumb-name {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  color: inherit;
  /* Inactive thumb name stays navy explicitly (would inherit otherwise). */
}

.team-quote-carousel__thumb-position {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 16px;
  color: var(--color-text-body);
}

.team-quote-carousel__thumb.is-active .team-quote-carousel__thumb-position {
  color: var(--color-text-on-dark);
}

/* --------- Controls: prev / dots / next --------- */
.team-quote-carousel__controls {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: center;
  margin-top: var(--space-10); /* 40px stage→controls, per Figma outer 40px gap */
}

.team-quote-carousel__nav {
  width: 70px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--color-card-border);
  background: var(--color-white);
  color: var(--color-text-heading);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.team-quote-carousel__nav:hover,
.team-quote-carousel__nav:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-navy-blue);
}

.team-quote-carousel__nav:disabled {
  opacity: 0.4;
  cursor: default;
  border-color: var(--color-card-border);
  color: var(--color-text-heading);
}

.team-quote-carousel__nav svg {
  width: 22px;
  height: 8px;
  display: block;
}

.team-quote-carousel__dots {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
  align-items: center;
}

.team-quote-carousel__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--color-card-border);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.team-quote-carousel__dot.is-active {
  background: #a0f0e8; /* Figma "Teal - 50%" swatch — carousel-specific. */
}

.team-quote-carousel__dot:hover:not(.is-active),
.team-quote-carousel__dot:focus-visible:not(.is-active) {
  background: var(--color-body-copy);
}