/*
========================================
   ON GREENS™ - Our Purpose Page (v1.0)
   Specific Layout for Split Visual
   Reference: image_8.png / image_19.png Panel 2
========================================
*/

/* 1. Page Header (Split Layout Structure) */
.purpose-header {
    background-color: transparent; /* Allows global linen texture to show */
    padding-top: var(--spacing-lg);
}

.purpose-split-visual {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
}

/* 2. Left (Content) vs Right (Structural Space) and Image Cue Placement */
.split-content {
    flex: 1; /* Balanced split */
}

.left-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.right-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

/* 3. Handling Specific Image Styles */
.child-reaching, .conversation {
    max-width: 100%;
    height: auto;
    border-radius: 4px; /* subtle rounding for consistency */
    box-shadow: var(--shadow-soft); /* diffused light shadow */
}

/* Adjustments for breathing room consistency */
.left-content p, .right-content p {
    color: var(--color-green);
    font-size: 1.15rem; /* Highly readable summary text */
    max-width: 480px; /* limits width for readability */
    line-height: 1.8;
}

/* ========================================
   4. Mobile Responsiveness
======================================== */
@media screen and (max-width: 900px) {
    .purpose-header {
        padding-top: 2rem !important;
    }

    .purpose-split-visual {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3rem !important;
        width: 100% !important;
    }

    .split-content,
    .left-content,
    .right-content {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
        flex: none !important; /* Releases the side-by-side tension */
    }

    .left-content p, .right-content p {
        max-width: 100% !important; 
        padding: 0 1rem !important;
        box-sizing: border-box !important;
    }
}