@use "../abstracts" as vars;

.team1 {
    background-color: vars.$color-white;
    position: relative;
    overflow: hidden;

    &__content-top {
        margin-bottom: vars.rem(50);
    }

    &__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: 700;
        line-height: 1.2;
        margin-bottom: 0;
    }

    &__header-btn {
        @media (max-width: 991px) {
            margin-top: vars.rem(5);
        }
    }

    &__card {
        text-align: center;
        position: relative;
        background-color: transparent;
        transition: all 0.4s ease;

        &-thumb {
            position: relative;
            padding: 0;
            overflow: visible;

            @media (max-width: 767px) {
                margin-bottom: vars.rem(10);
            }

            img {
                width: 100%;
                display: block;
                clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
                transition: all 0.4s ease;
                position: relative;
                z-index: 2;
            }

            // Top-right blue shape
            &::after {
                content: '';
                position: absolute;
                top: vars.rem(-5);
                right: vars.rem(10);
                width: vars.rem(140);
                height: vars.rem(40);
                background-color: vars.$color-primary;
                z-index: 5;
                clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
                opacity: 0;
                transition: all 0.4s ease;
            }

            // Bottom-left blue shape
            &::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: vars.rem(0);
                width: vars.rem(140);
                height: vars.rem(35);
                background-color: vars.$color-primary;
                z-index: 5;
                clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
                opacity: 0;
                transition: all 0.4s ease;
            }
        }

        &-social {
            position: absolute;
            left: vars.rem(-30);
            bottom: 0%;
            background-color: vars.$color-black;
            padding: vars.rem(25) vars.rem(18);
            border-radius: vars.rem(30) vars.rem(30) 0 0;
            display: flex;
            flex-direction: column;
            gap: vars.rem(20);
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
            z-index: 10;

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

                &:hover {
                    color: vars.$color-primary;
                }
            }
        }

        &-content {
            .designation {
                color: vars.$color-text2;
                font-size: vars.rem(14);
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1px;
                display: block;
                margin-bottom: vars.rem(10);
                text-align: end;

                @media (max-width: 575px) {
                    font-size: vars.rem(12);
                    margin-bottom: vars.rem(5);
                }
            }

            .name {
                color: vars.$color-heading;
                font-size: vars.rem(26);
                font-weight: 700;
                margin-bottom: 0;
                transition: color 0.3s;
                text-align: end;

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

                a {
                    color: vars.$color-heading;
                }

                &:hover {
                    color: vars.$color-primary;
                }
            }
        }

        &:hover {
            .team1__card-thumb {
                img {
                    transform: translateY(-5px);
                }

                &::before,
                &::after {
                    opacity: 1;
                }
            }

            .team1__card-social {
                opacity: 1;
                visibility: visible;
                left: vars.rem(5);
            }
        }
    }
}