/*
 * DT Content Split Block Styles - Final Mobile Fix
 */

/* 1. Main Section & Widths */
.dt-content-split-wrapper {
    width: 100%;
    padding: 4rem 2rem;
    box-sizing: border-box; /* Ensure padding doesn't add to width */
}

.dt-content-split-panel {
    margin-left: auto;
    margin-right: auto;
    border-radius: 16px;
    overflow: hidden;
    padding: 3rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    box-sizing: border-box;
}

/* Panel Widths */
.dt-content-split-panel.dtcs-width-full { max-width: 100%; border-radius: 0; }
.dt-content-split-panel.dtcs-width-1400 { max-width: 1400px; }
.dt-content-split-panel.dtcs-width-1200 { max-width: 1200px; }
.dt-content-split-panel.dtcs-width-1000 { max-width: 1000px; }
.dt-content-split-panel.dtcs-width-800  { max-width: 800px; }

/* 2. Grid Layout (Desktop) */
.dtcs-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

/* 3. Layout Swap Logic */
.dtcs-media-right .dtcs-info { grid-column: 1; grid-row: 1; }
.dtcs-media-right .dtcs-media { grid-column: 2; grid-row: 1; }

.dtcs-media-left .dtcs-info { grid-column: 2; grid-row: 1; }
.dtcs-media-left .dtcs-media { grid-column: 1; grid-row: 1; }

/* 4. Content Styling */
.dtcs-info h2 {
    font-family: 'Fredoka', sans-serif; font-size: 2.5rem; font-weight: 700; line-height: 1.2; margin: 0 0 1rem 0; color: #111;
}
.dtcs-info .dtcs-content {
    font-family: 'Poppins', sans-serif; font-size: 1.1rem; line-height: 1.6; color: #333;
}
.dtcs-info .dtcs-content p { margin: 0 0 1.5rem 0; }
.dtcs-info .dtcs-content p:last-child { margin-bottom: 0; }

/* Buttons */
.dtcs-buttons { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 2rem; align-items: center; }
.dtcs-button {
    display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; border: none; font-family: 'Poppins', sans-serif;
}
.dtcs-button-primary { background-color: #6a4c89; color: #fff; border: 2px solid #6a4c89; }
.dtcs-button-primary:hover { background-color: #553b70; border-color: #553b70; }
.dtcs-button-secondary { background-color: transparent; color: #6a4c89; border: 2px solid #a987c2; }
.dtcs-button-secondary:hover { background-color: #f0eaf5; border-color: #6a4c89; }

/* Media */
.dtcs-media img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.dtcs-video-wrap { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.dtcs-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.dtcs-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; transition: opacity 0.4s ease, visibility 0.4s ease; pointer-events: none; }
.dtcs-video-poster.is-hidden { opacity: 0; visibility: hidden; }
.dtcs-media-shortcode { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); padding: 1.5rem; box-sizing: border-box; }

/* Extra Content - Unified Style */
.dtcs-extra-content { 
    font-family: 'Poppins', sans-serif; 
    font-size: 1.1rem; 
    line-height: 1.6; 
    color: #333; 
}
.dtcs-pos-bottom { 
    margin-top: 1.5rem; /* Reduced margin */
    padding-top: 0;      /* Removed padding */
    border-top: none;   /* Removed the line */
}
.dtcs-pos-top { 
    margin-bottom: 1.5rem; /* Reduced margin */
    padding-bottom: 0;      /* Removed padding */
    border-bottom: none;   /* Removed the line */
}

/* Visibility Utilities */
@media (min-width: 1025px) { .dt-content-split-wrapper.dt-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .dt-content-split-wrapper.dt-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .dt-content-split-wrapper.dt-hide-mobile { display: none !important; } }


/* ==========================================================================
   MOBILE RESPONSIVENESS (Max Width 900px)
   ========================================================================== */
@media (max-width: 900px) {
    .dt-content-split-wrapper {
        padding: 0; /* Remove outer padding for full width */
    }
    
    .dt-content-split-panel {
        padding: 30px 20px; 
        border-radius: 12px; /* Restored slight radius for cleaner look */
        width: auto; /* CHANGED: Auto width allows margins to work without overflow */
        max-width: 100%; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.08); 
        margin: 0 15px; /* Side margins */
    }

    .dtcs-container {
        display: flex; /* Switch from grid to flex for stacking */
        flex-direction: column;
        gap: 2rem;
    }

    /* Force Order: Media Top, Info Bottom */
    .dtcs-media { order: 1; width: 100%; }
    .dtcs-info  { order: 2; width: 100%; text-align: center; }

    /* Centered & Sized Buttons */
    .dtcs-buttons { 
        justify-content: center; 
        flex-direction: column; 
        width: 100%; 
        gap: 15px; /* Ensure gap exists vertically */
    }
    
    .dtcs-button { 
        width: 100%;
        max-width: 100%;
        box-sizing: border-box; /* CRITICAL: Prevents padding from adding to width */
        white-space: normal; /* Allows text to wrap */
        height: auto; /* Allows button to grow if text wraps */
        line-height: 1.3;
        text-align: center;
    }
    
.dtcs-pos-bottom { margin-top: 1.5rem; padding-top: 0; border-top: none; }
.dtcs-pos-top { margin-bottom: 1.5rem; padding-bottom: 0; border-bottom: none; }
}