/*
    Block: Contact
    Note: Selectors must start with .block-contact
*/

@layer blocks {
    .block-contact .text-content > p {
        max-width: 21rem;
    }

    .block-contact .tab-content:not(.active) {
        display: none;
    }

    .block-contact .text-container .divider {
        --gap: 2.5rem;
        margin: var(--gap) auto var(--gap) 0;
        border: 0;
        height: 1px;
        width: 2.8125rem;
        background-color: var(--c-light-grey);
    }

    .block-contact .contacts {
        gap: 2.125rem;
    }

    .block-contact .channel-list {
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 0.9375rem;
    }

    .block-contact .channel-list li a {
        text-decoration: none;
        color: var(--c-dark-blue);
    }

    .block-contact .contacts .address {
        margin: 0;
    }

    .block-contact .contacts .social-list {
        margin:0;
        padding:0;
        list-style: none;
        gap: 1.25rem;
    }

    .block-contact .social-list .bs-icon {
        color: var(--c-dark-blue);
    }

    .block-contact .forms-container {
        background-color: #F4F5F7;
        padding: 3.125rem 2.5rem;
        --border-stroke: hsl(226 50% 27% / 15%);
        border: 1px solid var(--border-stroke);
    }

    .block-contact .tabs-wrapper {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        margin-bottom: 3.125rem;
    }

    .block-contact .tabs-wrapper .tab {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        border: 0;
        padding: 0;
        margin: 0;
        background: none;
        color: inherit;
        font: inherit;
        line-height: inherit;
        text-align: center;
        letter-spacing: -.05em;
        cursor: pointer;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding-bottom: 1.375rem;
        --border-stroke: hsl(226 50% 27% / 15%);
        border-bottom: 1px solid var(--border-stroke);
    }

    .block-contact .tabs-wrapper .tab.active {
        border-bottom: 1px solid var(--c-orange);
        color: var(--c-dark-blue);
        font-weight: 500;
    }

    .block-contact :is(.channel, .social) a {
        --transition-dur: 120ms;
        --transition-func: ease-in-out;
        -webkit-transition: opacity var(--transition-dur) var(--transition-func);
        transition: opacity var(--transition-dur) var(--transition-func);
    }

    .block-contact :is(.channel, .social) a:is(:hover, :focus) {
        opacity: .5;
    }

    @media screen and (width <= 620px) {
        .block-contact .main-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: 3.75rem;
            padding-inline: .5625rem;
        }
        .block-contact .text-content,
        .block-contact .contacts {
            --gap: 1.5625rem;
        }
        .block-contact .text-container .divider {
            --gap: 1.875rem;
        }
        .block-contact .tabs-wrapper .tab {
            padding-bottom: 1.125rem;
        }
        .block-contact .tabs-wrapper {
            margin-bottom: 2.375rem;
        }
        .block-contact .forms-container {
            padding: 2.375rem 1.5rem 1.5rem;
        }
    }
}