/* ======================================
   BASE CONTAINER
====================================== */
.emega2x2box.container {
    width: 100% !important;
    max-width: 330px; /* good for desktop */
    padding: 0 !important;
    margin: 0 auto;
}

/* Title styling */
.emega2x2box-title {
    font-size: 21px;
    line-height: 27px;
    font-weight: 600;
    margin-bottom: 15px;
    white-space: normal;
    word-break: break-word;
}

/* 2×2 grid layout */
.emega2x2box-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important; /* consistent spacing */
    margin: 0 !important;
    margin-left: 0 !important; /* Override Bootstrap .row negative margin */
    margin-right: 0 !important; /* Override Bootstrap .row negative margin */
}

/* Default tile behavior (2 per row) */
.emega2x2box-grid > .col-6 {
    flex: 0 0 calc((100% - 10px) / 2) !important; /* 2 items with 10px gap between */
    max-width: calc((100% - 10px) / 2) !important;
    width: calc((100% - 10px) / 2) !important;
    padding: 0 !important;
    padding-left: 0 !important; /* Override Bootstrap .col-6 padding */
    padding-right: 0 !important; /* Override Bootstrap .col-6 padding */
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Single region: span entire 2x2 grid space - ONLY when data-active-regions is 1 or 1.0 */
.emega2x2box-grid[data-active-regions="1"] > .col-6:first-child,
.emega2x2box-grid[data-active-regions="1.0"] > .col-6:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Hide empty regions when only 1 is active */
.emega2x2box-grid[data-active-regions="1"] > .col-6:empty,
.emega2x2box-grid[data-active-regions="1.0"] > .col-6:empty {
    display: none !important;
}

/* Make the content inside single region fill the 2x2 space - ONLY when 1 region */
.emega2x2box-grid[data-active-regions="1"] > .col-6:first-child > *,
.emega2x2box-grid[data-active-regions="1.0"] > .col-6:first-child > * {
    width: 100% !important;
    height: auto !important;
}

/* Set fixed height on the grid when only 1 region to match 2x2 grid */
.emega2x2box-grid[data-active-regions="1"],
.emega2x2box-grid[data-active-regions="1.0"] {
    height: 270px; /* Match the exact height of 2x2 grid */
}

/* Make the figure/image container - ONLY when 1 region */
.emega2x2box-grid[data-active-regions="1"] > .col-6:first-child .emega-category-tile,
.emega2x2box-grid[data-active-regions="1.0"] > .col-6:first-child .emega-category-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.emega2x2box-grid[data-active-regions="1"] > .col-6:first-child .emega-category-figure,
.emega2x2box-grid[data-active-regions="1.0"] > .col-6:first-child .emega-category-figure {
    margin: 0;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.emega2x2box-grid[data-active-regions="1"] > .col-6:first-child .emega-category-figure picture,
.emega2x2box-grid[data-active-regions="1.0"] > .col-6:first-child .emega-category-figure picture {
    display: block;
    width: 100%;
}

/* Make image fill the space */
.emega2x2box-grid[data-active-regions="1"] > .col-6:first-child img,
.emega2x2box-grid[data-active-regions="1.0"] > .col-6:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.emega2x2box-grid[data-active-regions="1"] > .col-6:first-child,
.emega2x2box-grid[data-active-regions="1.0"] > .col-6:first-child {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* If the inner content has an image, make it fill - ONLY when 1 region */
.emega2x2box-grid[data-active-regions="1"] > .col-6:first-child img,
.emega2x2box-grid[data-active-regions="1.0"] > .col-6:first-child img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Footer link */
.emega2x2box-footer {
    display: block;
    margin-top: 20px;
    font-size: 13px;
    text-decoration: none !important;
}

/* Reduce footer gap when only 1 region is active */
.emega2x2box-grid[data-active-regions="1"] ~ .emega2x2box-footer,
.emega2x2box-grid[data-active-regions="1.0"] ~ .emega2x2box-footer {
    margin-top: 20px; /* Keep same as 4 regions for alignment */
}

/* ======================================
   MOBILE
====================================== */
@media (max-width: 575px) {
    .emega2x2box.container {
        max-width: 100%;
        padding: 0 10px !important;
    }

    .emega2x2box-title {
        font-size: 18px;
        line-height: 22px;
    }

    .emega2x2box-grid {
        gap: 8px !important;
    }

    /* Keep 2x2 layout on mobile */
    .emega2x2box-grid > .col-6 {
        flex: 0 0 calc((100% - 8px) / 2) !important; /* 2 items with 8px gap between */
        max-width: calc((100% - 8px) / 2) !important;
        width: calc((100% - 8px) / 2) !important;
    }

    /* Single region spans full width on mobile too */
    .emega2x2box-grid[data-active-regions="1"] > .col-6:first-child,
    .emega2x2box-grid[data-active-regions="1.0"] > .col-6:first-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Set fixed height on mobile for single region */
    .emega2x2box-grid[data-active-regions="1"],
    .emega2x2box-grid[data-active-regions="1.0"] {
        height: auto; /* Let mobile determine height naturally, or set specific height if needed */
    }

    /* Make tile fill height on mobile */
    .emega2x2box-grid[data-active-regions="1"] > .col-6:first-child .emega-category-tile,
    .emega2x2box-grid[data-active-regions="1.0"] > .col-6:first-child .emega-category-tile {
        display: flex;
        flex-direction: column;
    }

    .emega2x2box-grid[data-active-regions="1"] > .col-6:first-child .emega-category-figure,
    .emega2x2box-grid[data-active-regions="1.0"] > .col-6:first-child .emega-category-figure {
        flex: 1;
        display: flex;
        align-items: center;
    }

    /* Hide empty regions on mobile */
    .emega2x2box-grid[data-active-regions="1"] > .col-6:empty,
    .emega2x2box-grid[data-active-regions="1.0"] > .col-6:empty {
        display: none !important;
    }

    .emega-category-title {
        font-size: 11px;
        line-height: 15px;
    }
}