/* Importa as fontes do Google */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@900&display=swap');

/* --- Estrutura Geral --- */
.wpcm-block-wrapper {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0;
    font-family: sans-serif;
}

.wpcm-block__left {
    flex: 0 0 60%;
}

.wpcm-block__right {
    flex: 0 0 40%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* --- Post Principal (Esquerda) --- */
/* Item principal: layout em coluna, imagem acima e info abaixo */
.wpcm-main-item {
    display: flex;
    flex-direction: column;
    min-height: 650px;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
}

/* Área da imagem do post principal */
.wpcm-main-image {
    flex-grow: 1;
    /* Alinha a imagem centralmente e preenche o contêiner mantendo a proporção */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Área das informações (categoria + título) do post principal */
.wpcm-main-info {
    /* tom sólido de fundo para destacar o texto; pode ser personalizado */
    background: #0b8c3a;
    padding: 25px;
    box-sizing: border-box;
}

.wpcm-cat-label {
    display: inline-block;
    background: #0b8c3a;
    padding: 6px 12px;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 15px;
    border-radius: 4px;
    font-weight: 600;
}

.wpcm-main-title {
    font-family: 'Merriweather', serif;
    font-size: 42px;
    font-weight: 900;
    line-height: 1.2;
    margin: 0;
    text-align: left;
    hyphens: none;
    word-wrap: break-word;
    /* Previne hifenização automática que pode ocorrer em alguns navegadores */
    word-break: break-word;
    hyphens: none;
    color: #fff;
    /*
     * Por padrão, o título principal é limitado a no máximo três linhas para
     * não ocupar excessivamente o espaço da imagem. Esse comportamento pode
     * ser ajustado via JavaScript dependendo da configuração selecionada no
     * painel administrativo. O JavaScript poderá remover a limitação ou
     * ajustar dinamicamente a fonte quando necessário.
     */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}


/* --- Posts Menores (Direita) --- */
/* Item secundário: layout em coluna */
.wpcm-right-item {
    display: flex;
    flex-direction: column;
    min-height: 315px;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: #fff !important;
}

/* Área da imagem para posts menores */
.wpcm-right-image {
    flex-grow: 1;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Área das informações (apenas título) para posts menores */
.wpcm-right-info {
    background: #0b8c3a;
    padding: 15px;
    box-sizing: border-box;
}

/* Título dos posts menores */
.wpcm-right-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    text-align: left;
    hyphens: none;
    word-wrap: break-word;
    /* Previne hifenização automática nos títulos menores */
    word-break: break-word;
    hyphens: none;
    color: #fff;
    /*
     * Por padrão, o título das postagens menores é limitado a três linhas.
     * Essa limitação pode ser removida ou a fonte pode ser ajustada
     * dinamicamente pelo JavaScript, conforme a opção escolhida pelo usuário.
     */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}


/* --- Responsivo --- */
@media (max-width: 992px) {
    .wpcm-block-wrapper {
        flex-direction: column;
    }
    .wpcm-main-item { min-height: 500px; }
    .wpcm-right-item { min-height: 250px; }
    .wpcm-main-title { font-size: 36px; }
}

@media (max-width: 768px) {
    .wpcm-block__right {
        grid-template-columns: 1fr;
    }
    .wpcm-main-item { min-height: 400px; }
    .wpcm-right-item { min-height: 220px; }
    .wpcm-main-title { font-size: 28px; }
    .wpcm-right-title { font-size: 14px; }

    /*
     * Em dispositivos móveis, a altura dos contêineres será calculada a partir da
     * propriedade CSS `aspect-ratio`, definida inline no HTML com base nas
     * proporções reais das imagens. Portanto, removemos a altura mínima fixa
     * quando possível para permitir que o contêiner se ajuste automaticamente.
     */
    .wpcm-main-item {
        min-height: unset;
    }
    .wpcm-right-item {
        min-height: unset;
    }
}

/* --- Layout Desktop (largura acima de 992px) --- */
@media (min-width: 993px) {
    /* Transforma o wrapper principal em grid para alinhar alturas */
    .wpcm-block-wrapper {
        display: grid;
        grid-template-columns: 60% 40%;
        /* garante que a altura do contêiner se baseie no item principal */
        align-items: stretch;
    }
    /* A coluna da direita vira um grid de 2x2 que ocupa toda a altura */
    .wpcm-block__right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: 100%;
    }
    /* Cada item de post lateral ocupa toda a altura de sua célula */
    .wpcm-right-item {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    /* Remove a proporção fixa das imagens em desktop para que preencham a célula */
    .wpcm-right-image,
    .wpcm-main-image {
        aspect-ratio: auto !important;
    }
    .wpcm-right-image {
        flex: 1 0 auto;
    }
    .wpcm-main-image {
        height: 100%;
    }
}