/* 
 * OzSparkHub Responsive Breakpoint Strategy
 * ==========================================
 * 
 * We use a hybrid approach:
 * 
 * 1. NAVBAR-SPECIFIC BREAKPOINTS (matching Bulma framework):
 *    - Mobile/Tablet: < 1088px (navbar in hamburger menu)
 *    - Desktop: ≥ 1088px (navbar fully expanded)
 * 
 * 2. CONTENT BREAKPOINTS (aligned with Bulma's tablet breakpoint):
 *    - Mobile: < 769px (single column, mobile-optimized)
 *    - Tablet/Desktop: ≥ 769px (multi-column, full features)
 * 
 * WHY THIS APPROACH?
 * - Navbar needs Bulma's breakpoint (1088px) to work correctly
 * - Content only needs mobile vs non-mobile distinction (768px)
 * - This prevents navbar layout issues on tablets (768-1087px)
 */

/* ========== NAVBAR-SPECIFIC STYLES ========== */
/* Tablet and below (navbar in hamburger mode) */
@media screen and (max-width: 1087px) {
    .navbar-burger {
        display: flex;
    }
    
    .navbar-menu {
        display: none;
    }
    
    .navbar-menu.is-active {
        display: block;
    }
}

/* Desktop and above (navbar fully expanded) */
@media screen and (min-width: 1088px) {
    .navbar-burger {
        display: none;
    }
    
    .navbar-menu {
        display: flex;
    }
}

/* ========== CONTENT BREAKPOINTS ========== */
/* Mobile styles */
@media screen and (max-width: 768px) {
    /* Single column layout */
    .container {
        padding: 0 1rem;
    }
    
    .columns {
        display: block;
    }
    
    .column {
        width: 100%;
    }
}

/* Tablet and Desktop styles */
@media screen and (min-width: 769px) {
    /* Multi-column layout */
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .columns {
        display: flex;
    }
}