/* === CLEAN MOBILE LAYOUT - DESIGNBUNDLES INSPIRED === */

/* IMPORT GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* === MOBILE HEADER LAYOUT (SEM ALTERAR HEADER ATUAL) === */
/* Apenas ajustando espaçamentos para trabalhar com header existente */

@media screen and (max-width: 768px) {
    /* Base mobile foundation */
    html, body {
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
        overflow-x: hidden !important;
        scroll-behavior: smooth !important;
    }
    
    /* Main content spacing */
    .site-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* === CLEAN HERO BANNERS LAYOUT === */

/* MOBILE LAYOUT - CLEAN & ORGANIZED */
@media screen and (max-width: 768px) {
    
    /* Hero sections - Clean spacing like DesignBundles */
    .pixeehub-hero-section,
    .pixeehub-main-hero,
    .pixeehub-stickers-section,
    .icons-hero-banner {
        padding: 140px 0 40px 0 !important; /* More top space for header + clean bottom */
        background: #f5f5f5 !important; /* Clean light background */
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Container - Centered and clean */
    .pixeehub-hero-section .hero-container,
    .pixeehub-main-hero .hero-container,
    .pixeehub-stickers-section .stickers-container,
    .icons-hero-banner .hero-container {
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 24px !important; /* Clean spacing between elements */
        box-sizing: border-box !important;
    }
    
    /* Text content - Clean hierarchy */
    .pixeehub-hero-section .hero-text-content,
    .pixeehub-main-hero .hero-text-content,
    .pixeehub-stickers-section .stickers-text-content,
    .icons-hero-banner .hero-text {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 1 !important;
        text-align: center !important;
    }
    
    /* Visual content - Clean image presentation */
    .pixeehub-hero-section .hero-visual,
    .pixeehub-main-hero .hero-visual,
    .pixeehub-stickers-section .stickers-visual,
    .icons-hero-banner .hero-visual {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* Clean title wrapper */
    .pixeehub-hero-section .title-wrapper,
    .pixeehub-main-hero .title-wrapper,
    .pixeehub-stickers-section .title-wrapper,
    .icons-hero-banner .title-wrapper {
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Primary heading - Clean and readable */
    .pixeehub-hero-section .hero-text-content h1,
    .pixeehub-main-hero .hero-text-content h1,
    .pixeehub-stickers-section .stickers-text-content h2,
    .icons-hero-banner .hero-text h1 {
        font-family: 'Poppins', sans-serif !important;
        font-size: 1.75rem !important; /* 28px - Good mobile size */
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: #2c2c2c !important;
        margin: 0 0 8px 0 !important;
        text-align: center !important;
        letter-spacing: -0.02em !important;
    }
    
    /* Secondary heading - Clean gradient accent */
    .pixeehub-hero-section .hero-text-content h2,
    .pixeehub-main-hero .hero-text-content h2,
    .pixeehub-stickers-section .stickers-text-content h3,
    .icons-hero-banner .hero-text .highlight-gradient {
        font-family: 'Poppins', sans-serif !important;
        font-size: 2rem !important; /* 32px - Perfect for accent text */
        font-weight: 800 !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        text-align: center !important;
        background: linear-gradient(135deg, #007cf0 0%, #00dfd8 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        letter-spacing: -0.03em !important;
    }
    
    /* Clean image styling */
    .pixeehub-hero-section .hero-visual img,
    .pixeehub-main-hero .hero-visual img,
    .pixeehub-stickers-section .stickers-visual img,
    .icons-hero-banner .hero-visual img {
        max-width: 100% !important;
        max-height: 240px !important; /* Good mobile image size */
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 0 !important; /* Clean, no rounded corners */
        box-shadow: none !important; /* Clean, no shadows */
        margin: 0 auto !important;
        display: block !important;
    }
    
    /* Style description for clean mobile layout */
    .pixeehub-hero-section .hero-description,
    .pixeehub-main-hero .hero-description,
    .pixeehub-stickers-section .hero-description,
    .icons-hero-banner .hero-description {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        color: #666 !important;
        margin: 8px 0 16px 0 !important;
        padding: 0 !important;
        text-align: center !important;
        max-width: 100% !important;
    }
}

/* === MEDIUM MOBILE (max-width: 640px) === */
@media screen and (max-width: 640px) {
    
    .pixeehub-hero-section,
    .pixeehub-main-hero,
    .pixeehub-stickers-section,
    .icons-hero-banner {
        padding: 90px 0 32px 0 !important;
    }
    
    .pixeehub-hero-section .hero-container,
    .pixeehub-main-hero .hero-container,
    .pixeehub-stickers-section .stickers-container,
    .icons-hero-banner .hero-container {
        padding: 0 16px !important;
        gap: 20px !important;
    }
    
    .pixeehub-hero-section .title-wrapper,
    .pixeehub-main-hero .title-wrapper,
    .pixeehub-stickers-section .title-wrapper,
    .icons-hero-banner .title-wrapper {
        margin: 0 0 12px 0 !important;
    }
    
    .pixeehub-hero-section .hero-text-content h1,
    .pixeehub-main-hero .hero-text-content h1,
    .pixeehub-stickers-section .stickers-text-content h2,
    .icons-hero-banner .hero-text h1 {
        font-size: 1.5rem !important; /* 24px */
        margin: 0 0 6px 0 !important;
    }
    
    .pixeehub-hero-section .hero-text-content h2,
    .pixeehub-main-hero .hero-text-content h2,
    .pixeehub-stickers-section .stickers-text-content h3,
    .icons-hero-banner .hero-text .highlight-gradient {
        font-size: 1.75rem !important; /* 28px */
    }
    
    .pixeehub-hero-section .hero-visual img,
    .pixeehub-main-hero .hero-visual img,
    .pixeehub-stickers-section .stickers-visual img,
    .icons-hero-banner .hero-visual img {
        max-height: 200px !important;
    }
}

/* === SMALL MOBILE (max-width: 480px) === */
@media screen and (max-width: 480px) {
    
    .pixeehub-hero-section,
    .pixeehub-main-hero,
    .pixeehub-stickers-section,
    .icons-hero-banner {
        padding: 80px 0 24px 0 !important;
    }
    
    .pixeehub-hero-section .hero-container,
    .pixeehub-main-hero .hero-container,
    .pixeehub-stickers-section .stickers-container,
    .icons-hero-banner .hero-container {
        padding: 0 12px !important;
        gap: 16px !important;
    }
    
    .pixeehub-hero-section .title-wrapper,
    .pixeehub-main-hero .title-wrapper,
    .pixeehub-stickers-section .title-wrapper,
    .icons-hero-banner .title-wrapper {
        margin: 0 0 8px 0 !important;
    }
    
    .pixeehub-hero-section .hero-text-content h1,
    .pixeehub-main-hero .hero-text-content h1,
    .pixeehub-stickers-section .stickers-text-content h2,
    .icons-hero-banner .hero-text h1 {
        font-size: 1.25rem !important; /* 20px */
        margin: 0 0 4px 0 !important;
    }
    
    .pixeehub-hero-section .hero-text-content h2,
    .pixeehub-main-hero .hero-text-content h2,
    .pixeehub-stickers-section .stickers-text-content h3,
    .icons-hero-banner .hero-text .highlight-gradient {
        font-size: 1.5rem !important; /* 24px */
        line-height: 1.0 !important;
    }
    
    .pixeehub-hero-section .hero-visual img,
    .pixeehub-main-hero .hero-visual img,
    .pixeehub-stickers-section .stickers-visual img,
    .icons-hero-banner .hero-visual img {
        max-height: 160px !important;
    }
}

/* === EXTRA SMALL MOBILE (max-width: 360px) === */
@media screen and (max-width: 360px) {
    
    .pixeehub-hero-section,
    .pixeehub-main-hero,
    .pixeehub-stickers-section,
    .icons-hero-banner {
        padding: 75px 0 20px 0 !important;
    }
    
    .pixeehub-hero-section .hero-container,
    .pixeehub-main-hero .hero-container,
    .pixeehub-stickers-section .stickers-container,
    .icons-hero-banner .hero-container {
        padding: 0 10px !important;
        gap: 12px !important;
    }
    
    .pixeehub-hero-section .hero-text-content h1,
    .pixeehub-main-hero .hero-text-content h1,
    .pixeehub-stickers-section .stickers-text-content h2,
    .icons-hero-banner .hero-text h1 {
        font-size: 1.125rem !important; /* 18px */
    }
    
    .pixeehub-hero-section .hero-text-content h2,
    .pixeehub-main-hero .hero-text-content h2,
    .pixeehub-stickers-section .stickers-text-content h3,
    .icons-hero-banner .hero-text .highlight-gradient {
        font-size: 1.375rem !important; /* 22px */
    }
    
    .pixeehub-hero-section .hero-visual img,
    .pixeehub-main-hero .hero-visual img,
    .pixeehub-stickers-section .stickers-visual img,
    .icons-hero-banner .hero-visual img {
        max-height: 140px !important;
    }
}

/* === CLEAN RESET & FOUNDATION === */
@media screen and (max-width: 768px) {
    
    /* Clean box model */
    .pixeehub-hero-section *,
    .pixeehub-main-hero *,
    .pixeehub-stickers-section *,
    .icons-hero-banner * {
        box-sizing: border-box !important;
    }
    
    /* Clean text rendering */
    .pixeehub-hero-section,
    .pixeehub-main-hero,
    .pixeehub-stickers-section,
    .icons-hero-banner {
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Remove any unwanted margins/padding on child elements */
    .pixeehub-hero-section .hero-text-content > *:not(.title-wrapper):not(h1):not(h2):not(h3):not(.hero-description),
    .pixeehub-main-hero .hero-text-content > *:not(.title-wrapper):not(h1):not(h2):not(h3):not(.hero-description),
    .pixeehub-stickers-section .stickers-text-content > *:not(.title-wrapper):not(h2):not(h3):not(.hero-description),
    .icons-hero-banner .hero-text > *:not(.title-wrapper):not(h1):not(.highlight-gradient):not(.hero-description) {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Clean image containers */
    .pixeehub-hero-section .hero-visual,
    .pixeehub-main-hero .hero-visual,
    .pixeehub-stickers-section .stickers-visual,
    .icons-hero-banner .hero-visual {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
}

/* === PERFORMANCE OPTIMIZATIONS === */
@media screen and (max-width: 768px) {
    
    /* GPU acceleration for smooth scrolling */
    .pixeehub-hero-section,
    .pixeehub-main-hero,
    .pixeehub-stickers-section,
    .icons-hero-banner {
        transform: translateZ(0) !important;
        will-change: auto !important;
    }
    
    /* Optimize images */
    .pixeehub-hero-section img,
    .pixeehub-main-hero img,
    .pixeehub-stickers-section img,
    .icons-hero-banner img {
        loading: lazy !important;
        decoding: async !important;
    }
}

/* === ACCESSIBILITY FEATURES === */
@media screen and (max-width: 768px) {
    
    /* Focus states */
    .pixeehub-hero-section *:focus,
    .pixeehub-main-hero *:focus,
    .pixeehub-stickers-section *:focus,
    .icons-hero-banner *:focus {
        outline: 2px solid #007cf0 !important;
        outline-offset: 2px !important;
    }
    
    /* High contrast support */
    @media (prefers-contrast: high) {
        .pixeehub-hero-section .hero-text-content h2,
        .pixeehub-main-hero .hero-text-content h2,
        .pixeehub-stickers-section .stickers-text-content h3,
        .icons-hero-banner .hero-text .highlight-gradient {
            background: none !important;
            -webkit-background-clip: unset !important;
            -webkit-text-fill-color: unset !important;
            background-clip: unset !important;
            color: #000 !important;
        }
    }
}

/* === NUCLEAR OVERRIDE - ENSURE CLEAN LAYOUT === */
@media screen and (max-width: 768px) {
    
    /* Force clean spacing */
    .pixeehub-hero-section,
    .pixeehub-main-hero,
    .pixeehub-stickers-section,
    .icons-hero-banner {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border: none !important;
        outline: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }
    
    /* Ensure no conflicting styles */
    .pixeehub-hero-section .hero-container,
    .pixeehub-main-hero .hero-container,
    .pixeehub-stickers-section .stickers-container,
    .icons-hero-banner .hero-container {
        width: 100% !important;
        min-height: auto !important;
        max-height: none !important;
        height: auto !important;
        position: relative !important;
        z-index: 1 !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;
    }
    
    /* Force all content to be visible */
    .pixeehub-hero-section *,
    .pixeehub-main-hero *,
    .pixeehub-stickers-section *,
    .icons-hero-banner * {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Make sure background colors are visible */
    .pixeehub-hero-section,
    .pixeehub-main-hero,
    .pixeehub-stickers-section,
    .icons-hero-banner {
        background-color: #f5f5f5 !important;
    }
}