/* CM Tiles - Layout 2: Square tiles with image maintaining aspect ratio */

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

/* Layout 2: Each tile must be square */
.cm-tile-group.layout_2 .cm-tile {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Force square aspect ratio */
    overflow: hidden;
}

/* Layout 2: Panel container fills the square tile with flex layout */
.cm-tile-group.layout_2 .cm-panel-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    box-sizing: border-box;
    overflow: visible; /* Allow text to be visible */
    /* Ensure flex children can shrink to avoid clipping */
    min-height: 0;
}

/* Override grid template from common CSS */
.cm-tile-group.layout_2 .cm-panel-container {
    grid-template-areas: none !important;
    grid-template-rows: none !important;
}

/* Text content areas - take only the space they need */
.cm-tile-group.layout_2 .text-top-content,
.cm-tile-group.layout_2 .text-bottom-content {
    flex: 0 0 auto; /* Don't grow or shrink - size to content */
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    min-height: 1.5em; /* Ensure text is visible */
    padding: 0.25em 0.5em;
}

/* Top text aligns to bottom of its container */
.cm-tile-group.layout_2 .text-top-content {
    justify-content: flex-end;
    align-items: center;
}

/* Bottom text aligns to top of its container */
.cm-tile-group.layout_2 .text-bottom-content {
    justify-content: flex-start;
    align-items: center;
}

/* Inner container shrinks to image size */
.cm-tile-group.layout_2 .cm-panel-inner-container {
    flex: 0 0 auto; /* Don't grow - size to content */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center; /* Center horizontally */
    overflow: hidden;
    max-width: 100%; /* But don't exceed container width */
    /* Allow shrinking in portrait calculations */
    min-height: 0;
}

/* Portrait images need height constraints to fit remaining space */
.cm-tile-group.layout_2 .cm-panel-inner-container-portrait {
    /* Fill remaining space between top and bottom text */
    flex: 1 1 auto;
    width: auto !important; /* Rule 7 */
    height: auto;
    max-height: 100%;
}

/* Landscape images should use full width when possible */
.cm-tile-group.layout_2 .cm-panel-inner-container-landscape {
    max-width: 100%;
}

/* Landscape images should fill width */
.cm-tile-group.layout_2 .cm-panel-inner-container-landscape {
    /* Keep image natural height, full width */
    flex: 0 0 auto;
    width: 100%;
    height: auto;
}

/* Media wrapper shrinks to image size */
.cm-tile-group.layout_2 .cm-media-wrapper {
    display: inline-block;
    position: relative;
    line-height: 0; /* Remove line-height gap */
    height: 100%;
}

/* Image styling - fit entirely within container */
.cm-tile-group.layout_2 .cm-panel-inner-container img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Fit entire image within container */
    object-position: center;
}

/* Effects container - overlays the entire inner container */
.cm-tile-group.layout_2 .cm-panel-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Text within effects container - positioning handled by JavaScript */
.cm-tile-group.layout_2 .cm-panel-effects .dyn_text_overlay {
    pointer-events: auto;
}

/* When only top text exists (no bottom text) */
.cm-tile-group.layout_2 .cm-panel-container[data-has-bottom="0"] .text-bottom-content {
    display: none;
}

/* When only bottom text exists (no top text) */
.cm-tile-group.layout_2 .cm-panel-container[data-has-top="0"] .text-top-content {
    display: none;
}

/* When no text exists at all - center the image */
.cm-tile-group.layout_2 .cm-panel-container[data-has-top="0"][data-has-bottom="0"] {
    justify-content: center;
    align-items: center;
}

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

/* Loading state */
.cm-tile-group.layout_2 .cm-panel-container.loading {
    min-height: 250px;
}

/* Ensure text doesn't overflow */
.cm-tile-group.layout_2 .dyn_text_overlay {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure text is always visible */
.cm-tile-group.layout_2 .text-top-content .dyn_text_overlay,
.cm-tile-group.layout_2 .text-bottom-content .dyn_text_overlay {
    white-space: normal;
    line-height: normal;
}

/* Center the entire panel container content and distribute space */
.cm-tile-group.layout_2 .cm-panel-container {
    align-items: center; /* Center the inner container */
    justify-content: center; /* Center vertically when space available */
}

/* But ensure text areas stretch full width */
.cm-tile-group.layout_2 .text-top-content,
.cm-tile-group.layout_2 .text-bottom-content {
    align-self: stretch; /* Full width for text areas */
}

/* Ensure proper stacking order */
.cm-tile-group.layout_2 .cm-panel-inner-container img {
    position: relative;
    z-index: 1;
}

/* Text areas should have higher z-index than image but lower than effects */
.cm-tile-group.layout_2 .text-top-content,
.cm-tile-group.layout_2 .text-bottom-content {
    position: relative;
    z-index: 3;
}