/* 
 * RWD 1024x768 Desktop Default Styles
 * Date: 2026-01-02
 * Purpose: Set 1024x768 as default desktop size with responsive design
 */

/* Base: Desktop Default (1024px and above) */
@media (min-width: 1024px) {
    /* Main container - 1024px max width for desktop */
    .main-container,
    .layout-grid,
    .content-section {
        max-width: 1177px; /* +15% wider than 1024px */
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Navigation containers */
    .nav-container,
    .utility-container {
        max-width: 1177px; /* +15% wider than 1024px */
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Content width optimization for 1024px */
    .content {
        max-width: 1177px; /* +15% wider than 1024px */
        margin: 0 auto;
        padding: 0 12px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Make the page feel wider on 1024px while staying within viewport */
    .main-container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .content-section {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    /* Grid layouts optimized for 1024px */
    .layout-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 1177px; /* +15% wider than 1024px */
    }
    
    /* Department news: One department per row (single column) */
    .department-news {
        display: block !important;
        width: 100% !important;
    }
    
    .department-section {
        margin-bottom: 1.5rem !important;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
    }
    
    .department-section:last-child,
    .department-section:nth-last-child(2):nth-child(odd) {
        border-bottom: none;
        padding-bottom: 0;
    }
    
    /* Ensure proper spacing */
    html {
        font-size: 14px; /* Global base for rem (desktop) */
    }
    body {
        font-size: 14px; /* Base font size for desktop */
    }
}

/* Tablet: 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .main-container,
    .layout-grid,
    .content-section,
    .nav-container,
    .utility-container {
        max-width: 100%;
        padding: 0 15px;
    }
    
    html {
        font-size: 13px; /* Global base for rem (tablet) */
    }
    body {
        font-size: 13px;
    }
}

/* Mobile: below 768px */
@media (max-width: 767px) {
    .main-container,
    .layout-grid,
    .content-section,
    .nav-container,
    .utility-container {
        max-width: 100%;
        padding: 0 10px;
    }
    
    html {
        font-size: 12px; /* Global base for rem (mobile) */
    }
    body {
        font-size: 12px;
    }

    /* 頂部工具列：縮小間距與字級，避免 RWD 溢出 */
    .utility-link {
        padding: 6px 8px;
        font-size: 12px;
        letter-spacing: 0;
        gap: 4px;
    }
    .utility-icon {
        font-size: 12px;
    }
    #main-nav-menu {
        scroll-margin-top: 4.5rem;
    }
}

/* Large screens: above 1400px (optional enhancement) */
@media (min-width: 1400px) {
    .main-container,
    .layout-grid,
    .content-section {
        max-width: 1400px;
    }
    
    .nav-container,
    .utility-container {
        max-width: 1400px;
    }
}