/**
 * EPA Sobre EPA Page Styles
 * 
 * Specific styles for the "Sobre EPA" page components
 * Built to complement the main styles.css file
 * 
 * @author Isai
 * @version 1.0
 */

/* ==============================================
   SOBRE EPA HERO SECTION
   ============================================== */

.sobre-epa-hero-section {
    position: relative;
    min-height: 500px;
}

.sobre-epa-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.sobre-epa-background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Desktop specific positioning */
@media (min-width: 1024px) {
    .sobre-epa-hero-section {
        min-height: 600px;
    }
    
    .sobre-epa-background-image img {
        object-position: center right;
    }
}

/* ==============================================
   ELVIRA GARCIA SECTION
   ============================================== */

.elvira-garcia-section {
    position: relative;
}

/* Elvira Garcia Background Image - Cropped effect */
.elvira-garcia-bg-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 120%;
    height: 100%;
    overflow: hidden;
}

.elvira-garcia-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Crop effect from sides */
    clip-path: inset(0 20% 0 0);
}

/* Quote Box Styles */
.elvira-quote-box {
    position: relative;
    box-shadow: 0 4px 12px rgba(46, 174, 179, 0.1);
}

/* Mobile Image Styles */
.elvira-garcia-mobile-image img {
    /* Crop effect for mobile */
    object-fit: cover;
    object-position: center;
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

@media (max-width: 1023px) {
    .elvira-garcia-section {
        background-image: url('/images/elvira-about-bg1.webp');
        background-size: auto 100%;
        background-position: 52% center;
        background-repeat: no-repeat;
    }
    .sobre-epa-hero-section {
        min-height: 450px;
    }
    
    /* Increase overlay opacity on mobile for better text readability */
    .sobre-epa-background-image .absolute.inset-0 {
        background-color: rgba(46, 61, 70, 0.6);
    }
    
    /* Elvira Garcia Section Mobile Adjustments */
    .elvira-garcia-section {
        padding-bottom: 2rem;
    }
    
    .elvira-quote-box {
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .elvira-garcia-section{
        background-image: none;
    }
    .sobre-epa-hero-section {
        min-height: 400px;
    }
    
    /* Stronger overlay on mobile */
    .sobre-epa-background-image .absolute.inset-0 {
        background-color: rgba(46, 61, 70, 0.7);
    }
    
    /* Mobile specific adjustments for Elvira section */
    .elvira-garcia-mobile-image {
        margin-top: 1.5rem;
    }

}

@media (max-width: 640px) {
    .sobre-epa-hero-section {
        min-height: 350px;
    }
    
    .elvira-quote-box {
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
    }
    

}

/* ==============================================
   DESKTOP SPECIFIC STYLES
   ============================================== */


@media (min-width: 1024px) {
    .elvira-garcia-section {
        background-image: url('/images/elvira-about-bg1.webp');
        background-size: auto 100%;
        background-position: 60% center;
        background-repeat: no-repeat;
    }
    
    /* Hide the separate background image container on desktop since we use CSS background */
    .elvira-garcia-bg-image {
        display: none;
    }
}

/* ==============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================== */

@media (prefers-reduced-motion: reduce) {
    .sobre-epa-hero-section *,
    .elvira-garcia-section * {
        transition: none;
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .sobre-epa-background-image .absolute.inset-0 {
        background-color: rgba(46, 61, 70, 0.8);
    }
    
    .elvira-quote-box {
        border-width: 2px;
        background-color: rgba(232, 249, 250, 0.9);
    }
}

/* ==============================================
   PRINT STYLES
   ============================================== */

@media print {
    .sobre-epa-background-image,
    .elvira-garcia-bg-image {
        display: none;
    }
    
    .sobre-epa-hero-section,
    .elvira-garcia-section {
        background-color: #2E3D46;
        color: white;
        min-height: auto;
        padding: 2rem 0;
        background-image: none;
    }
    
    .elvira-quote-box {
        background-color: #f5f5f5;
        border: 1px solid #333;
    }
}