eddy-nova/css/article.css

/* =========================================================
   ARTICLE.CSS
   Only new article components.
   Existing /css/style.css remains the site's baseline.
   ========================================================= */

.article-page {
    padding-top: 60px;
    padding-bottom: 40px;
}

.eddys-article {
    max-width: 900px;
}

.article-header {
    margin-bottom: 32px;
}

.article-category,
.section-label,
.author-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.article-category {
    margin-bottom: 12px;
}

.article-header h1 {
    margin: 0 0 14px;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 24px;
    font-size: .9rem;
}

.article-featured-image {
    display: block;
    width: 100%;
    height: auto;
}

.article-content {
    line-height: 1.75;
}

.article-content h2 {
    margin-top: 38px;
    margin-bottom: 14px;
}

.article-note {
    margin: 32px 0;
    padding: 22px 24px;
    border-left: 4px solid currentColor;
    background: rgba(0, 0, 0, .04);
}

.article-author-box {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    margin-top: 48px;
    padding: 28px;
    border: 1px solid rgba(0, 0, 0, .12);
}

.author-avatar {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    background: rgba(0, 0, 0, .08);
}

.author-info h2 {
    margin: 4px 0;
}

.author-role {
    margin-top: 0;
    font-weight: 600;
}

.article-categories {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, .12);
}

.article-categories h2,
.latest-articles h2 {
    margin-top: 8px;
}

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.category-list a {
    display: inline-block;
    padding: 9px 14px;
    border: 1px solid rgba(0, 0, 0, .16);
    border-radius: 999px;
    text-decoration: none;
}

.latest-articles {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, .12);
}

.latest-articles-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.latest-article-card {
    min-width: 0;
}

.latest-article-card h3 {
    margin-top: 12px;
}

.latest-article-card p {
    line-height: 1.55;
}

.placeholder-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background: rgba(0, 0, 0, .06);
    border: 1px solid rgba(0, 0, 0, .12);
}

.placeholder-image span {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
}

@media (max-width: 900px) {
    .latest-articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .article-author-box {
        flex-direction: column;
    }

    .latest-articles-grid {
        grid-template-columns: 1fr;
    }

    .article-meta {
        flex-direction: column;
        gap: 6px;
    }
}

/* ---- Template completo: componentes adicionais ---- */
.article-meta span+span::before{content:"\2022";margin-right:18px;opacity:.5}
.article-featured-image{border-radius:2px}
.article-figure{margin:0}
.article-figure figcaption{margin-top:8px;font-size:.85rem;opacity:.7}
.article-takeaways{margin:0 0 32px;padding:22px 26px;background:#f9f9f9;border-left:4px solid #ffbf00}
.article-takeaways h2{margin:0 0 10px!important;font-size:1.1rem}
.article-takeaways ul{margin:0;padding-left:20px;line-height:1.7}
.article-content ol,.article-content ul{margin:0 0 20px;padding-left:22px}
.article-content li{margin-bottom:8px}
.article-content h2[id]{scroll-margin-top:90px}
.article-toc ol{margin:0;padding-left:18px;line-height:1.9;font-size:.92rem}
.article-toc a{text-decoration:none}
.article-inline-cta{margin:34px 0;padding:24px 28px;background:#ffbf00;border-radius:3px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.article-inline-cta p{margin:0;font-weight:700;color:#111}
.article-inline-cta .btn{background:#111;color:#fff;border-color:#111}
.article-faq{margin-top:44px}
.article-faq details{border-top:1px solid rgba(0,0,0,.12);padding:14px 0}
.article-faq details:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
.article-faq summary{cursor:pointer;font-weight:700}
.article-faq summary:focus-visible{outline:3px solid #ffbf00;outline-offset:3px}
.article-faq details p{margin:10px 0 0;line-height:1.7}
.article-related{margin-top:44px}
.article-related ul{margin:12px 0 0;padding-left:20px;line-height:1.9}
.article-review-note{margin-top:28px;font-size:.85rem;opacity:.7}
.article-categories,.latest-articles{clear:both}

/* ---- Intro em duas colunas (TOC + Key takeaways) e sidebar de recursos ---- */
.article-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:22px;margin:0 0 32px}
.article-intro .article-takeaways{margin:0}
.article-toc{padding:22px 26px;background:#fff;border:1px solid rgba(0,0,0,.12)}
.article-toc h2{margin:0 0 10px;font-size:1.1rem}
.article-sidebar-cta{padding:26px 24px;background:#111;color:#fff;border-radius:3px}
.article-sidebar-cta h3{margin:0 0 10px;color:#fff;font-size:1.15rem}
.article-sidebar-cta p{margin:0 0 18px;line-height:1.6;color:rgba(255,255,255,.85)}
.article-sidebar-cta .btn{display:block;text-align:center;background:#ffbf00;border-color:#ffbf00;color:#111}
@media (max-width:991px){
    .article-page .main-content{order:1}
    .article-page .sidebar{order:2;margin-top:40px}
}
@media (max-width:700px){
    .article-intro{grid-template-columns:1fr}
}