/**
 * @package     com_technicalreports
 * @subpackage  mod_technicalreports
 * @copyright   2024 Hirlei Carlos Pereira de Araújo
 * @license     GNU General Public License versão 2 ou posterior; consulte o arquivo License. txt
 * @author      Hirlei Carlos Pereira de Araújo <prof.hirleicarlos@gmail.com>
 *
 * Seção "Conheça as newsletters" — reaproveita a linguagem visual do card da
 * biblioteca (cards.css) e ajusta apenas o que muda: 4 colunas e o link para a
 * última edição no rodapé.
 */

/* Linha fina abaixo do título, como na referência. */
.mod-informes .informes__newsletters .informes__section-title {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--informes-borda);
}

/* =========================================================
   CAPA COLORIDA
   A cor vem de `--informes-nl-cor`, definida por card a partir do parâmetro.
   O chip tem cor própria (`--informes-nl-chip`) — são dois campos distintos.
   ========================================================= */

.mod-informes .informes__nl-capa {
    /*
     * Coluna, nao linha. Em `display: flex` sem direcao, o texto solto e o
     * <span> da ultima palavra viram dois itens LADO A LADO - o `display:
     * block` do span nao surte efeito e o nome fica todo em uma linha.
     */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 22px 20px;
    background: var(--informes-nl-cor, var(--informes-navy));
    /* Branco a 92%: o nome recua um passo sem perder legibilidade sobre a cor. */
    color: rgba(255, 255, 255, .92);
    font-family: var(--informes-fonte-titulo);
    font-size: 22px;
    line-height: 1.15;
    font-weight: var(--weight-light, 300);
}

/*
 * A ultima palavra do nome sempre cai em uma linha propria, como no layout.
 * Quem separa a palavra e o PHP; aqui so viramos o <span> em bloco. Assim a
 * quebra nao depende da largura do card: nao vira uma linha so quando sobra
 * espaco, nem quebra em lugar errado quando falta.
 */
.mod-informes .informes__nl-capa-ultima {
    display: block;
}

/*
 * Chip da periodicidade: cor própria, vinda do parâmetro de cada newsletter.
 * Era derivado da capa com `color-mix`, mas o pastel resultante não batia com a
 * paleta definida no design — agora é escolhido diretamente.
 */
.mod-informes .informes__card--newsletter .informes__chip--periodicidade {
    left: 20px;
    transform: none;
    --informes-chip-bg: var(--informes-nl-chip, #C4FFFF);
    color: var(--informes-navy);
}

.mod-informes .informes__newsletters-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--informes-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mod-informes .informes__newsletters-item {
    display: flex;
    min-width: 0;
}

.mod-informes .informes__card--newsletter .informes__card-media {
    aspect-ratio: 16 / 9;
}

.mod-informes .informes__card-footer--newsletter {
    justify-content: flex-start;
}

.mod-informes .informes__link-edicao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--informes-navy);
    text-decoration: none;
}

.mod-informes .informes__link-edicao:hover {
    text-decoration: underline;
}

.mod-informes .informes__link-seta {
    display: inline-flex;
    transition: transform .2s ease;
}

.mod-informes .informes__link-edicao:hover .informes__link-seta {
    transform: translateX(3px);
}

@media (max-width: 1199.98px) {
    .mod-informes .informes__newsletters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .mod-informes .informes__newsletters-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}