@use "../common/utils" as *;
@use "../common/mixins" as *;

.cta-blocks {
    background: rgba(var(--color-white));
    padding-block: calc-rem(60px);

    @include media-breakpoint-up(md) {
        padding-block: calc-rem(80px);
    }

    @include media-breakpoint-up(lg) {
        padding-block: calc-rem(100px);
    }

    &__employee-cta {
        display: flex;
        flex-direction: column;
        background: rgba(var(--color-secondary));
        color: rgba(var(--color-white));
        padding: calc-rem(40px);
        height: 100%;
        border-radius: var(--border-radius);

        .employee-cta {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: calc-rem(30px);

            figure {
                background: rgba(var(--color-white));
                width: calc-rem(70px);
                height: calc-rem(70px);
                border-radius: calc-rem(5px);
                margin-right: calc-rem(20px);
            }

            & > div {
                display: flex;
                flex-direction: column;
                gap: calc-rem(5px);
            }

            .name {
                margin-bottom: 0;
                line-height: 1;
                color: rgba(var(--color-white));
                text-transform: initial;
                font-size: calc-rem(14px);
                font-weight: var(--font-weight-bold);
            }

            .job-title {
                margin-bottom: 0;
                line-height: 1;
                font-weight: var(--font-weight-medium);
            }
        }

        .title {
            color: rgba(var(--color-white));
            font-size: calc-rem(14px);
            border-bottom: calc-rem(1px) solid rgba(var(--color-white), .3);
            padding-bottom: calc-rem(10px);
            margin-bottom: calc-rem(45px);
        }

        .contact-details {
            display: flex;
            flex-direction: column;
            gap: calc-rem(20px);
            font-style: normal;

            div {
                display: flex;
                flex-direction: row;
                gap: calc-rem(10px);
                align-items: center;

                .wrapper {
                    display: flex;
                    flex-direction: column;
                    gap: 0;
                    text-align: left;
                    align-items: start;

                    svg {
                        transform: translate(calc-rem(3px));
                    }

                    a {
                        line-height: 1;
                    }


                    .label {
                        margin-bottom: 0;
                        font-weight: var(--font-weight-medium);
                        color: rgba(var(--color-background), .7);
                    }
                }
            }
        }

    }

    &__block {
        padding: calc-rem(55px) calc-rem(50px);
        border: calc-rem(1px) solid rgba(var(--color-secondary), .2);
        height: 100%;
        border-radius: var(--border-radius);
        text-align: center;
        font-size: calc-rem(14px);
        font-weight: var(--font-weight-medium);

        .title {
            font-size: calc-rem(18px);
            line-height: calc(20 / 18);
            margin-bottom: calc-rem(30px);
        }

        .stars {
            margin-bottom: calc-rem(15px);
        }

        ul {
            list-style-type: none;
            padding-left: 0;
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
            gap: calc-rem(20px);
            text-align: left;

            li {
                display: flex;
                gap: calc-rem(5px);

                svg {
                    flex: none;
                    transform: translateY(4px);
                }
            }
        }

        .icon {
            margin-inline: auto;
            display: block;
            margin-block: calc-rem(30px);
        }

        .link {
            font-size: calc-rem(14px);
            display: flex;
            gap: calc-rem(10px);
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        p {
            span {
                font-weight: var(--font-weight-extra-bold);
            }
        }

    }

}
