/**
 * Mobile Compact Spacing
 * Consistent small gaps between all cards
 */

@media (max-width: 782px) {
    /* OVERRIDE ALL inline margins and gaps */
    
    /* Remove ALL margins from wp-block elements */
    .wp-block-group[style*="margin"],
    .wp-block-columns[style*="margin"],
    div[style*="margin-top"],
    div[style*="margin-bottom"] {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }
    
    /* Force small gap on ALL columns - override blockGap */
    .wp-block-columns,
    .wp-block-columns[class*="is-layout"],
    div[class*="wp-block-columns"] {
        gap: 8px !important;
    }
    
    /* CRITICAL: Remove ALL margin from stacked columns */
    .wp-block-column,
    .wp-block-columns > .wp-block-column,
    div.wp-block-column {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Column children - add consistent spacing */
    .wp-block-column > .wp-block-group {
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }
    
    /* First child doesn't need top margin */
    .wp-block-column > .wp-block-group:first-child {
        margin-top: 0 !important;
    }
    
    /* Hero section inside column - no extra margin */
    .wp-block-column .hero-section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Main sections - consistent spacing */
    .wp-block-group.alignwide {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }
    
    /* First alignwide section after another - only needs gap, not double margin */
    .wp-block-group.alignwide + .wp-block-group.alignwide {
        margin-top: 8px !important;
    }
    
    /* Nested groups inside alignwide should not have extra margin */
    .wp-block-group.alignwide > .wp-block-group {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* ALL cards - override any inline margin-top */
    .wp-block-group.category-panel,
    .wp-block-group.quick-contact-card,
    .wp-block-group.hours-card,
    .wp-block-group.service-card,
    .wp-block-group.testimonial-card {
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }
    
    /* First card in column - NO top margin (higher specificity) */
    .wp-block-column > .wp-block-group.category-panel:first-child,
    .wp-block-column > .wp-block-group.service-card:first-child,
    .wp-block-column > .wp-block-group:first-child {
        margin-top: 0 !important;
    }
    
    /* Hero section */
    .hero-section {
        margin-bottom: 8px !important;
    }
    
    /* Content elements */
    p {
        margin-bottom: 10px !important;
    }
    
    h1, h2, h3 {
        margin-bottom: 12px !important;
    }
    
    .wp-block-buttons {
        margin-top: 12px !important;
    }
    
    /* WordPress adds margin-top to stacked columns - remove it */
    .wp-block-columns.is-layout-flex {
        flex-wrap: wrap;
    }
    
    .wp-block-columns.is-layout-flex > .wp-block-column {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Target specific WordPress margin-block properties */
    .wp-block-column {
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
    }
}

/* Extra small screens - even tighter */
@media (max-width: 480px) {
    .wp-block-group[style*="margin"],
    .wp-block-columns[style*="margin"],
    div[style*="margin-top"],
    div[style*="margin-bottom"] {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }
    
    .wp-block-columns,
    .wp-block-columns[class*="is-layout"],
    div[class*="wp-block-columns"] {
        gap: 6px !important;
    }
    
    .wp-block-column > .wp-block-group {
        margin-top: 6px !important;
    }
    
    .wp-block-column > .wp-block-group:first-child {
        margin-top: 0 !important;
    }
    
    .wp-block-group.alignwide {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }
    
    /* Reduce padding on small screens - but NOT the header */
    .wp-block-group[style*="padding"]:not(.header-inner):not(.site-header) {
        padding: 20px !important;
    }
    
    /* Header stays compact on smallest screens */
    .site-header .header-inner {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}