/* ============================================================
   ZapIA CRM — Blog CSS
   Estilos para listagem, cards, post individual, breadcrumb, filtros
   Segue design system do site principal (dark mode, Plus Jakarta Sans)
   ============================================================ */

/* BLOG HERO */
.blog-hero {
    padding: 8rem 2rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden
}

.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(198, 192, 255, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(198, 192, 255, .03) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none
}

.blog-hero::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: var(--primary-container);
    border-radius: 50%;
    filter: blur(120px);
    opacity: .1;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none
}

.blog-hero h1 {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: -.03em;
    margin-bottom: .75rem;
    position: relative;
    z-index: 1
}

.blog-hero p {
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 520px;
    margin: 0 auto;
    position: relative;
    z-index: 1
}

/* FILTROS POR CATEGORIA */
.blog-filters {
    display: flex;
    justify-content: center;
    gap: .5rem;
    padding: 0 2rem 2.5rem;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto
}

.filter-btn {
    padding: .5rem 1.2rem;
    border-radius: 100px;
    border: 1px solid var(--outline-dim);
    background: transparent;
    color: var(--muted);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease
}

.filter-btn:hover {
    border-color: rgba(198, 192, 255, .3);
    color: var(--primary)
}

.filter-btn.active {
    background: rgba(93, 69, 251, .15);
    border-color: rgba(93, 69, 251, .4);
    color: var(--primary)
}

/* GRID DE CARDS */
.blog-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem
}

/* CARD */
.blog-card {
    background: var(--bg2);
    border: 1px solid var(--outline-dim);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    display: flex;
    flex-direction: column
}

.blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(198, 192, 255, .2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3)
}

.blog-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block
}

.card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1
}

.card-category {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--primary);
    background: rgba(93, 69, 251, .1);
    padding: .2rem .6rem;
    border-radius: 4px;
    margin-bottom: .75rem;
    width: fit-content
}

.card-body h2 {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: .5rem
}

.card-body h2 a {
    color: var(--text);
    text-decoration: none;
    transition: color .2s
}

.card-body h2 a:hover {
    color: var(--primary)
}

.card-body .card-excerpt {
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1
}

.card-body time {
    font-size: .75rem;
    color: var(--muted2);
    display: flex;
    align-items: center;
    gap: .35rem
}

/* PLACEHOLDER — sem imagem de post ainda */
.card-img-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--bg3) 0%, var(--bg4) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted2);
    font-size: 2.5rem
}

/* ===========================================
   POST INDIVIDUAL
   =========================================== */

/* BREADCRUMB */
.breadcrumb {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 2rem;
    margin-top: 96px;
    font-size: .8rem
}

.breadcrumb ol {
    display: flex;
    align-items: center;
    gap: .4rem;
    list-style: none;
    flex-wrap: wrap
}

.breadcrumb a {
    color: var(--muted2);
    text-decoration: none;
    transition: color .2s
}

.breadcrumb a:hover {
    color: var(--primary)
}

.breadcrumb span[aria-current] {
    color: var(--muted)
}

.breadcrumb .sep {
    color: var(--muted2);
    font-size: .7rem
}

/* POST HEADER */
.blog-post {
    max-width: 780px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem
}

.post-header {
    margin-bottom: 2.5rem
}

.post-category {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--primary);
    background: rgba(93, 69, 251, .1);
    padding: .25rem .7rem;
    border-radius: 4px;
    margin-bottom: 1rem
}

.post-header h1 {
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.15;
    margin-bottom: 1rem
}

.post-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .82rem;
    color: var(--muted2);
    margin-bottom: 2rem
}

.post-meta .dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--muted2)
}

.post-hero-img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--outline-dim);
    display: block
}

/* POST HERO BANNER */
.post-hero-banner {
    width: 100%;
    height: 280px;
    border-radius: var(--radius);
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.post-hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(198,192,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(198,192,255,.04) 1px, transparent 1px);
    background-size: 40px 40px
}

.post-hero-banner .banner-icon {
    font-size: 5rem;
    position: relative;
    z-index: 1;
    opacity: .85;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,.4))
}

.post-hero-banner.banner-whatsapp {
    background: linear-gradient(135deg, #0f1f1a 0%, #0d2117 40%, #0a1a0f 100%);
    border: 1px solid rgba(74,222,128,.15)
}

.post-hero-banner.banner-whatsapp::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(74,222,128,.12) 0%, transparent 70%);
    border-radius: 50%;
    top: -100px;
    right: -100px
}

.post-hero-banner.banner-vendas {
    background: linear-gradient(135deg, #120f1f 0%, #1a1233 40%, #0f0d1a 100%);
    border: 1px solid rgba(93,69,251,.2)
}

.post-hero-banner.banner-vendas::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(93,69,251,.18) 0%, transparent 70%);
    border-radius: 50%;
    top: -80px;
    right: -80px
}

.post-hero-banner.banner-produtividade {
    background: linear-gradient(135deg, #0f1525 0%, #121e38 40%, #0a1020 100%);
    border: 1px solid rgba(96,165,250,.15)
}

.post-hero-banner.banner-produtividade::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(96,165,250,.12) 0%, transparent 70%);
    border-radius: 50%;
    top: -80px;
    right: -80px
}

.post-hero-banner.banner-lgpd {
    background: linear-gradient(135deg, #1a100f 0%, #2a1510 40%, #1a0d0a 100%);
    border: 1px solid rgba(251,146,60,.15)
}

.post-hero-banner.banner-lgpd::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(251,146,60,.12) 0%, transparent 70%);
    border-radius: 50%;
    top: -80px;
    right: -80px
}

/* POST CONTENT */
.post-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text)
}

.post-content h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--outline-dim)
}

.post-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: .75rem
}

.post-content p {
    margin-bottom: 1.25rem;
    color: var(--muted)
}

.post-content strong {
    color: var(--text);
    font-weight: 700
}

.post-content ul,
.post-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
    color: var(--muted)
}

.post-content li {
    margin-bottom: .4rem;
    line-height: 1.7
}

.post-content blockquote {
    border-left: 3px solid var(--primary-container);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    background: rgba(93, 69, 251, .06);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--muted);
    font-style: italic
}

.post-content blockquote strong {
    color: var(--primary)
}

.post-content code {
    background: var(--bg3);
    padding: .15rem .45rem;
    border-radius: 4px;
    font-size: .9em;
    color: var(--primary)
}

.post-content pre {
    background: var(--bg3);
    border: 1px solid var(--outline-dim);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    font-size: .85rem;
    line-height: 1.6
}

.post-content pre code {
    background: none;
    padding: 0;
    color: var(--text)
}

.post-content img {
    width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--outline-dim);
    margin: 1.5rem 0
}

.post-content a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: rgba(198, 192, 255, .3);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s
}

.post-content a:hover {
    text-decoration-color: var(--primary)
}

/* POST CTA */
.post-cta {
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(93, 69, 251, .08), rgba(124, 92, 245, .04));
    border: 1px solid rgba(93, 69, 251, .2);
    border-radius: var(--radius);
    text-align: center
}

.post-cta h3 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: .5rem
}

.post-cta p {
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: 1.25rem;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto
}

/* POSTS RELACIONADOS */
.related-posts {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 5rem
}

.related-posts h2 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    text-align: center
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem
}

/* EMPTY STATE */
.blog-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--muted2)
}

.blog-empty .material-symbols-outlined {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--muted2)
}

/* RESPONSIVIDADE */
@media(max-width:900px) {
    .blog-grid,
    .related-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .blog-hero h1 {
        font-size: 2.2rem
    }

    .post-header h1 {
        font-size: 2rem
    }
}

@media(max-width:600px) {
    .blog-hero {
        padding: 6rem 1rem 2rem
    }

    .blog-hero h1 {
        font-size: 1.8rem
    }

    .blog-grid,
    .related-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem 3rem
    }

    .blog-filters {
        padding: 0 1rem 1.5rem
    }

    .blog-post {
        padding: 1.5rem 1rem 3rem
    }

    .breadcrumb {
        padding: 0 1rem;
        margin-top: 80px
    }

    .post-hero-banner {
        height: 200px
    }

    .post-hero-banner .banner-icon {
        font-size: 3.5rem
    }

    .post-header h1 {
        font-size: 1.6rem
    }

    .post-content {
        font-size: .95rem
    }

    .post-content h2 {
        font-size: 1.3rem
    }

    .card-body h2 {
        font-size: 1rem
    }
}