/* =========================================================
   MEET THE TEAM - stop the name/role text from colliding
   with the polaroid photo, at every screen size.

   Why it was colliding:
   The photo is pinned with `position: absolute` near the top
   of the card, and the info block (role / name / meta / links)
   was ALSO pinned with `position: absolute; bottom: ...` inside
   a card with a fixed height. Whenever the name text needed
   more room than that fixed height allowed for (long names,
   narrow 3-column cards, small phones, larger font settings,
   etc.) the info block crept upward into the photo instead of
   the card simply growing.

   The fix:
   The info block now flows normally, below a reserved top
   margin that always clears the photo's own height at that
   breakpoint, and the card height is `auto` instead of fixed.
   That makes overlap geometrically impossible - if the text
   needs more room, the card just gets taller.
   ========================================================= */

#meettheteam .card {
  height: auto !important;
  min-height: 380px !important;
}

#meettheteam .content {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 14px !important;
  padding: 0 28px 28px 30px !important;
  /* Clears the desktop/tablet photo: 20px top + 300px tall + margin */
  margin-top: 340px !important;
}

#meettheteam .content > div:first-child {
  width: 100% !important;
}

#meettheteam .name {
  font-size: clamp(1.7rem, 2.6vw, 2.35rem) !important;
}

#meettheteam .links {
  margin-top: 0 !important;
  flex-wrap: wrap !important;
}

@media (max-width: 760px) {
  #meettheteam .content {
    align-items: center !important;
    text-align: center !important;
    padding: 0 18px 18px 18px !important;
    /* Clears the mobile photo: 18px top + 250px tall + margin */
    margin-top: 288px !important;
  }

  #meettheteam .links {
    justify-content: center !important;
  }
}

@media (max-width: 390px) {
  #meettheteam .content {
    /* Clears the small-phone photo: 18px top + 230px tall + margin */
    margin-top: 268px !important;
  }
}