/* Section Layouts for DASPR Website */

/* Mobile First Approach */

/* Common styles for all content sections */
.difference-content, 
.feature-content,
.science-content, 
.daily-content, 
.privacy-content {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-direction: row;
    position: relative;
}

/* Text and Image elements */
.difference-text, .feature-text, .science-text, .daily-text, .privacy-text {
    flex: 1;
}

.difference-image, .feature-image, .science-image, .daily-image, .privacy-image {
    flex: 1;
    max-width: 45%;
    position: relative;
}

/* ===== WHY WE'RE DIFFERENT PAGE ===== */

/* 1. Manual Entry - Text on left, Image on right */
.manual-entry .difference-content {
    flex-direction: row;
}

/* 2. Ballpark Precision - Image on left, Text on right */
.ballpark-precision .difference-content {
    /* Current HTML structure already has image first, text second */
}

/* 3. Daily Monthly - Text on left, Image on right */
.daily-monthly .difference-content {
    flex-direction: row;
}

/* 4. Privacy Monetization - Image on left, Text on right */
/* Already modified HTML to have image first */

/* 5. Complementary - Text on left, Image on right */
.complementary .difference-content {
    flex-direction: row;
}

/* ===== FEATURES PAGE ===== */

/* 1. Safe Spend - Text on left, Image on right */
.safe-spend .feature-content {
    flex-direction: row;
}

/* 2. Spend Pulse - Image on left, Text on right */
/* HTML already has image first */

/* 3. Flex Buffer - Text on left, Image on right */
.flex-buffer .feature-content {
    flex-direction: row;
}

/* 4. Exception Handling - Image on left, Text on right */
/* HTML already has image first */

/* 5. Quick Add - Text on left, Image on right */
.quick-add .feature-content {
    flex-direction: row;
}

/* ===== OUR APPROACH PAGE ===== */

/* 1. Science - Text on left, Image on right */
.behavioral-science .science-content {
    flex-direction: row;
}

/* 2. Daily Focus - Image on left, Text on right */
/* HTML already has image first */

/* 3. Privacy - Text on left, Image on right */
.privacy-approach .privacy-content {
    flex-direction: row;
}

/* Improved mobile experience with proper content stacking */
@media (max-width: 767px) {
    /* Force column layout for all content sections */
    .difference-content, 
    .feature-content,
    .science-content, 
    .daily-content, 
    .privacy-content {
        flex-direction: column !important;
        gap: 40px;
    }
    
    /* Text comes first, image second for better reading experience */
    .difference-image, .feature-image, .science-image, .daily-image, .privacy-image {
        max-width: 100%;
        order: 2 !important; /* Images always come second on mobile, overriding all other styles */
    }
    
    .difference-text, .feature-text, .science-text, .daily-text, .privacy-text {
        order: 1 !important; /* Text always comes first on mobile, overriding all other styles */
        width: 100%;
    }
    
    /* More readable text size and spacing */
    .difference-text p, .feature-text p, .science-text p, .daily-text p, .privacy-text p {
        font-size: 16px;
        line-height: 1.6;
    }
    
    /* Smaller padding on sections */
    .difference, .feature-highlight, .behavioral-science, .daily-focus, .privacy-approach {
        padding: 40px 0;
    }
    
    /* Tighter gaps in grid layouts */
    .comparison-block, .daily-benefits, .privacy-features {
        gap: 15px;
    }
    
    /* Adjust font sizes */
    .difference-text h3, .feature-text h3, .science-text h3, .daily-text h3, .privacy-text h3 {
        font-size: 24px;
        text-align: center;
    }
    
    /* Center subheadings on mobile */
    .difference-text h3::after, .feature-text h3::after, .science-text h3::after, .daily-text h3::after, .privacy-text h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    /* Improve image display */
    .difference-image img, .feature-image img, .science-image img, .daily-image img, .privacy-image img {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
        display: block;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }
    
    /* Better spacing after images */
    .difference-image, .feature-image, .science-image, .daily-image, .privacy-image {
        margin-bottom: 20px;
        padding: 0 20px;
    }
    
    /* Convert grid layouts to stacked for mobile */
    .daily-benefits, .privacy-features {
        display: flex;
        flex-direction: column;
    }
}

/* Desktop layouts - Only apply alternating layouts on desktop */
@media (min-width: 768px) {
    /* Ensure the alternating layout by specifically overriding section content ordering */
    .ballpark-precision .difference-content,
    .privacy-monetization .difference-content,
    .spend-pulse .feature-content,
    .exception-handling .feature-content,
    .daily-focus .daily-content {
        /* Ensure the sections that need image-left, text-right have that layout */
        flex-direction: row !important; /* Keep default layout since HTML is already in correct order */
    }

    /* For sections that need text-left, image-right */
    .manual-entry .difference-content,
    .daily-monthly .difference-content,
    .complementary .difference-content,
    .safe-spend .feature-content,
    .flex-buffer .feature-content,
    .quick-add .feature-content,
    .behavioral-science .science-content,
    .privacy-approach .privacy-content {
        flex-direction: row !important; /* Keep default layout */
    }
}