/* Razor Premium V2 - UX & Mobile Refactor */

/* 1. Mobile Spacing & Padding Adjustments */
@media (max-width: 768px) {
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .mt-5 {
        margin-top: 2rem !important;
    }
    .section-header {
        margin-bottom: 2rem !important;
    }
    .hero-content {
        padding-top: 100px !important;
        padding-bottom: var(--space-8) !important;
    }
    .hero-badge {
        margin-bottom: var(--space-4) !important;
    }
    .hero-desc {
        margin-bottom: var(--space-6) !important;
    }
    .hero-actions {
        margin-bottom: var(--space-8) !important;
    }
    .hero-stats {
        padding: var(--space-5) 0 !important;
        margin-bottom: var(--space-4) !important;
        gap: var(--space-4) !important;
    }
}

/* 2. Services Cards - Premium Microinteractions */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255,255,255,0.03);
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5), 0 0 20px rgba(200, 152, 46, 0.1);
    border-color: rgba(200, 152, 46, 0.3);
}
.service-card:hover .card-glow {
    opacity: 1;
}

/* 3. Hero Overlay - Better Contrast */
.hero-overlay {
    background: linear-gradient(to right, rgba(7, 7, 12, 0.98) 0%, rgba(7, 7, 12, 0.8) 50%, rgba(7, 7, 12, 0.4) 100%) !important;
}
@media (max-width: 768px) {
    .hero-overlay {
        background: linear-gradient(to top, rgba(7, 7, 12, 0.8) 0%, rgba(7, 7, 12, 0.4) 60%, rgba(7, 7, 12, 0.2) 100%) !important;
    }
}

/* 4. Gallery - Mobile Carousel */
@media (max-width: 768px) {
    .gallery-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding-bottom: 15px;
        -webkit-overflow-scrolling: touch;
    }
    .gallery-grid::-webkit-scrollbar {
        height: 6px;
    }
    .gallery-grid::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 4px;
    }
    .gallery-item {
        flex: 0 0 85%;
        scroll-snap-align: center;
        margin-bottom: 0 !important;
    }
}

/* 5. Sticky Mobile CTA & WhatsApp Float Position */
@media (min-width: 769px) {
    .mobile-bottom-cta {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .mobile-bottom-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(10, 10, 15, 0.95);
        backdrop-filter: blur(10px);
        padding: 10px 15px;
        z-index: 998;
        border-top: 1px solid rgba(255,255,255,0.05);
        box-shadow: 0 -5px 20px rgba(0,0,0,0.5);
    }
    
    .mobile-bottom-cta .btn {
        width: 100%;
        font-size: 1.1rem;
        padding: 12px;
        border-radius: 8px;
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1px;
    }

    /* Move WhatsApp icon up so it doesn't overlap the sticky CTA */
    .whatsapp-float {
        bottom: 80px !important;
        right: 15px !important;
    }
    
    /* Ensure body has enough padding so content isn't hidden by the sticky bar */
    body {
        padding-bottom: 70px;
    }
}

/* Improve Touch Targets */
a, button, .btn {
    min-height: 44px;
}

/* Hero - Full Bleed Mobile Fix */
@media (max-width: 768px) {
    .hero {
        min-height: 100vh;
        min-height: 100dvh;
        overflow: hidden;
    }

    /* Força as camadas de fundo a acompanharem a altura real do hero.
       Isso corrige o bug em que a imagem parava de preencher antes do
       final da section em alguns navegadores mobile (Safari/iOS). */
    .hero-bg,
    .hero-overlay,
    .hero-particles {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100%;
    }
}

/* 6. Sobre Nós - Floating Badge Fix */
.about-experience-badge {
    bottom: 20px !important;
    left: -20px !important;
    right: auto !important;
    z-index: 10;
}
@media (max-width: 768px) {
    .about-experience-badge {
        left: 15px !important;
        bottom: 15px !important;
    }
}

/* Hero Mobile Alignment e Qualidade */
@media (max-width: 768px) {
    .hero-bg-img {
        object-position: 65% bottom !important;
        animation: heroZoomMobile 20s var(--ease-smooth) infinite alternate !important;
        transform: scale(1.02) !important;
    }
}
@keyframes heroZoomMobile {
    from { transform: scale(1.02); }
    to { transform: scale(1.05); }
}

/* Fix for inset:0 bug on some browsers causing hero background to not fill */
.hero-bg, .hero-overlay, .hero-particles {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}