/* =================================================================== */
/* ORGANIZADOR DE POSTS V8.0.0 - VERSÃO OFICIAL FINAL                  */
/* =================================================================== */

/* -------------------------------------- */
/* 1. VARIÁVEIS DE COR E ESTILOS GLOBAIS
/* -------------------------------------- */
:root {
    --azul-brasil: #002776;
    --verde-brasil: #009c3b;
    --amarelo-brasil: #ffdf00;
    --branco: #ffffff;
    --cinza-texto: #4a4a4a;
    --cinza-texto-claro: #777;
    --cinza-borda: #dcdcdc;
    --cinza-fundo-claro: #f0f0f0;
    --cinza-placeholder: #e9ecef;
    --cinza-placeholder-texto: #6c757d;
    --sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.08);
    --transicao-padrao: all 0.3s ease;
}

/* =================================================================== */
/* 2. ESTILOS PARA GALERIA E POST COMPLETO
/* =================================================================== */
.galeria-leitura-completa .projeto-completo-item,
.leitura-projeto-unico .projeto-completo-item {
    background-color: var(--branco);
    padding: 25px;
    border: 1px solid var(--cinza-borda);
    border-radius: 8px;
    margin-bottom: 40px;
    box-shadow: var(--sombra-suave);
}

.projeto-info-header { margin-bottom: 25px; }
.projeto-completo-titulo { font-size: 2.2rem; font-weight: 700; color: var(--azul-brasil); margin: 10px 0 15px 0; }
.projeto-completo-meta { font-size: 0.9em; color: var(--cinza-texto-claro); }
.projeto-completo-meta .meta-autor { margin-right: 20px; }

/* **NOVO** Estilo para o texto "Leia o projeto..." */
.leitura-prompt {
    font-size: 0.9em;
    color: var(--cinza-texto-claro);
    margin: 25px 0 5px 0;
    text-align: center;
}

.projeto-completo-conteudo { line-height: 1.7; color: var(--cinza-texto); margin-top: 5px; padding-top: 15px; border-top: 1px solid var(--cinza-borda); }
.projeto-completo-conteudo a { color: var(--azul-brasil); font-weight: 600; text-decoration: none; }
.projeto-completo-conteudo a:hover { text-decoration: underline; }

/* **ALTERADO** Container da imagem agora é relativo para a legenda absoluta */
figure.projeto-imagem-com-legenda { 
    position: relative;
    margin: 0; 
    line-height: 0; 
    overflow: hidden; /* Garante que a legenda não vaze */
    border-radius: 8px;
}
figure.projeto-imagem-com-legenda img { width: 100%; height: auto; max-height: 450px; object-fit: cover; display: block; }

/* **ALTERADO** Legenda agora é um overlay no canto inferior esquerdo */
figcaption.projeto-imagem-legenda { 
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto; 
    max-width: 80%;
    background: rgba(0, 0, 0, 0.7);
    color: var(--branco);
    padding: 5px 10px; 
    font-size: 0.75em; 
    font-style: normal;
    text-align: left; 
    line-height: 1.4;
    border-radius: 0 5px 0 0; /* Raio no canto superior direito da legenda */
    margin: 0;
}

/* -------------------------------------- */
/* 3. TAGS DE PROJETO (TIPO E TEMA)
/* -------------------------------------- */
.projeto-tags-container { display: flex; flex-wrap: wrap; gap: 8px; }
.projeto-tag { padding: 5px 12px; font-size: 0.75em; border-radius: 4px; font-weight: bold; text-transform: uppercase; color: var(--branco); }
.projeto-tag.tipo-tag { background-color: var(--verde-brasil); }
.projeto-tag.tema-tag { background-color: var(--azul-brasil); }

/* =================================================================== */
/* 4. ESTILOS PARA DESTAQUES (SIDEBAR E HORIZONTAL)
/* =================================================================== */

/* 4.1. DESTAQUES NA SIDEBAR (ORIGINAL - IMAGEM CIRCULAR) */
.ela-sb-bloco { display: grid; gap: 15px; }
.ela-sb-item { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 8px; border-radius: 8px; transition: var(--transicao-padrao); }
.ela-sb-item:hover { background-color: var(--cinza-fundo-claro); }
.ela-sb-imagem-wrap { flex-shrink: 0; }
.ela-sb-imagem-wrap img, .ela-sb-imagem-wrap .placeholder-imagem { width: 45px; height: 45px; object-fit: cover; border-radius: 50%; display: block; }
.ela-sb-conteudo { display: flex; flex-direction: column; }
.ela-sb-titulo { margin: 0; font-size: 0.9rem; color: var(--cinza-texto); font-weight: 600; line-height: 1.3; transition: color 0.2s ease; }
.ela-sb-item:hover .ela-sb-titulo { color: var(--azul-brasil); }
.ela-sb-data { font-size: 0.75rem; color: var(--cinza-texto-claro); margin-top: 3px; }

/* 4.2. DESTAQUES NA SIDEBAR NOVO (IMAGEM RETANGULAR COM LEGENDA) */
.ela-sb-novo-bloco { display: grid; gap: 15px; }
.ela-sb-novo-item { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 8px; border-radius: 8px; transition: var(--transicao-padrao); }
.ela-sb-novo-item:hover { background-color: var(--cinza-fundo-claro); }
.ela-sb-novo-imagem-wrap { flex-shrink: 0; position: relative; width: 50px; height: 20px; }
.ela-sb-novo-imagem-wrap img, .ela-sb-novo-imagem-wrap .placeholder-imagem { width: 50px; height: 20px; object-fit: cover; border-radius: 4px; display: block; }
.ela-sb-novo-imagem-wrap figcaption.projeto-imagem-legenda { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.7); color: var(--branco); font-size: 7px; line-height: 1.2; padding: 1px 3px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 0 0 4px 4px; box-sizing: border-box; }
.ela-sb-novo-conteudo { display: flex; flex-direction: column; }
.ela-sb-novo-titulo { margin: 0; font-size: 0.9rem; color: var(--cinza-texto); font-weight: 600; line-height: 1.3; transition: color 0.2s ease; }
.ela-sb-novo-item:hover .ela-sb-novo-titulo { color: var(--azul-brasil); }
.ela-sb-novo-data { font-size: 0.75rem; color: var(--cinza-texto-claro); margin-top: 3px; }

/* 4.3. DESTAQUES NA HORIZONTAL */
.bloco-destaques-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.card-destaque-horizontal { text-decoration: none; background-color: var(--branco); border-radius: 8px; overflow: hidden; box-shadow: var(--sombra-suave); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
.card-destaque-horizontal:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); }
.card-horizontal-imagem { line-height: 0; }
.card-horizontal-imagem img, .card-horizontal-imagem .placeholder-imagem { width: 100%; height: 150px; object-fit: cover; }
.card-horizontal-conteudo { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
.card-horizontal-conteudo h4 { color: var(--azul-brasil); margin: 0; font-size: 1rem; font-weight: 600; flex-grow: 1; }
.card-horizontal-data { font-size: 0.8rem; color: var(--cinza-texto-claro); margin-top: 8px; }

/* =================================================================== */
/* 5. ESTILOS PARA BANCO DE MATERIAIS
/* =================================================================== */
.ela-filtro-container { background-color: var(--cinza-fundo-claro); padding: 20px; border-radius: 8px; margin-bottom: 40px; border: 1px solid var(--cinza-borda); }
.ela-filtro-campos { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; }
.ela-filtro-campo { display: flex; flex-direction: column; flex: 1 1 180px; }
.ela-filtro-campo label { font-size: 0.85em; font-weight: 600; margin-bottom: 5px; color: var(--cinza-texto); }
.ela-filtro-input, .ela-filtro-select, #tipo_material_filtro { padding: 10px; border-radius: 5px; border: 1px solid var(--cinza-borda); background-color: var(--branco); height: 43px; font-size: 0.9rem; transition: var(--transicao-padrao); }
.ela-filtro-input:focus, .ela-filtro-select:focus, #tipo_material_filtro:focus { outline: none; border-color: var(--azul-brasil); box-shadow: 0 0 0 2px rgba(0, 39, 118, 0.2); }
.ela-filtro-campo.submit-campo { flex-grow: 0; }
.ela-filtro-campo button { background-color: var(--azul-brasil); color: var(--branco); border: none; padding: 10px 20px; height: 43px; border-radius: 5px; font-size: 0.9rem; font-weight: bold; cursor: pointer; transition: var(--transicao-padrao); }
.ela-filtro-campo button:hover { background-color: #001a50; }
.ela-lista-materiais { list-style: none; padding: 0; margin: 0; }
.ela-material-item { border-bottom: 1px solid var(--cinza-borda); }
.ela-material-item-link { display: flex; justify-content: space-between; align-items: center; padding: 15px 10px; text-decoration: none; transition: var(--transicao-padrao); }
.ela-material-item-link:hover { background-color: var(--cinza-fundo-claro); }
.ela-material-item-titulo { color: var(--azul-brasil); font-weight: 600; }
.ela-material-item-meta { font-size: 0.8rem; color: var(--branco); background-color: var(--verde-brasil); padding: 4px 8px; border-radius: 4px; white-space: nowrap; margin-left: 15px; }

/* =================================================================== */
/* 6. ESTILOS GERAIS (PLACEHOLDER DE IMAGEM)
/* =================================================================== */
.placeholder-imagem { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--cinza-placeholder); text-align: center; }
.placeholder-logo { display: block; width: 48px; height: 48px; background-image: url('https://escolaslegislativas.com.br/wp-content/uploads/2024/02/Logo-Escolas-do-Legislativo-1.png'); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.5; }
.placeholder-texto { color: var(--cinza-placeholder-texto); font-size: 0.8em; font-weight: 500; margin-top: 8px; }
.placeholder-imagem.grande { height: 450px; border-radius: 8px; }
.placeholder-imagem.media { height: 150px; }
.placeholder-imagem.pequena { width: 45px; height: 45px; }
.placeholder-imagem.pequena.circular { border-radius: 50%; }
.placeholder-imagem.pequena.quadrada { border-radius: 4px; }
.placeholder-imagem.pequena .placeholder-logo { width: 20px; height: 20px; }
.placeholder-imagem.pequena .placeholder-texto { font-size: 0.6em; margin-top: 2px; }

/* =================================================================== */
/* 7. RESPONSIVIDADE
/* =================================================================== */
@media (max-width: 900px) { .bloco-destaques-horizontal { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
@media (max-width: 480px) { .projeto-completo-titulo { font-size: 1.8rem; } .ela-material-item-link { flex-direction: column; align-items: flex-start; gap: 10px; } }