/* CM Tiles - Layout 3: Masonry */

/* Layout 3: Masonry using CSS columns */
.cm-tile-group.layout_3 {
    column-gap: var(--cm-tiles-gap);
    /* column-count defined by dynamic CSS from breakpoints_json */
}

.cm-tile{
    
    margin-bottom: var(--cm-tiles-gap);
}

/* Layout 3: Prevent column breaks inside containers */
.cm-tile-group.layout_3 .cm-container {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    /* Force vertical spacing with !important to override column balancing */
    margin-bottom: var(--cm-tiles-gap) !important;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

/* Alternative approach: Add spacing as pseudo-element for more reliable gaps */
.cm-tile-group.layout_3 .cm-container:not(:last-child)::after {
    content: "";
    display: block;
    height: calc(var(--cm-tiles-gap) / 2);
    width: 100%;
}

/* Layout 3: Panel containers maintain their aspect ratio based on content */
.cm-tile-group.layout_3 .cm-panel-container {
    display: grid;
    grid-template-areas: 
        "top-content"
        "image-area"
        "bottom-content";
    grid-template-rows: auto auto auto; /* All rows size to content */
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
    line-height: 1;
    box-sizing: border-box;
    /* No fixed aspect ratio for masonry */
}

/* Layout 3: Inner container and image handling */
.cm-tile-group.layout_3 .cm-panel-inner-container {
    grid-area: image-area;
    position: relative;
    width: 100%;
    line-height: 0;
}

.cm-tile-group.layout_3 .cm-panel-inner-container img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: top;
}

/* Layout 3: Effects container */
.cm-tile-group.layout_3 .cm-panel-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

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

/* Layout 3: Min height for loading state */
.cm-tile-group.layout_3 .cm-panel-container.loading {
    min-height: 150px;
}

/* Masonry column wrapper if needed */
.cm-masonry-column {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}