/*
 * Responsive Global Styles
 * =========================
 * Extracted from: new-index.css (Lines 4982-5007, 6120-6631)
 * 
 * Purpose:
 * - Global responsive breakpoints
 * - Mobile optimizations for all sections
 * - Tablet and desktop media queries
 * 
 * This module contains all responsive design rules and media
 * queries that optimize the layout across different screen sizes.
 */

/* Global Container - 1600px max-width with consistent padding */
.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 3rem;
    width: 100%;
}

/* Responsive Container Padding */
@media (max-width: 992px) {
    .container {
        padding: 0 2rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
}
/* ============================================================================
   MOBILE PERFORMANCE OPTIMIZATIONS (CORE WEB VITALS)
   ============================================================================ */

/* Reduce Motion for Accessibility & Performance */
@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;
    }
}

/* Mobile-Only Performance Optimizations */
@media (max-width: 768px) {

    /* MOBILE FIX: Force flip cards to take full width like normal cards */
    .flip-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .flip-card-inner {
        width: 100% !important;
    }

    .flip-card-front,
    .flip-card-back {
        width: 100% !important;
    }

    /* PERFORMANCE: Reduce shadow complexity */
    .money-back-container,
    .persistent-feature,
    .testimonial-wrapper {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    /* PERFORMANCE: Disable gradient animations */
    .gradient-overlay,
    .badge-text::before {
        animation: none !important;
    }

    /* PERFORMANCE: Simplify blur effects */
    .badge-text {
        backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.25) !important;
    }

    /* LCP OPTIMIZATION: Ensure hero text renders fast */
    .hero h1 {
        font-size: 2rem;
        will-change: auto;
    }

    /* CLS PREVENTION: Reserve space for brand slider */
    .brand-slider {
        min-height: 60px;
    }

    /* TBT REDUCTION: Hardware accelerate only critical elements */
    .hero-video,
    .gradient-overlay {
        will-change: auto;
        transform: translateZ(0);
    }

    /* PERFORMANCE: Lazy load offscreen content */
    .persistent-feature,
    .trust-card,
    .testimonial-section {
        content-visibility: auto;
        contain-intrinsic-size: 0 500px;
    }

    /* MOBILE: Reduce font weights */
    h1,
    h2,
    h3 {
        font-weight: 700;
    }

    h4,
    h5,
    h6 {
        font-weight: 600;
    }

    /* MOBILE: Optimize button tap targets (accessibility) */
    .toggle-btn,
    .buy-now-btn,
    .money-back-btn,
    .faq-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    /* PERFORMANCE: Disable parallax/scroll effects on mobile */
    .persistent-feature.animate-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        border-radius: 12px !important;
    }

    /* MOBILE: Reduce container padding to save space */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* CLS: Prevent layout shift from images */
    img {
        height: auto;
        max-width: 100%;
    }

    /* PERFORMANCE: Optimize flip cards for mobile */
    .flip-card-inner {
        transition: none !important;
    }

    .flip-card.flipped .flip-card-inner {
        transform: rotateY(180deg);
        transition: transform 0.3s ease;
    }
}

/* MOBILE: Disable video on very slow connections */
@media (max-width: 480px) {
    .gradient-overlay {
        position: absolute;
        padding: 3rem 1rem;
    }
}

/* Mobile Signup Buttons - Stack on small screens */
@media (max-width: 576px) {
    .signup-options {
        flex-direction: column;
        align-items: center;
        gap: 0.875rem;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .signup-email,
    .signup-google,
    .signup-github {
        width: 100%;
        max-width: 280px;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        font-size: 0.9375rem;
    }
}

/* iPhone SE / Very Small Screens */
@media (max-width: 375px) {
    .hero h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .signup-options {
        gap: 0.75rem;
    }

    .signup-email,
    .signup-google,
    .signup-github {
        max-width: 260px;
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* ============================================================================
   MOBILE-FIRST TYPOGRAPHY & SPACING SYSTEM
   Professional SaaS/Cloud Infrastructure Standards
   Scope: index.php only
   ============================================================================ */

/* Mobile Typography Variables (Applied at max-width: 768px) */
@media (max-width: 768px) {

    /* ===== TYPOGRAPHY HIERARCHY ===== */

    /* Section Headings (H2) - Main section titles */
    .plans-section h2,
    .money-back-section h2,
    .persistent-compute-section h2,
    .hosting-trust-section h2,
    .testimonial-section h2,
    .faq-section h2,
    .trust-header h2,
    .persistent-header h2,
    .section-header h2 {
        font-size: 1.75rem !important;
        /* 28px */
        line-height: 1.3 !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        letter-spacing: -0.01em;
    }

    /* Card Titles & Feature Headings (H3) */
    .trust-card h3,
    .feature-card h3,
    .inner-card h3,
    .feature-title,
    .card-title,
    .persistent-feature h3 {
        font-size: 1.125rem !important;
        /* 18px */
        line-height: 1.4 !important;
        font-weight: 600 !important;
        margin-bottom: 0.75rem !important;
    }

    /* Body Text & Descriptions */
    .trust-description,
    .feature-description,
    .section-description,
    .card-subtitle,
    .persistent-feature p,
    .trust-card p,
    .feature-card p,
    .inner-card p {
        font-size: 0.9375rem !important;
        /* 15px */
        line-height: 1.6 !important;
        font-weight: 400 !important;
        color: #475569;
    }

    /* Small Text (Labels, Badges, Meta) */
    .badge-text,
    .plan-subtext,
    .faq-badge,
    .category-description {
        font-size: 0.8125rem !important;
        /* 13px */
        line-height: 1.5 !important;
    }

    /* ===== SECTION SPACING ===== */

    /* Section Padding - Consistent vertical rhythm */
    .hero,
    .plans-section,
    .money-back-section,
    .persistent-compute-section,
    .hosting-trust-section,
    .testimonial-section,
    .faq-section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Section Headers */
    .trust-header,
    .persistent-header,
    .section-header {
        margin-bottom: 2rem !important;
        text-align: center;
    }

    .trust-header p,
    .persistent-header p,
    .section-tagline {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        margin-top: 0.75rem !important;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* ===== CARD SPACING ===== */

    /* Card Grids - Consistent gaps */
    .trust-grid,
    .features-grid,
    .plans-grid {
        gap: 1.25rem !important;
    }

    /* Individual Cards */

    .feature-card,
    .inner-card {
        padding: 1.5rem !important;
        margin-bottom: 0 !important;
        /* Grid gap handles spacing */
    }

    /* Inner Cards Wrapper - Match width of regular cards */
    .inner-cards-wrapper {
        max-width: 600px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* Inner Cards - Full width within wrapper */
    .inner-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Card Icons/Illustrations */
    .feature-illustration,
    .feature-illustration-img,
    .ill-api,
    .ill-hardware,
    .ill-availability,
    .ill-security,
    .ill-scalable,
    .ill-network,
    .ill-uptime {
        height: 80px !important;
        margin-bottom: 1rem !important;
    }

    /* ===== SPECIFIC SECTION FIXES ===== */

    /* Hero Section */
    .hero h1 {
        font-size: 1.5rem !important;
        /* 24px */
        line-height: 1.35 !important;
    }

    .signup-options {
        padding-top: 30px;
        padding-bottom: 30px;

    }

    .hero .enterprise-info p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        padding: 1.25rem !important;
    }

    /* Products/Plans Toggle Section */
    .toggle-btn {
        font-size: 0.8125rem !important;
        padding: 0.625rem 1rem !important;
    }

    .features-grid {
        gap: 1.25rem !important;
    }

    /* Pricing Cards */
    .price-header {
        font-size: 1.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .features-list li {
        font-size: 0.8125rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Money Back Guarantee */
    .money-back-content h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    .money-back-content p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.25rem !important;
    }

    /* Persistent Compute/Features Section */
    .persistent-feature {
        padding: 1.5rem !important;
        margin-bottom: 2rem !important;
    }

    .persistent-feature:last-child {
        margin-bottom: 0 !important;
    }

    /* Testimonials */
    .testimonial-text {
        font-size: 0.9375rem !important;
        line-height: 1.7 !important;
    }

    .author-name {
        font-size: 1rem !important;
        font-weight: 600 !important;
    }

    .author-role {
        font-size: 0.8125rem !important;
        color: #64748b;
    }

    /* FAQ Section */
    .faq-question span {
        font-size: 0.9375rem !important;
        line-height: 1.5 !important;
    }

    .faq-answer p {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }

    .faq-category-card h4 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* ===== TEXT ALIGNMENT ===== */

    /* Ensure body text is left-aligned */
    .feature-description,
    .trust-card p,
    .inner-card p,
    .persistent-feature p,
    .faq-answer p {
        text-align: left !important;
    }

    /* Keep headings centered in headers */
    .trust-header h2,
    .persistent-header h2,
    .section-header h2 {
        text-align: center !important;
    }

    /* Card titles left-aligned */
    .trust-card h3,
    .feature-card h3,
    .inner-card h3 {
        text-align: left !important;
    }

    /* ===== CONTAINER & PADDING ===== */

    .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* ===== RESPONSIVE IMAGES ===== */

    .trust-card img,
    .feature-card img,
    .persistent-feature img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
    }
}

/* ===== SMALL MOBILE REFINEMENTS (max-width: 480px) ===== */
@media (max-width: 480px) {

    /* Further reduce heading sizes for very small screens */
    .hero h1,
    .plans-section h2,
    .persistent-compute-section h2,
    .hosting-trust-section h2,
    .trust-header h2 {
        font-size: 1.5rem !important;
        /* 24px */
        line-height: 1.3 !important;
        padding-top: 60px;
    }

    .money-back-section h2 {
        font-size: 1.5rem !important;
        /* 24px */
        line-height: 1.3 !important;
    }

    .trust-card h3,
    .feature-card h3,
    .inner-card h3,
    .feature-title {
        font-size: 1rem !important;
        /* 16px */
    }

    /* Tighter spacing for small screens */
    .hero,
    .plans-section,
    .money-back-section,
    .persistent-compute-section,
    .hosting-trust-section,
    .testimonial-section,
    .faq-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }


    .feature-card,
    .inner-card {
        padding: 1.25rem !important;
    }

    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Smaller card gaps */
    .trust-grid,
    .features-grid {
        gap: 1rem !important;
    }

    /* Pricing adjustments */
    .price-header {
        font-size: 1.5rem !important;
    }
}