/* Responsive Styles - Mobile First Approach */
/* Best Practices 2025: Multiple breakpoints for optimal display across all devices */

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
    /* Typography */
    .hero-title {
        font-size: 32px !important;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 16px !important;
    }

    .section-title {
        font-size: 28px !important;
    }

    /* Touch-Friendly Buttons - Minimum 48x48px */
    .btn {
        padding: 16px 24px !important;
        font-size: 14px !important;
        width: 100%;
        min-height: 48px;
    }

    .btn-large {
        padding: 18px 28px !important;
        font-size: 16px !important;
        width: 100%;
        min-height: 48px;
    }

    /* Hero Section */
    .hero {
        padding: 40px 15px !important;
    }

    .hero-gallery {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .hero-stats {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-top: 40px !important;
    }

    .stat-number {
        font-size: 36px !important;
    }

    .stat-label {
        font-size: 12px !important;
    }

    /* Testimonial Bridge */
    .testimonial-bridge {
        padding: 40px 15px !important;
    }

    .quick-testimonial-hero {
        padding: 25px 20px !important;
    }

    .quick-quote {
        font-size: 15px !important;
        line-height: 1.6;
    }

    .quick-author {
        font-size: 12px !important;
    }

    /* Problem Section */
    .problem-section {
        padding: 60px 15px !important;
    }

    .problem-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .problem-card {
        padding: 30px 20px !important;
    }

    .problem-icon {
        font-size: 48px !important;
    }

    .problem-card h3 {
        font-size: 20px !important;
    }

    /* Solution Section */
    .solution-section {
        padding: 60px 15px !important;
    }

    .solution-content {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .solution-text h2 {
        font-size: 28px !important;
    }

    .lead {
        font-size: 18px !important;
    }

    .benefit-list strong {
        font-size: 16px !important;
    }

    .benefit-list p {
        font-size: 14px !important;
    }

    /* Before/After Comparison */
    .comparison-images {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .visual-box {
        padding: 25px 15px !important;
    }

    .visual-label {
        font-size: 14px !important;
    }

    .visual-caption {
        font-size: 10px !important;
    }

    .visual-arrow {
        font-size: 36px !important;
    }

    /* Price Reveal */
    .price-reveal {
        padding: 60px 15px !important;
    }

    .value-stack {
        padding: 25px 15px !important;
    }

    .value-name {
        font-size: 14px !important;
    }

    .value-price {
        font-size: 16px !important;
    }

    .total-label {
        font-size: 16px !important;
    }

    .total-price {
        font-size: 28px !important;
    }

    .price-reveal-box {
        padding: 30px 20px !important;
    }

    .reveal-text {
        font-size: 16px !important;
    }

    .reveal-highlight {
        font-size: 20px !important;
    }

    .reveal-strike {
        font-size: 24px !important;
    }

    .reveal-current {
        font-size: 48px !important;
    }

    .reveal-subtext {
        font-size: 13px !important;
    }

    /* Features Section */
    .features-section {
        padding: 60px 15px !important;
    }

    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .feature-card {
        padding: 30px 20px !important;
    }

    .feature-card h3 {
        font-size: 20px !important;
    }

    .feature-number {
        font-size: 12px !important;
    }

    /* Results Gallery */
    .results-gallery {
        padding: 60px 15px !important;
    }

    .section-subtitle {
        font-size: 16px !important;
    }

    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Social Proof */
    .social-proof {
        padding: 60px 15px !important;
    }

    .testimonials {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .testimonial {
        padding: 30px 20px !important;
    }

    .quote {
        font-size: 15px !important;
    }

    .author {
        font-size: 13px !important;
    }

    /* FAQ Section */
    .faq-section {
        padding: 60px 15px !important;
    }

    .faq-container {
        padding: 0 !important;
    }

    .faq-question-wrapper {
        padding: 16px !important;
    }

    .faq-question {
        font-size: 15px !important;
        padding-right: 15px !important;
    }

    .faq-toggle {
        width: 28px !important;
        height: 28px !important;
        font-size: 18px !important;
    }

    .faq-answer {
        padding: 0 16px !important;
    }

    .faq-item.active .faq-answer {
        padding: 0 16px 20px 16px !important;
    }

    .faq-answer p {
        font-size: 14px !important;
    }

    /* Final CTA */
    .final-cta {
        padding: 60px 15px !important;
    }

    .cta-box {
        padding: 30px 20px !important;
    }

    .cta-box h2 {
        font-size: 28px !important;
    }

    .cta-subtitle {
        font-size: 18px !important;
    }

    .price-strike {
        font-size: 20px !important;
    }

    .price-current {
        font-size: 56px !important;
    }

    .price-label {
        font-size: 14px !important;
    }

    .warning-text {
        font-size: 12px !important;
    }

    /* Modals */
    .modal {
        width: 98% !important;
        max-height: 95vh !important;
    }

    .modal-header {
        padding: 15px 20px !important;
    }

    .modal-header h2 {
        font-size: 20px !important;
    }

    .modal-close {
        width: 32px !important;
        height: 32px !important;
        font-size: 28px !important;
    }

    .modal-body {
        padding: 20px !important;
    }

    .modal-body h3 {
        font-size: 18px !important;
    }

    .modal-body p,
    .modal-body ul li {
        font-size: 14px !important;
    }

    .contact-method {
        padding: 20px 15px !important;
    }

    .contact-method h3 {
        font-size: 18px !important;
    }

    .contact-description {
        font-size: 13px !important;
    }

    .contact-email {
        font-size: 13px !important;
        padding: 8px 12px !important;
        word-break: break-all;
    }

    .contact-intro {
        font-size: 15px !important;
    }

    .contact-note p {
        font-size: 12px !important;
    }

    /* Footer */
    .footer {
        padding: 40px 15px !important;
    }

    .footer p {
        font-size: 13px !important;
    }

    .footer-links {
        flex-direction: column;
        gap: 15px !important;
    }

    .footer-links a {
        font-size: 13px !important;
    }
}

/* Mobile Landscape & Tablet Portrait (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    /* Hero Gallery - 2 columns */
    .hero-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* Comparison Images - 2 columns */
    .comparison-images {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    /* Hero Stats - 2 columns */
    .hero-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Buttons */
    .btn {
        width: auto !important;
    }

    .btn-large {
        width: auto !important;
    }

    /* Features Grid - 2 columns */
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Gallery Grid - 2 columns */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Testimonials - 2 columns */
    .testimonials {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Problem Grid - 2 columns */
    .problem-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Tablet & Small Desktop (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }

    .solution-content {
        gap: 60px !important;
    }

    .hero-gallery {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .comparison-images {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .gallery-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .problem-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Large Desktop (1025px+) - Default styles apply */
@media (min-width: 1025px) {
    .container {
        max-width: 1200px;
    }
}

/* Performance Optimization - Reduce animations on mobile */
@media (max-width: 768px) {
    * {
        animation-duration: 0.3s !important;
    }

    .hero::before {
        animation: none !important;
    }
}

/* Accessibility - Ensure touch targets are 48x48px minimum */
@media (max-width: 768px) {
    .faq-toggle,
    .modal-close,
    .btn,
    .btn-large {
        min-width: 48px;
        min-height: 48px;
    }
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Loading Spinner - Mobile Optimization */
@media (max-width: 480px) {
    .spinner-ring {
        width: 60px !important;
        height: 60px !important;
        border-width: 3px !important;
    }

    .spinner-text {
        font-size: 16px !important;
    }
}