/**
 * Mobile Spacing Utilities
 * 
 * Based on Bulma CSS spacing system
 * These classes only apply on mobile viewports (max-width: 768px)
 * 
 * Spacing scale:
 * 0: 0
 * 1: 0.25rem
 * 2: 0.5rem
 * 3: 0.75rem
 * 4: 1rem
 * 5: 1.5rem
 * 6: 3rem
 * 
 * Usage examples:
 * .p-6-mobile    - padding on all sides (mobile only)
 * .pt-2-mobile   - padding-top (mobile only)
 * .m-3-mobile    - margin on all sides (mobile only)
 * .mb-1-mobile   - margin-bottom (mobile only)
 * .px-4-mobile   - padding left and right (mobile only)
 * .my-5-mobile   - margin top and bottom (mobile only)
 */

@media screen and (max-width: 768px) {
    
    /* ========================================
       PADDING - ALL SIDES
       ======================================== */
    
    .p-0-mobile { padding: 0 !important; }
    .p-1-mobile { padding: 0.25rem !important; }
    .p-2-mobile { padding: 0.5rem !important; }
    .p-3-mobile { padding: 0.75rem !important; }
    .p-4-mobile { padding: 1rem !important; }
    .p-5-mobile { padding: 1.5rem !important; }
    .p-6-mobile { padding: 3rem !important; }
    
    
    /* ========================================
       PADDING - TOP
       ======================================== */
    
    .pt-0-mobile { padding-top: 0 !important; }
    .pt-1-mobile { padding-top: 0.25rem !important; }
    .pt-2-mobile { padding-top: 0.5rem !important; }
    .pt-3-mobile { padding-top: 0.75rem !important; }
    .pt-4-mobile { padding-top: 1rem !important; }
    .pt-5-mobile { padding-top: 1.5rem !important; }
    .pt-6-mobile { padding-top: 3rem !important; }
    
    
    /* ========================================
       PADDING - RIGHT
       ======================================== */
    
    .pr-0-mobile { padding-right: 0 !important; }
    .pr-1-mobile { padding-right: 0.25rem !important; }
    .pr-2-mobile { padding-right: 0.5rem !important; }
    .pr-3-mobile { padding-right: 0.75rem !important; }
    .pr-4-mobile { padding-right: 1rem !important; }
    .pr-5-mobile { padding-right: 1.5rem !important; }
    .pr-6-mobile { padding-right: 3rem !important; }
    
    
    /* ========================================
       PADDING - BOTTOM
       ======================================== */
    
    .pb-0-mobile { padding-bottom: 0 !important; }
    .pb-1-mobile { padding-bottom: 0.25rem !important; }
    .pb-2-mobile { padding-bottom: 0.5rem !important; }
    .pb-3-mobile { padding-bottom: 0.75rem !important; }
    .pb-4-mobile { padding-bottom: 1rem !important; }
    .pb-5-mobile { padding-bottom: 1.5rem !important; }
    .pb-6-mobile { padding-bottom: 3rem !important; }
    
    
    /* ========================================
       PADDING - LEFT
       ======================================== */
    
    .pl-0-mobile { padding-left: 0 !important; }
    .pl-1-mobile { padding-left: 0.25rem !important; }
    .pl-2-mobile { padding-left: 0.5rem !important; }
    .pl-3-mobile { padding-left: 0.75rem !important; }
    .pl-4-mobile { padding-left: 1rem !important; }
    .pl-5-mobile { padding-left: 1.5rem !important; }
    .pl-6-mobile { padding-left: 3rem !important; }
    
    
    /* ========================================
       PADDING - HORIZONTAL (left + right)
       ======================================== */
    
    .px-0-mobile { 
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .px-1-mobile { 
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    .px-2-mobile { 
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    .px-3-mobile { 
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .px-4-mobile { 
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .px-5-mobile { 
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    .px-6-mobile { 
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
    
    
    /* ========================================
       PADDING - VERTICAL (top + bottom)
       ======================================== */
    
    .py-0-mobile { 
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .py-1-mobile { 
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    .py-2-mobile { 
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    .py-3-mobile { 
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    .py-4-mobile { 
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .py-5-mobile { 
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    .py-6-mobile { 
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    
    /* ========================================
       MARGIN - ALL SIDES
       ======================================== */
    
    .m-0-mobile { margin: 0 !important; }
    .m-1-mobile { margin: 0.25rem !important; }
    .m-2-mobile { margin: 0.5rem !important; }
    .m-3-mobile { margin: 0.75rem !important; }
    .m-4-mobile { margin: 1rem !important; }
    .m-5-mobile { margin: 1.5rem !important; }
    .m-6-mobile { margin: 3rem !important; }
    
    
    /* ========================================
       MARGIN - TOP
       ======================================== */
    
    .mt-0-mobile { margin-top: 0 !important; }
    .mt-1-mobile { margin-top: 0.25rem !important; }
    .mt-2-mobile { margin-top: 0.5rem !important; }
    .mt-3-mobile { margin-top: 0.75rem !important; }
    .mt-4-mobile { margin-top: 1rem !important; }
    .mt-5-mobile { margin-top: 1.5rem !important; }
    .mt-6-mobile { margin-top: 3rem !important; }
    
    
    /* ========================================
       MARGIN - RIGHT
       ======================================== */
    
    .mr-0-mobile { margin-right: 0 !important; }
    .mr-1-mobile { margin-right: 0.25rem !important; }
    .mr-2-mobile { margin-right: 0.5rem !important; }
    .mr-3-mobile { margin-right: 0.75rem !important; }
    .mr-4-mobile { margin-right: 1rem !important; }
    .mr-5-mobile { margin-right: 1.5rem !important; }
    .mr-6-mobile { margin-right: 3rem !important; }
    
    
    /* ========================================
       MARGIN - BOTTOM
       ======================================== */
    
    .mb-0-mobile { margin-bottom: 0 !important; }
    .mb-1-mobile { margin-bottom: 0.25rem !important; }
    .mb-2-mobile { margin-bottom: 0.5rem !important; }
    .mb-3-mobile { margin-bottom: 0.75rem !important; }
    .mb-4-mobile { margin-bottom: 1rem !important; }
    .mb-5-mobile { margin-bottom: 1.5rem !important; }
    .mb-6-mobile { margin-bottom: 3rem !important; }
    
    
    /* ========================================
       MARGIN - LEFT
       ======================================== */
    
    .ml-0-mobile { margin-left: 0 !important; }
    .ml-1-mobile { margin-left: 0.25rem !important; }
    .ml-2-mobile { margin-left: 0.5rem !important; }
    .ml-3-mobile { margin-left: 0.75rem !important; }
    .ml-4-mobile { margin-left: 1rem !important; }
    .ml-5-mobile { margin-left: 1.5rem !important; }
    .ml-6-mobile { margin-left: 3rem !important; }
    
    
    /* ========================================
       MARGIN - HORIZONTAL (left + right)
       ======================================== */
    
    .mx-0-mobile { 
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .mx-1-mobile { 
        margin-left: 0.25rem !important;
        margin-right: 0.25rem !important;
    }
    .mx-2-mobile { 
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
    .mx-3-mobile { 
        margin-left: 0.75rem !important;
        margin-right: 0.75rem !important;
    }
    .mx-4-mobile { 
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
    .mx-5-mobile { 
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important;
    }
    .mx-6-mobile { 
        margin-left: 3rem !important;
        margin-right: 3rem !important;
    }
    
    
    /* ========================================
       MARGIN - VERTICAL (top + bottom)
       ======================================== */
    
    .my-0-mobile { 
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .my-1-mobile { 
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }
    .my-2-mobile { 
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .my-3-mobile { 
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    .my-4-mobile { 
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    .my-5-mobile { 
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    .my-6-mobile { 
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }
    
    
    /* ========================================
       MARGIN - AUTO (for centering)
       ======================================== */
    
    .m-auto-mobile { margin: auto !important; }
    .mt-auto-mobile { margin-top: auto !important; }
    .mr-auto-mobile { margin-right: auto !important; }
    .mb-auto-mobile { margin-bottom: auto !important; }
    .ml-auto-mobile { margin-left: auto !important; }
    .mx-auto-mobile { 
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .my-auto-mobile { 
        margin-top: auto !important;
        margin-bottom: auto !important;
    }
}