/* ===================================
   Mobile Responsive Styles
   =================================== */

/* Prevent horizontal scroll on all devices */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Ensure all images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent text overflow */
pre,
code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
}

/* Base responsive improvements */
@media (max-width: 1200px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (max-width: 992px) {
    .container {
        padding: 0 1rem;
    }

    /* Hero section */
    .hero {
        padding: 3rem 0;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    /* Stats grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* Charts grid */
    .charts-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    /* Prevent horizontal overflow */
    .container {
        max-width: 100%;
        overflow-x: hidden;
    }

    .article-full,
    .article-body,
    .article-content {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Typography */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    /* Hero section */
    .hero {
        padding: 2rem 0;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    /* Article grid */
    .article-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Article card */
    .article-card {
        flex-direction: column;
    }

    .article-card img {
        width: 100%;
        height: 200px;
    }

    /* Stats grid */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* Admin dashboard */
    .admin-dashboard {
        padding: 1rem;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Tables */
    .table-container {
        overflow-x: auto;
    }

    .admin-table {
        min-width: 600px;
    }

    /* Forms */
    .auth-card {
        padding: 1.5rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    /* Buttons */
    .btn-block {
        width: 100%;
    }

    /* Article Layout - Flexbox for sidebar reordering */
    .article-layout {
        display: flex;
        flex-direction: column;
    }

    .article-full {
        order: 1;
    }

    .article-sidebar {
        order: 2;
        position: static;
    }

    /* Modal */
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 1rem;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Article page */
    .article-header h1 {
        font-size: 1.75rem;
    }

    .article-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .article-content {
        font-size: 1rem;
    }

    .article-content img {
        max-width: 100%;
        height: auto;
    }

    /* Comments */
    .comment {
        padding: 1rem;
    }

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

    /* Social share */
    .social-share-buttons {
        justify-content: center;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .footer-links {
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {

    /* Container */
    .container {
        padding: 0 0.75rem;
    }

    /* Typography */
    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    /* Hero */
    .hero h1 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 0.9rem;
    }

    /* Buttons */
    .btn {
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
    }

    /* Article card */
    .article-card {
        padding: 1rem;
    }

    .article-card img {
        height: 180px;
    }

    /* Auth forms */
    .auth-card {
        padding: 1rem;
    }

    /* Admin dashboard */
    .admin-dashboard h1 {
        font-size: 1.25rem;
    }

    .stat-card {
        padding: 1rem;
    }

    .stat-value {
        font-size: 1.75rem;
    }

    /* Modal */
    .modal-content {
        padding: 1rem;
    }

    .modal-header h2 {
        font-size: 1.25rem;
    }

    /* Social buttons */
    .social-btn {
        width: 36px;
        height: 36px;
    }

    .social-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 1.5rem 0;
    }

    .modal-content {
        max-height: 85vh;
    }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {

    /* Increase touch targets */
    .btn,
    .nav-link,
    .social-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .article-card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }
}

/* Print styles */
@media print {

    .site-header,
    .mobile-menu-toggle,
    .theme-toggle,
    .social-share,
    .comment-form,
    footer {
        display: none;
    }

    .article-content {
        max-width: 100%;
    }

    .article-content img {
        max-width: 100%;
        page-break-inside: avoid;
    }
}