/* Mobile Responsive Styles for Articles */

/* Tablet and below */
@media (max-width: 768px) {
    .article-content {
        padding: 2rem 1rem;
    }
    
    .article-content h2 {
        font-size: 1.5rem;
        margin: 2rem 0 1rem;
    }
    
    .article-content h3 {
        font-size: 1.25rem;
        margin: 1.5rem 0 0.75rem;
    }
    
    .article-content p {
        font-size: 1rem;
    }
    
    .highlight-box,
    .warning-box,
    .success-box {
        padding: 1rem;
        margin: 1.5rem 0;
    }
    
    .cta-box {
        padding: 2rem 1.5rem;
    }
    
    table {
        font-size: 0.85rem;
        min-width: 500px; /* Force horizontal scroll */
    }
    
    th, td {
        padding: 0.75rem 0.5rem;
    }
    
    .table-responsive {
        margin: 1.5rem -1rem; /* Full width */
        padding: 0 1rem;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .article-content {
        padding: 1.5rem 0.75rem;
    }
    
    .article-content h2 {
        font-size: 1.25rem;
    }
    
    .article-content h3 {
        font-size: 1.1rem;
    }
    
    .highlight-box,
    .warning-box,
    .success-box,
    .cta-box {
        padding: 1rem;
        margin: 1rem 0;
        font-size: 0.9rem;
    }
    
    table {
        font-size: 0.8rem;
        min-width: 450px;
    }
    
    th, td {
        padding: 0.5rem 0.35rem;
    }
}