/* 1. Parent: Set the Grid and Gap */
[data-region-name="1"]:has(.beforeTiles) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important; /* Forces all items in a row to match tallest height */
    gap: 16px;
    justify-content: flex-start;
}

/* 2. The Tile Wrappers: Basic sizing */
/* Using 0 0 (no grow, no shrink) ensures the last tile stays the correct width */
[data-region-name="1"]:has(.beforeTiles) .ui-widget {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important; /* Remove any SF default margins that cause misalignment */
}

/* 3. Column Width Math (16px gap) */
[data-region-name="1"]:has(.beforeTiles.col-4) .ui-widget {
    flex: 0 0 calc(25% - 12px) !important;
}
[data-region-name="1"]:has(.beforeTiles.col-5) .ui-widget {
    flex: 0 0 calc(20% - 12.8px) !important;
}

/* 4. THE HEIGHT FIX: The Vertical Flex Chain
   We must force EVERY container inside the widget to grow, 
   otherwise the white box (slds-col) won't reach the bottom. */
[data-region-name="1"]:has(.beforeTiles) .ui-widget,
[data-region-name="1"]:has(.beforeTiles) .ui-widget > div,
[data-region-name="1"]:has(.beforeTiles) .ui-widget .js-content,
[data-region-name="1"]:has(.beforeTiles) .ui-widget .forceCommunityTileLayout,
[data-region-name="1"]:has(.beforeTiles) .ui-widget .slds-grid_vertical {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important; /* Clear fixed heights */
}

/* 5. Hide the Anchor Widget */
[data-region-name="1"] .ui-widget:has(.beforeTiles) {
    display: none !important;
}

/* 6. Target the actual white box with the border/background */
[data-region-name="1"]:has(.beforeTiles) .ui-widget .slds-col {
    flex: 1 1 auto !important;
    height: 100% !important;
}

/* 7. Hide "Empty" Audience Slots */
[data-region-name="1"]:has(.beforeTiles) .ui-widget:empty,
[data-region-name="1"]:has(.beforeTiles) .ui-widget[aria-hidden="true"] {
    display: none !important;
    flex: 0 0 0 !important;
}

/* 8. Mobile Fixes */
@media (max-width: 768px) {
    [data-region-name="1"]:has(.beforeTiles) .ui-widget {
        flex: 0 0 100% !important;
    }
}

/* 1. Locate the .ui-widget that contains the banner, 
   2. Target the .ui-widget immediately following it,
   3. Within that widget, hide everything in .primaryFieldRow EXCEPT the first <div> child
*/
.ui-widget:has(.companyAccountBeforeBanner) + .ui-widget .primaryFieldRow > :not(div:first-child) {
    display: none !important;
}

/* 1. Locate the same target .ui-widget
   2. Hide the .secondaryFields class entirely
*/
.ui-widget:has(.companyAccountBeforeBanner) + .ui-widget .secondaryFields {
    display: none !important;
}

.ui-widget:has(.companyAccountBeforeBanner) + .ui-widget .secondaryFields {
    display: none !important;
}

.ui-widget:has(.companyAccountBeforeBanner) + .ui-widget .highlights {
    height: 40px !important;
}