/**
 * Responsive Fixes - Professional UX/UI Refonte
 * Expert-level responsive corrections for all breakpoints
 *
 * @package Forever_BE_Premium
 * @version 8.0.0
 */

/* ==========================================================================
   MOBILE FIRST CORRECTIONS (< 768px)
   ========================================================================== */

@media (max-width: 767px) {

    /* ===== HERO SECTION MOBILE ===== */
    .hero-actions-premium {
        gap: 0.75rem !important; /* Reduced from 1.5rem */
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 0.875rem 1.5rem !important; /* Comfortable padding */
        font-size: 0.9375rem !important;
        width: 100%;
    }

    .hero-subtitle-premium {
        font-size: 0.9375rem !important; /* Increased from 0.85rem for WCAG */
        line-height: 1.6;
    }

    /* ===== SHOP LAYOUT MOBILE ===== */
    .shop-container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .shop-sidebar {
        width: 100% !important;
    }

    /* ===== FEATURED PRODUCTS MOBILE ===== */
    /* Grid styles moved to grid-system.css */

    .featured-section .featured-subtitle {
        font-size: 1rem !important;
        max-width: 100% !important;
        padding: 0 1rem;
    }

    /* ===== BENEFITS SECTION MOBILE ===== */
    .benefit-card-premium {
        flex-direction: column !important;
        text-align: center;
        padding: 1.5rem !important;
    }

    .benefit-icon-premium {
        margin: 0 auto 1rem !important;
    }

    /* ===== FAQ SECTION MOBILE ===== */
    .faq-item-premium {
        padding: 1rem !important;
    }

    .faq-content-premium {
        padding-top: 0.75rem !important;
        max-height: 500px;
    }

    /* ===== CTA SECTION MOBILE ===== */
    .cta-card-premium {
        padding: 1.75rem !important;
    }

    /* ===== FOOTER MOBILE ===== */
    .site-footer {
        text-align: center;
    }

    /* Footer columns - Géré par footer-mobile-premium.css (2 colonnes) */
    /* .footer-columns règles déplacées vers footer-mobile-premium.css */

    .footer-stats__grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem !important;
    }

    /* ===== TYPOGRAPHY MOBILE ===== */
    body {
        font-size: 15px; /* Base font slightly smaller on mobile */
    }

    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.125rem !important; }
    h5 { font-size: 1rem !important; }
    h6 { font-size: 0.9375rem !important; }

    /* Ensure minimum text size for accessibility */
    p, li, a, span {
        font-size: 0.9375rem !important; /* 15px minimum */
        line-height: 1.6;
    }
}

/* ==========================================================================
   TABLET CORRECTIONS (768px - 1023px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    /* ===== HERO SECTION TABLET ===== */
    .hero-title-premium {
        font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
    }

    .hero-actions-premium {
        gap: 1rem !important;
        flex-direction: row !important;
        justify-content: center;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        width: auto !important;
        min-width: 200px;
    }

    /* ===== SHOP LAYOUT TABLET ===== */
    .shop-container {
        grid-template-columns: 240px 1fr !important;
        gap: 2rem !important;
    }

    /* ===== FEATURED PRODUCTS TABLET ===== */
    /* Grid styles moved to grid-system.css */

    /* ===== BENEFITS TABLET ===== */
    .benefit-card-premium {
        flex-direction: row !important;
    }

    /* ===== FOOTER TABLET ===== */
    .footer-columns {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================================================
   DESKTOP ENHANCEMENTS (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {

    /* ===== HERO SECTION DESKTOP ===== */
    .hero-title-premium {
        font-size: clamp(3rem, 4vw, 4rem) !important;
    }

    .hero-actions-premium {
        gap: 1.25rem !important;
    }

    /* ===== SHOP LAYOUT DESKTOP ===== */
    .shop-container {
        grid-template-columns: 280px 1fr !important;
        gap: 3rem !important;
    }

    /* ===== FEATURED PRODUCTS DESKTOP ===== */
    /* Grid styles moved to grid-system.css */

    /* ===== HOVER EFFECTS DESKTOP ONLY ===== */
    .benefit-card-premium:hover,
    .featured-product-card:hover,
    .testimonial-card-premium:hover,
    .cta-card-premium:hover {
        transform: translateY(-8px) scale(1.02) !important;
    }
}

/* ==========================================================================
   LARGE DESKTOP (1280px+)
   ========================================================================== */

@media (min-width: 1280px) {

    .container {
        max-width: 1280px;
        margin: 0 auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* ===== HERO SECTION LARGE ===== */
    .hero-content-premium {
        max-width: 900px;
        margin: 0 auto;
    }

    /* ===== FEATURED PRODUCTS LARGE ===== */
    /* Grid styles moved to grid-system.css */
}

/* ==========================================================================
   UTILITY CLASSES - RESPONSIVE
   ========================================================================== */

/* Hide on mobile */
.hidden-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hidden-mobile {
        display: block !important;
    }
}

/* Hide on desktop */
.hidden-desktop {
    display: block !important;
}

@media (min-width: 1024px) {
    .hidden-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
.mobile-only {
    display: block !important;
}

@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--brand-gold, #fbbf24);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    * {
        border-width: 2px !important;
    }
}