/*
 * About Us mobile portrait alignment fix (v5)
 * Upload this file to: css/mobile-team-portrait-center-v5.css
 * This affects only team/staff portrait images on screens 768px or narrower.
 */
@media (max-width: 768px) {
  /* Center the known team cards without changing their content or width. */
  :is(
    .team-card,
    .team-member,
    .team-member-card,
    .team-profile,
    .team-profile-card,
    .about-team-card,
    .staff-card,
    .member-card
  ) {
    text-align: center !important;
  }

  /* Remove decorative/background layers that can show as a blue crescent. */
  :is(
    .team-photo,
    .team-photo-wrap,
    .team-image,
    .team-avatar,
    .profile-photo,
    .profile-image,
    .member-photo,
    .staff-photo
  ) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 112px !important;
    height: 112px !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    background-image: none !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }

  :is(
    .team-photo,
    .team-photo-wrap,
    .team-image,
    .team-avatar,
    .profile-photo,
    .profile-image,
    .member-photo,
    .staff-photo
  )::before,
  :is(
    .team-photo,
    .team-photo-wrap,
    .team-image,
    .team-avatar,
    .profile-photo,
    .profile-image,
    .member-photo,
    .staff-photo
  )::after {
    display: none !important;
    content: none !important;
  }

  /*
   * Target the actual team asset filenames. This makes the rule work even
   * when the surrounding card uses a different class name.
   */
  img:is(
    [src*="june" i],
    [src*="catherine" i],
    [src*="ella" i],
    [src*="kris" i],
    [src*="kriss" i],
    [src*="nathaniel" i],
    [src*="john" i],
    [src*="team-lead" i],
    [src*="residential-care" i],
    [src*="detail-reset-care" i],
    [src*="customer-care" i]
  ) {
    display: block !important;
    width: 112px !important;
    height: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    min-height: 112px !important;
    max-height: 112px !important;
    margin: 0 auto 14px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: 50% 20% !important;
    background: #ffffff !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }

  /* Ensure images inside a known portrait frame completely fill the frame. */
  :is(
    .team-photo,
    .team-photo-wrap,
    .team-image,
    .team-avatar,
    .profile-photo,
    .profile-image,
    .member-photo,
    .staff-photo
  ) > img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: 50% 20% !important;
  }
}