/* ==========================================================================
   ITGI Slanted Split Container (40/60 Ratio & Tightened Slanted Gap)
   ========================================================================== */

.itgi-slanted-wrapper {
    width: 100%;
    padding: 20px 0;
}

.itgi-slanted-container {
    position: relative;
    max-width: 1358px;
    min-height: 456px;
    margin: 0 auto;
    background-color: #ffffff; /* White background creates the slanted gap line */
    border-radius: 20px;
    overflow: hidden;
}

/* ================= 1. DECORATIVE BACKGROUND LAYER ================= */
.itgi-slanted-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Clicks pass straight through to dropzones */
    z-index: 1;
}

/* Green Left Slant (~40% Width Area) */
.itgi-slanted-left-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F1F9F4; /* Light Green */
    /* Slant Math: Top-Right at 38.5%, Bottom-Right at 44.5% */
    -webkit-clip-path: polygon(0 0%, 38.5% 0%, 44.5% 100%, 0% 100%);
    clip-path: polygon(0 0%, 38.5% 0%, 44.5% 100%, 0% 100%);
}

/* Grey Right Slant (~60% Width Area with 1% Tight Gap) */
.itgi-slanted-right-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #F6F8FA; /* Light Grey */
    /* Slant Math: Top-Left starts at 39.5% (1% gap), Bottom-Left starts at 45.5% (1% gap) */
    -webkit-clip-path: polygon(39.5% 0%, 100% 0%, 100% 100%, 45.5% 100%);
    clip-path: polygon(39.5% 0%, 100% 0%, 100% 100%, 45.5% 100%);
}

/* ================= 2. FOREGROUND CONTENT DROPZONES ================= */
.itgi-slanted-content-grid {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    min-height: 456px;
}

/* Left Dropzone (40% Width) */
.itgi-slanted-left-col {
    flex: 0 0 40%;
    max-width: 40%;
    padding: 32px 24px 32px 32px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Right Dropzone (60% Width) */
.itgi-slanted-right-col {
    flex: 0 0 60%;
    max-width: 60%;
    padding: 32px 32px 32px 24px;
    box-sizing: border-box;
}

/* Author Mode Fix for Empty Dropzone Target Visibility */
.itgi-slanted-left-col .cq-placeholder,
.itgi-slanted-right-col .cq-placeholder,
.itgi-slanted-left-col .aem-Grid,
.itgi-slanted-right-col .aem-Grid {
    min-height: 120px;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .itgi-slanted-content-grid {
        flex-direction: column;
        min-height: auto;
    }

    .itgi-slanted-left-bg {
        clip-path: polygon(0 0%, 100% 0%, 100% 95%, 0% 100%);
        height: 50%;
    }

    .itgi-slanted-right-bg {
        clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 100%);
        top: 50%;
        height: 50%;
    }

    .itgi-slanted-left-col,
    .itgi-slanted-right-col {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 24px 16px;
    }
}