/**
 * NestorLand Articles - Responsive Stylesheet
 */

/* Tablet */
@media (max-width: 1024px) {
    .nl-articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nl-articles-masonry {
        column-count: 2;
    }
    
    .nl-related-articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nl-article-list-item .nl-article-image {
        width: 250px;
    }
    
    .nl-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .nl-articles-grid {
        grid-template-columns: 1fr;
    }
    
    .nl-articles-masonry {
        column-count: 1;
    }
    
    .nl-article-list-item {
        flex-direction: column;
    }
    
    .nl-article-list-item .nl-article-image {
        width: 100%;
    }
    
    .nl-article-meta {
        gap: var(--nl-spacing-sm, 8px);
    }
    
    .nl-single-article-title {
        font-size: 28px;
    }
    
    .nl-single-article-content {
        font-size: 16px;
    }
    
    .nl-author-box {
        flex-direction: column;
        text-align: center;
    }
    
    .nl-related-articles-grid {
        grid-template-columns: 1fr;
    }
    
    .nl-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .nl-share-menu {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nl-comments-area {
        padding: 24px 18px;
        border-radius: 24px;
    }

    .nl-comment-body {
        padding: 18px;
        border-radius: 20px;
    }

    .nl-comment-meta,
    .nl-comment-author-info {
        align-items: flex-start;
    }

    .nl-comment-list .children {
        padding-right: 16px;
    }

    .nl-comment-list .children .nl-comment-body::before {
        right: 16px;
    }

    .nl-comment-form,
    .nl-must-login-notice,
    .nl-comment-list #respond.comment-respond {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .nl-comment-form .comment-reply-title,
    #respond.comment-respond .comment-reply-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .nl-comment-form .comment-reply-title small,
    #respond.comment-respond .comment-reply-title small {
        margin-right: 0;
    }

    .nl-comment-form .form-submit {
        justify-content: stretch;
    }

    .nl-submit-comment {
        width: 100%;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .nl-article-content {
        padding: 12px;
    }
    
    .nl-article-title {
        font-size: 16px;
    }
    
    .nl-single-article-title {
        font-size: 24px;
    }
    
    .nl-back-to-top {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .nl-back-to-top {
        right: 68px;
        bottom: 16px;
    }
    
    .nl-comment-body {
        flex-direction: column;
        padding: 16px;
    }
    
    .nl-comment-form {
        padding: 16px;
        width: 100%;
        box-sizing: border-box;
    }
    
    #respond {
        width: 100%;
        box-sizing: border-box;
    }
    
    .nl-comments-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .nl-comments-header .nl-add-comment-btn {
        width: 100%;
        justify-content: center;
    }

    .nl-comments-area {
        padding: 18px 14px;
        border-radius: 20px;
    }

    .nl-comment-author-avatar img {
        width: 52px;
        height: 52px;
    }

    .nl-comment-list .children {
        margin-top: 14px;
        padding-right: 12px;
    }

    .nl-comment-list .children .nl-comment-body::before {
        top: -10px;
        right: 12px;
        font-size: 10px;
    }

    .nl-comment-actions,
    .nl-reply-link-wrapper {
        width: 100%;
    }

    .nl-reply-link-wrapper a {
        width: 100%;
        justify-content: center;
    }
}