/* ========================================
   RESPONSIVE DESIGN SYSTEM
   ========================================

   BREAKPOINT STRATEGY:
   - Mobile:     max-width: 768px      (Primary breakpoint - used across 90% of files)
   - Tablet:     769px - 1024px        (Intermediate sizing)
   - Desktop:    min-width: 1200px     (Navigation and complex layouts)

   COMPONENT-SPECIFIC BREAKPOINTS:
   - Header:     1200px (Desktop nav requires wider screen)
   - Footer:     769px  (Simpler layout works well on tablet)
   - Modals:     480px  (Extra small screen handling)
   - Buttons:    600px  (Medium mobile device sizing)

   ORGANIZATION:
   - Global responsive rules:     responsive.css (this file)
   - Component-specific rules:    components/*.css (header, footer, buttons, modal)
   - Page-specific rules:         pages/*.css (index, about, contact, etc.)

   ======================================== */

/* Base Responsive Design */
@media (max-width: 768px) {
    /* Container adjustments */
    .container {
        padding: 0 15px;
    }

    /* Mobile navigation is owned by components/header.css. */
    /* Intentionally no overrides here to avoid conflicts. */

    /* Footer adjustments */
    footer .container {
        flex-direction: column;
        text-align: center;
    }

    /* Common grid layouts */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* Common flex layouts */
    .flex-container {
        flex-direction: column;
    }

    /* Image responsiveness: prevent upscaling small images */
    img {
        max-width: 100%;
        height: auto;
    }

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

    /* Modal adjustments */
    .modal-content {
        width: 95%;
        margin: 20px auto;
    }
}

/* Tablet specific adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none;
    }
}