/* ===== BACKGROUND CONTAINER ===== */
.fourseasons-background-container-wrapper,
.fourseasons-background-container-link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
    /* Make wrapper span full viewport width - same method as hero-section */
    position: relative !important;
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    /* Override any Elementor or theme styles */
    float: none !important;
    clear: both !important;
}

.fourseasons-background-container-link:hover,
.fourseasons-background-container-link:focus,
.fourseasons-background-container-link:active {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure wrapper breaks out of any container constraints */
.elementor-widget-fourseasons-background-container,
.elementor-element[data-widget_type="fourseasons-background-container.default"] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
}

.fourseasons-background-container {
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    /* Use min-height to maintain aspect ratio while allowing expansion */
    min-height: calc(100vw / var(--aspect-ratio, 3.2));
    /* Maintain aspect ratio - modern browsers */
    aspect-ratio: var(--aspect-ratio, 3.2);
    /* Fallback for older browsers using padding-bottom technique */
    height: 0;
    padding-bottom: calc(100% / var(--aspect-ratio, 3.2));
    box-sizing: border-box !important;
}

/* Modern browsers support aspect-ratio - override padding-bottom */
@supports (aspect-ratio: 1) {
    .fourseasons-background-container {
        padding-bottom: 0;
        height: auto;
        /* Allow container to grow if image needs more height */
        min-height: calc(100vw / var(--aspect-ratio, 3.2));
    }
}

.background-container-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 100% auto ensures image always fills width and maintains aspect ratio */
    /* This prevents horizontal cropping - image will always show full width */
    /* Image won't be cut off horizontally, may extend vertically if needed */
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
    /* Ensure image covers full width */
    min-width: 100%;
}

.background-container-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 2;
    pointer-events: none;
}

.background-container-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.background-container-content .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Specific sizes */
.fourseasons-background-container[data-size="1920x600"] {
    --aspect-ratio: 3.2; /* 1920 / 600 = 3.2 */
}

.fourseasons-background-container[data-size="1920x400"] {
    --aspect-ratio: 4.8; /* 1920 / 400 = 4.8 */
}

/* Responsive adjustments */
@media (max-width: 1920px) {
    .fourseasons-background-container-wrapper,
    .fourseasons-background-container-link {
        width: 100vw !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }
    
    .fourseasons-background-container {
        /* Container will scale down proportionally */
        width: 100% !important;
        max-width: 100% !important;
        /* Ensure minimum height based on viewport width */
        min-height: calc(100vw / var(--aspect-ratio, 3.2));
    }
    
    .background-container-image {
        /* Ensure image fits within container */
        width: 100% !important;
        /* 100% auto ensures full width coverage without horizontal cropping */
        background-size: 100% auto !important;
        /* Center image vertically */
        background-position: center top;
    }
}

@media (max-width: 1200px) {
    .background-container-content .container {
        padding: 0 15px;
    }
}

@media (max-width: 768px) {
    .fourseasons-background-container {
        /* On mobile, maintain aspect ratio but allow some flexibility */
        min-height: 200px;
    }
    
    .background-container-content .container {
        padding: 0 10px;
    }
}

/* Ensure image never gets cut off horizontally */
@media (min-width: 1921px) {
    .fourseasons-background-container-wrapper,
    .fourseasons-background-container-link {
        width: 100vw !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }
    
    .fourseasons-background-container {
        /* On larger screens, maintain aspect ratio */
        min-height: calc(1920px / var(--aspect-ratio, 3.2));
    }
    
    .background-container-image {
        /* On larger screens, ensure image fills width */
        background-size: 100% auto;
        background-position: center top;
    }
}

/* Prevent zoom from breaking layout */
@media (min-resolution: 2dppx) {
    .background-container-image {
        /* High DPI displays */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}