@use "../abstracts" as vars;

/* ===========================
   Team 2 (Qualified Instructors)
   =========================== */
.team2 {
    background-color: vars.$color-white;
    position: relative;
    overflow: hidden;

    &__subtitle {
        color: vars.$color-primary;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        display: block;
        margin-bottom: vars.rem(15);
    }

    &__title {
        color: vars.$color-heading;
        font-size: clamp(vars.rem(32), 4vw, vars.rem(48));
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 0;
    }

    &__card {
        position: relative;
        overflow: hidden;
        border-radius: vars.rem(20);
        background-color: #f3f5f9; // Light grey card bg
        transition: all 0.4s ease;

        &-thumb {
            position: relative;
            z-index: 1;
            padding: 0;

            img {
                width: 100%;
                display: block;
                transition: transform 0.6s ease;
            }
        }

        &-content {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: vars.rem(40) vars.rem(30) vars.rem(30);
            z-index: 2;
            transition: all 0.4s ease;

            @media (max-width: 1024px) {
                padding: vars.rem(20) vars.rem(20) vars.rem(20);
            }

            // Brush Stroke Overlay
            &::before {
                content: '';
                position: absolute;
                top: vars.rem(-1);
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #f3f5f9; // Match card bg
                mask-image: url('../images/hero/hero-thumb-shape.png'); // Using hero shape as a stand-in for brush if needed, or I'll just use a standard path
                mask-size: 100% vars.rem(60);
                mask-repeat: no-repeat;
                mask-position: top;
                z-index: -1;
                transition: all 0.4s ease;
            }

            // Fallback if mask is not perfect - use a generic brush or shape
            // Or better, use a clip-path for that jagged look if asset is missing
            /* clip-path: polygon(0 15%, 5% 10%, 10% 15%, 15% 5%, 20% 15%, 25% 10%, 30% 15%, 35% 5%, 40% 15%, 45% 10%, 50% 15%, 55% 5%, 60% 15%, 65% 10%, 70% 15%, 75% 5%, 80% 15%, 85% 10%, 90% 15%, 95% 5%, 100% 15%, 100% 100%, 0 100%); */

            .designation {
                display: block;
                font-size: vars.rem(13);
                font-weight: 700;
                color: vars.$color-text2;
                text-transform: uppercase;
                letter-spacing: 1px;
                margin-bottom: vars.rem(8);

                @media (max-width: 1024px) {
                    font-size: vars.rem(12);
                }
            }

            .name {
                font-size: vars.rem(24);
                font-weight: 800;
                color: vars.$color-heading;
                margin: 0;
                transition: color 0.3s;

                @media (max-width: 1024px) {
                    font-size: vars.rem(18);
                }
            }
        }

        &-social {
            position: absolute;
            right: vars.rem(25);
            bottom: vars.rem(25);
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;

            .social-links {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: vars.rem(15);
                background-color: #2A8EF2;
                padding: vars.rem(25) vars.rem(8) vars.rem(15);
                width: 55px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                opacity: 0;
                visibility: hidden;
                transform: translateY(20px);
                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                margin-bottom: vars.rem(-20);

                a {
                    color: vars.$color-white;
                    font-size: vars.rem(16);
                    transition: all 0.3s;

                    &:hover {
                        transform: scale(1.2);
                        color: vars.$color-black;
                    }
                }
            }

            .toggle-btn {
                width: vars.rem(55);
                height: vars.rem(55);
                background-color: vars.$color-black;
                color: vars.$color-white;
                border-bottom-left-radius: 150px;
                border-bottom-right-radius: 150px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s ease;
                font-size: vars.rem(18);
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                position: relative;
                z-index: 11;

                @media (max-width: 1024px) {
                    width: vars.rem(35);
                    height: vars.rem(35);
                    font-size: vars.rem(14);
                }
            }
        }

        &:hover {
            .team2__card-thumb img {
                transform: scale(1.05);
            }

            .team2__card-content {
                background-color: vars.$color-black;

                &::before {
                    background-color: vars.$color-black;
                }

                .designation {
                    color: rgba(255, 255, 255, 0.7);
                }

                .name {
                    color: vars.$color-white;
                }
            }

            .team2__card-social {
                .social-links {
                    opacity: 1;
                    visibility: visible;
                    transform: translateY(0);
                    margin-bottom: 0;
                }

                .toggle-btn {
                    background-color: vars.$color-primary;
                }
            }
        }
    }
}