/* Scoped styles for Tabs Same element */
.brxe-tabs-same {
    /* Base styles: Constrained width, centered content */
    max-width: var(--site-container-width);
    margin: 75px auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

.brxe-tabs-same .tabs-heading {
    text-align: center;
    margin-bottom: 30px;
    color: var(--color-primary);
    font-family: var(--font-secondary);
    text-transform: uppercase;
    font-size: 1.6em;
}

.brxe-tabs-same .tabs-nav {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: nowrap; /* Prevent wrapping for swipe */
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1.5rem;
    overflow-x: auto; 
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for Chrome/Safari */
.brxe-tabs-same .tabs-nav::-webkit-scrollbar {
    display: none;
}

/* Button styles */
.brxe-tabs-same .tab-btn {
    flex: 0 0 auto; /* Prevents buttons from squishing on mobile */
    text-align: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-style: italic;
    color: var(--color-primary);
    font-family: var(--font-primary);
}

.brxe-tabs-same .tab-btn span {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 20px;
    transition: background-color 0.2s ease-in-out;
    font-size:1.2em !important;
    white-space: nowrap; 
}

/* Default active/hover state */
.brxe-tabs-same .tab-btn.active span,
.brxe-tabs-same .tab-btn:hover span {
    background-color: #F4EACF;
}

/* Tabs content container styles */
.brxe-tabs-same .tabs-content {
    position: relative;
    overflow: hidden;
    transition: min-height 0.5s ease-in-out;
    width: 100%;
}

/* Individual tab content styles */
.brxe-tabs-same .tabs-content .tab-content {
    background-color: #F4EACF;
    border-radius: 35px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    pointer-events: none;
}

/* Active tab content styles */
.brxe-tabs-same .tabs-content .tab-content.active {
    opacity: 1;
    visibility: visible;
    position: relative; 
    pointer-events: auto;
}

/* Image block and overlay styles */
.brxe-tabs-same .tab-one-image-block.with-overlay {
    background-size: cover;
    background-position: center;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 35px;
}

/* NEW CAPTION STYLES */
.brxe-tabs-same .tab-one-image-block .image-caption {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 3;
    
    /* Custom Styling */
    font-family: var(--font-secondary);
    margin-bottom: 10px;
    margin-top: 10px;
    margin-right: 30px;
    padding: 0 5px; /* Added padding for visual breathing room */
    font-size: 0.9em;
    font-style: italic;
    color: #ffffff; /* Assuming white text for contrast over the dark overlay */
}

.brxe-tabs-same .black-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.brxe-tabs-same .center-text {
    position: relative;
    z-index: 2;
    padding: 50px;
    text-align: center;
}

.brxe-tabs-same .overlay-text {
    color: white;
    max-width: 1000px;
}

/* --------------------------------------------------------- */
/* Alt Style (Toggle On) Logic (Full Width Background)       */
/* --------------------------------------------------------- */

/* 1. Make Main Wrapper Full Width and set Background/Spacing */
.brxe-tabs-same.has-alt-style {
    max-width: none; /* Allows wrapper to span 100% width */
    width: 100%;
    background-color: var(--color-quaternary);
    
    /* Swap Margin for Padding for visual spacing */
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 75px;
    padding-bottom: 0px;
}

/* 2. Constrain the DIRECT CHILDREN to the site width and center them */
.brxe-tabs-same.has-alt-style > * {
    max-width: var(--site-container-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* 3. Heading color overrides */
.brxe-tabs-same.has-alt-style .tabs-heading {
    color: #000000;
}

/* 4. Tab buttons text color overrides */
.brxe-tabs-same.has-alt-style .tab-btn {
    color: #000000;
}

/* 5. Active and Hover tab button background overrides */
.brxe-tabs-same.has-alt-style .tab-btn.active span,
.brxe-tabs-same.has-alt-style .tab-btn:hover span {
    background-color: #faf7ef;
}

/* --------------------------------------------------------- */
/* Responsive Styles                                         */
/* --------------------------------------------------------- */
@media (max-width: 768px) {
    .brxe-tabs-same .tab-one-image-block.with-overlay {
       min-height: 400px !important; 
        
        /* Remove the fixed height so it can grow */
        height: auto !important; 
        
        /* Ensure the content inside can push the boundaries */
        display: flex;
        flex-direction: column;
     
    }

    .brxe-tabs-same .black-overlay {
 /* at center ensures the 'light' starts exactly behind the text */
    background: radial-gradient(
        circle at center, 
        rgba(0, 0, 0, 0.85) 0%,   /* Darkest in the very center */
        rgba(0, 0, 0, 0.4) 60%,    /* Starts fading significantly here */
        rgba(0, 0, 0, 0.1) 90%,    /* Very faint edge */
        transparent 100%           /* Fully invisible at the boundary */
    );
}

    .brxe-tabs-same .tabs-nav {
        justify-content: flex-start !important;
        /* Extra padding for end-of-scroll visibility */
        padding-left: 20px;
        padding-right: 40px; 
        /* Fade effect only on mobile */
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }

    .brxe-tabs-same .overlay-text {
        font-size: 0.85em !important;
    }

    .brxe-tabs-same .tab-btn {
        font-size: 0.8em;
    }

    /* Mobile Spacing Adjustments */
    .brxe-tabs-same {
        margin-top: 30px;
        margin-bottom: 0px !important;
    }

    .brxe-tabs-same.has-alt-style {
        padding-top: 30px;
        padding-bottom: 0px;
    }
    
    /* Add padding to children on mobile when alt style is active */
    .brxe-tabs-same.has-alt-style > * {
        padding-left: 0px;
        padding-right: 0px;
    }
    
    /* Override mobile spacing for the navigation bar */
    .brxe-tabs-same .tabs-nav{
        padding-left: 10px;
        padding-right: 10px;
    }

    .brxe-tabs-same .tabs-content .tab-content{
        border-radius: 0px !important; 
    }

    .brxe-tabs-same .tab-one-image-block.with-overlay{
        border-radius: 0px !important;
    }

    .tab-one-image-block h2{
        font-size: 2em !important;
    }

    .text-cut-out-image-wrap {
        /* Set the desired fixed height for the wrapper */
        height: 190px; 
        background-color:#edc124;
    }
    
    .text-cut-out-image-wrap img {
        /* 1. Make the image take up 100% of the WRAPPER's width AND height */
        width: 100%;
        height: 100%;
        
        /* 2. CRUCIAL: Resizes the image to cover the entire container 
            while preserving its aspect ratio (it will crop parts of the image). */
        object-fit: cover; 
        
        /* 3. Apply the 1.2 zoom (scale) on top of the 'cover' effect */
        
        /* 4. Center the zoom effect (optional, but usually looks best) */
        transform-origin: center center; 
        
        /* Ensure there's no unintended margin/offset from your previous attempt */
        margin-top: 0; 
    }
}