/* CM Tiles - Common styles for all layouts */
/* Updated with FOUR-SELECTOR PATTERN for FSE compatibility */

/* ========================================
   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 - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-tile-group,
.wp-block-w4ya-cm-tiles .cm-tile-group,
.cm-tile-group {
    /* Provide equal spacing to viewport edges using CSS custom properties */
    padding: var(--cm-tiles-gap);
    box-sizing: border-box;
    width: 100%;
}

.editor-styles-wrapper .wp-block-w4ya-cm-tiles .text-top-content,
.wp-block-w4ya-cm-tiles .text-top-content,
.text-top-content {

}

.editor-styles-wrapper .wp-block-w4ya-cm-tiles .text-bottom-content,
.wp-block-w4ya-cm-tiles .text-bottom-content,
.text-bottom-content {

}

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

.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-container .cm-panel-container,
.wp-block-w4ya-cm-tiles .cm-container .cm-panel-container,
.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;
}

.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-panel-container,
.wp-block-w4ya-cm-tiles .cm-panel-container,
.cm-panel-container {

}

.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-masonry-column,
.wp-block-w4ya-cm-tiles .cm-masonry-column,
.cm-masonry-column {

}

/* Main tile group container - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-tiles-group-wrapper,
.wp-block-w4ya-cm-tiles .cm-tiles-group-wrapper,
.cm-tiles-group-wrapper {

}

/* Base tile container styles - CSS Grid Layout - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-container .cm-panel-container,
.wp-block-w4ya-cm-tiles .cm-container .cm-panel-container,
.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 - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-tile-group .text-top-content,
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-container .text-top-content,
.wp-block-w4ya-cm-tiles .cm-tile-group .text-top-content,
.wp-block-w4ya-cm-tiles .cm-container .text-top-content,
.cm-tile-group .text-top-content,
.cm-container .text-top-content {
    grid-area: top-content;
}

.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-tile-group .text-bottom-content,
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-container .text-bottom-content,
.wp-block-w4ya-cm-tiles .cm-tile-group .text-bottom-content,
.wp-block-w4ya-cm-tiles .cm-container .text-bottom-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 - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-tile-group .cm-panel-inner-container,
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-container .cm-panel-inner-container,
.wp-block-w4ya-cm-tiles .cm-tile-group .cm-panel-inner-container,
.wp-block-w4ya-cm-tiles .cm-container .cm-panel-inner-container,
.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 - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-tile-group .cm-panel-effects,
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-container .cm-panel-effects,
.wp-block-w4ya-cm-tiles .cm-tile-group .cm-panel-effects,
.wp-block-w4ya-cm-tiles .cm-container .cm-panel-effects,
.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 - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-container .cm-panel-inner-container img,
.wp-block-w4ya-cm-tiles .cm-container .cm-panel-inner-container img,
.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 - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-container .cm-panel-container.loading,
.wp-block-w4ya-cm-tiles .cm-container .cm-panel-container.loading,
.cm-container .cm-panel-container.loading {
    background-color: #f0f0f0;
}

/* Error states - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-container .cm-panel-container.error,
.wp-block-w4ya-cm-tiles .cm-container .cm-panel-container.error,
.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 - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-container .cm-panel-container img[alt],
.wp-block-w4ya-cm-tiles .cm-container .cm-panel-container img[alt],
.cm-container .cm-panel-container img[alt] {
    /* Ensures alt text is available to screen readers */
}

/* Container visibility - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-container,
.wp-block-w4ya-cm-tiles .cm-container,
.cm-container {
    position: relative;
    width: 100%;
}

/* Hidden elements - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-tile-hidden,
.wp-block-w4ya-cm-tiles .cm-tile-hidden,
.cm-tile-hidden {
    display: none !important;
}

/* Clearfix for containers - FOUR-SELECTOR PATTERN */
.editor-styles-wrapper .wp-block-w4ya-cm-tiles .cm-tiles-group-wrapper::after,
.wp-block-w4ya-cm-tiles .cm-tiles-group-wrapper::after,
.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;
}
*/