/**
 * WPBakery Minimal Compatibility CSS
 * Purpose: Work WITH WPBakery's spacing system, not override it
 * This replaces aggressive overrides with flexible helpers
 */

/* ==========================================================================
   LET WPBAKERY HANDLE SPACING - Just add compatibility
   ========================================================================== */

/* 1. Make custom content lists responsive inside WPBakery columns
.vc_column-inner .content-list-wrapper {
    width: 100%;
    max-width: 100%;
    /* Don't set margins - let WPBakery handle it 
}

/* 2. Flexible grid that respects parent container 
.content-list-wrapper.style-grid {
    display: flex;
    flex-wrap: wrap;
    gap: inherit; /* Use parent's gap setting 
}

/* Grid items should be flexible 
.content-list-wrapper .grid-item,
.content-list-wrapper .list-item {
    flex: 1 1 auto;
    min-width: 0; /* Prevent overflow 
}

/* 3. Only set widths as suggestions, not rigid rules 
@media (min-width: 768px) {
    .col-span-2 .grid-item { flex: 0 1 calc(50% - 10px); }
    .col-span-3 .grid-item { flex: 0 1 calc(33.333% - 10px); }
    .col-span-4 .grid-item { flex: 0 1 calc(25% - 10px); }
}

/* 4. Images should be responsive 
.content-list-wrapper img {
    max-width: 100%;
    height: auto;
}

/* 5. Remove any hard-coded container widths 
.container-fluid {
    max-width: none; /* Let WPBakery handle this */


/* ==========================================================================
   HELPER CLASSES - Add to WPBakery's "Extra class name" field
   ========================================================================== */

/* Use these instead of CSS overrides */
.hm-spacing-tight { --spacing: 5px; }
.hm-spacing-normal { --spacing: 15px; }
.hm-spacing-loose { --spacing: 30px; }

/* Apply the spacing variable */
.hm-spacing-tight .content-list-wrapper,
.hm-spacing-normal .content-list-wrapper,
.hm-spacing-loose .content-list-wrapper {
    gap: var(--spacing);
}

/* ==========================================================================
   REMOVE THESE RULES FROM YOUR EXISTING CSS
   ========================================================================== */

/*
DELETE or COMMENT OUT these problematic rules from your files:

FROM custom_critical.css:
- .vc_column_container .vc_column_container { padding-left: 0; padding-right: 0; }
- .container-fluid { max-width: 1200px; }
- All .vc_row padding overrides
- All .wpb_content_element margin overrides

FROM hawaii-magazine-customizable.css:
- Fixed grid-template-columns declarations
- All !important padding/margin rules
- Hard-coded container widths
- .vc_* selector overrides
*/