/* =========================
SINGLE ARTICLE LAYOUT
========================= */

.single .tn-container{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:3%;
}

.tn-content{
    width:72%;
}

.tn-sidebar{
    width:25%;
}

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

.tn-featured-image{
    margin:25px 0;
}

.tn-featured-image img{
    width:100%;
    border-radius:12px;
}

.tn-image-caption{
    font-size:14px;
    color:#64748b;
    margin-top:10px;
}

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

.tn-article-content{
    background:#fff;
    padding:30px;
    border-radius:12px;
    border:1px solid #e2e8f0;
    margin-bottom:25px;
    font-size:18px;
    line-height:1.9;
}

.tn-article-content p{
    margin-bottom:24px;
}

.tn-article-content h2{
    font-size:34px;
    margin:35px 0 20px;
}

.tn-article-content h3{
    font-size:28px;
    margin:30px 0 15px;
}

.tn-article-content blockquote{
    border-left:4px solid #dc2626;
    padding-left:20px;
    margin:30px 0;
    font-style:italic;
}

/* =========================
AI SUMMARY
========================= */

.tn-ai-summary{
    background:#eff6ff;
    border-left:4px solid #2563eb;
    padding:20px;
    margin:20px 0;
    border-radius:8px;
}

/* =========================
TABLE OF CONTENTS
========================= */

.tn-table-of-contents{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:20px;
    margin:25px 0;
}

.tn-table-of-contents ul{
    padding-left:20px;
}

.tn-table-of-contents li{
    margin-bottom:10px;
}

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

.tn-share-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin:25px 0;
}

.tn-share-buttons a{
    background:#0f172a;
    color:#fff;
    padding:10px 15px;
    border-radius:8px;
    transition:.2s ease;
}

.tn-share-buttons a:hover{
    transform:translateY(-2px);
}

/* =========================
REACTIONS
========================= */

.tn-single-reactions,
.tn-post-card-reactions{
    display:flex;
    gap:12px;
    margin-top:15px;
}

.tn-like-button,
.tn-dislike-button{
    border:none;
    background:#f1f5f9;
    padding:10px 15px;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
    transition:.2s ease;
}

.tn-like-button:hover{
    background:#dcfce7;
}

.tn-dislike-button:hover{
    background:#fee2e2;
}

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

.tn-author-box{
    display:flex;
    gap:20px;
    align-items:center;
    background:#fff;
    padding:25px;
    border-radius:12px;
    border:1px solid #e2e8f0;
    margin:30px 0;
}

.tn-author-avatar img{
    border-radius:50%;
}

.tn-author-content p{
    color:#64748b;
}

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

.tn-sticky-sidebar{
    position:sticky;
    position:-webkit-sticky;
    top:100px;
    align-self:flex-start;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:20px;
}

.tn-sticky-sidebar ul{
    list-style:none;
}

.tn-sticky-sidebar li{
    padding:12px 0;
    border-bottom:1px solid #e2e8f0;
}

/* =========================
MOBILE
========================= */

@media(max-width:992px){

    .single .tn-container{
        display:block;
    }

    .tn-content,
    .tn-sidebar{
        width:100%;
    }

    .tn-sidebar{
        margin-top:30px;
    }

    .tn-sticky-sidebar{
        position:relative;
        top:auto;
    }

}

@media(max-width:768px){

    .tn-article-content{
        padding:20px;
        font-size:16px;
    }

    .tn-author-box{
        flex-direction:column;
        text-align:center;
    }

}