@use "../mixins" as *;
@use "../media" as *;


.contacts {
    margin-top: 95px;
    overflow-x: hidden;

    &__inner {
        padding-top: calc(var(--section-padding-y) * 2);
        padding-bottom: var(--section-padding-y);
        display: flex;
        flex-direction: column;
        row-gap: 2.5em;

        @include desktop-wide {
            padding-top: var(--section-padding-y);
        }

        @include tablet {
            padding-bottom: calc(var(--section-padding-y) / 2);
        }
    }

    &__header {
        position: relative;
        word-break: break-word;

        @include desktop-wide {
            display: flex;
            flex-direction: column;
        }
    }

    &__title {
        line-height: 95%;

        @include mobile-s {
            width: 100%;
            margin-inline: 0;
        }
    }

    &__subtitle {
        @include fluid-text(20, 18);

        position: absolute;
        top: 0;
        right: 0;
        left: 47%;
        max-width: 53%;
        line-height: 1.25em;
        font-weight: 400;
        color: var(--color-dark-80);
        margin-top: 1em;
        transition: color var(--transition-duration-03);

        @include desktop-wide {
            position: initial;
            max-width: initial;
            order: 1;
        }
    }

    &__body {
        display: flex;
        gap: 50px 160px;
        padding-block: 50px;

        @include desktop-wide {
            column-gap: 120px;
        }

        @include desktop {
            column-gap: 70px;
        }

        @include tablet {
            flex-direction: column;
            gap: 0 40px;
            padding-block: 30px;
        }
    }

    & .info {
        flex-basis: 570px;

        &__header {
            line-height: 100%;
            margin-bottom: 0.5em;
        }

        &__content {
            @include tablet {
                column-count: 2;
                column-gap: 3em;
            }

            @include mobile {
                column-count: 1;
                column-gap: 0;
            }
        }

        &__block {
            break-inside: avoid;
            page-break-inside: avoid
        }

        @include desktop-wide {
            max-width: 100%;
        }

        @include tablet {
            flex-basis: auto;
            padding-bottom: 2em;
        }
    }

    & .address {
        flex-grow: 1;
        height: 100%;
        position: relative;

        &__map {
            margin-block: 30px 20px;
            margin-right: calc(-1 * ((100vw - var(--container-width-wide)) / 2 + var(--container-padding-x)) + 20px);

            & iframe {
                border-radius: var(--border-radius-20) 0 0 var(--border-radius-20);
                border: 3px solid var(--color-light-accent-3);
                width: 100%;
                min-height: 480px;
                height: 100%;
                transition: border var(--transition-duration-03);

                @include tablet {
                    border-radius: var(--border-radius-20);
                }
            }

            @include desktop-wide {
                margin-right: calc(-1 * (var(--container-padding-x)));
            }

            @include tablet {
                margin-right: initial;
            }
        }

        &__note {
            @include flex-center(flex-start);

            column-gap: 10px;
            font-size: var(--font-size-alt);
            color: var(--color-dark-50);

            &-icon {
                @include square(35px);

                min-width: 35px;
                border-radius: var(--border-radius-5);
                background: var(--color-stable-dark-alt) url("../img/contacts/contacts-note-icon.svg") no-repeat center;
            }
        }

        &::after {
            content: "";
            position: absolute;
            top: -50px;
            right: -10000px;
            bottom: -50px;
            left: -7%;
            background-color: var(--color-light-accent);
            z-index: -100;
            border-radius: var(--border-radius-50);

            @include tablet {
                display: none
            }
        }

        @include tablet {
            padding: 40px 30px;
            background-color: var(--color-light-accent);
            border-radius: var(--border-radius-20);
        }

        @include mobile {
            margin-inline: calc(-1 * var(--container-padding-x));
            padding-inline: var(--container-padding-x);
        }
    }

    & .contact {
        @include flex-center(flex-start);

        column-gap: 15px;
        margin-block: 1em;


        &__icon {
            @include square(40px);

            background-color: var(--color-accent);
            border-radius: var(--border-radius-5);
            min-width: 40px;

            &--mail {
                background: var(--color-accent) url("../img/contacts/contacts-mail-icon.svg") no-repeat center;
            }

            &--support {
                background: var(--color-accent) url("../img/contacts/contacts-support-icon.svg") no-repeat center;
            }

            &--phone {
                background: var(--color-accent) url("../img/contacts/contacts-phone-icon.svg") no-repeat center;
            }

            &--time {
                background: var(--color-accent) url("../img/contacts/contacts-time-icon.svg") no-repeat center;
            }

            &--marker {
                background: var(--color-accent) url("../img/contacts/contacts-marker-icon.svg") no-repeat center;
            }
        }

        &__text {
            font-weight: 600;
            color: var(--color-dark);
            cursor: pointer;
            word-break: break-word;
            transition: color var(--transition-duration-03);
        }
    }
}