/* ========================================
   BLOG · listagem, artigos e seção da home
   Carregado depois de style.css. Usa os tokens do site (:root).
   Layout do artigo e da listagem segue ricardobonizoli.com.br.
======================================== */

.blog-page main { padding-top: 0; }

/* ---------- Artigo: cabeçalho ---------- */
.post-hero { position: relative; padding: calc(var(--space-24) + var(--space-8)) 0 var(--space-8); }
.post-hero::before,
.blog-hero::before {
    content: "";
    position: absolute;
    inset: -30% -8% auto auto;
    width: 55vw;
    height: 55vw;
    max-width: 760px;
    max-height: 760px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.16), transparent 65%);
    pointer-events: none;
    z-index: -1;
}
.post-hero,
.blog-hero { overflow-x: clip; }
.post-hero .container { position: relative; }

.post-cat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-text);
}
.post-cat::before { content: ""; width: 28px; height: 1px; background: var(--accent-purple); }

.post-title {
    max-width: 960px;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 1.2rem + 3.3vw, 4rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
    text-wrap: balance;
}
.post-dek {
    max-width: 780px;
    font-size: var(--text-lg);
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
}

.post-meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.post-meta { display: flex; align-items: center; gap: var(--space-4); }
.post-meta__text { display: flex; flex-direction: column; gap: 4px; }
.post-meta__authors { font-size: var(--text-sm); color: var(--text-primary); font-weight: 500; }
.post-meta__info {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.post-avatars { display: inline-flex; flex-shrink: 0; }
.post-avatars picture + picture { margin-left: -12px; }
.post-avatars img { display: block; border-radius: 50%; border: 2px solid var(--bg-primary); object-fit: cover; }

.post-cover {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    aspect-ratio: 1200 / 630;
    background: var(--bg-secondary);
}
.post-cover picture,
.post-cover__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Artigo: corpo e índice lateral ---------- */
.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--space-12);
    padding-bottom: var(--space-16);
}
@media (min-width: 1100px) {
    .post-layout { grid-template-columns: minmax(0, 760px) 240px; column-gap: var(--space-10); justify-content: space-between; align-items: start; }
}
@media (min-width: 1280px) { .post-layout { grid-template-columns: minmax(0, 760px) 280px; } }

.post-toc { display: none; }
@media (min-width: 1100px) {
    .post-toc { display: block; position: sticky; top: 112px; max-height: calc(100vh - 140px); overflow-y: auto; scrollbar-width: none; }
    .post-toc::-webkit-scrollbar { display: none; }
}
.post-toc__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-5);
}
.post-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-subtle); }
.post-toc a {
    display: block;
    margin-left: -1px;
    padding: 8px 0 8px var(--space-5);
    border-left: 1px solid transparent;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--text-muted);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.post-toc a:hover { color: var(--text-primary); }
.post-toc a.is-active { color: var(--text-primary); border-left-color: var(--accent-purple); }

.post-body { font-size: max(1.0625rem, var(--text-lg)); line-height: 1.85; color: rgba(244, 243, 248, 0.86); min-width: 0; }
.post-body > * + * { margin-top: var(--space-6); }
.post-body h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin-top: var(--space-12);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-subtle);
    scroll-margin-top: 100px;
}
.post-body > h2:first-child,
.post-body > p:first-child + h2 { margin-top: var(--space-12); }
.post-body h3 { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 500; color: var(--text-primary); line-height: 1.35; }
.post-body strong { color: var(--text-primary); font-weight: 600; }
.post-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(185, 164, 248, 0.4); }
.post-body a:hover { color: #fff; text-decoration-color: #fff; }
.post-body ul,
.post-body ol { padding-left: var(--space-6); display: grid; gap: var(--space-3); }
.post-body ul { list-style: none; }
.post-body ul li { position: relative; }
.post-body ul li::before { content: "◆"; position: absolute; left: calc(var(--space-6) * -1); top: 0.2em; font-size: 0.6em; color: var(--accent-purple); }
.post-body ol { list-style: decimal; }
.post-body ol li::marker { color: var(--accent-purple); }

/* ---------- Tabelas ---------- */
.table-wrap { border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.02); }
.post-body table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.55; }
.post-body th,
.post-body td { padding: var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
.post-body thead th {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.post-body tbody th { color: var(--text-primary); font-weight: 600; width: 24%; }
.post-body tbody tr:last-child th,
.post-body tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 719px) {
    .post-body thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .post-body table,
    .post-body tbody,
    .post-body tr,
    .post-body th,
    .post-body td { display: block; width: 100%; }
    .post-body tbody tr { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
    .post-body tbody tr:last-child { border-bottom: 0; }
    .post-body tbody th,
    .post-body td { padding: var(--space-2) 0; border: 0; width: 100%; }
    .post-body tbody th { font-size: var(--text-base); }
    .post-body td::before {
        content: attr(data-label);
        display: block;
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--text-muted);
        margin-bottom: 2px;
    }
}

/* ---------- Perguntas frequentes e fontes ---------- */
.faq { border-top: 0; }
.faq-item { padding: var(--space-5) 0; border-bottom: 1px solid var(--border-subtle); }
.faq-item h3 { margin-bottom: var(--space-2); }
.faq-item p { line-height: 1.7; }
.post-body .post-sources { margin-top: var(--space-12); padding: 0; }
.post-sources h2 { margin-top: 0; }
.post-sources > * + * { margin-top: var(--space-5); }
.post-sources ul { font-size: var(--text-base); line-height: 1.65; gap: var(--space-3); }

/* ---------- Cartão de chamada (um por artigo) ---------- */
.post-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    margin-top: var(--space-12);
    padding: var(--space-8);
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0.03));
    border-color: rgba(139, 92, 246, 0.3);
}
@media (min-width: 720px) { .post-cta { flex-direction: row; align-items: center; justify-content: space-between; } }
.post-cta__title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 500; color: var(--text-primary); line-height: 1.25; margin-bottom: var(--space-2); }
.post-cta__desc { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }
.post-cta .btn { flex-shrink: 0; border-radius: 999px; }
.post-body a.btn,
.post-body a.btn:hover { color: var(--bg-primary); text-decoration: none; }

/* ---------- Compartilhar ---------- */
.post-body ul.post-share__list { display: flex; gap: var(--space-3); padding: 0; list-style: none; }
.post-body ul.post-share__list li::before { content: none; }
.post-body a.post-share__btn { color: var(--text-secondary); text-decoration: none; }
.post-body a.post-share__btn:hover { color: var(--text-primary); }
.post-share { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.post-share--end { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.post-share__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.post-share__list { display: flex; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.post-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.post-share__btn svg { width: 18px; height: 18px; }
.post-share__btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.post-share__btn.is-done { color: var(--accent-text); border-color: var(--accent-purple); }

/* ---------- Quem escreve ---------- */
.post-author { padding: 0 0 var(--space-16); }
.post-author__box {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-8);
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.025);
}
@media (min-width: 900px) { .post-author__box { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-8); padding: var(--space-10); } }
.post-author__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }
.post-author__name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-3); }
.post-author__text p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7; max-width: 70ch; }
.post-author__text p + p { margin-top: var(--space-2); color: var(--text-muted); }
.post-author__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-5);
    border-radius: 999px;
    border: 1px solid var(--border-hover);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-primary);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pill svg { width: 14px; height: 14px; }
.pill:hover { background: #ececf2; border-color: #ececf2; color: var(--bg-primary); }

/* ---------- Cabeçalhos de seção em caixa alta (Continue lendo, home) ---------- */
.post-related { padding: var(--space-8) 0 var(--space-24); }
.blog-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-10); }
.blog-section__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.blog-section__all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.blog-section__all svg { width: 14px; height: 14px; }
.blog-section__all:hover { color: var(--text-primary); }

/* ---------- Listagem: cabeçalho e filtros ---------- */
.blog-hero { position: relative; padding: calc(var(--space-24) + var(--space-8)) 0 var(--space-8); }
.blog-hero .container { position: relative; }
.blog-hero .eyebrow { color: var(--text-muted); letter-spacing: 0.18em; margin-bottom: var(--space-6); }
.blog-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.blog-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(3.25rem, 1.6rem + 7.6vw, 7rem);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.blog-hero__count { text-wrap: balance; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding-bottom: var(--space-3); }
.blog-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.blog-chips[hidden] { display: none; }
.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.blog-chip span { color: var(--text-muted); }
.blog-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.blog-chip.is-active { background: #ececf2; border-color: #ececf2; color: var(--bg-primary); }
.blog-chip.is-active span { color: rgba(10, 8, 18, 0.55); }

.blog-list { padding: var(--space-8) 0 var(--space-24); }

/* ---------- Cartões ---------- */
.post-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 720px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-grid.is-few { display: flex; flex-wrap: wrap; justify-content: center; }
.post-grid.is-few .post-card { width: min(100%, 380px); }

.post-card {
    position: relative;
    border-radius: 22px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    overflow: hidden;
    aspect-ratio: 8 / 9;
    transition: transform 0.4s var(--ease-smooth), border-color 0.3s ease;
}
.post-card[hidden] { display: none; }
.post-card:hover { border-color: rgba(139, 92, 246, 0.4); transform: translateY(-4px); }
.post-card__link { position: absolute; inset: 0; display: block; color: inherit; }
.post-card__media,
.post-card__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card__img { transition: transform 0.7s var(--ease-smooth); }
.post-card:hover .post-card__img { transform: scale(1.04); }
.post-card__body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-16) var(--space-6) var(--space-6);
    background: linear-gradient(to bottom, rgba(10, 8, 18, 0) 0, rgba(10, 8, 18, 0.88) 3.5rem, rgba(10, 8, 18, 0.97) 100%);
}
.post-card__cat { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.post-card__title {
    font-family: var(--font-heading);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-wrap: pretty;
}
.post-card__desc {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-2); }
.post-card__meta { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.post-card__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border-hover);
    color: var(--text-primary);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.post-card__go svg { width: 16px; height: 16px; }
.post-card:hover .post-card__go { background: #ececf2; border-color: #ececf2; color: var(--bg-primary); }

/* Continue lendo (dentro dos artigos): mesmo cartão, sem o resumo */
.post-grid--related .post-card { aspect-ratio: 16 / 10; }
.post-grid--related .post-card__desc { display: none; }
.post-grid--related .post-card__img { object-position: center 12%; }
@media (min-width: 720px) { .post-grid--related .post-card { aspect-ratio: 4 / 3; } }
@media (min-width: 1100px) { .post-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .post-grid--related .post-card { aspect-ratio: 8 / 9; } }

/* ---------- Paginação ---------- */
.blog-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.blog-pager ol { display: flex; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.blog-pager__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}
.blog-pager__num:hover { border-color: var(--border-hover); color: var(--text-primary); }
.blog-pager__num.is-active { background: #ececf2; border-color: #ececf2; color: var(--bg-primary); }
.blog-pager__side { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 96px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); }
.blog-pager__side--next { justify-content: flex-end; }
.blog-pager__side svg { width: 14px; height: 14px; }
a.blog-pager__side:hover { color: var(--text-primary); }

/* ---------- Seção do blog na home ---------- */
/* a home usa .service-how (mesmo respiro das vizinhas) e o cabeçalho centralizado do site */
.blog-home .post-grid { margin-top: var(--space-2); }

/* ---------- Celular ---------- */
@media (max-width: 767px) {
    .post-hero { padding-top: calc(var(--space-20) + var(--space-4)); padding-bottom: var(--space-6); }
    .post-meta-row { margin-bottom: var(--space-6); }
    .post-layout { padding-top: var(--space-8); }
    .post-cta { padding: var(--space-6); }
    .post-author__box { padding: var(--space-6); }
    .blog-page .whatsapp-float { width: 48px; height: 48px; bottom: 16px; right: 12px; }
    .blog-page .post-card__body { padding-right: 64px; }
    .blog-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--space-6) * -1); padding-inline: var(--space-6); scrollbar-width: none; }
    .blog-chips::-webkit-scrollbar { display: none; }
    .blog-chip { flex: 0 0 auto; }
    .post-card__cat, .blog-chip { font-size: 0.8125rem; letter-spacing: 0.1em; }
    .post-card__meta { font-size: 0.8125rem; letter-spacing: 0.04em; white-space: nowrap; }
    .post-meta__info { letter-spacing: 0.06em; text-transform: none; font-size: 0.8125rem; }
}

.post-toc a:focus-visible,
.post-share__btn:focus-visible,
.pill:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; }