/* /home/rich/oxxoox/static/css/responsive.css */

/* ============================================
   MOBILE BREAKPOINTS
   ============================================ */

@media (max-width: 768px) {
    
    /* Container adjustments */
    .container {
        padding: var(--gap-lg) var(--gap-sm);
    }
    
    .page-title {
        font-size: 24px;
    }
    
    /* Grid adjustments - in grid.css already */
    
    /* Form adjustments */
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
    
    /* Navigation */
    .nav {
        flex-direction: column;
        gap: var(--gap-sm);
    }
    
    /* Profile */
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-picture {
        margin: 0 auto var(--gap-md);
    }
    
    .profile-stats {
        flex-direction: column;
        gap: var(--gap-sm);
    }
    
    /* Pattern display */
    .pattern-display {
        font-size: 48px;
    }
    
    /* Module controls */
    .module-controls {
        opacity: 1;
        top: 2px;
        right: 2px;
    }
    
    .module-control-btn {
        font-size: 9px;
        padding: 2px 6px;
    }
}

@media (max-width: 480px) {
    
    .page-title {
        font-size: 20px;
    }
    
    .module-grid {
        gap: 1px;
    }
    
    .pattern-display {
        font-size: 36px;
    }
}

/* ============================================
   TABLET ADJUSTMENTS
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    
    .container {
        max-width: 768px;
    }
    
    .module-grid {
        max-width: 540px;
    }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    
    .container {
        padding: var(--gap-md) var(--gap-sm);
    }
    
    .profile-header {
        flex-direction: row;
    }
}