/* CM Tiles - Layout 1: Square Tiles (Fill) */

/* Layout 1: Grid-based layout - tile group container becomes the grid */
.cm-tile-group.layout_1 {
    display: grid;
    /* grid-template-columns defined by dynamic CSS from breakpoints_json */
    gap: var(--cm-tiles-gap);
}

/* Layout 1: Each container becomes a grid item */
.cm-tile-group.layout_1 .cm-container {
    display: block; /* Override any other display properties */
    /* Each container is now a single grid cell */
}

/* Layout 1: Square aspect ratio for tiles */
.cm-tile-group.layout_1 .cm-panel-container {
    display: grid;
    grid-template-areas: 
        "top-content"
        "image-area"
        "bottom-content";
    grid-template-rows: auto 1fr auto; /* Let 1fr be constrained by container aspect ratio */
    position: relative;
    overflow: hidden;
    line-height: 1;
    /* Force aspect ratio to be strictly maintained with highest specificity */
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box;
}

/* Layout 1: Images fill their containers */
.cm-tile-group.layout_1 .cm-panel-inner-container {
    grid-area: unset;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent content from expanding beyond boundaries */
}

/* Layout 1: Fill entire tile when ALL content areas are empty - use data attributes */
.cm-tile-group.layout_1 .cm-panel-container[data-has-top="0"][data-has-bottom="0"][data-has-within="0"] .cm-panel-inner-container {
    grid-area: 1 / 1 / -1 / -1;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}



.cm-tile-group.layout_1 .cm-panel-inner-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative; /* Ensure image stays in normal flow */
    /* Force image to not exceed its grid area */
    max-width: 100%;
    max-height: 100%;
    /* Critical: Prevent image from expanding its grid area */
    min-height: 0;
    min-width: 0;
}

/* Layout 1: Ensure effects container stays within bounds */
.cm-tile-group.layout_1 .cm-panel-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* pass through to cm-media-wrapper clicks */
}

/* Layout 1: Text content areas - specific styling for height equalization */
.cm-tile-group.layout_1 .text-top-content,
.cm-tile-group.layout_1 .text-bottom-content {
    box-sizing: border-box;
    overflow: hidden; /* Prevent content from breaking layout */
    min-height: 0; /* Allow shrinking */
    /* Height will be set by JavaScript for uniformity */
}

/* Layout 1: Hover effects */
.cm-tile-group.layout_1 .cm-container:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* Layout 1: Min height for loading state */
.cm-tile-group.layout_1 .cm-panel-container.loading {
    min-height: 250px;
}