/* CM Tiles - Common styles for all layouts */

/* ========================================
   CENTRALIZED GAP CONTROL SYSTEM - SINGLE SOURCE OF TRUTH
   All tile gaps are controlled here and ONLY here
   No PHP overrides - this CSS is the definitive spacing source
   ======================================== */

/* Root-level CSS custom properties for gaps - SINGLE SOURCE OF TRUTH */
:root {
    /* PRIMARY GAP VALUE - CHANGE THIS TO ADJUST ALL TILE SPACING */
    --cm-tiles-gap: 20px;
    
    /* Half gap value for calculations - update this when changing --cm-tiles-gap above */
    --cm-tiles-half-gap: 10px; 
}

main.wp-block-group,
main.site-main {
    clear: both;
}   

/* Spacing system for equal gaps between tiles and viewport edges */
.cm-tile-group {
    /* Provide equal spacing to viewport edges using CSS custom properties */
    padding: var(--cm-tiles-gap);
    box-sizing: border-box;
    width: 100%;
}
.text-top-content{

}
.text-bottom-content{

}
/* Remove debug borders in production */
/*.cm-tile-group {
    border:solid 1px red;
}
.cm-container {
    border:solid 1px blue;
}*/

.cm-container .cm-panel-container {
    /* This nullifies the default value of container-type: inline-size used in our media-manager for editing or cm-sliders for viewing */
    container-type: normal;
}

.cm-panel-container {
 
}
.cm-masonry-column {

}

/* Main tile group container */
.cm-tiles-group-wrapper {
   
}

/* Base tile container styles - CSS Grid Layout */
.cm-container .cm-panel-container {
    display: grid;
    grid-template-areas:
        "top-content"
        "image-area"
        "bottom-content";
    grid-template-rows: auto 1fr auto;
    position: relative;
    overflow: hidden;
    /* Default background color - can be overridden by group-specific styles */
    background-color: #f5f5f5;
    line-height: 1; /* Reset line-height for text content */
}
 
/* Grid area assignments for all layouts */
.cm-tile-group .text-top-content,
.cm-container .text-top-content {
    grid-area: top-content;
}

.cm-tile-group .text-bottom-content,
.cm-container .text-bottom-content {
    grid-area: bottom-content;
}

/* Updated for new structure - inner container takes the image-area */
.cm-tile-group .cm-panel-inner-container,
.cm-container .cm-panel-inner-container {
    grid-area: image-area;
    position: relative;
    overflow: hidden;
}

/* Effects overlay within inner container */
.cm-tile-group .cm-panel-effects,
.cm-container .cm-panel-effects {
    /* No longer needs grid-area as it's absolutely positioned within inner container */
    z-index: 2;
}

/* Base image styles - now within inner container */
.cm-container .cm-panel-inner-container img {
    /* No longer needs grid-area as it's within inner container */
    z-index: 1;
    display: block;
    width: 100%; /* Ensure image fills container width */
    height: auto; /* Maintain aspect ratio */
}

/* Loading states */
.cm-container .cm-panel-container.loading {
    background-color: #f0f0f0;
}

/* Error states */
.cm-container .cm-panel-container.error {
    background-color: #ffe6e6;
    display: flex;
    align-items: center;
 
    color: #cc0000;
}

/* Responsive images - already handled in base image styles above */

/* Accessibility */
.cm-container .cm-panel-container img[alt] {
    /* Ensures alt text is available to screen readers */
}

/* Container visibility */
.cm-container {
    position: relative;
    width: 100%;
}

/* Hidden elements */
.cm-tile-hidden {
    display: none !important;
}

/* Clearfix for containers */
.cm-tiles-group-wrapper::after {
    content: "";
    display: table;
    clear: both;
}
/* Debugging only
.cm-tiles-group-wrapper{
    background: yellow;
}
.cm-panel-inner-container{
    background: orange !important;
    border:solid 5px red;
}

.cm-panel-inner-container {
    background: orange;
}

.text-top-content,
.text-bottom-content {
    background-color: green !important;   
}
*/