/* =========================================================
   media_styles.css
   Responsive overrides for grid layout
   Load this AFTER framework.css
   ========================================================= */

/* =========================================================
   Tablet / Small Laptop (≤ 1280px)
   ---------------------------------------------------------
   Targets:
   - Small laptops
   - Large tablets in landscape (e.g., iPad Pro 12.9")
   - Desktop browsers resized below 1280px
   Layout:
   - 2 columns: sidebar(s) + main content
   ========================================================= */
@media (max-width: 1280px) {
    .parent {
        grid-template-columns: 250px 1fr;
        grid-template-rows: 250px 90px 90px auto auto 200px;
        grid-template-areas:
            "header header"
            "nav nav"
            "pagetitle pagetitle"
            "sidebar_left main"
            "sidebar_right main"
            "footer footer";
    }
}

/* =========================================================
   Small Tablet / Large Phone (≤ 1024px)
   ---------------------------------------------------------
   Targets:
   - iPad (9.7", 10.2") in portrait
   - Surface Pro 7 in portrait (912px)
   - Large Android tablets in portrait
   Layout:
   - Single column stacking all sections vertically
   ========================================================= */
@media (max-width: 1024px) {
    .parent {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "header"
            "nav"
            "pagetitle"
            "sidebar_left"
            "main"
            "sidebar_right"
            "footer";
    }

    .main {
        padding: 20px 10px; /* more compact padding for smaller screens */
    }
}

/* =========================================================
   Phone (≤ 768px)
   ---------------------------------------------------------
   Targets:
   - iPhone (all models)
   - Small Android phones
   - Small tablets in portrait
   Layout:
   - Single column
   - Reduced padding for better fit on small screens
   ========================================================= */
@media (max-width: 768px) {
    .main {
        padding: 15px 8px; /* tighter padding for small screens */
    }

    .sidebar_left,
    .sidebar_right {
        padding: 10px;
    }
}