/* =======================================================
   BOX INTERIORS - SPLIT VIEW WIDGET
   ======================================================= */

/* --- 1. DESKTOP BASE (Columns) --- */
.box-post-split-container {
    display: flex;
    width: 100%;
    align-items: flex-start;
    overflow: hidden;
    --split-column-gap: 20px; 
}

.box-split-col {
    flex: 0 0 50%;
    width: 50%;
    box-sizing: border-box;
    min-height: 500px;
}

/* --- 2. DESKTOP POSITION (Left/Right) --- */
.box-layout-side-left .box-post-split-container { flex-direction: row !important; }
.box-layout-side-right .box-post-split-container { flex-direction: row-reverse !important; }

.box-layout-side-right .box-split-content { padding: 0; }
.box-layout-side-left .box-split-media { padding-right: calc(var(--split-column-gap) / 2); }
.box-layout-side-left .box-split-content { padding-left: calc(var(--split-column-gap) / 2); }
.box-layout-side-right .box-split-media { padding-left: calc(var(--split-column-gap) / 2); }
.box-layout-side-right .box-split-content { padding-right: calc(var(--split-column-gap) / 2); }

/* --- 3. MEDIA (Image) --- */
.box-split-media img {
    width: 100%;
    height: auto;
    display: block;
}
.box-image-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; }
.box-image-anchor { display: block; width: 100%; height: 100%; position: relative; }

/* Overlay */
.box-image-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background-color: rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease;
    z-index: 5; pointer-events: none; 
}
.box-image-overlay-text {
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif;
    font-size: 50px; font-weight: 300; text-transform: uppercase;
    letter-spacing: 2px; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); color: #fff;
}
.box-image-anchor:hover .box-image-overlay { background-color: rgba(0, 0, 0, 0.25); }
.box-image-anchor:hover img { transform: scale(1.03); transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* --- 4. CONTENT (Text) --- */
.box-split-content { padding: 0; }
.box-content-inner { padding: 0; }

.box-post-title {
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif;
    font-size: 50px; margin-top: 40px; line-height: 1.1; font-weight: 300; text-transform: uppercase; color: #000;
}
.box-post-excerpt {
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif;
    font-size: 22px; line-height: 1.6; margin: 30px 0; font-weight: 200; color: #000;
}
.box-post-link, .box-post-link a {
    font-family: var(--e-global-typography-primary-font-family), "AeonikPro", Sans-serif;
    font-size: 22px; color: #000; font-weight: 200; text-decoration: underline !important; text-underline-offset: 4px;
}

@media (min-width: 1025px) and (max-width: 1366px) {
    .box-layout-side-left .box-split-media { padding-right: max(calc(var(--split-column-gap) / 2), 20px) !important; }
    .box-layout-side-left .box-split-content { padding-left: max(calc(var(--split-column-gap) / 2), 20px) !important; }
    .box-layout-side-right .box-split-media { padding-left: max(calc(var(--split-column-gap) / 2), 20px) !important; }
    .box-layout-side-right .box-split-content { padding-right: max(calc(var(--split-column-gap) / 2), 20px) !important; }
}

/* =========================================
   5. TABLET & MOBILE (Max 1024px)
   ========================================= */
@media (max-width: 1024px) {
    
    /* A. Force Stacked Layout & Reset Gaps */
    .box-post-split-container {
        display: flex !important;
        flex-direction: column !important; /* Default: Image Top, Text Bottom */
        gap: 30px !important; 
    }

    /* B. Mobile Stacking Order Controller (Bulletproof Flip) */
    /* This overrides the standard column flow if the user selects Text First */
    .box-mobile-stack-text_first .box-post-split-container {
        flex-direction: column-reverse !important;
    }

    /* C. Fix the Squished Text Bug & KILL MIN-HEIGHT 500PX */
    .elementor-widget-wrap .box-post-split-container .box-split-col,
    .box-post-split-container .box-split-media,
    .box-post-split-container .box-split-content { 
        flex: 0 0 100% !important; 
        max-width: 100% !important; 
        width: 100% !important; 
        min-height: auto !important; /* This strictly kills the massive blank space gap */
    }

    /* D. Reset Desktop Gutter Paddings */
    .box-layout-side-left .box-split-media,
    .box-layout-side-left .box-split-content,
    .box-layout-side-right .box-split-media,
    .box-layout-side-right .box-split-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* E. Typography Scaling & Margin Reset */
    .box-post-title { font-size: 38px !important; margin-top: 0 !important; }
    .box-post-excerpt { margin-bottom: 0 !important; }
}