/* ═══════════ Meet the Team ([meet_the_team]) ═══════════════
   Desktop: 80% row, 40% image column + bio card (absolute,
   vertically centred, overlapping the image). Cards alternate
   image-left / image-right via :nth-child(even).
   Tablet/Mobile: stacks (image then card), card overlaps the
   image's bottom, centred horizontally, NO alternation.
   Type: title .subheading-md · name .heading-md · bio .body-lg.
   ──────────────────────────────────────────────────────────── */
.mtt {
  display: flex;
  flex-direction: column;
  gap: 3rem; /* between members */
}

.mtt-member {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  min-height: 34rem; /* gives the image column height */
}

/* Image column — .fill-image makes <picture>/<img> fill it like a bg image */
.mtt-media {
  width: 40%;
  flex: 0 0 40%;
}

/* Bio card — absolute, vertically centred, overlapping into the image */
.mtt-card {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0; /* odd: card on the right */
  width: 66%; /* col2 + ~6% overlap into image (moved further out) */
  box-sizing: border-box;
  z-index: 2;
  background: var(--background-medium-beige);
  padding: 5rem 10%; /* 5rem top/bottom · 10% sides - content clears the image now the card sits further out */
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* head ↔ divider ↔ bio */
  color: var(--dark-navy);
}

.mtt-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
} /* title ↔ name */
.mtt-title,
.mtt-name,
.mtt-bio {
  color: var(--dark-navy);
  margin: 0;
}
.mtt-bio p {
  margin: 0;
}
.mtt-bio p + p {
  margin-top: 0.75rem;
}
.mtt-divider {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--dark-navy);
  margin: 0;
}

/* Alternate on desktop: even members flip image right / card left */
.mtt-member:nth-child(even) {
  justify-content: flex-end;
}
.mtt-member:nth-child(even) .mtt-card {
  right: auto;
  left: 0;
}

/* ── Tablet / Mobile: stack, overlap vertically, centred, no flip ── */
@media (max-width: 980px) {
  .mtt-member,
  .mtt-member:nth-child(even) {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
  }
  .mtt-media {
    width: 100%; /* full-width image on mobile (no side margin) */
    flex: none;
    aspect-ratio: 4 / 3; /* image gets height while stacked */
    align-self: center; /* override fill-image's align-self:stretch */
  }
  /* Run the module edge-to-edge on mobile — drop the Divi section/row/column side padding */
  .et_pb_section:has(.mtt),
  .et_pb_row:has(.mtt),
  .et_pb_column:has(.mtt) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .et_pb_row:has(.mtt) {
    width: 100% !important;
    max-width: 100% !important;
  }
  .mtt-card,
  .mtt-member:nth-child(even) .mtt-card {
    position: relative;
    transform: none;
    top: auto;
    right: auto;
    left: auto;
    z-index: 2;
    width: 80%;
    margin: -3rem auto 0; /* overlap the image's bottom + centre horizontally */
    align-self: center; /* ensure centred on the image */
    padding: 2rem; /* clamped-down spacing */
    gap: 1rem; /* head ↔ divider ↔ bio */
  }
  .mtt-head {
    gap: 1.25rem;
  } /* title ↔ name */
}

/* ── Bio-card fade-in (750ms, once, on scroll into view) ──
   .mtt-fade is added by JS (see the shortcode's inline script) so
   no-JS visitors always see the cards. */
.mtt-card.mtt-fade {
  opacity: 0;
  transition: opacity 750ms ease;
}
.mtt-card.mtt-fade.is-visible {
  opacity: 1;
}