/* ==========================================================================
   SAJ Meet the Team — Elementor widget additions
   meet-team.css is an unchanged copy of the original; this file only adds
   what the widget needs on top of it. Breakpoints are the original ones
   (desktop ≥ 1024px, tablet 768–1023.98px, mobile < 768px).
   ========================================================================== */

/* ---- Elementor's global image reset ---------------------------------------
   Elementor's frontend.css has `.elementor img { height: auto; ... }`
   (specificity 0,1,1), which beats the original single-class rules and would
   break the cropped photo frames. Restore the original heights. */
.saj-meet-team .saj-meet-team__portrait-image,
.saj-meet-team .saj-meet-team__member-image {
  height: 100%;
}

.saj-meet-team .saj-meet-team__aside-image {
  height: 110%;
  max-width: none;
}

/* ---- Without the clinic image ----------------------------------------------
   The original reserves room on the right for the clinic image; when the
   widget hides it, the text column uses that space and the curve that wraps
   the image goes too. */
@media (min-width: 1024px) {
  .saj-meet-team--no-aside .saj-meet-team__intro {
    padding-right: var(--mt-gutter);
  }

  .saj-meet-team--no-aside .saj-meet-team__shape--top {
    display: none;
  }
}

/* Without the lead portrait the text spans the whole intro row. */
.saj-meet-team--no-lead .saj-meet-team__intro {
  grid-template-columns: minmax(0, 1fr);
}

/* ---- Optional member profile link -----------------------------------------
   The link sits on the name; its ::after covers the whole card, so the card
   is clickable without changing the original markup or layout. */
.saj-meet-team__member {
  position: relative;
}

.saj-meet-team .saj-meet-team__member-link {
  color: inherit;
  text-decoration: none;
}

.saj-meet-team .saj-meet-team__member-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ---- Any number of team members -------------------------------------------
   The original grid is drawn for five cards (one desktop row; 3 + 2 centred
   on tablets; odd last card centred on phones). The same geometry is kept
   for other counts: an incomplete last row is centred on every layout. */
@media (min-width: 1024px) {
  /* 10 half-columns, each card spans 2: identical card width and gaps to
     repeat(5, 1fr), but a short row can start on a half-column. */
  .saj-meet-team__grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .saj-meet-team__grid > .saj-meet-team__member {
    grid-column: span 2;
  }

  .saj-meet-team__grid > .saj-meet-team__member:nth-child(5n+1):nth-last-child(1) { grid-column: 5 / span 2; }
  .saj-meet-team__grid > .saj-meet-team__member:nth-child(5n+1):nth-last-child(2) { grid-column: 4 / span 2; }
  .saj-meet-team__grid > .saj-meet-team__member:nth-child(5n+1):nth-last-child(3) { grid-column: 3 / span 2; }
  .saj-meet-team__grid > .saj-meet-team__member:nth-child(5n+1):nth-last-child(4) { grid-column: 2 / span 2; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  /* The original pins the 4th card to column 2 (right for five cards only). */
  .saj-meet-team__grid > .saj-meet-team__member:nth-child(4) {
    grid-column: span 2;
  }

  .saj-meet-team__grid > .saj-meet-team__member:nth-child(3n+1):nth-last-child(1) { grid-column: 3 / span 2; }
  .saj-meet-team__grid > .saj-meet-team__member:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
}