/* Blog — estrutura base neutra (sem estilo visual). Cada site afina por cima. */

/* ---------- Layout artigos + barra lateral ---------- */
.blog-layout {
    display: flex;
    gap: var(--gap);
    align-items: flex-start;
    margin-block: var(--gap);
}
.blog-layout #primary { flex: 1 1 auto; min-width: 0; }
.blog-layout #sidebar { flex: 0 0 260px; }
.blog-layout #sidebar .widget { margin-bottom: var(--gap); }
.blog-layout #sidebar ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Cabecalho de arquivo ---------- */
.page-header { margin-bottom: var(--gap); }
.page-title { margin: 0; }

/* ---------- Grelha de artigos (arquivo): 3 colunas, mantem-se com 1 artigo ---------- */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}
.post-card {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.post-card .post-thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.post-card-title { margin: .75rem 0 .25rem; }
.post-meta { color: var(--muted); }
.post-excerpt { margin-block: .5rem; }
.read-more { margin-top: auto; align-self: flex-start; }

/* ---------- Artigo individual ---------- */
.post-single .post-title { margin-top: 0; }
.post-single .post-thumb { margin-block: var(--space); }
.post-single .post-content { margin-top: var(--space); }
.post-single .post-footer { margin-top: var(--gap); }

/* ---------- Navegacao ---------- */
.posts-navigation,
.post-navigation {
    margin-block: var(--gap);
}
.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: var(--gap);
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
    .blog-layout { flex-direction: column; }
    .blog-layout #sidebar { flex-basis: auto; width: 100%; }
    .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .post-grid { grid-template-columns: 1fr; }
}