/* =====================================================================
   PAGE MODULE — en-services-branding-photography
   Extracted verbatim from inline <style> of: servicios/branding/fotografia.html, en/services/branding/photography.html
   Design unchanged; loaded via `pageCss` front-matter.
   ===================================================================== */

/* Hero 07 Mobile CSS */
@media (max-width: 768px) {
    .hero-arch {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: auto !important;
    }
    
    .arch-container {
        flex-direction: column-reverse !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    
    .arch-image {
        width: 100% !important;
        height: 320px !important;
        min-height: 320px !important;
        max-height: 320px !important;
        border-radius: 0 !important;
        order: 2 !important;
        margin: 0 !important;
    }
    
    .arch-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
    
    .arch-card {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 -2.5rem 0 !important;
        padding: 6rem 1.5rem 2.5rem 1.5rem !important;
        border-radius: 28px 28px 0 0 !important;
        order: 1 !important;
        z-index: 2 !important;
        box-shadow: 0 -10px 30px rgba(0,0,0,0.1) !important;
    }
    
    .arch-card .eyebrow {
        margin-top: 0.5rem !important;
    }
    
    .arch-bg-left {
        display: none !important;
    }
}

/* Particle Float Animation */
@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.6;
    }
    25% {
        transform: translate(20px, -30px);
        opacity: 0.8;
    }
    50% {
        transform: translate(-15px, -60px);
        opacity: 0.4;
    }
    75% {
        transform: translate(25px, -45px);
        opacity: 0.7;
    }
}

/* Gallery Hover Effect */
@media (min-width: 769px) {
    section div[style*="aspect-ratio: 1"]:hover img {
        transform: scale(1.05);
    }
}

/* Gallery Mobile Fixes */
@media (max-width: 768px) {
    section div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"] {
        gap: 0.5rem !important;
    }
    
    section div[style*="aspect-ratio: 1"] {
        aspect-ratio: 4/3 !important;
    }
    
    section div[style*="aspect-ratio: 1"] img {
        object-fit: contain !important;
        object-position: center !important;
        background: #FAF9F6;
    }
}

/* Service Card Hover */
@media (min-width: 769px) {
    section > div > div > div[style*="box-shadow: 0 4px 20px"]:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
    }
}

/* Responsive Grid Adjustments */
@media (max-width: 768px) {
    section[style*="padding: 5rem"] {
        padding: 3.5rem 1.5rem !important;
    }
    
    div[style*="gap: 3rem"] {
        gap: 2rem !important;
    }
    
    h2 {
        font-size: 2.25rem !important;
    }
    
    h3 {
        font-size: 1.3rem !important;
    }
}

/* Mobile-First Grid Pattern */
@media (max-width: 640px) {
    div[style*="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(350px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }
}