/* ==========================================================
   HERO DO ARTIGO
========================================================== */

.article-page__header{

    padding:7rem 0 4rem;

    text-align:center;

}

.article-page__header-container{

    max-width:900px;

}

.article-page__back{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    margin-bottom:2rem;

    color:var(--color-primary);

    text-decoration:none;

    font-size:.95rem;

    transition:.25s;

}

.article-page__back:hover{

    opacity:.75;

}

.article-page__category{

    margin-bottom:1rem;

    color:var(--color-primary);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.82rem;

}

.article-page__title{

    margin-bottom:1.5rem;

    color:var(--color-primary);

    font-family:Georgia,"Times New Roman",serif;

    font-size:clamp(2.3rem,3.8vw,4rem);

    font-weight:400;

    line-height:1.08;

}

.article-page__subtitle{

    max-width:760px;

    margin:0 auto 2rem;

    color:var(--color-text);

    font-size:1.18rem;

    line-height:1.8;

}

.article-page__meta{

    color:var(--color-text-muted);

    font-size:.95rem;

}



/* ==========================================================
   IMAGEM
========================================================== */

.article-page__hero-image{

    margin-bottom:5rem;

}

.article-page__hero-image-container{

    max-width:980px;

}

.article-page__hero-image img{

    width:100%;

    display:block;

    border-radius:22px;

}



/* ==========================================================
   TEXTO
========================================================== */

.article-page__body{

    max-width:780px;

    margin:0 auto;

}

.article-page__content{

    font-size:1.15rem;

    line-height:2;

    color:var(--color-text);

}

.article-page__content p{

    margin-bottom:2rem;

}



/* ==========================================================
   CITAÇÃO
========================================================== */

.article-page__quote{

    margin:4rem 0;

    padding:2rem;

    border-left:4px solid var(--color-primary);

    background:rgba(255,255,255,.03);

}

.article-page__quote p{

    margin:0;

    color:var(--color-primary);

    font-size:1.3rem;

    font-style:italic;

    line-height:1.7;

}



/* ==========================================================
   PERSPECTIVA
========================================================== */

.article-perspective{

    padding:6rem 0;

}

.article-perspective__container{

    max-width:900px;

    padding:3rem;

    border:1px solid rgba(200,161,90,.20);

    border-radius:20px;

    background:rgba(255,255,255,.025);

}

.article-perspective__eyebrow{

    margin-bottom:.8rem;

    color:var(--color-primary);

    letter-spacing:.16em;

    text-transform:uppercase;

    font-size:.82rem;

}

.article-perspective__title{

    margin-bottom:1.5rem;

    color:var(--color-primary);

    font-family:Georgia,serif;

    font-size:2rem;

    line-height:1.25;

}

.article-perspective__text{

    line-height:1.9;

}



/* ==========================================================
   LEITURA RELACIONADA
========================================================== */

.article-related{

    padding-bottom:6rem;

}

.article-related__container{

    display:grid;

    grid-template-columns:2fr 320px;

    gap:4rem;

    align-items:center;

}

.article-related__eyebrow{

    margin-bottom:.7rem;

    color:var(--color-primary);

    text-transform:uppercase;

    letter-spacing:.16em;

    font-size:.82rem;

}

.article-related__title{

    margin-bottom:1rem;

    color:var(--color-primary);

    font-family:Georgia,serif;

    font-size:2.2rem;

}

.article-related__text{

    margin-bottom:2rem;

    line-height:1.9;

}

.article-related__visual img{

    width:100%;

    display:block;

    border-radius:12px;

}



/* ==========================================================
   NAVEGAÇÃO
========================================================== */

.article-navigation{

    padding:2rem 0 5rem;

}

.article-navigation__container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:2.5rem;

}

.article-navigation a{

    text-decoration:none;

    color:var(--color-text);

}

.article-navigation__label{

    display:block;

    margin-bottom:.35rem;

    color:var(--color-primary);

    font-size:.82rem;

    text-transform:uppercase;

    letter-spacing:.14em;

}



/* ==========================================================
   CTA FINAL
========================================================== */

.article-final-cta{

    padding:6rem 0;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.08);

}

.article-final-cta__container{

    max-width:820px;

}

.article-final-cta__eyebrow{

    margin-bottom:1rem;

    color:var(--color-primary);

    letter-spacing:.16em;

    text-transform:uppercase;

    font-size:.82rem;

}

.article-final-cta__title{

    margin-bottom:1.6rem;

    color:var(--color-primary);

    font-family:Georgia,serif;

    font-size:clamp(2rem,3vw,3rem);

    line-height:1.18;

}

.article-final-cta__intro{

    margin-bottom:2.5rem;

    line-height:1.9;

}



/* ==========================================================
   RESPONSIVO
========================================================== */

@media (max-width:900px){

    .article-related__container{

        grid-template-columns:1fr;

    }

    .article-related__visual{

        max-width:280px;

        margin:auto;

    }

}



@media (max-width:700px){

    .article-page__header{

        padding:5rem 0 3rem;

    }

    .article-page__content{

        font-size:1.05rem;

    }

    .article-page__quote{

        padding:1.5rem;

    }

    .article-perspective__container{

        padding:2rem;

    }

    .article-navigation__container{

        flex-direction:column;

        align-items:flex-start;

    }

}