@import "default.css";

/* Contêiner Principal */
#section-id-1739822751566 > .sppb-row-container {
    max-width: 990px;
    padding-top: 0 !important;
}

.sppb-addon-single-image-container{
    display: block !important;
}


/* Container geral com espaçamento */
.sppb-row-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

/* Espaçamento interno das linhas */
#section-id-1739822751566 > .sppb-row-container > .sppb-row {
    margin: 0 -15px;
}

.sp-pagebuilder-row,
.sppb-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

/* Espaçamento interno para colunas */
#section-id-1739822751566 > .sppb-row-container > .sppb-row > div {
    padding: 0 15px;
}

/* Definindo largura das colunas (3 colunas) */
#column-wrap-id-0,
#column-wrap-id-1,
#column-wrap-id-2 {
    max-width: 33.3333%;
    flex-basis: 33.3333%;
}

/* Estilização das colunas (card) */
#column-id-0,
#column-id-1,
#column-id-2 {
    padding: 10px;
    border: 1px solid #4d80cf;
    border-radius: 10px;
}

/* Flex para manter os cards com altura completa e empurrar o botão para baixo */
.sppb-column {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.sppb-column-addons {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* O botão dentro do card vai ficar no final */
.sppb-column-addons .addon-root-button {
    margin-top: auto;
}

/* Imagem: sempre 100% da largura do container, altura fixa, com corte se necessário */
.img-box {
    border-radius: 10px;
    width: 100% !important;
    max-width: 100% !important;
    height: 180px;
    object-fit: cover;
}

/* Título e Descrição */
.title-box {
    margin: 0;
    padding: 0;
    color: #171c66;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    text-align: left;
}

.description-box {
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    height: 100px;
    overflow: hidden; /* Para evitar que textos muito longos quebrem o layout */
    text-overflow: ellipsis;
}

/* Botão "Saiba mais" */
.btn-readmore-box {
    background-color: transparent;
    border: 1px solid #4d80cf;
    color: #4d80cf;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 12px;
    padding: 12px 48px;
    border-radius: 100px;
}

/* Centralização do botão */
.text-center {
    padding: 10px 0;
}

/* Altura fixa para cabeçalho, se necessário */
.box-texto-inova .sppb-addon.sppb-addon-header {
    height: 70px;
}

/* Cor do texto da descrição */
.text-description {
    color: #171c66;
}

/* ===================== */
/* MEDIA QUERIES */
/* ===================== */

/* Para telas até 1200px */
@media screen and (max-width: 1200px) {
    .sppb-row-container {
        max-width: 1140px;
    }
}

/* Para telas até 992px */
@media screen and (max-width: 992px) {
    /* Reduz a largura das colunas para 50% (2 colunas) */
    #column-wrap-id-0,
    #column-wrap-id-1,
    #column-wrap-id-2 {
        max-width: 50%;
        flex-basis: 50%;
    }
}

/* Para telas até 768px */
@media screen and (max-width: 768px) {
    /* Colunas ocupam 100% da largura (1 coluna) */
    #column-wrap-id-0,
    #column-wrap-id-1,
    #column-wrap-id-2 {
        max-width: 100%;
        flex-basis: 100%;
        padding-bottom: 20px;
    }

    /* Ajusta fontes e espaçamentos se necessário */
    .title-box {
        font-size: 16px;
    }

    .description-box {
        font-size: 11px;
        height: auto; /* Permite que o conteúdo se ajuste */
    }

    .btn-readmore-box {
        padding: 10px 30px;
        font-size: 11px;
    }
}

/* Para telas até 576px */
@media screen and (max-width: 576px) {
    /* Reduz margens e paddings se necessário */
    .sppb-row-container {
        padding: 0 10px;
    }

    .sppb-column-addons {
        padding: 0;
    }
}