/**
 * Take Action Page - Overlapping Sections
 * 
 * Creates the effect where:
 * - The volunteer form card overlaps the image section below it
 * - The upcoming events card overlaps the image section above it
 */

/* ==========================================================================
   Volunteer Form Section - Overlaps Image Below
   ========================================================================== */

.action-volunteer-form {
    position: relative;
    z-index: 2;
    padding-bottom: 0 !important; /* Remove bottom padding to allow overlap */
}

.action-volunteer-form .action-form-window {
    position: relative;
    margin-bottom: -530px; /* Controls how much the form overlaps the image */
    z-index: 2;
}

/* ==========================================================================
   Image Section - Sits Behind Both Overlapping Elements
   ========================================================================== */

.action-volunteer-image {
    position: relative;
    z-index: 1;
    min-height: 800px !important; /* Ensure enough space for form overlap plus gap plus events overlap */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    overflow: hidden;
}

/* ==========================================================================
   Upcoming Events Section - Overlaps Image Above
   ========================================================================== */

.action-volunteer-events {
    position: relative;
    z-index: 2;
    overflow: visible !important;
}

.action-volunteer-events .action-events-window {
    position: relative;
    top: -140px; /* Pull the window up over the image */
    margin-bottom: -140px; /* Compensate so it doesn't leave a gap below */
    z-index: 2;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .action-volunteer-form .action-form-window {
        margin-bottom: -350px;
    }
    
    .action-volunteer-image {
        min-height: 650px !important;
    }
    
    .action-volunteer-events .action-events-window {
        top: -100px;
        margin-bottom: -100px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .action-volunteer-form .action-form-window {
        margin-bottom: -200px;
    }
    
    .action-volunteer-image {
        min-height: 500px !important;
    }
    
    .action-volunteer-events .action-events-window {
        top: -120px;
        margin-bottom: -120px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .action-volunteer-form .action-form-window {
        margin-bottom: -120px;
    }
    
    .action-volunteer-image {
        min-height: 400px !important;
    }
    
    .action-volunteer-events .action-events-window {
        top: -60px;
        margin-bottom: -60px;
    }
}