/* =========================================================
   MOD CASESOCB – CASES (LISTAGEM / VEJA MAIS)
   Regras:
   - Grid 2 colunas (bloco)
   - Cada item (card): imagem esquerda 50% + conteúdo direita 50%
   - Imagem com tamanho visual padrão: 255x178 (desktop)
   - Imagem sempre com a mesma altura (preenche com cover)
   - Mobile: card vira vertical e imagem com 200px de altura
   - Line-clamp por variáveis
   - Badge "Premiado" (pill) por variáveis
   ========================================================= */

.casesocb-cases {
    width: 100%;
}

/* Grid: 2 colunas no desktop */
.casesocb-cases__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 15px;
    row-gap: 44px;
    width: 100%;
}

/* Card horizontal */
.casesocb-cases__card {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 22px;
    min-height: 178px;
}

/* Media ocupa 50% do card */
.casesocb-cases__media {
    flex: 0 0 50%;
    max-width: 50%;
}

/* Link da imagem */
.casesocb-cases__mediaLink {
    display: block;
    width: 100%;
    text-decoration: none;
}

/* Imagem */
.casesocb-cases__img {
    display: block;
    width: 100%;
    height: 178px;
    object-fit: cover;
    object-position: center;
    border-radius: 18px;
}

/* Conteúdo */
.casesocb-cases__content {
    flex: 1 1 50%;
    min-width: 0;
    padding-top: 2px;
    height: 178px;
}

/* Categoria */
.casesocb-cases__cat {
    font: normal normal 600 10px/12px "Inter";
    margin: 0 0 8px;
}

/* Título */
.casesocb-cases__itemTitle {
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--casesocb-title-lines, 2);
    overflow: hidden;
}

.casesocb-cases__titleLink {
    text-decoration: none;
}

/* Resumo */
.casesocb-cases__intro {
    margin: 0 0 14px;
    font: normal normal normal 12px/15px "Inter";
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--casesocb-intro-lines, 3);
    overflow: hidden;
}

/* Badge premiado */
.casesocb-cases__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--casesocb-premiado-bg, #5A7BD9);
    color: var(--casesocb-premiado-text, #FFFFFF);
}

.casesocb-cases__badgeIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.casesocb-cases__badgeText {
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
}

/* =========================================================
   BOTÃO – CARREGAR MAIS (parametrizável via XML → CSS vars)
   ========================================================= */

.casesocb-cases__loadmore {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.casesocb-cases__loadmoreBtn {
    min-width: 220px;
    height: 56px;
    padding: 0 28px;

    border-radius: 999px;
    border: 1px solid var(--casesocb-loadmore-border, #171C66);

    background: var(--casesocb-loadmore-bg, #FFFFFF);
    color: var(--casesocb-loadmore-text, #171C66);

    font-size: 1rem;
    font-weight: 600;

    cursor: pointer;
    transition: all 0.25s ease;
}

.casesocb-cases__loadmoreBtn:hover {
    background: var(--casesocb-loadmore-bg-hover, #171C66);
    color: var(--casesocb-loadmore-text-hover, #FFFFFF);
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1199px) {
    .casesocb-cases__grid {
        column-gap: 40px;
        row-gap: 36px;
    }
}

@media (max-width: 991px) {
    .casesocb-cases__grid {
        grid-template-columns: 1fr;
        row-gap: 34px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .casesocb-cases__card {
        flex-direction: column;
        gap: 14px;
    }

    .casesocb-cases__media {
        max-width: 100%;
    }

    .casesocb-cases__img {
        height: 200px;
        border-radius: 16px;
        object-position: top;
    }

    .casesocb-cases__itemTitle {
        font-size: 1.15rem;
    }

    .casesocb-cases__loadmore {
        margin-top: 36px;
    }

    .casesocb-cases__loadmoreBtn {
        width: 100%;
        max-width: 320px;
    }
}