/**
 * Team Photos CSS - Handles different photo sizes for:
 * 1. Home page team section (pbmit-team-effect-*)
 * 2. Team listing page (pbmit-team-style-1)
 * 3. Team detail page (pbmit-team-single)
 * 
 * Uses ONE photo upload with CSS object-fit for proper display
 */

/* ============================================
   COMMON: Base styles for all team photos
   ============================================ */
.pbmit-featured-wrapper img,
.pbmit-featured-img-wrapper img,
.pbmit-team-effect-01 img,
.pbmit-team-effect-02 img,
.pbmit-team-effect-03 img,
.pbmit-team-effect-04 img,
.pbmit-team-effect-05 img,
.pbmit-team-effect-06 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================
   1. HOME PAGE: Team Effect Photos
   ============================================ */
.team-three-bg .pbmit-team-effect-01 .pbmit-featured-wrapper,
.team-three-bg .pbmit-team-effect-02 .pbmit-featured-wrapper,
.team-three-bg .pbmit-team-effect-03 .pbmit-featured-wrapper,
.team-three-bg .pbmit-team-effect-04 .pbmit-featured-wrapper,
.team-three-bg .pbmit-team-effect-05 .pbmit-featured-wrapper,
.team-three-bg .pbmit-team-effect-06 .pbmit-featured-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.team-three-bg .pbmit-team-effect-01 img,
.team-three-bg .pbmit-team-effect-02 img,
.team-three-bg .pbmit-team-effect-03 img,
.team-three-bg .pbmit-team-effect-04 img,
.team-three-bg .pbmit-team-effect-05 img,
.team-three-bg .pbmit-team-effect-06 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Specific sizing for home page effects */
.team-three-bg .pbmit-team-effect-01 {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4; /* Portrait orientation */
}

.team-three-bg .pbmit-team-effect-02,
.team-three-bg .pbmit-team-effect-03 {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3; /* Landscape orientation */
}

.team-three-bg .pbmit-team-effect-04,
.team-three-bg .pbmit-team-effect-05,
.team-three-bg .pbmit-team-effect-06 {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1; /* Square */
}

/* ============================================
   2. TEAM LISTING PAGE: Grid Cards
   ============================================ */
.pbmit-team-style-1 .pbmit-featured-img-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* Creates square aspect ratio */
    position: relative;
    overflow: hidden;
}

.pbmit-team-style-1 .pbmit-featured-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.pbmit-team-style-1 .pbmit-featured-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* Focus on face/upper body */
}

/* ============================================
   3. TEAM DETAIL PAGE: Sidebar Large Photo
   ============================================ */
.pbmit-team-single .pbmit-featured-img-wrapper {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.pbmit-team-single .pbmit-featured-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 120%; /* Taller portrait ratio for detail page */
    position: relative;
    overflow: hidden;
}

.pbmit-team-single .pbmit-featured-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* Focus on face */
}

/* ============================================
   RESPONSIVE: Mobile adjustments
   ============================================ */
@media (max-width: 768px) {
    /* Home page team effects - adjust for mobile */
    .team-three-bg .pbmit-team-effect-01,
    .team-three-bg .pbmit-team-effect-02,
    .team-three-bg .pbmit-team-effect-03,
    .team-three-bg .pbmit-team-effect-04,
    .team-three-bg .pbmit-team-effect-05,
    .team-three-bg .pbmit-team-effect-06 {
        aspect-ratio: 1/1; /* Square on mobile for consistency */
    }
    
    /* Team listing - keep square */
    .pbmit-team-style-1 .pbmit-featured-img-wrapper {
        padding-bottom: 100%;
    }
    
    /* Team detail - adjust ratio for mobile */
    .pbmit-team-single .pbmit-featured-wrapper {
        padding-bottom: 100%; /* Square on mobile */
    }
}

/* ============================================
   UTILITY: Ensure images load properly
   ============================================ */
.pbmit-featured-wrapper img,
.pbmit-featured-img-wrapper img {
    transition: transform 0.3s ease;
}

.pbmit-featured-wrapper:hover img,
.pbmit-featured-img-wrapper:hover img {
    transform: scale(1.05);
}