/**
 * Gutenberg Blocks Inter-Block Spacing System (Mobile First)
 * 
 * Provides consistent margin and padding classes for Gutenberg blocks
 * with responsive, mobile-first approach for better aesthetics.
 * Two breakpoints: Mobile/Tablet (default) and Desktop (1024px+)
 */

/* ==========================================================================
   Block Spacing Variables (Mobile First)
   ========================================================================== */

:root {
    /* Mobile/Tablet spacing scale (default - up to 1023px) */
    --block-spacing-xs: 10px;
    --block-spacing-sm: 16px;
    --block-spacing-md: 24px;
    --block-spacing-lg: 32px;
    --block-spacing-xl: 48px;
    --block-spacing-2xl: 64px;;
    
    /* Padding specific mobile/tablet scale for better aesthetics */
    --block-padding-xs: 10px;
    --block-padding-sm: 16px;
    --block-padding-md: 24px;
    --block-padding-lg: 32px;
    --block-padding-xl: 48px;
    --block-padding-2xl: 64px;
}

/* Desktop (1024px and up) */
@media (min-width: 1024px) {
    :root {
        --block-spacing-xs: 16px;
        --block-spacing-sm: 24px;
        --block-spacing-md: 32px;
        --block-spacing-lg: 48px;
        --block-spacing-xl: 64px;
        --block-spacing-2xl: 80px;
        
        --block-padding-xs: 16px;
        --block-padding-sm: 24px;
        --block-padding-md: 32px;
        --block-padding-lg: 48px;
        --block-padding-xl: 64px;
        --block-padding-2xl: 80px;
    }
}

/* ==========================================================================
   Block Container Reset
   ========================================================================== */

/* Reset default margins for block wrappers to let our system take over */
.wp-block-group,
.wp-block-cover,
.wp-block-columns,
.wp-block-group__inner-container {
    margin-top: 0;
    margin-bottom: 0;
}

/* ==========================================================================
   Margin Classes (Mobile First)
   ========================================================================== */

/* Top Margin - Space above the block */
.block-spacing-top-none {
    margin-top: 0 !important;
}

.block-spacing-top-xs {
    margin-top: var(--block-spacing-xs) !important;
}

.block-spacing-top-sm {
    margin-top: var(--block-spacing-sm) !important;
}

.block-spacing-top-md {
    margin-top: var(--block-spacing-md) !important;
}

.block-spacing-top-lg {
    margin-top: var(--block-spacing-lg) !important;
}

.block-spacing-top-xl {
    margin-top: var(--block-spacing-xl) !important;
}

.block-spacing-top-2xl {
    margin-top: var(--block-spacing-2xl) !important;
}

/* Bottom Margin - Space below the block */
.block-spacing-bottom-none {
    margin-bottom: 0 !important;
}

.block-spacing-bottom-xs {
    margin-bottom: var(--block-spacing-xs) !important;
}

.block-spacing-bottom-sm {
    margin-bottom: var(--block-spacing-sm) !important;
}

.block-spacing-bottom-md {
    margin-bottom: var(--block-spacing-md) !important;
}

.block-spacing-bottom-lg {
    margin-bottom: var(--block-spacing-lg) !important;
}

.block-spacing-bottom-xl {
    margin-bottom: var(--block-spacing-xl) !important;
}

.block-spacing-bottom-2xl {
    margin-bottom: var(--block-spacing-2xl) !important;
}

/* Vertical Margin - Both top and bottom */
.block-spacing-vertical-none {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.block-spacing-vertical-xs {
    margin-top: var(--block-spacing-xs) !important;
    margin-bottom: var(--block-spacing-xs) !important;
}

.block-spacing-vertical-sm {
    margin-top: var(--block-spacing-sm) !important;
    margin-bottom: var(--block-spacing-sm) !important;
}

.block-spacing-vertical-md {
    margin-top: var(--block-spacing-md) !important;
    margin-bottom: var(--block-spacing-md) !important;
}

.block-spacing-vertical-lg {
    margin-top: var(--block-spacing-lg) !important;
    margin-bottom: var(--block-spacing-lg) !important;
}

.block-spacing-vertical-xl {
    margin-top: var(--block-spacing-xl) !important;
    margin-bottom: var(--block-spacing-xl) !important;
}

.block-spacing-vertical-2xl {
    margin-top: var(--block-spacing-2xl) !important;
    margin-bottom: var(--block-spacing-2xl) !important;
}

/* ==========================================================================
   Padding Classes (Mobile First)
   ========================================================================== */

/* Top Padding */
.block-padding-top-none {
    padding-top: 0 !important;
}

.block-padding-top-xs {
    padding-top: var(--block-padding-xs) !important;
}

.block-padding-top-sm {
    padding-top: var(--block-padding-sm) !important;
}

.block-padding-top-md {
    padding-top: var(--block-padding-md) !important;
}

.block-padding-top-lg {
    padding-top: var(--block-padding-lg) !important;
}

.block-padding-top-xl {
    padding-top: var(--block-padding-xl) !important;
}

.block-padding-top-2xl {
    padding-top: var(--block-padding-2xl) !important;
}

/* Bottom Padding */
.block-padding-bottom-none {
    padding-bottom: 0 !important;
}

.block-padding-bottom-xs {
    padding-bottom: var(--block-padding-xs) !important;
}

.block-padding-bottom-sm {
    padding-bottom: var(--block-padding-sm) !important;
}

.block-padding-bottom-md {
    padding-bottom: var(--block-padding-md) !important;
}

.block-padding-bottom-lg {
    padding-bottom: var(--block-padding-lg) !important;
}

.block-padding-bottom-xl {
    padding-bottom: var(--block-padding-xl) !important;
}

.block-padding-bottom-2xl {
    padding-bottom: var(--block-padding-2xl) !important;
}

/* Left Padding */
.block-padding-left-none {
    padding-left: 0 !important;
}

.block-padding-left-xs {
    padding-left: var(--block-padding-xs) !important;
}

.block-padding-left-sm {
    padding-left: var(--block-padding-sm) !important;
}

.block-padding-left-md {
    padding-left: var(--block-padding-md) !important;
}

.block-padding-left-lg {
    padding-left: var(--block-padding-lg) !important;
}

.block-padding-left-xl {
    padding-left: var(--block-padding-xl) !important;
}

.block-padding-left-2xl {
    padding-left: var(--block-padding-2xl) !important;
}

/* Right Padding */
.block-padding-right-none {
    padding-right: 0 !important;
}

.block-padding-right-xs {
    padding-right: var(--block-padding-xs) !important;
}

.block-padding-right-sm {
    padding-right: var(--block-padding-sm) !important;
}

.block-padding-right-md {
    padding-right: var(--block-padding-md) !important;
}

.block-padding-right-lg {
    padding-right: var(--block-padding-lg) !important;
}

.block-padding-right-xl {
    padding-right: var(--block-padding-xl) !important;
}

.block-padding-right-2xl {
    padding-right: var(--block-padding-2xl) !important;
}

/* ==========================================================================
   Mobile-Specific Aesthetic Improvements
   ========================================================================== */

/* Extra small screens (max-width: 480px) - Even more compact */
@media (max-width: 480px) {
    :root {
        /* Further reduce spacing for very small screens */
        --block-spacing-xs: 10px;
        --block-spacing-sm: 14px;
        --block-spacing-md: 20px;
        --block-spacing-lg: 28px;
        --block-spacing-xl: 36px;
        --block-spacing-2xl: 44px;
        
        --block-padding-xs: 8px;
        --block-padding-sm: 12px;
        --block-padding-md: 16px;
        --block-padding-lg: 24px;
        --block-padding-xl: 32px;
        --block-padding-2xl: 40px;
    }
    
    /* Special horizontal padding reduction for narrow screens */
    .block-padding-left-lg,
    .block-padding-right-lg {
        padding-left: calc(var(--block-padding-lg) * 0.75) !important;
        padding-right: calc(var(--block-padding-lg) * 0.75) !important;
    }
    
    .block-padding-left-xl,
    .block-padding-right-xl {
        padding-left: calc(var(--block-padding-xl) * 0.75) !important;
        padding-right: calc(var(--block-padding-xl) * 0.75) !important;
    }
    
    .block-padding-left-2xl,
    .block-padding-right-2xl {
        padding-left: calc(var(--block-padding-2xl) * 0.75) !important;
        padding-right: calc(var(--block-padding-2xl) * 0.75) !important;
    }
}

/* Landscape orientation on mobile - reduce vertical spacing */
@media (max-width: 1023px) and (orientation: landscape) {
    :root {
        --block-spacing-lg: 24px;
        --block-spacing-xl: 32px;
        --block-spacing-2xl: 40px;
        
        --block-padding-lg: 24px;
        --block-padding-xl: 32px;
        --block-padding-2xl: 40px;
    }
}

/* ==========================================================================
   Theme Block Integration
   ========================================================================== */

/* Ensure our spacing system works with existing theme blocks */
.wp-block-group:has(.hero-block),
.wp-block-group:has(.blog-articles-section),
.wp-block-group:has(.faq-section),
.wp-block-group:has(.case-study-section),
.wp-block-group:has(.features-section),
.wp-block-group:has(.pricing-section),
.wp-block-group:has(.partners-banner-section),
.wp-block-group:has(.subscribe-banner-section),
.wp-block-group:has(.reviews-section),
.wp-block-group:has(.tabs-slider),
.wp-block-group:has(.accordion-slider),
.wp-block-group:has(.how-it-works),
.wp-block-group:has(.integrations-banner) {
    /* Remove default margins to let our spacing system take over */
    margin-top: 0;
    margin-bottom: 0;
}

/* ==========================================================================
   Utility Classes for Common Patterns
   ========================================================================== */

/* Common section spacing patterns (Mobile First) */
.block-section-spacing {
    margin-top: var(--block-spacing-md);
    margin-bottom: var(--block-spacing-md);
}

.block-section-spacing-large {
    margin-top: var(--block-spacing-lg);
    margin-bottom: var(--block-spacing-lg);
}

.block-section-spacing-small {
    margin-top: var(--block-spacing-sm);
    margin-bottom: var(--block-spacing-sm);
}

@media (min-width: 1024px) {
    .block-section-spacing {
        margin-top: var(--block-spacing-lg);
        margin-bottom: var(--block-spacing-lg);
    }
    
    .block-section-spacing-large {
        margin-top: var(--block-spacing-xl);
        margin-bottom: var(--block-spacing-xl);
    }
    
    .block-section-spacing-small {
        margin-top: var(--block-spacing-md);
        margin-bottom: var(--block-spacing-md);
    }
}

/* ==========================================================================
   Print Styles - Remove excessive spacing for print
   ========================================================================== */

@media print {
    [class*="block-spacing-"],
    [class*="block-padding-"] {
        margin: 0 !important;
        padding: 8px !important;
    }
}