/* =================================================================
   POST PAGE - ESTILO EDITORIAL CONCISO & IMPACTANTE
   ================================================================= */

/* --- 1. Hero Minimalista (Sem Ruído) --- */
.post-hero-section {
    padding: 50px 0 30px;
    text-align: center;
    border-bottom: 1px solid var(--cor-borda);
    background: #fff; /* Fundo branco puro, sem degradê */
}

.post-meta-premium {
    font-family: var(--fonte-corpo);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cor-secundaria);
    margin-bottom: 15px;
    font-weight: 600;
}

.post-huge-title {
    font-family: var(--fonte-titulo);
    font-size: clamp(2rem, 4vw, 3.5rem); /* Um pouco menor, mais conciso */
    line-height: 1.15;
    color: var(--cor-titulo);
    margin: 0 auto;
    letter-spacing: -0.03em; /* Muito apertado, elegante */
}

.post-subtitle { display: none; /* Removido para mais impacto direto */ }

/* --- 2. O "Frame" da Imagem (Visualização Fixa) --- */
/* 
   O segredo para a imagem "independente do tamanho":
   O aspecto-ratio garante que a forma nunca distorça.
   A borda preta cria o objeto "foto".
*/
.post-featured-wrapper {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    background: #fafafa; /* Fundo leve atrás da foto para destacar o quadro */
    padding: 60px 0;
    border-bottom: 1px solid var(--cor-borda);
}

.post-hero-img {
    max-width: 900px; /* Largura máxima fixa */
    width: 100%;
    aspect-ratio: 16/9; /* Formato cinematográfico/paisagem fixo */
    object-fit: cover;
    object-position: center;
    border: 1px solid #000; /* A borda preta (O Quadro) */
    box-shadow: 0 20px 40px rgba(0,0,0,0.05); /* Leve elevação */
    filter: grayscale(100%); /* Mantém o tom P&B */
}

/* --- 3. Área de Texto (Concisa) --- */
.post-main-wrapper {
    padding: 80px 0 120px;
}

.post-article-body {
    max-width: 680px; /* Largura mais estreita = mais foco e rapidez na leitura */
    margin: 0 auto;
}

.post-article-body p {
    font-size: 1.1rem;
    line-height: 1.7; /* Um pouco mais apertado que 1.9 (mais fluido) */
    color: #2a2a2a;
    margin-bottom: 1.5rem; /* Menos espaço vertical, mais direto */
    font-weight: 300;
}

.post-article-body h3 {
    font-family: var(--fonte-titulo);
    font-size: 1.8rem;
    margin: 50px 0 15px;
    padding: 0;
    border: none; /* Removido o borda excessivo */
    letter-spacing: -0.01em;
}

/* --- 4. Elementos Marcantes (High Impact) --- */

/* Quote Invertido (Black Box) - Estilo Revista de Moda */
.editorial-quote {
    background-color: hsl(120, 3%, 30%); /* Fundo Preto */
    color: #fff; /* Texto Branco */
    padding: 50px 40px;
    margin: 60px 0;
    text-align: center;
    font-family: var(--fonte-titulo);
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.4;
    border-radius: 0; /* Cantos retos */
}
.editorial-quote i { color: #fff; } /* Se usar ícones */
.editorial-quote p {
     margin: 0;
    color: #fff;
 }

/* Imagens Internas (Mesmo Frame da Hero) */
.inline-image {
    float: none; /* Sem flutuação em mobile/desktop */
    width: 100%;
    margin: 40px 0;
    border: 1px solid #000; /* O Quadro se repete */
    aspect-ratio: 16/9;
    overflow: hidden;
}
.inline-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

/* Lista Ultra-Simples */
.styled-list {
    border-left: 1px solid #000; /* Borda preta apenas na esquerda */
    padding-left: 20px;
    margin: 30px 0;
}
.list-item {
    padding: 8px 0;
    font-size: 1rem;
    color: #444;
    position: relative;
}
.list-item::before {
    content: '—';
    position: absolute;
    left: -20px;
    color: #000;
}

/* --- 5. Detalhes Finais --- */
.post-tags-area {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 4px solid #000; /* Linha grossa preta para finalizar */
    font-family: var(--fonte-corpo);
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.post-tags-area a {
    color: #000;
    text-decoration: none;
    margin-left: 10px;
}
.post-tags-area a:hover { text-decoration: underline; }

.post-nav-link {
    display: block;
    text-align: center;
    padding: 25px;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 40px;
    transition: 0.3s;
}
.post-nav-link:hover {
    background: #000;
    color: #fff;
}

/* --- 6. Mobile (Ajuste Fino) --- */
@media (max-width: 768px) {
    .post-huge-title { font-size: 2rem; letter-spacing: 0; }
    .post-hero-img { aspect-ratio: 4/3; } /* Tendência mais quadrada no mobile */
    .post-article-body { padding: 0 15px; } /* Margem mínima */
    .post-article-body p { font-size: 1rem; line-height: 1.6; }
    
    .editorial-quote {
        padding: 30px 20px;
        font-size: 1.2rem;
    }
    
    .inline-image { margin: 20px 0; }
}

/* =================================================================
   PÁGINA INDIVIDUAL DE POST (Estilo Editorial Integrado)
   Este bloco usa as variáveis do :root global para consistência total
   ================================================================= */

/* --- 1. Hero Minimalista (Magazine Style) --- */
.post-hero-section {
    padding: 100px 0 60px;
    text-align: center;
    background-color: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda);
}

/* Meta Dados Premium */
.post-meta-premium {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-family: var(--fonte-corpo);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cor-secundaria);
    margin-bottom: 25px;
    font-weight: 600;
}

.post-huge-title {
    font-family: var(--fonte-titulo);
    font-size: clamp(2.5rem, 6vw, 4.5rem); /* Titulo Gigante e Fluido */
    line-height: 1.05;
    color: var(--cor-titulo);
    max-width: 1000px;
    margin: 0 auto 20px;
    letter-spacing: -0.03em; /* Tracking apertado para elegância */
}

.post-subtitle {
    font-size: 1.1rem;
    color: var(--cor-secundaria);
    font-family: var(--fonte-corpo);
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- 2. A Imagem "Enquadrada" (Foco Visual) --- */
/* 
   A ideia é transformar a imagem em um objeto de arte.
   Ela fica centralizada, com uma borda preta fina, destacada do fundo claro.
*/
.post-featured-wrapper {
    width: 100%;
    padding: 80px 0;
    background-color: #FAFAFA; /* Cinza Gelo para destacar a foto */
    border-bottom: 1px solid var(--cor-borda);
    display: flex;
    justify-content: center;
    align-items: center;
}

.post-hero-img {
    max-width: 1000px; /* Limite de largura para não ficar gigante demais */
    width: 100%;
    /* O Aspect Ratio garante que a forma seja sempre consistente */
    aspect-ratio: 16/9; 
    object-fit: cover;
    object-position: center 20%; /* Foca um pouco mais em cima na imagem */
    
    /* A Borda "Quadro" */
    border: 1px solid #000; 
    
    /* Sombra suave para dar profundidade */
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    
    /* P&B inicial, cor no hover (sempre elegante) */
    filter: grayscale(100%);
    transition: filter 1s ease, transform 1s ease;
}

/* --- 3. O Corpo do Texto (Foco na Leitura) --- */
.post-main-wrapper {
    padding: 100px 0 150px; /* Muito ar (whitespace) para sofisticação */
}

.post-article-body {
    max-width: 720px; /* Largura clássica de leitura confortável */
    margin: 0 auto;
}

/* Parágrafos: O segredo da leitura fluida */
.post-article-body p {
    font-size: 1.2rem; /* ~19px. Ligeiramente maior que a média web */
    line-height: 1.8; /* Altura de linha generosa (Aérea) */
    color: #2a2a2a;
    margin-bottom: 1.8rem;
    font-weight: 300; /* Peso fino, mais sofisticado */
    text-align: justify; /* Opcional: Justificado lembra mais revista */
}

/* Títulos H3 (Intertítulos) */
.post-article-body h3 {
    font-family: var(--fonte-titulo);
    font-size: 2rem;
    color: var(--cor-titulo);
    margin: 70px 0 20px;
    padding-top: 30px;
    border-top: 1px solid var(--cor-borda); /* Linha sutil separando seções */
    letter-spacing: -0.01em;
}

/* Drop Cap (Letra Capitular Editorial) */
/* Adicione a classe 'drop-cap' no primeiro <p> do HTML */
.post-article-body .lead-paragraph::first-letter {
    float: left;
    font-family: var(--fonte-titulo);
    font-size: 5.5rem; /* Enorme */
    line-height: 0.8;
    padding-right: 20px;
    padding-top: 5px;
    color: var(--cor-titulo);
    font-weight: 400;
}

/* --- 4. Elementos Marcantes (High Impact) --- */

/* Blockquote (Citação) */
.editorial-quote {
    border-left: none; /* Remove borda padrão */
    border-top: 1px solid var(--cor-titulo);
    border-bottom: 1px solid var(--cor-titulo);
    padding: 50px 0;
    margin: 80px 0;
    text-align: center;
    font-family: var(--fonte-titulo);
    font-style: italic;
    font-size: 1.8rem;
    color: #0c0c0c;
    line-height: 1.4;
}

/* Imagens Inline (Flutuantes no texto) */
.inline-image {
    float: left; /* Texto roda ao redor */
    width: 50%;
    margin: 0 40px 30px 0;
    border: 1px solid #000;
    padding: 5px; /* Margem interna (Passe-partout) */
    background: #fff;
}
.inline-image img {
    width: 100%;
    display: block;
    filter: grayscale(100%);
}

/* Lista Estilizada Minimalista */
.styled-list {
    list-style: none;
    padding: 0;
    margin: 40px 0;
    border-top: 1px solid var(--cor-borda);
}

.list-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--cor-borda);
    font-size: 1.1rem;
    color: #333;
    display: flex;
    align-items: baseline;
}
.list-item::before {
    content: '—'; /* Um traço simples e elegante */
    margin-right: 15px;
    color: var(--cor-titulo);
    font-weight: bold;
}

/* --- 5. Footer do Post --- */
.post-tags-area {
    margin-top: 100px;
    padding-top: 40px;
    border-top: 1px solid var(--cor-borda);
    font-family: var(--fonte-corpo);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cor-secundaria);
    text-align: center;
}
.post-tags-area a {
    color: var(--cor-texto);
    text-decoration: none;
    margin: 0 8px;
    transition: 0.3s;
}
.post-tags-area a:hover { color: var(--cor-titulo); text-decoration: underline; }

.post-divider { display: none; } /* Escondido, usamos a borda do container */

.post-nav-link {
    display: block;
    text-align: center;
    padding: 25px;
    border: 1px solid var(--cor-titulo);
    transition: var(--transicao-suave);
    color: var(--cor-texto);
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 60px;
    background: transparent;
}

.post-nav-link:hover {
    background-color: var(--cor-titulo);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* --- 6. MÓBILE (UX de Leitura Focada) --- */
@media (max-width: 900px) {
    /* Ajuste Hero Mobile */
    .post-hero-section { padding: 60px 0 40px; }
    .post-huge-title { font-size: 2.5rem; }
    
    /* Ajuste Imagem Mobile */
    .post-featured-wrapper { padding: 40px 0; }
    .post-hero-img { 
        aspect-ratio: 4/3; /* Mais quadrado no mobile é melhor */
        border: none; /* Remove borda no mobile para aproveitar tela */
        box-shadow: none;
    }
    
    /* Ajuste Leitura Mobile */
    .post-main-wrapper { padding: 60px 0 100px; }
    .post-article-body { padding: 0 15px; } /* Margem de segurança */
    
    /* Tipografia Mobile */
    .post-article-body p { 
        font-size: 1.05rem; /* ~17px (Padrão confortável) */
        text-align: left; /* Justificado pode ficar ruim em telas muito pequenas */
        line-height: 1.75;
    }
    
    .post-article-body h3 { font-size: 1.7rem; }
    .editorial-quote { font-size: 1.4rem; padding: 30px 0; }
    
    /* Remove flutuação no mobile (empilha imagem) */
    .inline-image {
        float: none;
        width: 100%;
        margin: 0 0 30px 0;
    }
}
/* --- Footer --- */
footer {
    background-color: #0a0a0a; /* Quase preto */
    color: #fff;
    padding: 80px 0 40px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 60px;
    margin-bottom: 60px;
}

.footer-logo h3 {
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: 2rem;
    margin-bottom: 20px;
}

.footer-logo p {
    color: #999;
    font-size: 0.95rem;
}

.footer-links h4, .footer-social h4 {
    color: #fff;
    font-family: var(--fonte-corpo);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 25px;
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links ul li a {
    color: #999;
    font-size: 0.95rem;
}

.footer-links ul li a:hover {
    color: #fff;
    padding-left: 5px; /* Micro-interação */
}

.social-icons {
    display: flex;
    gap: 20px;
}

.social-icons a {
    width: 45px;
    height: 45px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Círculos só nos ícones para contraste */
    color: #fff;
}

.social-icons a:hover {
    background-color: #fff;
    color: #000;
    transform: rotate(360deg); /* Animação divertida no hover */
}

.footer-bottom {
    border-top: 1px solid #222;
    padding-top: 30px;
    text-align: center;
    color: #666;
    font-size: 0.85rem;
}

/* Telas muito pequenas (iPhone SE) */
@media (max-width: 400px) {
    .post-huge-title { font-size: 2rem; }
    .post-article-body p { font-size: 1rem; } /* 16px base */
}