/*
 * Página Notícias
 * (extraído dos templates — não misturar CSS com HTML)
 */

    /* --- ESTILOS DA PÁGINA DE NOTÍCIAS (LAYOUT ALTERNADO) --- */
    
    /* Variáveis base ABPC */
    .news-page-wrapper {
        background-color: var(--white); /* Fundo branco para as linhas contrastarem */
        padding-bottom: 80px;
        font-family: var(--font-body);
    }

    /* --- CABEÇALHO DA PÁGINA --- */
    .news-header {
        background: linear-gradient(rgba(0, 34, 102, 0.9), rgba(0, 51, 153, 0.95)), 
                    url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80') center/cover;
        padding: 100px 20px;
        text-align: center;
        color: var(--white);
    }

    .news-header-container {
        max-width: 800px;
        margin: 0 auto;
    }

    .news-header h1 {
        font-size: 3.2rem;
        margin: 0 0 25px 0;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .news-header h1::after {
        content: '';
        display: block;
        width: 80px;
        height: 4px;
        background-color: var(--accent-yellow);
        margin: 15px auto 0;
        border-radius: 2px;
    }

    .news-header p {
        font-size: 1.2rem;
        line-height: 1.7;
        opacity: 0.95;
        margin: 0;
    }

    /* --- CONTAINER DA LISTA DE NOTÍCIAS --- */
    .news-list-container {
        max-width: 1100px; /* Um pouco mais estreito para leitura em linha */
        margin: 0 auto;
        padding: 80px 20px;
        display: flex;
        flex-direction: column;
        gap: 60px; /* Espaço entre as linhas de notícia */
    }

    /* --- ESTRUTURA DA LINHA DE NOTÍCIA (ROW) --- */
    .news-row-item {
        display: flex;
        align-items: center; /* Centraliza verticalmente texto e imagem */
        gap: 50px;
        background-color: var(--white);
        padding: 20px;
        border-radius: var(--radius-md);
        /* Opcional: adicionar uma sombra sutil ou borda para separar as linhas */
        /* box-shadow: var(--shadow-subtle); */
        /* border-bottom: 1px solid #eee; */
    }

    /* Lógica de Alternância: Pares invertem a ordem */
    .news-row-item:nth-child(even) {
        flex-direction: row-reverse;
    }

    /* --- COLUNA DA IMAGEM --- */
    .news-image-col {
        flex: 0 0 45%; /* Largura fixa da coluna da imagem no desktop */
        max-width: 45%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .news-image-container {
        width: 100%;
        border-radius: var(--radius-md);
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        transition: transform 0.3s ease;
    }

    .news-row-item:hover .news-image-container {
        transform: translateY(-5px);
    }

    .news-image-container img {
        width: 100%;
        height: auto; /* Garante que a imagem apareça COMPLETA */
        display: block;
        object-fit: contain; /* Garante que não haja cortes mantendo a proporção */
    }

    /* --- COLUNA DO TEXTO --- */
    .news-text-col {
        flex: 1; /* Ocupa o restante do espaço */
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .news-date {
        font-size: 0.85rem;
        color: var(--primary-green);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .news-title {
        font-size: 1.8rem;
        font-weight: 700;
        margin: 0;
        line-height: 1.3;
    }

    /* Título vira o link principal */
    .news-title a {
        color: var(--primary-blue);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .news-title a:hover {
        color: var(--primary-green);
    }

    .news-excerpt {
        color: var(--text-gray);
        font-size: 1.05rem;
        line-height: 1.7;
        margin: 0;
    }

    .news-author-meta {
        font-size: 0.95rem;
        color: var(--text-dark);
        margin-top: 5px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Ajustes para conteúdo de lista dentro do resumo (Post 7) */
    .news-excerpt-list {
        margin: 10px 0 0 20px;
        padding: 0;
        list-style-type: disc;
        color: var(--text-gray);
        font-size: 0.95rem;
    }
    .news-excerpt-list li {
        margin-bottom: 5px;
    }

    /* --- AJUSTES RESPONSIVOS --- */
    @media (max-width: 992px) {
        .news-header h1 {
            font-size: 2.5rem;
        }
        .news-row-item {
            gap: 30px;
        }
        .news-title {
            font-size: 1.5rem;
        }
    }

    @media (max-width: 768px) {
        .news-header {
            padding: 70px 20px;
        }
        .news-header h1 {
            font-size: 2rem;
        }
        .news-list-container {
            padding: 50px 20px;
            gap: 50px;
        }
        /* No mobile, volta para layout de coluna única padrão */
        .news-row-item, 
        .news-row-item:nth-child(even) {
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            padding: 0; /* Remove padding interno no mobile */
        }
        .news-image-col {
            flex: 0 0 100%;
            max-width: 100%;
            width: 100%;
        }
        .news-text-col {
            width: 100%;
        }
    }