/* ==========================================================================
   BLOG — listagem e artigo individual
   Consome tokens de tokens.css.
   ========================================================================== */

/* Layout: uma coluna (sem barra lateral) */
.blog-layout {
    display: block;
    margin-block: var(--sp-6) var(--sp-8);
}
.blog-layout #primary { width: 100%; }

/* Cabeçalho (título = variação 4, em content.css) */
.page-header { margin-bottom: var(--sp-6); }
.page-header .page-title { margin: 0; }
.archive-description {
    max-width: 680px;
    margin: var(--sp-3) auto 0;
    text-align: center;
    color: var(--c-muted);
}

/* Grelha de artigos */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
}

/* Cartão de artigo — o cartão inteiro é clicável (mesmo princípio do cartão de curso) */
.post-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: transform var(--tr), box-shadow var(--tr);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.post-card__media { display: block; }
.post-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.post-card__media-ph {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--c-primary-soft), var(--c-secondary-soft));
    color: var(--c-primary-300);
}
.post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
}
.post-card__meta {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--c-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}
.post-card__title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-lg);
    line-height: var(--lh-snug);
}
.post-card__title a { color: var(--c-ink); text-decoration: none; }
.post-card__title a:hover { color: var(--c-accent); }
/* Link do título esticado por cima do cartão: um só alvo. */
.post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card:has(.post-card__title a:focus-visible) { box-shadow: var(--focus-ring); }
.post-card__excerpt {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--c-muted);
}
.post-card__excerpt p { margin: 0; }
.post-card__more { margin-top: auto; align-self: flex-start; font-size: var(--fs-sm); }

/* Navegação entre listas */
.posts-navigation,
.post-navigation {
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--c-line);
}
.posts-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-4);
}
.posts-navigation .nav-links a {
    font-size: var(--fs-sm);
    color: var(--c-primary);
    text-decoration: none;
}
.posts-navigation .nav-links a:hover { color: var(--c-accent); }

/* Artigo individual */
.post-single { max-width: 820px; }
.post-header { margin-bottom: var(--sp-5); }
.post-header .page-title { margin: 0; }
.post-header .post-meta {
    margin-top: var(--sp-3);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--c-muted);
}
.post-thumb { margin: 0 0 var(--sp-6); }
/* Artigo com faixa: a data vive no corpo, alinhada com o texto. */
.post-meta--body {
    margin: 0 0 var(--sp-5);
    text-align: left;
    font-size: var(--fs-sm);
    color: var(--c-muted);
}
.post-thumb img { width: 100%; border-radius: var(--r-lg); }
.post-footer { margin-top: var(--sp-6); }
.post-footer a {
    display: inline-block;
    margin: 0 var(--sp-1) var(--sp-1) 0;
    padding: .2em .7em;
    border: 1px solid var(--c-line);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    color: var(--c-muted);
    text-decoration: none;
}

.post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
.post-navigation .nav-previous { grid-column: 1; }
.post-navigation .nav-next { grid-column: 2; text-align: right; }
.post-navigation a { text-decoration: none; }
.post-nav__label {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--c-muted);
}
.post-nav__title { color: var(--c-ink); }
.post-navigation a:hover .post-nav__title { color: var(--c-accent); }

/* Vazio */
.blog-empty { color: var(--c-muted); text-align: center; }

/* Responsivo */
@media (max-width: 900px) {
    .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .post-grid { grid-template-columns: 1fr; }
    .post-navigation .nav-links { grid-template-columns: 1fr; }
    .post-navigation .nav-next { grid-column: 1; text-align: left; }
}