/* ==========================================
        ARTICLE PAGE
========================================== */

.article-container{

    width:90%;
    max-width:1200px;
    margin:30px auto 50px;

}

/* ==========================================
        BREADCRUMB
========================================== */

.breadcrumb{

    font-size:15px;
    margin-bottom:20px;
    color:#666;

}

.breadcrumb a{

    text-decoration:none;
    color:#E63946;
    font-weight:600;

}

.breadcrumb span{

    color:#444;

}

/* ==========================================
        ARTICLE CARD
========================================== */

.article{

    background:#fff;
    border-radius:15px;
    padding:35px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

/* ==========================================
        CATEGORY
========================================== */

.category-badge{

    display:inline-block;
    background:#E63946;
    color:#fff;
    padding:6px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;

}

/* ==========================================
        TITLE
========================================== */

.article-title{

    font-size:42px;
    line-height:1.4;
    color:#1D3557;
    margin-bottom:20px;

}

/* ==========================================
        META
========================================== */

.article-meta{

    display:flex;
    flex-wrap:wrap;
    gap:18px;
    color:#666;
    font-size:15px;
    margin-bottom:25px;

}

.article-meta span{

    display:flex;
    align-items:center;
    gap:5px;

}

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

.featured-image{

    width:100%;
    border-radius:12px;
    margin-bottom:25px;
    object-fit:cover;

}

/* ==========================================
        SHORT DESCRIPTION
========================================== */

.short-description{

    font-size:22px;
    font-weight:600;
    color:#444;
    border-left:5px solid #E63946;
    padding-left:15px;
    margin-bottom:30px;

}

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

.share-box{

    margin:30px 0;

}

.share-box h3{

    margin-bottom:15px;

}

.share-buttons{

    display:flex;
    flex-wrap:wrap;
    gap:10px;

}

.share-buttons button{

    border:none;
    padding:10px 18px;
    border-radius:8px;
    cursor:pointer;
    background:#1D3557;
    color:#fff;
    transition:.3s;
    width:100px;

}

.share-buttons button:hover{

    background:#E63946;

}

/* ==========================================
        CONTENT
========================================== */

.article-content{

    font-size:20px;
    line-height:2;
    color:#333;

}

.article-content p{

    margin-bottom:25px;
    text-align:justify;

}

.article-content img{

    width:100%;
    border-radius:10px;
    margin:30px 0;

}

.article-content h2{

    margin-top:40px;
    margin-bottom:15px;
    color:#1D3557;

}

.article-content h3{

    margin-top:30px;
    margin-bottom:15px;
    color:#1D3557;

}

.article-content ul{

    margin-left:30px;
    margin-bottom:20px;

}

.article-content li{

    margin-bottom:12px;

}

.article-content blockquote{

    border-left:5px solid #E63946;
    background:#fafafa;
    padding:20px;
    margin:30px 0;
    font-style:italic;

}

/* ==========================================
        TAGS
========================================== */

.tags{

    margin-top:40px;

}

.tags a{

    display:inline-block;
    margin:5px;
    padding:8px 15px;
    border-radius:25px;
    background:#f1f1f1;
    color:#333;
    text-decoration:none;
    transition:.3s;

}

.tags a:hover{

    background:#E63946;
    color:#fff;

}

/* ==========================================
        PREVIOUS NEXT
========================================== */

.article-navigation{

    display:flex;
    justify-content:space-between;
    margin:40px 0;
    gap:20px;

}

.article-navigation a{

    flex:1;
    text-decoration:none;
    padding:18px;
    background:#fff;
    border-radius:10px;
    color:#1D3557;
    font-weight:600;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    transition:.3s;

}

.article-navigation a:hover{

    background:#E63946;
    color:#fff;

}

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

.related-news{

    margin-top:50px;

}

.related-news h2{

    margin-bottom:25px;
    color:#1D3557;

}

.related-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;

}

.related-card{

    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    transition:.3s;

}

.related-card:hover{

    transform:translateY(-5px);

}

.related-card img{

    width:100%;
    height:180px;
    object-fit:cover;

}

.related-content{

    padding:18px;

}

.related-content h3{

    font-size:18px;
    margin-bottom:12px;
    color:#1D3557;

}

.related-content a{

    text-decoration:none;
    font-weight:600;

}

/* ==========================================
        LOADING
========================================== */

.loading{

    text-align:center;
    padding:100px 0;
    font-size:22px;
    color:#666;

}

/* ==========================================
        ERROR
========================================== */

.error-box{

    background:#fff;
    padding:60px;
    text-align:center;
    border-radius:15px;

}

.error-box h2{

    margin-bottom:20px;

}

/* ==========================================
        DARK MODE
========================================== */

.dark .article{

    background:#1e1e1e;
    color:#fff;

}

.dark .article-title{

    color:#fff;

}

.dark .article-content{

    color:#ddd;

}

.dark .breadcrumb{

    color:#ddd;

}

.dark .article-navigation a{

    background:#222;
    color:#fff;

}

.dark .related-card{

    background:#222;

}

.dark .related-content h3{

    color:#fff;

}

.dark .tags a{

    background:#333;
    color:#fff;

}

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

@media(max-width:992px){

.article-title{

    font-size:34px;

}

.article-content{

    font-size:18px;

}

}

@media(max-width:768px){

.article{

    padding:20px;

}

.article-title{

    font-size:28px;

}

.short-description{

    font-size:18px;

}

.article-content{

    font-size:17px;

}

.article-meta{

    flex-direction:column;
    gap:8px;

}

.article-navigation{

    flex-direction:column;

}

.share-buttons{

    justify-content:center;

}

}

@media(max-width:480px){

.article-title{

    font-size:24px;

}

.article-content{

    font-size:16px;

}

.short-description{

    font-size:17px;

}

.related-grid{

    grid-template-columns:1fr;

}

}

/* ===================================
   Reading Progress
=================================== */

#readingProgress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:#E63946;

z-index:99999;

transition:.2s;

}

/* ===================================
   Back To Top
=================================== */

#backToTop{

position:fixed;

bottom:30px;

right:25px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#E63946;

color:#fff;

font-size:22px;

cursor:pointer;

display:none;

z-index:9999;

box-shadow:0 5px 15px rgba(0,0,0,.3);

}

#backToTop:hover{

background:#c62839;

}

/* ===================================
   Toast
=================================== */

.toast{

position:fixed;

bottom:100px;

left:50%;

transform:translateX(-50%);

background:#222;

color:#fff;

padding:12px 25px;

border-radius:8px;

opacity:0;

transition:.3s;

z-index:99999;

}

.toast.show{

opacity:1;

}

.newsletter-form button {
width: 100px;
}


/* ===========================================
   Article Gallery
=========================================== */

.article-gallery {
    display: block;
    width: 100%;
    margin: 35px 0;
}

.article-gallery-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    object-fit: cover;
    border-radius: 10px;
    background: #f3f3f3;
}


/* ===========================================
   Multiple Gallery Images
=========================================== */

.article-gallery-item {
    width: 100%;
    margin: 0 0 25px;
}

.article-gallery-item:last-child {
    margin-bottom: 0;
}


/* ===========================================
   Mobile
=========================================== */

@media (max-width: 600px) {

    .article-gallery {
        width: 100%;
        margin: 25px 0;
    }

    .article-gallery-image {
        width: 100%;
        max-width: 100%;
        border-radius: 8px;
    }

}

/* ===========================================
   YouTube Responsive Video
=========================================== */

.youtube-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin: 25px 0;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
}

.youtube-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}