/* ===========================================================
   Team section — trainer-style carousel
   ===========================================================
   Layout mirrors the Gym Nation trainer block: the eyebrow and the
   section title own the left column, and the members ride a
   horizontal carousel that runs out to the right edge of the
   viewport.

   Three whole cards fill the carousel column on desktop, at the size the
   reference gives its cards (there roughly 40% of the column, here a
   third of the strip after the two gaps). The strip keeps the room the
   cards need by taking more of the row than a 7/12 column would: the
   heading sits in the narrower left column instead, so the photos are
   never cropped to fit and never run under the edge of the screen. The
   member after those three waits off-screen and comes in a card at a time.

   Two cards between 992px and 1200px, one card on phones.

   The carousel is Swiper, like the theme's other home sliders, and
   is started from assets/js/team-carousel.js. The slide width and the
   gap are CSS concerns; the JS only reads --pxp-team-gap, so Swiper's
   own stepping and the layout here cannot drift apart.

   Loaded after main.css so it wins over the vendor .swiper-slide
   width and the old .team-card rules.
   =========================================================== */

.pxp-team {
  --pxp-team-container: 1320px; /* the Bootstrap .container max-width */
  --pxp-team-gutter: 12px;      /* .container side padding */
  --pxp-team-gap: 25px;         /* gap between cards (also read by the slider JS) */
  /* A card is a third of the column, less its share of the two gaps. */
  --pxp-team-slide: calc((100% - var(--pxp-team-gap) * 2) / 3);
  position: relative;
  background-color: var(--at-neutral-0, #FEFEFE);
  padding-top: 120px;
  padding-bottom: 120px;
}

.pxp-team__inner {
  display: grid;
  /* The carousel gets 8.5 of the 12 columns: three full-size cards and the
     two gaps need that much, and the heading reads well in what is left. */
  grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr);
  align-items: center;
  /* Heading lines up with .container; the carousel column runs to the right
     edge of the screen, as on the reference. It keeps the container gutter on
     that side, so the last card ends just inside the screen instead of
     touching it — three cards, none of them looking sliced. */
  padding-left: max(var(--pxp-team-gutter), calc((100% - var(--pxp-team-container)) / 2 + var(--pxp-team-gutter)));
  padding-right: var(--pxp-team-gutter);
}

/* ---------- Left column: eyebrow + heading ---------- */
/* Gap to the carousel. Kept tight on purpose: the heading is a phrase whose
   longest line runs to around 400px, and the heading column is 3.5/12 wide
   now, so a smaller gap keeps that line inside the column rather than
   spilling towards the cards. */
.pxp-team__head {
  padding-right: 24px;
}

/* Small uppercase label with a hairline dash either side. */
.pxp-team__eyebrow {
  position: relative;
  display: inline-block;
  padding: 0 25px 25px;
  font-family: var(--at-ff-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.11;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--at-theme-primary, #F0460E);
}

.pxp-team__eyebrow::before,
.pxp-team__eyebrow::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 16px;
  height: 1px;
  background-color: currentColor;
}

.pxp-team__eyebrow::before {
  left: 0;
}

.pxp-team__eyebrow::after {
  right: 0;
}

.pxp-team__heading {
  margin: 0;
  font-family: var(--at-ff-heading);
  font-weight: 800;
  font-size: clamp(34px, 4.8vw, 72px);
  line-height: 1.11;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--at-neutral-950, #0F0F0F);
}

/* ---------- Right column: the carousel ---------- */
.pxp-team__col {
  min-width: 0;
}

.pxp-team__slider {
  overflow: hidden;
  cursor: grab;
}

.pxp-team__slider:active {
  cursor: grabbing;
}

/* Three cards across the column, each one whole. */
.pxp-team__slide {
  width: var(--pxp-team-slide);
}

.pxp-team__media {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--at-neutral-50, #F2F2F2);
  aspect-ratio: 436 / 518;
}

.pxp-team__img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  /* Portrait shots: bias the crop upwards so heads are never cut. */
  -o-object-position: 50% 20%;
  object-position: 50% 20%;
  transition: transform 0.5s ease;
}

.pxp-team__card:hover .pxp-team__img {
  transform: scale(1.04);
}

.pxp-team__meta {
  padding-top: 20px;
  text-align: center;
}

.pxp-team__name {
  margin: 0;
  font-family: var(--at-ff-heading);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--at-neutral-950, #0F0F0F);
}

.pxp-team__name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.pxp-team__name a:hover {
  color: var(--at-theme-primary, #F0460E);
}

.pxp-team__role {
  margin: 0;
  font-family: var(--at-ff-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--at-neutral-500, #585959);
}

/* ---------- Dots (touch layouts only, as on the reference) ---------- */
.pxp-team__dots {
  display: none;
  margin-top: 28px;
  text-align: center;
}

.pxp-team__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--at-neutral-300, #B7B7B7);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pxp-team__dot.is-active {
  background-color: var(--at-theme-primary, #F0460E);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .pxp-team__name {
    font-size: 24px;
  }

  /* Below a laptop width the strip goes back to two cards. */
  .pxp-team {
    --pxp-team-slide: calc((100% - var(--pxp-team-gap)) / 2);
  }
}

@media (max-width: 991.98px) {
  .pxp-team {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  /* Heading above the carousel, both inside the container. */
  .pxp-team__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding-right: var(--pxp-team-gutter);
  }

  .pxp-team__head {
    margin-bottom: 44px;
    padding-right: 0;
    text-align: center;
  }

  .pxp-team__dots {
    display: block;
  }

  /* One card per view, flush with the container. */
  .pxp-team {
    --pxp-team-slide: 100%;
  }
}

@media (max-width: 767.98px) {
  .pxp-team {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .pxp-team__eyebrow {
    padding: 0 20px 15px;
    font-size: 12px;
  }

  .pxp-team__name {
    font-size: 20px;
  }

  .pxp-team__role {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pxp-team__img {
    transition: none;
  }

  .pxp-team__card:hover .pxp-team__img {
    transform: none;
  }
}