/* ================= BLOG - HERO SECTION ================= */
.blog-hero {
    background-color: transparent; 
    padding: 200px 0 140px 0; /* Mesmo espaçamento padrão */
}

/* Subtítulo */
.blog-subtitle {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 11px;
    color: #5D7A9E; 
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 24px;
}

.blog-subtitle .line {
    width: 32px;
    height: 1px;
    background-color: #5D7A9E;
}

/* Título Principal */
.blog-title {
    font-size: 60px; 
    color: #FFFFFF;
    font-weight: 300; 
    margin-bottom: 24px;
    letter-spacing: -1px;
}

/* Destaque na palavra "Acropolis" */
.blog-title .highlight {
    color: #6E9AC8; 
}

/* Descrição */
.blog-description {
    font-size: 18px;
    color: #9CA3AF; 
    line-height: 1.6;
    font-weight: 300; 
    max-width: 650px; 
}

/* ================= SEÇÃO DE POSTS DO BLOG ================= */
.blog-posts-section {
    background-color: #FAFBFC; /* Fundo gelo clarinho */
    padding: 60px 0 120px 0;
}

/* --- Barra de Ferramentas (Filtros e Ordenação) --- */
.blog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.blog-filters {
    display: flex;
    gap: 12px;
}

.filter-btn {
    background-color: #FFFFFF;
    color: #101E35;
    border: 1px solid #101E35; /* Borda escura do seu print */
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.filter-btn:hover {
    background-color: #F3F4F6; /* Efeito suave ao passar o mouse */
}

.filter-btn.active {
    background-color: #0F1E36;
    color: #FFFFFF;
    border-color: #0F1E36;
}

/* Ordenação */
/* Container da Ordenação */
.blog-sort {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #6486AD; /* Cor azul acinzentada do texto "Ordenar por:" */
}

/* O Dropdown em si */

/* ================= DROPDOWN CUSTOMIZADO ================= */

/* Container Principal */
.custom-dropdown {
    position: relative; /* Necessário para a lista flutuar embaixo dele */
}

/* O "Botão" que parece um select */
.dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 50px; /* Formato pílula */
    color: #101E35;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    min-width: 160px; /* Largura mínima para não encolher muito */
    transition: border-color 0.3s ease;
}

.dropdown-btn:hover {
    border-color: #6E9AC8; /* Borda fica azul ao passar o mouse */
}

/* A setinha gira quando o menu abre */
.dropdown-btn svg {
    transition: transform 0.3s ease;
}
.custom-dropdown.open .dropdown-btn svg {
    transform: rotate(180deg);
}

/* A Caixinha de Opções (Escondida por padrão) */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px); /* Fica logo abaixo do botão com 8px de respiro */
    left: 0;
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px; /* Bordas arredondadas da caixinha */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Sombra elegante */
    list-style: none;
    padding: 8px 0;
    margin: 0;
    
    /* Efeito de surgimento suave */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100; /* Fica por cima dos cards do blog */
}

/* Mostra a caixinha quando a classe .open é adicionada pelo JS */
.custom-dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Cada Item da Lista */
.dropdown-item {
    padding: 10px 18px;
    color: #8FA3B8; /* Cor cinza padrão */
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover no item */
.dropdown-item:hover {
    background-color: #F9FAFB;
    color: #101E35; /* Fica escuro ao passar o mouse */
}

/* Item selecionado (Ativo) */
.dropdown-item.active {
    color: #2D5B8E;
    font-weight: 500;
    background-color: #F0F4F8; /* Azul bem clarinho de fundo */
}

/* --- Grid de Cards --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- Estilo do Card de Blog --- */
.blog-card {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}

.card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A tag sobre a imagem */
.card-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: rgba(255, 255, 255, 0.85);
    color: #6E9AC8; /* Azul claro do protótipo */
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

.card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Faz o conteúdo empurrar o rodapé do card para baixo */
}

.card-meta {
    font-size: 12px;
    color: #6E9AC8;
    margin-bottom: 12px;
    font-weight: 500;
}

.card-title {
    font-size: 20px;
    color: #101E35;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 12px;
}

.card-excerpt {
    font-size: 14px;
    color: #8FA3B8;
    line-height: 1.6;
    margin-bottom: 24px;
    /* Corta o texto em 3 linhas com reticências */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-footer {
    margin-top: auto; /* Joga o rodapé lá pra baixo */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.read-more {
    font-size: 14px;
    color: #2D5B8E;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s;
}

.read-more:hover {
    color: #0F1E36;
}

/* Botão circular da seta */
.icon-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #E2E8F0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8FA3B8;
    text-decoration: none;
    font-size: 16px;
    font-weight: 300;
    transition: all 0.3s;
}

.icon-btn:hover {
    background-color: #2D5B8E;
    color: #FFFFFF;
    border-color: #2D5B8E;
}

/* =========================================================================
   ======================= CORREÇÃO MOBILE - PÁGINA BLOG ===================
   ========================================================================= */

@media (max-width: 768px) {
    
    /* ================= HERO SECTION ================= */
    .blog-hero {
        padding: 220px 0 80px 0; /* Compensa a altura do menu e tira o buraco embaixo */
    }

    .blog-title {
        font-size: 36px; /* Reduz o título para caber na tela sem quebrar a palavra "Acropolis" */
    }

    .blog-description {
        font-size: 15px; /* Fonte mais adequada para leitura contínua no celular */
    }

    /* ================= POSTS E FILTROS ================= */
    .blog-posts-section {
        padding: 60px 0;
    }

    /* Barra de ferramentas que tem os botões e a ordenação */
    .blog-toolbar {
        flex-direction: column; /* Empilha os filtros e o campo de ordenação */
        align-items: flex-start; /* Alinha os dois pela esquerda */
        gap: 20px;
        margin-bottom: 30px;
    }

    /* Botões de Filtro ("Todos", "Energia", etc) */
    .blog-filters {
        /* Permite que os botões quebrem de linha se não couberem na tela do celular */
        flex-wrap: wrap; 
        gap: 8px; /* Diminui o espaço entre eles */
    }

    .filter-btn {
        padding: 8px 16px; /* Botões ligeiramente menores */
        font-size: 13px;
    }

    /* O dropdown de "Ordenar por:" */
    .blog-sort { /* <-- ADICIONE O PONTO AQUI */
        display: flex; /* Adicione o flex também para garantir o alinhamento no mobile */
        width: auto; 
        justify-content: flex-start; 
        gap: 12px; 
    }

    .sort-select {
        flex-grow: 0; /* Impede que a caixa estique sozinha */
        width: auto; /* O botão abraça apenas o tamanho do texto "Mais recente" */
        padding: 8px 36px 8px 16px; /* Ajusta o respiro mantendo espaço para a setinha na direita */
    }

    /* ================= GRID DE CARDS ================= */
    .blog-grid {
        /* Transforma os 3 cards do desktop em 1 coluna vertical no celular */
        grid-template-columns: 1fr; 
        gap: 24px; /* Espaço entre os cards empilhados */
    }

    /* ================= O CARD DO POST (MOBILE) ================= */
    .card-image {
        aspect-ratio: auto; /* Remove a proporção original do desktop */
        height: 160px; /* Fixa uma altura bem mais fina e proporcional ao celular */
    }

    .card-content {
        /* Reduz o excesso de espaço vazio interno do card */
        padding: 16px; 
    }

    .card-meta {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .card-title {
        font-size: 16px; /* Título um pouco mais compacto */
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .card-excerpt {
        font-size: 13px; /* Texto menor para leitura rápida */
        line-height: 1.5;
        margin-bottom: 16px; /* Menos buraco antes do botão */
        display: -webkit-box; /* Adicionado para tirar o erro amarelo */
        -webkit-box-orient: vertical; /* Adicionado para tirar o erro amarelo */
        -webkit-line-clamp: 2; /* Mantém o limite de 2 linhas */
        overflow: hidden; /* Garante que o texto extra suma */
    }

    .card-tag {
        /* Deixa a tag sobre a imagem um pouco mais delicada */
        padding: 4px 12px;
        font-size: 9px;
    }

    /* Reduz um pouquinho o botão redondo da seta para combinar com o novo tamanho */
    .icon-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

}