/**
 * Responsive Design
 * Mobile-first approach
 */

/* Mobile First - Base is already mobile optimized */

/* Tablet (768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 728px;
    }
    
    .container-sm {
        max-width: 640px;
    }
    
    .container-lg {
        max-width: 960px;
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .article-title {
        font-size: var(--font-size-3xl);
    }
    
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .layout-sidebar {
        grid-template-columns: 1fr 300px;
        gap: var(--spacing-2xl);
    }
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    .container {
        max-width: 1000px;
    }
    
    .container-lg {
        max-width: 1200px;
    }
    
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .article-title {
        font-size: var(--font-size-4xl);
    }
    
    .footer-content {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large Desktop (1280px and up) */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
    
    .container-lg {
        max-width: 1400px;
    }
}

/* Small devices (less than 480px) */
@media (max-width: 479px) {
    html {
        font-size: 14px;
    }
    
    h1 {
        font-size: 28px;
    }
    
    h2 {
        font-size: 24px;
    }
    
    h3 {
        font-size: 20px;
    }
    
    .header-inner {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }
    
    nav {
        flex-direction: column;
        width: 100%;
        gap: var(--spacing-sm);
    }
    
    nav a {
        display: block;
        text-align: center;
        padding: var(--spacing-sm) 0;
    }
    
    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .article-stats {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .article-featured-image {
        max-height: 300px;
    }
    
    .toc {
        margin: var(--spacing-lg) 0;
        padding: var(--spacing-md);
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    button,
    a,
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }
    
    .tag,
    .category {
        padding: 8px 12px;
    }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Print styles */
@media print {
    body {
        background: white;
        color: black;
    }
    
    header,
    footer,
    .sidebar,
    .pagination,
    button,
    .btn {
        display: none;
    }
    
    a {
        text-decoration: underline;
    }
    
    .article-body {
        max-width: 100%;
        font-size: 12pt;
        line-height: 1.6;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    p {
        page-break-inside: avoid;
    }
    
    pre,
    blockquote {
        page-break-inside: avoid;
    }
}