/* For Whom Section Styles */

.for-whom-section {
    position: relative;
    width: 100%;
}

/* Mobile-first: Stack vertically */
.for-whom-section > div {
    flex-direction: column;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.images-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Mobile: Allow natural image flow */
.images-container img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
}

/* Image section transitions */
.image-section,
.content-section {
    transition: opacity 0.5s ease-in-out;
}

.image-section.active,
.content-section.active {
    opacity: 1;
    pointer-events: auto;
}

/* Toggle label styles */
.toggle-label.active {
    font-weight: 600;
    opacity: 1;
}

.toggle-switch.toggled .toggle-indicator {
    transform: translateX(24px);
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
    .for-whom-section > div {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Desktop (1024px and up) - side by side layout */
@media (min-width: 1024px) {
    .for-whom-section > div {
        flex-direction: row;
        padding-right: max(24px, calc((100vw - 1296px) / 2))!important;
        padding-left: 0!important;
    }
    
    .images-container {
        width: auto;
        max-height: 100%;
    }
    
    /* Limit image column heights on desktop */
    .images-container > div > div {
        max-height: 100%;
    }
    
    .images-container img {
        max-height: 400px;
    }
}

/* Large desktop (1280px and up) */
@media (min-width: 1280px) {
    .toggle-switch.toggled .toggle-indicator {
        transform: translateX(24px);
    }
}