/* =========================================
   DESKTOP (992px+)
========================================= */

@media (min-width:992px){

/* ==========================
PAGE LAYOUT
========================== */

.page{

    display:grid;

    grid-template-columns:minmax(0,1fr) 320px;

    gap:30px;

    max-width:1400px;

    margin:25px auto;

    padding:0 20px;

    align-items:start;

}

.featured-image img{
    width:100%;
    height:450px;
    object-fit:cover;
}
/* ==========================
ARTICLE
========================== */

.article-content{

    background:#fff;

    border-radius:12px;

    padding:30px;

    box-shadow:0 2px 10px rgba(0,0,0,.05);

}

/* ==========================
SIDEBAR
========================== */


/* ==========================
SIDEBAR INPUT
========================== */

.sidebar-card input{

    width:100%;

    height:42px;

    padding:0 12px;

    border:1px solid #ddd;

    border-radius:8px;

    outline:none;

}

/* ==========================
SIDEBAR LIST
========================== */

.sidebar-card ul{

    list-style:none;

    padding:0;

}

.sidebar-card li{

    display:flex;

    justify-content:space-between;

    padding:10px 0;

    border-bottom:1px solid #eee;

}

/* ==========================
AUTHOR
========================== */

.author-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    border:1px solid #e5e5e5;
    border-radius:12px;
    background:#fff;
    margin:20px 0;
}


.author-avatar{
    width:54px;
    height:54px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #eaf2ff;
}


.author-name{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:18px;
    font-weight:700;
    color:#111;
}



.author-id{
    font-size:13px;
    color:#777;
    margin-top:2px;
}

.author-tag{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:8px;
    padding:4px 10px;
    font-size:12px;
    font-weight:600;
    color:#1976d2;
    background:#eef6ff;
    border-radius:20px;
    width:max-content;
}



/* ==========================
CONTACT
========================== */

.contact{

    background:#fff;

    border-radius:12px;

    padding:20px;

    margin-top:25px;

}

/* ==========================
FOOTER
========================== */

.footer-links{

    margin-top:30px;

    padding:20px;

}

/* ===============================
   HEADER
================================ */



/* =======================
SIDEBAR
======================= */

.sidebar{

position:sticky;

top:90px;

}



.sidebar-card{

background:#fff;

border-radius:14px;

padding:12px 15px;

margin-bottom:10px;

box-shadow:0 2px 8px rgba(0,0,0,.06);

}



.sidebar-card h3{

font-size:15px;

margin-bottom:7px;

margin-top:7px;
}

.sidebar-container{
margin-top:0px;
}

.search-box{

display:flex;

}



.search-box input{

flex:1;

height:30px;
padding:0 15px;

border:1px solid #ddd;

border-radius:8px 0 0 8px;

outline:none;

}



.search-box button{

width:55px;

border:none;

background:#1976ff;

color:#fff;

border-radius:0 8px 8px 0;

cursor:pointer;

}



.category-list{

list-style:none;
margin:0;
padding:0;

}



.category-list li{

display:flex;

justify-content:space-between;

padding:4px 0;

border-bottom:1px solid #eee;
font-size:15px;

}



.category-list li:last-child{

border:none;

}



.category-list span{

color:#1976ff;

font-weight:700;
font-size:15px;

}



.popular-item{

display:flex;

gap:12px;

margin-bottom:18px;

}



.popular-item img{

width:90px;

height:60px;

border-radius:8px;

object-fit:cover;

}



.popular-item h4{

font-size:15px;

line-height:1.4;

margin-bottom:5px;

}



.popular-item small{

color:#888;

}

.article-meta{
    gap:28px;
    font-size:15px;
}

.article-meta span{
    width:auto;
}
.like-btn.active{
    color:#2563eb;
}

.dislike-btn.active{
    color:#dc2626;
}

}