/**
 * Responsive Fixes for Petalelepacii Static Site
 * Fixes video background sections on mobile/tablet devices
 */

/* Fix for lotus flower video section on mobile/tablet */
@media only screen and (max-device-width: 1024px) {
    /* Add background image fallback when video is hidden */
    .section.has-video[style*="background-color:#f9ccd4"] {
        background-image: url('/assets/images/2016/10/lotus.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    /* Ensure text remains readable over the background image */
    .section.has-video[style*="background-color:#f9ccd4"] .section_wrapper {
        background-color: rgba(249, 204, 212, 0.7);
        padding: 20px;
    }
}

/* Additional mobile optimization for the lotus section */
@media only screen and (max-width: 767px) {
    .section.has-video[style*="background-color:#f9ccd4"] {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .section.has-video[style*="background-color:#f9ccd4"] .section_wrapper {
        padding: 15px;
    }
}