/* Team Member Card Styling - Fixed Version */

/* Base card styling */
.wp-block-post.team,
.team-grid .wp-block-post {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0;
    margin-bottom: 30px !important;
    z-index: 1; /* Establish a stacking context */
}

/* Hover effect for the card */
.wp-block-post.team:hover,
.team-grid .wp-block-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 50, 99, 0.2);
}

/* Featured image container */
.wp-block-post.team .wp-block-post-featured-image,
.team-grid .wp-block-post .wp-block-post-featured-image {
    position: relative;
    margin: 0 !important;
    overflow: hidden;
    width: 100%;
    height: auto;
    display: block;
}

/* Style the featured image */
.wp-block-post.team .wp-block-post-featured-image img,
.team-grid .wp-block-post .wp-block-post-featured-image img {
    transition: transform 0.5s ease;
    display: block;
    width: 100%;
    height: auto;
}

/* Zoom effect on hover */
.wp-block-post.team:hover .wp-block-post-featured-image img,
.team-grid .wp-block-post:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

/* Target WordPress's built-in overlay element - FIXED */
.wp-block-post.team .wp-block-post-featured-image .wp-block-post-featured-image__overlay,
.team-grid .wp-block-post .wp-block-post-featured-image .wp-block-post-featured-image__overlay {
    opacity: 1 !important; /* Override the inline opacity:0 */
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    transition: background-image 0.3s ease !important;
    pointer-events: none !important; /* Ensure clickability */
    transform: translateZ(0); /* Force GPU acceleration */
}

/* Manual overlay for older templates */
.wp-block-post.team .wp-block-post-featured-image .manual-overlay,
.team-grid .wp-block-post .wp-block-post-featured-image .manual-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    transition: background-image 0.3s ease;
    pointer-events: none; /* Ensure clickability */
}

/* Position and style the title (name) */
.wp-block-post.team .wp-block-post-title,
.team-grid .wp-block-post .wp-block-post-title {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0 0 0 50px;
    z-index: 5;
    color: white;
    font-size: 1.75rem;
    font-weight: 500;
    transition: transform 0.3s ease;
    pointer-events: auto; /* Allow clicks on title */
}

/* Style the job title */
.wp-block-post.team .wp-block-childtheme-team-title,
.team-grid .wp-block-post .wp-block-childtheme-team-title {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0 0 0 50px;
    z-index: 5;
    transition: transform 0.3s ease;
    pointer-events: auto; /* Allow clicks on title */
}

.wp-block-post.team .wp-block-childtheme-team-title p,
.team-grid .wp-block-post .wp-block-childtheme-team-title p {
    margin: 0;
    color: white;
    font-size: 1rem;
    font-weight: 300;
}

/* Change link color to white */
.wp-block-post.team .wp-block-post-title a,
.team-grid .wp-block-post .wp-block-post-title a {
    color: white;
    text-decoration: none;
}

/* Add the blue slash before the team member name */
.wp-block-post.team:before,
.team-grid .wp-block-post:before {
    content: "";
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 21px;
    height: 42px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20.89" height="42.401" viewBox="0 0 20.89 42.401"><path fill="%235b96c3" d="M58.554,42.675l4.021.268a1.026,1.026,0,0,0,1.033-.63L79.4,1.512a.7.7,0,0,0-.683-.928L75.647.544Z" transform="translate(-58.554 -0.544)"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
    z-index: 10;
    transition: transform 0.3s ease;
    pointer-events: none; /* Ensure clickability */
}

/* Animate the slash on hover */
.wp-block-post.team:hover:before,
.team-grid .wp-block-post:hover:before {
    transform: translateX(5px);
}

/* Remove the :after pseudo-element that conflicts with WordPress's overlay */
.wp-block-post.team .wp-block-post-featured-image:after,
.team-grid .wp-block-post .wp-block-post-featured-image:after {
    display: none !important;
}

/* Make sure the entire card is clickable and the anchor covers everything */
.wp-block-post.team .wp-block-post-featured-image a,
.team-grid .wp-block-post .wp-block-post-featured-image a {
    position: relative;
    display: block;
    z-index: 4; /* Higher than overlay but lower than text */
}

/* Remove any margins between elements */
.wp-block-post.team > *,
.team-grid .wp-block-post > * {
    margin: 0 !important;
}

/* Smooth transition for name/title on hover */
.wp-block-post.team:hover .wp-block-post-title,
.wp-block-post.team:hover .wp-block-childtheme-team-title,
.team-grid .wp-block-post:hover .wp-block-post-title,
.team-grid .wp-block-post:hover .wp-block-childtheme-team-title {
    transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 781px) {
    .wp-block-post.team:before,
    .team-grid .wp-block-post:before {
        width: 16px;
        height: 32px;
        left: 15px;
    }
    
    .wp-block-post.team .wp-block-post-title,
    .wp-block-post.team .wp-block-childtheme-team-title,
    .team-grid .wp-block-post .wp-block-post-title,
    .team-grid .wp-block-post .wp-block-childtheme-team-title {
        padding-left: 45px;
    }
    
    .wp-block-post.team .wp-block-post-title,
    .team-grid .wp-block-post .wp-block-post-title {
        font-size: 1.5rem;
    }
}