.aess-image-widget-wrapper {
    display: flex;
    width: 100%;
    /* Overall height set by control -> --wrapper-height */
    /* Gap between items set by control -> gap: var(--aess-columns-gap) */
    /* CSS var --aess-columns-gap also set by control for calc() */
    overflow: hidden; /* Mainly for safety, child items should handle their own overflow */
}
.elementor-widget-aess-image-columns .elementor-widget-container {
    width: 100%;
}

.aess-image-widget-item { /* This is the "card" */
    height: 100%; /* Fills the wrapper height */
    display: flex;
    flex-direction: column;
    position: relative; /* For the absolute link overlay */
    overflow: hidden; /* To ensure border-radius clips content */
    
    /* Card background and border-radius are set by controls */
    /* Default values if not overridden by controls: */
    background-color: #fff; 

    /* Flex properties for column width animation */
    flex-grow: 0;
    flex-shrink: 0;
    transition: flex-basis 0.4s ease-in-out;
}

.aess-item-image-holder {
    /* Height is set by 'image_area_height' control */
    /* Default height if control not set or 0 (should have a sensible default in control) */
    /* height: 300px; */
    background-size: cover; /* Controllable */
    background-position: center center; /* Controllable */
    width: 100%;
    border-radius: 15px;
    position: relative; /* For its own ::before overlay */
}

.aess-item-image-holder::before { /* Overlay for image */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
	border-radius: 15px;
    /* background-color set by 'image_overlay_color' control */
    /* transition-duration set by 'image_overlay_transition_duration' control */
    transition-property: background-color;
    transition-timing-function: ease-in-out;
}

.aess-item-text-holder {
    /* Padding set by 'card_padding' control */
    /* text-align set by 'text_horizontal_align' control */
    flex-grow: 1; /* Allows this area to take remaining vertical space */
    display: flex; /* To better control inner content flow if needed */
    flex-direction: column;
    justify-content: center; /* Example: centers text block vertically if it doesn't fill */
                            /* Or use padding to position. For screenshot style, padding is main. */
    overflow: hidden; /* Prevents text from breaking card layout if too long */
}

.aess-item-title,
.aess-item-subtitle {
    /* Typography, color, margin-bottom are set by controls */
    margin-top: 0;
    line-height: 1.4; /* Example sensible default */
}
.aess-item-title {
    font-size: 1.1em; /* Example */
    font-weight: bold; /* Example */
}
.aess-item-subtitle {
    font-size: 0.9em; /* Example */
}


.aess-item-link-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Above image overlay, below potential popups if any */
    /* background: rgba(255,0,0,0.1); For debugging link area */
}

/* --- Desktop Column Width Logic (with gap handling) --- */
@media (min-width: 1025px) {
    /* Default state */
    .elementor-widget-aess-image-columns .aess-image-widget-item.aess-column-1 {
        flex-basis: calc( (100% - (2 * var(--aess-columns-gap, 0px))) * var(--aess-numeric-default-col1-width, 50) / 100 );
    }
    .elementor-widget-aess-image-columns .aess-image-widget-item.aess-column-2,
    .elementor-widget-aess-image-columns .aess-image-widget-item.aess-column-3 {
        flex-basis: calc( (100% - (2 * var(--aess-columns-gap, 0px))) * var(--aess-numeric-default-narrow-width, 25) / 100 );
    }

    /* Hover state on wrapper (affects non-hovered items) */
    .elementor-widget-aess-image-columns .aess-image-widget-wrapper:hover .aess-image-widget-item {
        flex-basis: calc( (100% - (2 * var(--aess-columns-gap, 0px))) * var(--aess-numeric-hovered-narrow-width, 20) / 100 );
    }
    
    /* Hover state on specific item (overrides the general wrapper hover) */
    .elementor-widget-aess-image-columns .aess-image-widget-wrapper .aess-image-widget-item:hover {
        flex-basis: calc( (100% - (2 * var(--aess-columns-gap, 0px))) * var(--aess-numeric-hovered-wide-width, 60) / 100 ) !important;
    }
}

/* --- Tablet and Mobile: Equal Width Columns (with gap handling) --- */
@media (max-width: 1024px) {
    .elementor-widget-aess-image-columns .aess-image-widget-item {
        flex-basis: calc((100% - (2 * var(--aess-columns-gap, 0px))) / 3) !important; /* Equal width, accounts for 2 gaps */
    }

    /* Ensure desktop hover width changes are nullified */
    .elementor-widget-aess-image-columns .aess-image-widget-wrapper:hover .aess-image-widget-item,
    .elementor-widget-aess-image-columns .aess-image-widget-wrapper .aess-image-widget-item:hover {
        /* The !important on the base rule for this media query handles this. */
        /* No specific width change on hover for tablet/mobile based on flex-basis. */
    }
}

/* Specific fix for text-align control output for 'flex-start', 'center', 'flex-end' */
/* Elementor's CHOOSE control with eicon-text-align-* might not directly map to text-align values.
   If 'text_horizontal_align' control uses 'left', 'center', 'right' as values, this isn't needed.
   If it uses 'flex-start', etc., you might need this or adjust the control values.
   Assuming Elementor handles it or you change control values to 'left', 'center', 'right'.
   For now, the CSS selector uses {{VALUE}} which should be fine if the control passes correct text-align values.
*/
.aess-item-text-holder[style*="text-align: flex-start"] { text-align: left !important; }
.aess-item-text-holder[style*="text-align: flex-end"] { text-align: right !important; }
/* The 'center' value usually maps correctly. */