/**
 * Content Section Block Styles
 *
 * @package KalbaRx
 */

.content-section {
    position: relative;
}

.content-section .container {
    position: relative;
    z-index: 1;
}

.content-section .paw {
	position: absolute;
	top: 0;
	left: 0;
    right: auto;
	width: 350px;
    opacity: 0.4;
    pointer-events: none;
}

.content-section.image-left .paw {
    left: auto;
    right: 0;
    transform: scaleX(-1);
}

.content-section .paw img {
    width: 100%;
    height: 100%;
}

/* Base styles are mobile (0-1023px) */
.content-section .content-section-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.content-section .content-section-wrapper > * {
    flex: 1 1 100%;
    min-width: 100%;
}

.content-section.image-left .content-section-wrapper {
    direction: ltr;
}

.content-section .content-text:has(+ .content-buttons) {
    margin-bottom: var(--spacing-lg);
}

.content-section .content-buttons {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
}

.content-section .content-buttons .button {
    min-width: 200px;
}

/* Mobile */
@media (max-width: 767px) {
    .content-section .content-buttons {
        flex-direction: column;
    }
    
    .content-section .content-buttons .button {
        width: 100%;
        min-width: auto;
    }
}

.content-section .content-section-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
}

/* Desktop - 1024px and up */
@media (min-width: 1024px) {
    .content-section .content-section-wrapper {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
    
    .content-section .content-section-wrapper > * {
        flex: 1 1 calc(50% - var(--spacing-xl));
        min-width: 300px;
    }
    
    .content-section.image-left .content-section-wrapper {
        direction: rtl;
    }
    
    .content-section.image-left .content-column {
        direction: ltr;
    }

    .content-section .content-section-image {
        min-height: 550px;
    }
}