/*==================================================
NEWS DETAIL PAGE
==================================================*/

.article-hero{

    padding:120px 0 60px;

}

.article-hero .container{

    max-width:950px;

}

.breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:30px;

    font-size:14px;

    color:var(--text2);

}

.breadcrumb a{

    color:var(--text2);

    transition:.3s;

}

.breadcrumb a:hover{

    color:var(--accent);

}

.breadcrumb i{

    font-size:11px;

    color:var(--text2);

}

.article-category{

    display:inline-block;

    padding:8px 22px;

    border-radius:999px;

    margin-bottom:28px;

    background:linear-gradient(
        135deg,
        var(--accent),
        var(--accent2)
    );

    color:#fff;

    font-size:14px;

    font-weight:700;

}

.article-hero h1{

    font-size:56px;

    line-height:1.2;

    margin-bottom:28px;

}

.article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:25px;

    color:var(--text2);

    font-size:15px;

}

.article-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}

.article-meta i{

    color:var(--accent);

}

/*==================================================
ARTICLE IMAGE
==================================================*/

.article-image{

    padding-bottom:80px;

}

.article-image .container{

    max-width:1200px;

}

.article-image img{

    width:100%;

    border-radius:30px;

    display:block;

    box-shadow:0 30px 60px rgba(0,0,0,.35);

}

/*==================================================
ARTICLE BODY
==================================================*/

.article-content{

    padding-bottom:100px;

}

.article-body{

    max-width:900px;

    margin:auto;

}

.article-body .lead{

    font-size:23px;

    line-height:2;

    font-weight:500;

    color:#fff;

    margin-bottom:40px;

}

.article-body p{

    color:var(--text2);

    line-height:2;

    margin-bottom:30px;

    font-size:18px;

}

.article-body h2{

    font-size:36px;

    margin:70px 0 25px;

}

.article-body h3{

    font-size:28px;

    margin-bottom:20px;

}

.article-body img{

    width:100%;

    margin:45px 0;

    border-radius:24px;

}

.article-body blockquote{

    position:relative;

    margin:50px 0;

    padding:35px 40px;

    border-left:5px solid var(--accent);

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

    border-radius:18px;

    color:#fff;

    font-size:22px;

    line-height:1.8;

    font-style:italic;

}

.article-info{

    margin:50px 0;

    padding:35px;

    border-radius:22px;

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

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

}

.article-info ul{

    margin-top:20px;

    padding-left:25px;

}

.article-info li{

    margin-bottom:15px;

    color:var(--text2);

    line-height:1.8;

}

/*==================================================
SHARE
==================================================*/

.article-share{

    padding:0 0 100px;

}

.article-share .container{

    max-width:900px;

}

.article-share h3{

    margin-bottom:25px;

    font-size:26px;

}

.share-buttons{

    display:flex;

    gap:18px;

}

.share-buttons a{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

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

    color:#fff;

    font-size:22px;

    transition:.35s;

}

.share-buttons a:hover{

    background:linear-gradient(
        135deg,
        var(--accent),
        var(--accent2)
    );

    transform:translateY(-8px);

}

/*==================================================
RELATED NEWS
==================================================*/

.related-news{

    padding:100px 0;

}

.related-news .section-title{

    text-align:center;

    margin-bottom:70px;

}

.related-news .section-title span{

    color:var(--accent);

    font-weight:700;

}

.related-news .section-title h2{

    margin-top:15px;

    font-size:46px;

}

.related-news .news-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

/*==================================================
BACK BUTTON
==================================================*/

.article-back{

    padding-bottom:120px;

    text-align:center;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

.article-hero{

    padding-top:90px;

}

.article-hero h1{

    font-size:42px;

}

.article-meta{

    gap:15px;

}

.article-body .lead{

    font-size:20px;

}

.article-body h2{

    font-size:30px;

}

.related-news .news-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.article-hero{

    padding-top:70px;

}

.article-hero h1{

    font-size:34px;

}

.article-meta{

    flex-direction:column;

    align-items:flex-start;

}

.article-body{

    width:100%;

}

.article-body p{

    font-size:17px;

}

.article-body .lead{

    font-size:19px;

}

.article-body blockquote{

    font-size:19px;

    padding:25px;

}

.related-news .news-grid{

    grid-template-columns:1fr;

}

.share-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

}

/*==================================================
READING PROGRESS
==================================================*/

.reading-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    z-index:9999;

    background:linear-gradient(

        90deg,

        var(--accent),

        var(--accent2)

    );

}
/*==================================================
BACK TO TOP
==================================================*/

.back-top{

    position:fixed;

    right:35px;

    bottom:35px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:#fff;

    background:linear-gradient(

        135deg,

        var(--accent),

        var(--accent2)

    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:999;

}

.back-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-top:hover{

    transform:translateY(-6px);

}

.share-buttons a i{

    transition:.35s;

}

.share-buttons a:hover i{

    transform:rotate(12deg) scale(1.2);

}

.article-body img{

    transition:.45s;

    cursor:pointer;

}

.article-body img:hover{

    transform:scale(1.02);

}

.article-body blockquote::before{

    content:"❝";

    position:absolute;

    top:-20px;

    left:20px;

    font-size:90px;

    color:rgba(255,255,255,.08);

}

.article-image,

.article-content,

.article-share,

.related-news{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*==================================================
IMAGE VIEWER
==================================================*/

.image-viewer{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    cursor:zoom-out;

    animation:fadeViewer .35s;

}

.image-viewer img{

    max-width:92%;

    max-height:92%;

    border-radius:20px;

}

@keyframes fadeViewer{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}