/**
 * Frontend styles for Team Member block
 */

.wp-block-mtt-team-member {
    display: flex;
    gap: 0;
    align-items: stretch;
    padding: 0;
    background: #fff;
    overflow: hidden;
    width: 100%;
    border-bottom: 1px solid #1D4C35;
}

.wp-block-mtt-team-member:last-of-type {
    border-bottom: none;
}


/* Layout variations */
.wp-block-mtt-team-member.image-left {
    flex-direction: row;
}

.wp-block-mtt-team-member.image-right {
    flex-direction: row-reverse;
}


/* Image column */
.wp-block-mtt-team-member .team-member-image-column {
    flex: 0 0 38%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    padding: 60px 40px 140px 40px;
    text-align: center;
    position: relative;
}

.wp-block-mtt-team-member .image-logo {
    position: relative;
}

/* Image with organic mask */
.wp-block-mtt-team-member .team-member-image {
    max-width: 330px;
    width: 100%;
    aspect-ratio: 330/ 358;
    position: relative;
    overflow: hidden;
    /* Apply organic mask by default */
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20preserveAspectRatio%3D%22none%22%20width%3D%22330%22%20height%3D%22358.086%22%20viewBox%3D%220%200%20330%20358.086%22%3E%3Cpath%20id%3D%22a9748ac0810955bceee1a45d989b7f27%22%20d%3D%22M307.755%2C148.782c-12.7-20.472-28.443-39.525-41.824-58.629-26.185-37.384-53.613-69.262-97.623-85.3-13.931-5.078-29.57-6.856-43.568-1.965-12.99%2C4.538-23.4%2C14.3-33.044%2C24.108a618.885%2C618.885%2C0%2C0%2C0-76.4%2C94.769c-4.9%2C7.474-9.683%2C15.167-12.319%2C23.706C.7%2C152.84.1%2C160.628.011%2C168.345-.763%2C237.278%2C38.085%2C293.356%2C91.726%2C332.92c31.536%2C23.26%2C69.009%2C33.293%2C106.586%2C17.55%2C24.733-10.363%2C45.364-28.436%2C64.648-47.069%2C11.638-11.244%2C22.965-22.805%2C34.173-34.477%2C15.355-15.992%2C31.354-34.1%2C32.766-56.223.568-8.913-1.343-17.818-4.086-26.317-4.264-13.213-10.643-25.649-18.058-37.6%22%20transform%3D%22translate(0.001%200)%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20preserveAspectRatio%3D%22none%22%20width%3D%22330%22%20height%3D%22358.086%22%20viewBox%3D%220%200%20330%20358.086%22%3E%3Cpath%20id%3D%22a9748ac0810955bceee1a45d989b7f27%22%20d%3D%22M307.755%2C148.782c-12.7-20.472-28.443-39.525-41.824-58.629-26.185-37.384-53.613-69.262-97.623-85.3-13.931-5.078-29.57-6.856-43.568-1.965-12.99%2C4.538-23.4%2C14.3-33.044%2C24.108a618.885%2C618.885%2C0%2C0%2C0-76.4%2C94.769c-4.9%2C7.474-9.683%2C15.167-12.319%2C23.706C.7%2C152.84.1%2C160.628.011%2C168.345-.763%2C237.278%2C38.085%2C293.356%2C91.726%2C332.92c31.536%2C23.26%2C69.009%2C33.293%2C106.586%2C17.55%2C24.733-10.363%2C45.364-28.436%2C64.648-47.069%2C11.638-11.244%2C22.965-22.805%2C34.173-34.477%2C15.355-15.992%2C31.354-34.1%2C32.766-56.223.568-8.913-1.343-17.818-4.086-26.317-4.264-13.213-10.643-25.649-18.058-37.6%22%20transform%3D%22translate(0.001%200)%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.wp-block-mtt-team-member .team-member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.wp-block-mtt-team-member:hover .team-member-image img {
    transform: scale(1.05);
}

/* Icon */
.wp-block-mtt-team-member .team-member-icon {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-20%, 49%);
    z-index: 1;
    width: 158px;
    background: none !important;
    background-color: transparent !important;
}

.wp-block-mtt-team-member .team-member-icon svg {
    width: 100%;
    height: auto;
    background: none !important;
    background-color: transparent !important;
    transform-box: fill-box;
    will-change: transform;
}

/* Name and Pronouns (now at top of left column) */
.wp-block-mtt-team-member .team-member-name-section {
    margin-bottom: 20px;
}

.wp-block-mtt-team-member .team-member-name {
    margin: 0 0 8px 0;
    color: inherit;
}

.wp-block-mtt-team-member .team-member-pronouns {
    color: inherit;
    font-size: 25px;
    font-family: var(--wp--preset--font-family--awesome);
    font-weight: 400;
    line-height: 1;
    font-style: italic;
}

/* Content column */
.wp-block-mtt-team-member .team-member-content {
    flex: 0 0 62%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 60px 100px;
    background-color: var(--wp--preset--color--cream);
}

.wp-block-mtt-team-member .team-member-title {
    color: var(--wp--preset--color--green);
}

.wp-block-mtt-team-member .team-member-bio {
    color: var(--wp--preset--color--green);
}

.wp-block-mtt-team-member .team-member-bio p {
    margin: 0 0 16px 0;
}

.wp-block-mtt-team-member .team-member-bio p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .wp-block-mtt-team-member .team-member-image-column {
        padding: 60px 40px 100px 40px;
    }

    .wp-block-mtt-team-member .team-member-content {
        padding: 60px 40px;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .wp-block-mtt-team-member {
        flex-direction: column !important;
        text-align: center;
    }

    .wp-block-mtt-team-member .team-member-image-column {
        flex: none;
    }

    .wp-block-mtt-team-member .team-member-image {
        width: 100%;
        max-width: 330px;
        height: unset;
        aspect-ratio: 330/ 358;
        margin: 0 auto;
    }

    .wp-block-mtt-team-member .team-member-content {
        padding: 60px 20px;
        text-align: center;
    }
}

@media (max-width: 480px) {

}