/**
 * Unified Spacing System (Mobile First)
 * Breakpoints: 768px (tablet), 1024px (desktop)
 *
 * Classes use block-spacing-* for margins, block-padding-* for paddings
 */

/* ==========================================================================
   CSS Variables - Spacing Scale
   ========================================================================== */

:root {
    /* Responsive spacing scale (Mobile: 0-767px) */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 28px;
    --spacing-xl: 40px;
    --spacing-2xl: 52px;
    --spacing-3xl: 64px;

    /* Fixed pixel values (non-responsive) */
    --spacing-48: 48px;
    --spacing-64: 64px;

    /* Responsive 70px (48 → 64 → 70) */
    --spacing-70: 48px;

    /* Aliases for backward compatibility */
    --block-spacing-xs: var(--spacing-xs);
    --block-spacing-sm: var(--spacing-sm);
    --block-spacing-md: var(--spacing-md);
    --block-spacing-lg: var(--spacing-lg);
    --block-spacing-xl: var(--spacing-xl);
    --block-spacing-2xl: var(--spacing-2xl);
    --block-spacing-3xl: var(--spacing-3xl);
    --block-padding-xs: var(--spacing-xs);
    --block-padding-sm: var(--spacing-sm);
    --block-padding-md: var(--spacing-md);
    --block-padding-lg: var(--spacing-lg);
    --block-padding-xl: var(--spacing-xl);
    --block-padding-2xl: var(--spacing-2xl);
    --block-padding-3xl: var(--spacing-3xl);

    /* Editor preview variables */
    --wui-spacing-xs: var(--spacing-xs);
    --wui-spacing-sm: var(--spacing-sm);
    --wui-spacing-md: var(--spacing-md);
    --wui-spacing-lg: var(--spacing-lg);
    --wui-spacing-xl: var(--spacing-xl);
    --wui-spacing-2xl: var(--spacing-2xl);
    --wui-spacing-3xl: var(--spacing-3xl);
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) {
    :root {
        --spacing-xs: 12px;
        --spacing-sm: 18px;
        --spacing-md: 26px;
        --spacing-lg: 38px;
        --spacing-xl: 52px;
        --spacing-2xl: 66px;
        --spacing-3xl: 82px;
        --spacing-70: 64px;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    :root {
        --spacing-xs: 16px;
        --spacing-sm: 24px;
        --spacing-md: 32px;
        --spacing-lg: 48px;
        --spacing-xl: 64px;
        --spacing-2xl: 80px;
        --spacing-3xl: 100px;
        --spacing-70: 70px;
    }
}

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

.wp-block-group,
.wp-block-cover,
.wp-block-columns,
.wp-block-group__inner-container {
    margin-top: 0;
    margin-bottom: 0;
}

/* ==========================================================================
   Margin Classes (block-spacing-*)
   ========================================================================== */

/* Top Margin */
.block-spacing-top-none { margin-top: 0 !important; }
.block-spacing-top-xs { margin-top: var(--spacing-xs) !important; }
.block-spacing-top-sm { margin-top: var(--spacing-sm) !important; }
.block-spacing-top-md { margin-top: var(--spacing-md) !important; }
.block-spacing-top-lg { margin-top: var(--spacing-lg) !important; }
.block-spacing-top-xl { margin-top: var(--spacing-xl) !important; }
.block-spacing-top-2xl { margin-top: var(--spacing-2xl) !important; }
.block-spacing-top-3xl { margin-top: var(--spacing-3xl) !important; }

/* Bottom Margin */
.block-spacing-bottom-none { margin-bottom: 0 !important; }
.block-spacing-bottom-xs { margin-bottom: var(--spacing-xs) !important; }
.block-spacing-bottom-sm { margin-bottom: var(--spacing-sm) !important; }
.block-spacing-bottom-md { margin-bottom: var(--spacing-md) !important; }
.block-spacing-bottom-lg { margin-bottom: var(--spacing-lg) !important; }
.block-spacing-bottom-xl { margin-bottom: var(--spacing-xl) !important; }
.block-spacing-bottom-2xl { margin-bottom: var(--spacing-2xl) !important; }
.block-spacing-bottom-3xl { margin-bottom: var(--spacing-3xl) !important; }

/* Vertical Margin (top + bottom) */
.block-spacing-vertical-none {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.block-spacing-vertical-xs {
    margin-top: var(--spacing-xs) !important;
    margin-bottom: var(--spacing-xs) !important;
}
.block-spacing-vertical-sm {
    margin-top: var(--spacing-sm) !important;
    margin-bottom: var(--spacing-sm) !important;
}
.block-spacing-vertical-md {
    margin-top: var(--spacing-md) !important;
    margin-bottom: var(--spacing-md) !important;
}
.block-spacing-vertical-lg {
    margin-top: var(--spacing-lg) !important;
    margin-bottom: var(--spacing-lg) !important;
}
.block-spacing-vertical-xl {
    margin-top: var(--spacing-xl) !important;
    margin-bottom: var(--spacing-xl) !important;
}
.block-spacing-vertical-2xl {
    margin-top: var(--spacing-2xl) !important;
    margin-bottom: var(--spacing-2xl) !important;
}
.block-spacing-vertical-3xl {
    margin-top: var(--spacing-3xl) !important;
    margin-bottom: var(--spacing-3xl) !important;
}

/* Fixed pixel margins */
.block-spacing-top-48 { margin-top: var(--spacing-48) !important; }
.block-spacing-top-64 { margin-top: var(--spacing-64) !important; }
.block-spacing-top-70 { margin-top: var(--spacing-70) !important; }
.block-spacing-bottom-48 { margin-bottom: var(--spacing-48) !important; }
.block-spacing-bottom-64 { margin-bottom: var(--spacing-64) !important; }
.block-spacing-bottom-70 { margin-bottom: var(--spacing-70) !important; }
.block-spacing-vertical-48 {
    margin-top: var(--spacing-48) !important;
    margin-bottom: var(--spacing-48) !important;
}
.block-spacing-vertical-64 {
    margin-top: var(--spacing-64) !important;
    margin-bottom: var(--spacing-64) !important;
}
.block-spacing-vertical-70 {
    margin-top: var(--spacing-70) !important;
    margin-bottom: var(--spacing-70) !important;
}

/* ==========================================================================
   Padding Classes (block-padding-*)
   ========================================================================== */

/* Top Padding */
.block-padding-top-none { padding-top: 0 !important; }
.block-padding-top-xs { padding-top: var(--spacing-xs) !important; }
.block-padding-top-sm { padding-top: var(--spacing-sm) !important; }
.block-padding-top-md { padding-top: var(--spacing-md) !important; }
.block-padding-top-lg { padding-top: var(--spacing-lg) !important; }
.block-padding-top-xl { padding-top: var(--spacing-xl) !important; }
.block-padding-top-2xl { padding-top: var(--spacing-2xl) !important; }
.block-padding-top-3xl { padding-top: var(--spacing-3xl) !important; }

/* Bottom Padding */
.block-padding-bottom-none { padding-bottom: 0 !important; }
.block-padding-bottom-xs { padding-bottom: var(--spacing-xs) !important; }
.block-padding-bottom-sm { padding-bottom: var(--spacing-sm) !important; }
.block-padding-bottom-md { padding-bottom: var(--spacing-md) !important; }
.block-padding-bottom-lg { padding-bottom: var(--spacing-lg) !important; }
.block-padding-bottom-xl { padding-bottom: var(--spacing-xl) !important; }
.block-padding-bottom-2xl { padding-bottom: var(--spacing-2xl) !important; }
.block-padding-bottom-3xl { padding-bottom: var(--spacing-3xl) !important; }

/* Left/Right Padding */
.block-padding-left-none { padding-left: 0 !important; }
.block-padding-left-xs { padding-left: var(--spacing-xs) !important; }
.block-padding-left-sm { padding-left: var(--spacing-sm) !important; }
.block-padding-left-md { padding-left: var(--spacing-md) !important; }
.block-padding-left-lg { padding-left: var(--spacing-lg) !important; }
.block-padding-left-xl { padding-left: var(--spacing-xl) !important; }
.block-padding-left-2xl { padding-left: var(--spacing-2xl) !important; }

.block-padding-right-none { padding-right: 0 !important; }
.block-padding-right-xs { padding-right: var(--spacing-xs) !important; }
.block-padding-right-sm { padding-right: var(--spacing-sm) !important; }
.block-padding-right-md { padding-right: var(--spacing-md) !important; }
.block-padding-right-lg { padding-right: var(--spacing-lg) !important; }
.block-padding-right-xl { padding-right: var(--spacing-xl) !important; }
.block-padding-right-2xl { padding-right: var(--spacing-2xl) !important; }

/* Fixed pixel paddings */
.block-padding-top-48 { padding-top: var(--spacing-48) !important; }
.block-padding-top-64 { padding-top: var(--spacing-64) !important; }
.block-padding-top-70 { padding-top: var(--spacing-70) !important; }
.block-padding-bottom-48 { padding-bottom: var(--spacing-48) !important; }
.block-padding-bottom-64 { padding-bottom: var(--spacing-64) !important; }
.block-padding-bottom-70 { padding-bottom: var(--spacing-70) !important; }

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

.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) {
    margin-top: 0;
    margin-bottom: 0;
}

/* ==========================================================================
   Responsive Show/Hide Utilities
   ========================================================================== */

@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet { display: none !important; }
}

@media (min-width: 1024px) {
    .hide-desktop { display: none !important; }
}

.show-mobile,
.show-tablet,
.show-desktop { display: none !important; }

@media (max-width: 767px) {
    .show-mobile { display: block !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .show-tablet { display: block !important; }
}

@media (min-width: 1024px) {
    .show-desktop { display: block !important; }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

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