/**
 * XB Team Cards Fix
 * Fixes team cards on homepage and other pages using xb-team class
 */

/* XB Team card styling - highest priority */
body .xb-team {
    background: #fff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    height: 350px !important; /* Reduced total height */
    display: flex !important;
    flex-direction: column !important;
}

body .xb-team:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

/* Inner container */
body .xb-team .xb-item--inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Image container with fixed height - Override conflicting styles */
body .xb-team .xb-item--img {
    position: relative !important;
    width: 100% !important;
    height: 250px !important; /* Maximum 250px as requested */
    max-width: 100% !important; /* Override max-width: 302px */
    margin: 0 !important; /* Override margin-right: -33px */
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: hidden !important;
    background: #f5f5f5 !important;
    flex-shrink: 0 !important;
}

/* Image styling with high specificity */
body .xb-team .xb-item--img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    transition: transform 0.3s ease !important;
    margin: 0 !important;
}

/* Hover effect */
body .xb-team:hover .xb-item--img img {
    transform: scale(1.1) !important;
}

/* Content holder */
body .xb-team .xb-item--holder {
    padding: 20px 15px !important;
    background: #fff !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100px !important;
    height: 100px !important; /* Fixed content height */
}

/* Name styling */
.xb-team .xb-item--name {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    color: #333 !important;
}

.xb-team .xb-item--name a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.xb-team .xb-item--name a:hover {
    color: #FFC107 !important;
}

/* Position/title if exists */
.xb-team .xb-item--position {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 0 !important;
}

/* All screen sizes - consistent heights */
@media (min-width: 1200px) {
    body .col-xl-3 .xb-team {
        height: 350px !important;
    }
    
    body .col-xl-3 .xb-team .xb-item--img {
        height: 250px !important; /* Max 250px */
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    body .col-lg-4 .xb-team {
        height: 350px !important;
    }
    
    body .col-lg-4 .xb-team .xb-item--img {
        height: 250px !important; /* Max 250px */
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    body .col-md-6 .xb-team {
        height: 340px !important;
    }
    
    body .col-md-6 .xb-team .xb-item--img {
        height: 240px !important;
    }
}

@media (max-width: 575px) {
    body .xb-team {
        height: 330px !important;
        margin-bottom: 20px !important;
    }
    
    body .xb-team .xb-item--img {
        height: 230px !important;
    }
    
    body .xb-team .xb-item--name {
        font-size: 16px !important;
    }
}

/* Override any inline styles - highest priority */
body .xb-team[style*="height"],
body .xb-team {
    height: 350px !important;
}

body .xb-team .xb-item--img[style*="height"],
body .xb-team .xb-item--img {
    height: 250px !important; /* Never exceed 250px */
    max-width: 100% !important;
    margin-right: 0 !important;
}

/* Fix for parallax data attribute */
body .xb-team .xb-item--inner[data-parallax] {
    transform: none !important;
}

/* Ensure consistent spacing */
body .row.mt-none-30 > [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

body .mt-30 {
    margin-top: 30px !important;
}

/* Override any existing team styles on all pages */
body.home .xb-team,
body.page-template-front-page .xb-team,
body .team .xb-team,
body .team-section .xb-team,
body section.team .xb-team {
    height: 350px !important;
}

body.home .xb-team .xb-item--img,
body.page-template-front-page .xb-team .xb-item--img,
body .team .xb-team .xb-item--img,
body .team-section .xb-team .xb-item--img,
body section.team .xb-team .xb-item--img {
    height: 250px !important; /* Strict 250px maximum */
    max-width: 100% !important;
    margin: 0 !important;
}

/* Nuclear option - highest possible specificity */
html body .xb-team .xb-item--img {
    height: 250px !important;
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
}