/* ==========================================

   Vice City Vibe - Article System v1

   article.css

========================================== */


.article-page{

    max-width:1100px;

    margin:auto;

}


/* -----------------------------------------

   Reading Progress

----------------------------------------- */


#reading-progress{

    position:fixed;

    top:0;

    left:0;

    height:4px;

    width:0%;

    background:linear-gradient(

        90deg,

        var(--neon-pink),

        var(--neon-cyan)

    );

    z-index:9999;

}


/* -----------------------------------------

   Breadcrumbs

----------------------------------------- */


.breadcrumbs{


    margin:30px 0;


    color:#aaa;


    font-size:.9rem;


}


.breadcrumbs a{


    color:var(--neon-cyan);


    text-decoration:none;


}


.breadcrumbs span{


    margin:0 8px;


}


/* -----------------------------------------

   Hero

----------------------------------------- */


.hero{


    position:relative;


    border-radius:12px;


    overflow:hidden;


    margin-bottom:50px;


    box-shadow:

    0 0 30px rgba(255,0,110,.4);


}


.hero img{


    width:100%;


    height:450px;


    object-fit:cover;


    display:block;


}


.hero-overlay{


    position:absolute;


    inset:0;


    background:


    linear-gradient(


    rgba(0,0,0,.15),


    rgba(0,0,0,.85)


    );


    display:flex;


    flex-direction:column;


    justify-content:flex-end;


    padding:45px;


}


.category{


    display:inline-block;


    width:max-content;


    padding:8px 16px;


    border-radius:30px;


    background:var(--neon-purple);


    color:white;


    font-size:.8rem;


    text-transform:uppercase;


    margin-bottom:18px;


}


.hero h1{


    font-size:3rem;


    color:white;


    margin-bottom:15px;


    line-height:1.1;


}


.subtitle{


    color:#ddd;


    font-size:1.2rem;


    max-width:800px;


}


.article-meta{


    display:flex;


    gap:30px;


    margin-top:30px;


    color:#bbb;


    flex-wrap:wrap;


}


/* -----------------------------------------

   Layout

----------------------------------------- */


.article-layout{


    display:grid;


    grid-template-columns:


    260px


    1fr;


    gap:50px;


    margin-top:50px;


}


/* -----------------------------------------

   Table of Contents

----------------------------------------- */


.toc{


    position:sticky;


    top:100px;


    align-self:start;


    background:#111;


    border:


    1px solid


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


    border-radius:12px;


    padding:25px;


}


.toc h2{


    color:var(--neon-pink);


    margin-bottom:15px;


    font-size:1.2rem;


}


.toc ul{


    list-style:none;


}


.toc li{


    margin-bottom:12px;


}


.toc a{


    color:#ccc;


    text-decoration:none;


    transition:.25s;


}


.toc a:hover{


    color:var(--neon-cyan);


}


/* -----------------------------------------

   Article

----------------------------------------- */


#article-content{


    color:#ddd;


    font-size:1.08rem;


    line-height:1.9;


}


#article-content h2{


    margin-top:60px;


    margin-bottom:20px;


    color:var(--neon-cyan);


    font-size:2rem;


}


#article-content h3{


    margin-top:35px;


    color:var(--neon-pink);


}


#article-content p{


    margin-bottom:22px;


}


/* Magazine Drop Cap */


.intro:first-letter{


    float:left;


    font-size:5rem;


    line-height:.9;


    padding-right:10px;


    color:var(--neon-pink);


    font-weight:bold;


}


/* -----------------------------------------

   Images

----------------------------------------- */


#article-content img{


    width:100%;


    border-radius:12px;


    margin:30px 0;


    box-shadow:


    0 0 20px rgba(0,245,255,.25);


}


/* -----------------------------------------

   Fact Box

----------------------------------------- */


.fact-box{


    margin:45px 0;


    padding:25px;


    border-left:


    6px solid


    var(--neon-yellow);


    background:#141414;


    border-radius:8px;


}


.fact-box h3{


    margin-top:0;


    color:var(--neon-yellow);


}


/* -----------------------------------------

   Pull Quote

----------------------------------------- */


blockquote{


    margin:50px 0;


    padding:30px;


    font-size:1.5rem;


    color:white;


    border-left:


    5px solid


    var(--neon-pink);


    background:#101010;


    font-style:italic;


}


/* -----------------------------------------

   Related Articles

----------------------------------------- */


.related{


    margin-top:80px;


}


.related h2{


    color:var(--neon-cyan);


    margin-bottom:30px;


}


#relatedArticles{


    display:grid;


    grid-template-columns:


    repeat(auto-fit,minmax(250px,1fr));


    gap:25px;


}


/* -----------------------------------------

   Share

----------------------------------------- */


.share{


    margin-top:70px;


}


.share-buttons{


    display:flex;


    gap:15px;


    flex-wrap:wrap;


}


.share-buttons a{


    padding:12px 18px;


    border:


    2px solid


    var(--neon-pink);


    color:white;


    text-decoration:none;


    border-radius:30px;


    transition:.3s;


}


.share-buttons a:hover{


    background:var(--neon-pink);


}


/* -----------------------------------------

   Comments

----------------------------------------- */


.comments{


    margin-top:70px;


    padding:35px;


    background:#111;


    border-radius:10px;


}


/* -----------------------------------------

   Mobile

----------------------------------------- */


@media(max-width:900px){


.article-layout{


grid-template-columns:1fr;


}


.toc{


position:relative;


top:auto;


}


.hero img{

    height:220px;

}

.hero-overlay{

    position:relative;
    background:#0f0f0f;
    padding:25px;
    display:block;

}

.hero h1{

    font-size:2rem;
    line-height:1.2;
    margin-bottom:15px;
    word-break:normal;
}

.subtitle{

    margin-bottom:20px;

}


.subtitle{


font-size:1rem;


}


.article-meta{


gap:12px;


}


.intro:first-letter{


font-size:3.8rem;


}


}

.related-card{


    background:#141414;


    padding:20px;


    border-radius:10px;


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


    transition:.25s;


}


.related-card:hover{


    transform:translateY(-5px);


    box-shadow:0 0 18px rgba(0,245,255,.3);


}


.related-card h3{


    margin-top:0;


}


.related-card a{


    color:var(--neon-cyan);


    text-decoration:none;


}


.related-card p{


    color:#ccc;


    font-size:.95rem;


}


#articleSearch{


transition:.3s;


}


#articleSearch:focus{


box-shadow:0 0 20px rgba(0,245,255,.5);


border-color:var(--neon-pink);


}


.loading{


padding:40px;


text-align:center;


font-size:1.1rem;


color:var(--neon-cyan);


}


.loading::after{


content:"";


animation:dots 1.5s infinite;


}


@keyframes dots{


0%{content:"";}


33%{content:".";}


66%{content:"..";}


100%{content:"...";}


}