/**
 * Half Text / Half Image Block Styles
 *
 * @package KalbaRx
 */

/* ========================================
   Section Container
   ======================================== */

.half-text-half-image {
    position: relative;
}

.half-text-half-image .container {
    position: relative;
}

/* ========================================
   Layout Wrapper
   ======================================== */

.half-text-half-image .text-image-wrapper {
    display: flex;
}

/* ========================================
   Text Content Column
   ======================================== */

.half-text-half-image .text-column {
    position: relative;
    z-index: 2;
}

/* Sub-heading styles inherit from global.css .sub-heading */

.half-text-half-image .content-text:has(+ .button-wrapper) {
    margin-bottom: var(--spacing-xl);
}

.half-text-half-image .content-text p {
    margin-bottom: var(--spacing-md);
}

.half-text-half-image .content-text p:last-child {
    margin-bottom: 0;
}

/* ========================================
   Image Column
   ======================================== */

.half-text-half-image .image-column {
    position: relative;
    z-index: 1;
}

.half-text-half-image .image-wrapper {
    position: relative;
    width: 100%;
}

.half-text-half-image .image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

.half-text-half-image.has-image-overlap .image-wrapper img {
    box-shadow: none;
}

/* ========================================
   Image Overlap Effect (Optional)
   ======================================== */

/* Overlap effect handled in responsive section for mobile-first approach */

/* ========================================
   Image Position Variations
   ======================================== */

/* Image position handled in responsive section */

/* ========================================
   Background Color Variations
   ======================================== */

.half-text-half-image.bg-gray {
    background-color: var(--color-gray-50);
}

.half-text-half-image.bg-primary-light {
    background-color: var(--color-primary-light);
}

.half-text-half-image.bg-primary-light .content-text {
    color: var(--color-white);
    opacity: 0.95;
}

/* bg-primary-light .sub-heading color handled in global.css */

.half-text-half-image.bg-secondary-light {
    background-color: var(--color-secondary-light);
}

/* ========================================
   Responsive Design - Mobile First
   ======================================== */

/* Base styles are mobile (0-767px) */
.half-text-half-image .text-image-wrapper {
    flex-direction: column;
    gap: var(--spacing-xl);
}

.half-text-half-image .text-column,
.half-text-half-image .image-column {
    flex: none;
    width: 100%;
}

.half-text-half-image.image-left .image-column {
    order: 0;
}

.half-text-half-image .text-content {
    max-width: 100%;
    margin: 0 auto;
}

.half-text-half-image .content-text {
    font-size: var(--font-size-sm);
}

.half-text-half-image .button-wrapper {
    flex-direction: column;
}

.half-text-half-image .button-wrapper .button {
    width: 100%;
    text-align: center;
}

/* Disable overlap effect on mobile - revert to normal flow */
.half-text-half-image.has-image-overlap .image-wrapper {
    position: relative;
    transform: none;
}

/* Tablet - 768px and up */
@media (min-width: 768px) {
    .half-text-half-image .text-image-wrapper {
        flex-direction: row;
        gap: var(--spacing-2xl);
        align-items: center;
    }
    
    .half-text-half-image .text-column,
    .half-text-half-image .image-column {
        flex: 1;
        width: auto;
    }
    
    .half-text-half-image.image-left .image-column {
        order: -1;
    }
    
    .half-text-half-image .text-content {
        max-width: 600px;
    }
    
    .half-text-half-image .content-text {
        font-size: var(--font-size-base);
    }
    
    .half-text-half-image .button-wrapper {
        flex-direction: row;
    }
    
    .half-text-half-image .button-wrapper .button {
        width: auto;
        text-align: left;
    }
    
    /* Re-enable overlap effect on tablet+ */
    .half-text-half-image.has-image-overlap .image-wrapper {
        position: absolute;
        transform: translateY(-40%);
    }
}

/* Desktop - 1024px and up */
@media (min-width: 1024px) {
    .half-text-half-image .text-image-wrapper {
        gap: var(--spacing-3xl);
    }
    
    .half-text-half-image .content-text {
        font-size: var(--font-size-lg);
    }
    
    /* Full overlap effect on desktop */
    .half-text-half-image.has-image-overlap .image-wrapper {
        transform: translateY(-60%);
    }

    .half-text-half-image .image-wrapper img {
        min-height: 550px;
    }
}

/* Large Desktop - 1280px and up */
@media (min-width: 1280px) {
    .half-text-half-image .text-image-wrapper {
        gap: calc(var(--spacing-3xl) + var(--spacing-lg));
    }

    /* Image Overlap Padding */
    .section-padding:has(+ .has-image-overlap) {
        padding-bottom: calc(var(--spacing-3xl) + var(--spacing-3xl));
    }
}