/* Split Content Module - Edge-to-Edge Layout */
.split-content-module {
    width: 100%;
    padding: 0; /* Remove default padding */
    position: relative;
    overflow: hidden;
    background-color: var(--bg-split-gray);
}

.split-content-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px; /* distance from text */
  width: 30px;   /* length of the underline */
  height: 2px;
  background-color: #b00020; /* your desired underline color */
}

.split-content-container {
    display: flex;
    width: 100%; /* Full width */
    margin: 0; /* Remove margin */
    align-items: stretch; /* Make both sides equal height */
}

.split-content-image {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 400px; /* Minimum height for the image */
}

.split-content-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire area */
    display: block;
    transition: transform 0.5s ease;
}

.split-content-image:hover img {
    transform: scale(1.05);
}

.split-content-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}

/* Add padding to text content column based on data attributes */
.split-content-text[data-padding] {
    padding: var(--split-content-padding, 5%);
}

/* Inner wrapper for content elements */
.split-content-inner {
    width: 100%;
    /* Default inner padding can be 0 since the parent has padding */
    padding: 0;
}

/* Allow targeting the inner content by ID */
#energy-saving-content,
#reliability-content,
#customization-content,
#security-content {
    /* Individual module styling can be added here */
}

.image-right .split-content-container {
    flex-direction: row-reverse;
}

.split-content-subtitle {
    font-size: calc(var(--current-scale) * (0.8vw + 0.4vh + 0.16vmin));
    color: var(--text-x-dark);
    font-weight: 500;
    margin-bottom: calc(var(--current-scale) * (0.8vw + 0.4vh));
    text-transform: uppercase;
    letter-spacing: calc(var(--current-scale) * (0.1vw + 0.05vh));
}

.split-content-title {
    font-size: calc(var(--current-scale) * (2.88vw + 1.44vh + 0.57vmin));
    color: var(--primary);
    margin-bottom: calc(var(--current-scale) * (1.5vw + 0.75vh));
    font-weight: 500;
    line-height: 1.3;
    position: relative;
    display: inline-block;
    padding-bottom: calc(var(--current-scale) * (0.8vw + 0.4vh));
    margin-bottom: calc(var(--current-scale) * (1.5vw + 0.75vh)); 
    text-transform: uppercase;
}

.split-content-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: calc(var(--current-scale) * (0.15vw + 0.075vh));
    width: 100%;
    background: linear-gradient(90deg, 
        var(--primary) 0%, 
        var(--primary) 30%, 
        transparent 30%, 
        transparent 100%
    );
    transition: background 0.4s ease;
}

.split-content-title:hover::after {
    background: linear-gradient(90deg, 
        var(--primary) 0%, 
        var(--primary-light) 100%
    );
}

/*.split-content-title:hover {*/
/*  color: var(--primary);*/
/*  transition: all 0.3s ease;*/
/*}*/

.split-content-description {
    font-size: calc(var(--current-scale) * (1vw + 0.5vh + 0.2vmin));
    color: var(--text-dark);
    line-height: 1.6;
    margin-bottom: calc(var(--current-scale) * (1.5vw + 0.75vh));
}

.split-content-features {
    margin-bottom: calc(var(--current-scale) * (2vw + 1vh));
    padding-left: calc(var(--current-scale) * (1.5vw + 0.75vh));
}

.split-content-features li {
    font-size: calc(var(--current-scale) * (0.9vw + 0.45vh + 0.18vmin));
    margin-bottom: calc(var(--current-scale) * (0.8vw + 0.4vh));
    position: relative;
    padding-left: calc(var(--current-scale) * (1.5vw + 0.75vh));
}

.split-content-features li:before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--current-scale) * (0.5vw + 0.25vh));
    width: calc(var(--current-scale) * (0.5vw + 0.25vh));
    height: calc(var(--current-scale) * (0.5vw + 0.25vh));
    background-color: var(--primary);
    border-radius: 50%;
}

.split-content-button {
    display: inline-block;
    padding: calc(var(--current-scale) * (0.8vw + 0.4vh)) calc(var(--current-scale) * (1.6vw + 0.8vh));
    background-color: var(--primary);
    color: var(--text-light);
    font-size: calc(var(--current-scale) * (0.9vw + 0.45vh + 0.18vmin));
    border-radius: calc(var(--current-scale) * (0.25vw + 0.125vh));
    transition: all 0.3s ease;
    font-weight: 500;
    text-transform: uppercase;
    border: calc(var(--current-scale) * (0.1vw + 0.05vh)) solid var(--primary);
}

.split-content-button:hover {
    background-color: transparent;
    color: var(--primary);
}

/* Optional: Image aspect ratio control */
.split-content-image[data-aspect-ratio="square"] {
    aspect-ratio: 1 / 1;
}

.split-content-image[data-aspect-ratio="portrait"] {
    aspect-ratio: 3 / 4;
}

.split-content-image[data-aspect-ratio="landscape"] {
    aspect-ratio: 16 / 9;
}

/* Vertical spacing control through CSS variables */
.split-content-module[data-spacing="none"] {
    --top-spacing: 0;
    --bottom-spacing: 0;
}

.split-content-module[data-spacing="small"] {
    --top-spacing: 2rem;
    --bottom-spacing: 2rem;
}

.split-content-module[data-spacing="medium"] {
    --top-spacing: 4rem;
    --bottom-spacing: 4rem;
}

.split-content-module[data-spacing="large"] {
    --top-spacing: 6rem;
    --bottom-spacing: 6rem;
}

.split-content-module[data-spacing] {
    padding-top: var(--top-spacing, 0);
    padding-bottom: var(--bottom-spacing, 0);
}

/* Split Content Header Styles */
.split-content-header {
    width: 100%;
    padding: calc(var(--current-scale) * (2vw + 1vh)) 0;
}

.split-content-header-container {
    width: var(--container-width);
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 calc(var(--current-scale) * (1vw + 0.5vh));
}

.split-content-header-subtitle {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: calc(var(--current-scale) * (0.5vw + 0.25vh));
    text-transform: uppercase;
    letter-spacing: calc(var(--current-scale) * (0.05vw + 0.025vh));
}

.split-content-header-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--secondary-dark);
    margin-bottom: calc(var(--current-scale) * (1vw + 0.5vh));
    line-height: 1.2;
}

.split-content-header-description {
    font-size: var(--font-size-md);
    color: var(--text-muted);
    margin-bottom: calc(var(--current-scale) * (1.5vw + 0.75vh));
    max-width: calc(var(--current-scale) * (40vw));
    margin-left: auto;
    margin-right: auto;
}

.text-left .split-content-header-description {
    margin-left: 0;
}

.text-right .split-content-header-description {
    margin-right: 0;
}

/* Tablet Adjustments */
@media (max-width: 992px) {
    .split-content-text[data-padding] {
        padding: var(--split-content-padding-tablet, 4%);
    }
    
    .split-content-image {
        min-height: 350px;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .split-content-container {
        flex-direction: column;
    }
    
    .split-content-image, 
    .split-content-text {
        width: 100%;
        flex: auto;
    }
    
    .split-content-text[data-padding] {
        padding: var(--split-content-padding-mobile, 8% 5%);
    }
    
    .split-content-image {
        min-height: 250px;
    }
    
    /* Override image-right class on mobile */
    .image-right .split-content-container {
        flex-direction: column;
    }
    
    /* Custom order for mobile - show image first if needed */
    .mobile-image-first .split-content-container {
        display: flex;
        flex-direction: column-reverse;
    }
    
    /* Moderate spacing for features list */
    .split-content-features {
        margin-bottom: calc(var(--current-scale) * (1.8vw + 0.9vh));
        padding-left: calc(var(--current-scale) * (1.2vw + 0.6vh));
    }
    
    .split-content-features li {
        margin-bottom: calc(var(--current-scale) * (0.6vw + 0.3vh));
        padding-left: calc(var(--current-scale) * (1.2vw + 0.6vh));
    }
    
    .split-content-header-title {
        font-size: calc(var(--font-size-lg) * 1.1);
    }
    
    .split-content-header-description {
        max-width: calc(var(--current-scale) * (60vw));
    }    
}

@media (max-width: 480px) {
    .split-content-module[data-spacing] {
        padding-top: calc(var(--top-spacing) * 0.6);
        padding-bottom: calc(var(--bottom-spacing) * 0.6);
    }
    
    .split-content-text[data-padding] {
        padding: var(--split-content-padding-mobile-small, 8% 5%);
    }
    
    .split-content-subtitle {
        font-size: calc(var(--current-scale) * (0.8vw + 0.5vh + 0.16vmin));
        margin-bottom: calc(var(--current-scale) * (0.7vw + 0.35vh));
    }
    
    .split-content-title {
        font-size: calc(var(--current-scale) * (1.5vw + 0.9vh + 0.3vmin));
        margin-bottom: calc(var(--current-scale) * (1.2vw + 0.6vh));
    }
    
    .split-content-description {
        font-size: calc(var(--current-scale) * (1vw + 0.65vh + 0.18vmin));
        margin-bottom: calc(var(--current-scale) * (1.2vw + 0.6vh));
    }
    
    .split-content-button {
        padding: calc(var(--current-scale) * (0.7vw + 0.35vh)) calc(var(--current-scale) * (1.4vw + 0.7vh));
        font-size: calc(var(--current-scale) * (0.85vw + 0.425vh + 0.17vmin));
    }
    
    .split-content-header-description {
        max-width: 100%;
    }    
}


/* Custom split content css */
    #energy-saving-content {
        padding: 8%;
    }
    
    #reliability-features-content {
        padding: 8%;
    }
    
    @media (max-width: 992px) {
        #energy-saving-content {
            padding: 6%;
        }
        
        #reliability-features-content {
            padding: 6%;
        }        
    }
    
    @media (max-width: 768px) {
        #energy-saving-content {
            padding: 8% 5%;
        }
        
        #reliability-features-content {
            padding: 8% 5%;
        }        
    }