/* ── Team Members — the [team_members] module ──────────────────────
   Bordered cards: portrait image + name/bio, image left on desktop and
   stacked at 980px and below (the Figma PHONE frame drives both the
   tablet and phone bands by design).

   Deliberately no outer margin or padding on .eos-team — the row that
   hosts the shortcode owns all outside spacing. */

.eos-team {
  display        : flex;
  flex-direction : column;
  /* between team members: 2.5rem → 3.75rem */
  gap            : clamp(2.500rem, 2.154rem + 1.478vw, 3.750rem);
  width          : 100%;
  margin         : 0;
  padding        : 0;
}

.eos-team__member {
  display       : flex;
  align-items   : center;            /* text block centred vertically against the image */
  gap           : 10%;               /* horizontal gap between image and text */
  /* vertical 1.5rem → 5rem (above the image / below the bio) · horizontal 7.5% */
  padding       : clamp(1.500rem, 0.530rem + 4.139vw, 5.000rem) 7.5%;
  margin        : 0;
  border        : 1px solid var(--medium-grey);
  border-radius : 2.5rem;
  box-sizing    : border-box;
}

/* Image column. 32% + the 10% gap + 58% of text = the card's content box. */
.eos-team__media {
  flex   : 0 0 32%;
  margin : 0;
}
.eos-team__media picture { display: block; }
.eos-team__media img {
  display      : block;
  width        : 100%;
  aspect-ratio : 396 / 420;          /* desktop Figma crop */
  object-fit   : cover;
}

.eos-team__text {
  flex           : 1 1 0;
  min-width      : 0;                /* let long bios wrap instead of forcing overflow */
  display        : flex;
  flex-direction : column;
  /* between the name and the bio: 1.5rem → 2rem */
  gap            : clamp(1.500rem, 1.361rem + 0.591vw, 2.000rem);
}

.eos-team__name,
.eos-team__bio { color: var(--black); margin: 0; }

/* Links inside the rich-text fields keep the surrounding text colour and are
   distinguished by an underline only. Divi ships `a{color:#2ea3f2}` plus
   `a,a:hover{text-decoration:none}`, so both properties have to be reclaimed —
   and the hover/focus states are listed explicitly because Divi's `a:hover`
   (0,1,1) ties with a plain `.eos-team__bio a`. */
.eos-team__name a,
.eos-team__bio  a,
.eos-team__name a:hover,
.eos-team__bio  a:hover,
.eos-team__name a:focus,
.eos-team__bio  a:focus,
.eos-team__name a:visited,
.eos-team__bio  a:visited {
  color           : inherit;
  text-decoration : underline;
}

/* The Name/Bio fields are WYSIWYG, so their content arrives wrapped in <p>.
   The .heading-md / .body-lg child rules already carry size, family, weight
   and line-height — here we only strip the editor's outer margins so the
   flex gap above is the single source of rhythm. */
   Divi also ships a bare `p{padding-bottom:1em}` and only spares
   `p:last-of-type`, so the padding is zeroed here too — that covers a bio
   whose last element is a list rather than a paragraph. */
.eos-team__name > :first-child,
.eos-team__bio  > :first-child { margin-top: 0; padding-top: 0; }
.eos-team__name > :last-child,
.eos-team__bio  > :last-child  { margin-bottom: 0; padding-bottom: 0; }

/* ── ≤980px — stack ────────────────────────────────────────────────
   The phone frame governs the whole tablet+phone band, so this is one
   breakpoint rather than separate tablet and phone rules. */
@media (max-width: 980px) {
  .eos-team__member {
    flex-direction : column;
    align-items    : stretch;
    gap            : 1.75rem;        /* vertical gap between the stacked halves */
  }
  .eos-team__media     { flex: 0 0 auto; }
  .eos-team__media img { aspect-ratio: 265 / 246; }   /* mobile Figma crop */
}

/* ── Editor-only empty state ── */
.eos-team__empty {
  padding       : 1rem 1.25rem;
  border        : 1px dashed var(--medium-grey);
  border-radius : 0.5rem;
  color         : var(--black);
}