/* Estilo automático para a página: associacoes */
section.filter {
    background-color: #efefef;
    margin: 82px;

    .tabs {
        padding: 8px;
        background-color: #FFF;
        border-radius: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .filter-btn {
        width: fit-content;
        display: inline-block;
        color: #2A373A;
        border-radius: 5px;
        font-family: 'Linear Grotesk';
        font-size: 18px;
        border: none;
        background-color: transparent;
        transition: 300ms all ease-in-out;
        padding: 8px 16px;

        &.active {
            background-color: #00687E;
            color: #fff;
        }
    }

    button.cta {
        pointer-events: auto;
        background-color: #00687C;
        color: #FFFFFF;
        border: none;
        font-weight: 600;
        text-decoration: none;
        padding: 14px 24px;
        border-radius: 8px;
        display: inline-block;
        transition: 300ms all ease-in-out;
        width: fit-content;

        &:hover {
            background-color: #005a6b;
        }
    }
}

section.associacoes {
    h2 {
        font-weight: 400;
    }

    .card {
        position: relative;
        overflow: hidden;
        width: 100%;

        .card-thumb {
            z-index: 0;
            img {
                width: 100%;
                height: auto;
                display: block;
                object-fit: cover;
            }
        }

        .overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, #00343E, rgba(11, 46, 67, 0.5) 58%, rgba(17, 44, 70, 0.25) 76%, rgba(23, 41, 73, 0) 100%);
            mix-blend-mode: multiply;
            z-index: 1;
        }

        .card-body {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: end;
            align-items: center;
            flex-direction: column;
            gap: 24px;
            z-index: 2;
            padding: 24px 32px;

            span,
            h3,
            p {
                color: #FFFFFF;
            }

            span {
                text-transform: uppercase;
                font-size: 15px;
                font-weight: 700;
                padding: 8px 16px;
                border-radius: 8px;
                background-color: #00B5EE;
            }

            a.cta {
                width: 100%;
                text-align: center;
                margin: 0;
            }
        }
    }
}

#associacoes-result.loading {
    opacity: .4;
    pointer-events: none;
    transition: opacity .3s ease;
}

.ajax-loader {
    width: 40px;
    height: 40px;
    border: 4px solid #ddd;
    border-top: 4px solid #006A7E;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 24px auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


@media (width <=992px) {
    section.filter {
        margin: 32px 16px;
        padding: 48px 0;

        button.cta {
            width: 100%;
        }
    }
}