/* ===================================
   Blog Post Page - Mobile Optimization
   =================================== */

/* ============= Mobile Improvements ============= */
@media (max-width: 768px) {
    /* Post Container */
    .blog-post-page {
        padding: 1rem 0 3rem;
    }

    .post-container {
        padding: 0 0.5rem;
    }

    /* Post Header - Better Mobile Layout */
    .post-header {
        padding: 1.5rem;
        border-radius: 16px 16px 0 0;
    }

    .post-header .post-category-badge {
        margin-bottom: 1rem;
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
    }

    .post-header .post-title {
        font-size: 1.5rem !important;
        line-height: 1.3;
        margin-bottom: 1rem;
    }

    /* Post Meta - Stack on Mobile */
    .post-header .post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        font-size: 0.8rem;
    }

    .post-meta-item {
        gap: 0.4rem;
    }

    .post-author {
        width: 100%;
    }

    .post-author-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    /* Featured Image - Smaller on Mobile */
    .post-featured-image {
        height: 220px;
        border-radius: 0;
    }

    /* Post Body - Better Padding */
    .post-body {
        padding: 1.5rem;
        border-radius: 0 0 16px 16px;
    }

    .post-content-text {
        font-size: 1rem;
        line-height: 1.7;
    }

    .post-content-text h2 {
        font-size: 1.5rem;
        margin: 1.5rem 0 1rem;
    }

    .post-content-text h3 {
        font-size: 1.25rem;
        margin: 1.25rem 0 0.75rem;
    }

    .post-content-text p {
        margin-bottom: 1rem;
    }

    .post-content-text ul,
    .post-content-text ol {
        padding-left: 1.5rem;
        margin-bottom: 1rem;
    }

    [dir="rtl"] .post-content-text ul,
    [dir="rtl"] .post-content-text ol {
        padding-left: 0;
        padding-right: 1.5rem;
    }

    .post-content-text blockquote {
        margin: 1.5rem 0;
        padding: 1rem 1.25rem;
        font-size: 0.95rem;
    }

    .post-content-text img {
        margin: 1.5rem 0;
        border-radius: 8px;
    }

    /* Tags - Better Mobile Layout */
    .post-tags {
        margin-top: 2rem;
        padding-top: 1.5rem;
        gap: 0.5rem;
    }

    .post-tags i {
        font-size: 1rem !important;
    }

    .post-tag {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }

    /* Post Actions - Stack on Mobile */
    .post-actions {
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }

    .post-like-btn {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }

    .post-like-btn i {
        font-size: 1.1rem;
    }

    .post-share {
        width: 100%;
        justify-content: center;
        gap: 0.5rem;
    }

    .share-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    /* Comments Section - Mobile Optimization */
    .comments-section {
        margin-top: 2rem;
        padding: 1.5rem;
        border-radius: 16px;
    }

    .comments-header {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        flex-wrap: wrap;
    }

    .comments-header h3 {
        font-size: 1.35rem;
    }

    .comments-count {
        min-width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    /* Comment Form - Mobile Friendly */
    .comment-form {
        margin-bottom: 2rem;
    }

    .comment-form textarea {
        min-height: 100px;
        padding: 0.875rem;
        font-size: 0.95rem;
        border-radius: 10px;
    }

    .btn-submit-comment {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    /* Comments List - Better Mobile Layout */
    .comments-list {
        gap: 1.5rem;
    }

    .comment {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        border-radius: 12px;
    }

    .comment-avatar {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .comment-author {
        font-size: 0.95rem;
    }

    .comment-date {
        font-size: 0.8rem;
    }

    .comment-text {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    .comment-actions {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .comment-action-btn {
        font-size: 0.8rem;
    }

    /* Nested Replies - Better Mobile Layout */
    .comment-reply {
        margin-left: 1.5rem;
        margin-top: 1rem;
    }

    [dir="rtl"] .comment-reply {
        margin-left: 0;
        margin-right: 1.5rem;
    }

    /* Related Posts - Mobile Grid */
    .related-posts {
        margin: 2rem auto;
        padding: 0 0.5rem;
    }

    .related-posts h3 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .related-posts .blog-post {
        margin: 0;
    }

    .related-posts .post-image {
        height: 200px;
    }

    .related-posts .post-content {
        padding: 1.25rem;
    }

    .related-posts .post-title {
        font-size: 1.15rem;
        margin-bottom: 0.75rem;
    }

    .related-posts .post-excerpt {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }

    /* Empty State */
    .empty-state {
        padding: 3rem 1.5rem;
    }

    .empty-state i {
        font-size: 3.5rem;
    }

    .empty-state h3 {
        font-size: 1.25rem;
    }

    .empty-state p {
        font-size: 0.9rem;
    }
}

/* ============= Extra Small Screens (320px - 480px) ============= */
@media (max-width: 480px) {
    .blog-post-page {
        padding: 0.5rem 0 2rem;
    }

    .post-container {
        padding: 0 0.25rem;
    }

    /* Post Header - Very Small Screens */
    .post-header {
        padding: 1rem;
        border-radius: 12px 12px 0 0;
    }

    .post-header .post-category-badge {
        font-size: 0.65rem;
        padding: 0.35rem 0.7rem;
        gap: 0.35rem;
    }

    .post-header .post-category-badge i {
        font-size: 0.75rem;
    }

    .post-header .post-title {
        font-size: 1.25rem !important;
        line-height: 1.25;
    }

    .post-header .post-meta {
        font-size: 0.75rem;
        gap: 0.5rem;
    }

    .post-author-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem;
    }

    .post-meta i {
        font-size: 0.85rem;
    }

    /* Featured Image */
    .post-featured-image {
        height: 180px;
    }

    /* Post Body */
    .post-body {
        padding: 1rem;
        border-radius: 0 0 12px 12px;
    }

    .post-content-text {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .post-content-text h2 {
        font-size: 1.35rem;
        margin: 1.25rem 0 0.75rem;
    }

    .post-content-text h3 {
        font-size: 1.15rem;
        margin: 1rem 0 0.5rem;
    }

    .post-content-text ul,
    .post-content-text ol {
        padding-left: 1.25rem;
        font-size: 0.9rem;
    }

    [dir="rtl"] .post-content-text ul,
    [dir="rtl"] .post-content-text ol {
        padding-left: 0;
        padding-right: 1.25rem;
    }

    .post-content-text blockquote {
        margin: 1.25rem 0;
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
    }

    /* Tags */
    .post-tags {
        margin-top: 1.5rem;
        padding-top: 1.25rem;
        gap: 0.4rem;
    }

    .post-tags i {
        font-size: 0.9rem !important;
    }

    .post-tag {
        font-size: 0.7rem;
        padding: 0.35rem 0.7rem;
        gap: 0.35rem;
    }

    /* Post Actions */
    .post-actions {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
    }

    .post-like-btn {
        padding: 0.65rem 1rem;
        font-size: 0.85rem;
    }

    .post-like-btn i {
        font-size: 1rem;
    }

    .share-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    /* Comments Section */
    .comments-section {
        margin-top: 1.5rem;
        padding: 1rem;
        border-radius: 12px;
    }

    .comments-header {
        margin-bottom: 1.25rem;
        padding-bottom: 0.875rem;
    }

    .comments-header h3 {
        font-size: 1.2rem;
    }

    .comments-count {
        min-width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    /* Comment Form */
    .comment-form {
        margin-bottom: 1.5rem;
    }

    .comment-form textarea {
        min-height: 90px;
        padding: 0.75rem;
        font-size: 0.9rem;
        border-radius: 8px;
    }

    .btn-submit-comment {
        padding: 0.65rem 1.25rem;
        font-size: 0.85rem;
        border-radius: 40px;
    }

    /* Comments */
    .comments-list {
        gap: 1.25rem;
    }

    .comment {
        gap: 0.875rem;
        padding: 0.875rem;
        border-radius: 10px;
    }

    .comment-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    .comment-author {
        font-size: 0.9rem;
    }

    .comment-date {
        font-size: 0.75rem;
    }

    .comment-text {
        font-size: 0.85rem;
    }

    .comment-actions {
        gap: 0.875rem;
    }

    .comment-action-btn {
        font-size: 0.75rem;
    }

    /* Nested Replies */
    .comment-reply {
        margin-left: 1rem;
        margin-top: 0.875rem;
    }

    [dir="rtl"] .comment-reply {
        margin-left: 0;
        margin-right: 1rem;
    }

    /* Related Posts */
    .related-posts {
        margin: 1.5rem auto;
    }

    .related-posts h3 {
        font-size: 1.35rem;
        margin-bottom: 1.25rem;
    }

    .related-posts-grid {
        gap: 1.25rem;
    }

    .related-posts .post-image {
        height: 180px;
    }

    .related-posts .post-content {
        padding: 1rem;
    }

    .related-posts .post-title {
        font-size: 1.05rem;
        margin-bottom: 0.5rem;
    }

    .related-posts .post-excerpt {
        font-size: 0.825rem;
        margin-bottom: 0.875rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .related-posts .read-more-btn {
        font-size: 0.85rem;
    }

    /* Empty State */
    .empty-state {
        padding: 2.5rem 1rem;
    }

    .empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .empty-state h3 {
        font-size: 1.15rem;
        margin-bottom: 0.75rem;
    }

    .empty-state p {
        font-size: 0.85rem;
    }
}

/* ============= Landscape Mode (Mobile) ============= */
@media (max-width: 768px) and (orientation: landscape) {
    .post-featured-image {
        height: 280px;
    }

    .post-header .post-title {
        font-size: 1.35rem !important;
    }

    .comments-section {
        margin-top: 1.5rem;
    }
}

/* ============= Text Selection & Touch Improvements ============= */
@media (max-width: 768px) {
    /* Better touch targets */
    .share-btn,
    .post-like-btn,
    .comment-action-btn,
    .btn-submit-comment {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* Prevent text selection on buttons */
    button,
    .share-btn,
    .post-like-btn {
        -webkit-user-select: none;
        user-select: none;
    }

    /* Smooth scrolling */
    .comments-section,
    .related-posts {
        scroll-margin-top: 80px;
    }

    /* Fix image overflow */
    .post-content-text img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    /* Fix table overflow */
    .post-content-text table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Better code block display */
    .post-content-text pre,
    .post-content-text code {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.85rem;
    }
}

/* ============= iOS Specific Fixes ============= */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* Fix iOS input zoom */
        input,
        textarea,
        select {
            font-size: 16px !important;
        }

        /* Fix iOS safe area */
        .blog-post-page {
            padding-bottom: env(safe-area-inset-bottom, 2rem);
        }

        /* Prevent iOS bounce on fixed elements */
        body {
            -webkit-overflow-scrolling: touch;
        }
    }
}

/* ============= Loading States for Mobile ============= */
@media (max-width: 768px) {
    .loading-spinner {
        padding: 3rem 0;
    }

    .spinner {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }
}