/* 
   HERO SPACING OPTIMIZATION - ALL SCREEN SIZES
   =============================================
   This file implements precise spacing for the hero section
   to create proper visual hierarchy and premium feel.
   
   Spacing Hierarchy (Optimal Vertical Gaps):
   - Eyebrow → Headline: 12-16px (0.75-1em)
   - Headline → Subheading: 16-24px (1-1.5em)
   - Subheading → Buttons: 32-40px (2-2.5em)
   - Primary CTA → Secondary CTA: 16px
   - Buttons → Social proof: 24-32px (1.5-2em)
   
   All spacing uses multiples of 4px or 8px for clean vertical rhythm.
   
   Version: 2026-02-03
*/

/* ========================================
   BASE STYLES - ALL SCREEN SIZES
   ======================================== */

/* Eyebrow - spacing below */
.hero.hero-redesign .hero-eyebrow,
.hero-text-center .hero-eyebrow,
.hero-eyebrow {
    margin-bottom: 16px !important; /* Comfortable gap to headline */
}

/* Main Heading - spacing below */
.hero.hero-redesign .hero-main-heading,
.hero.hero-redesign .hero-text-center .hero-main-heading,
.hero.hero-redesign .hero-text-center h1.hero-main-heading,
h1.hero-main-heading {
    margin-bottom: 20px !important; /* 20px gap to subheading (optimal: 16-24px / 1-1.5em) */
}

/* Subheading - optimized vertical spacing for visual hierarchy */
.hero.hero-redesign .hero-subheading,
.hero-text-center .hero-subheading,
.hero-subheading {
    margin-top: 0 !important; /* No top margin - gap controlled by heading's bottom margin */
    margin-bottom: 2.25rem !important; /* 36px gap to buttons (optimal: 32-40px / 2-2.5em) */
    line-height: 1.6 !important;
}

/* Hide forced line breaks in subheading so text flows naturally */
.hero.hero-redesign .hero-subheading br,
.hero-subheading br {
    display: none !important;
}

/* Buttons Frame - spacing */
.hero.hero-redesign .hero-buttons-frame,
.hero-buttons-frame {
    margin-bottom: 0 !important;
}

/* 
   Primary CTA - NO margin on desktop (buttons are side-by-side)
   Margin-bottom is only applied in mobile media queries below
   where buttons are stacked vertically.
*/
.hero.hero-redesign .hero-btn-primary,
.hero-btn-primary {
    margin-bottom: 0 !important; /* No margin on desktop - buttons are inline */
}

/* Social Proof - spacing above */
.hero.hero-redesign .hero-social-proof,
.hero-social-proof {
    margin-top: 32px !important; /* Strong separation from CTAs */
}

/* ========================================
   TABLET HERO SECTION SPACING (768px to 476px)
   Buttons are SIDE-BY-SIDE in this range with increased bottom padding
   ======================================== */

@media (min-width: 477px) and (max-width: 768px) {
    
    /* 
       1. TOP AND BOTTOM PADDING OF HERO - Add breathing room
       Problem: The headline starts too close to the nav, and hero needs more 
       bottom padding to push the platform banner down
       Fix: Increase top padding to 72px for premium feel, increase bottom 
       padding significantly to push the creator platform banner down
    */
    .hero.hero-redesign .hero-content-wrapper,
    .hero-content-wrapper {
        padding-top: 72px !important; /* Generous top spacing from nav - premium feel */
        padding-bottom: 5rem !important; /* SIGNIFICANTLY increased bottom padding to push platform banner down */
        padding-left: 1.25rem !important; /* Side padding for tablet */
        padding-right: 1.25rem !important;
    }
    
    /* 
       2. EYEBROW TEXT - Tablet styling
       Smaller font on tablet, maintains good spacing
    */
    .hero.hero-redesign .hero-eyebrow,
    .hero-text-center .hero-eyebrow,
    .hero-eyebrow {
        font-size: 0.6875rem !important; /* 11px - clear but not dominant */
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        color: #5B3AFF !important;
        line-height: 1 !important;
        margin: 0 !important;
        margin-bottom: 12px !important; /* Good gap to headline */
        padding: 0 !important;
    }
    
    /* 
       3. HEADLINE - Significantly larger, more impactful on tablet
       Problem: Headline needs to be bigger and more commanding
       Fix: Significantly increase font-size and maintain good line-height
    */
    .hero.hero-redesign .hero-main-heading,
    .hero.hero-redesign .hero-text-center .hero-main-heading,
    .hero.hero-redesign .hero-text-center h1.hero-main-heading,
    h1.hero-main-heading {
        font-size: 3.25rem !important; /* 52px - significantly larger, more impactful headline */
        line-height: 1.15 !important; /* Slightly more open than 1.1 - better breathing */
        letter-spacing: -0.02em !important; /* Tighter tracking for large text */
        margin-top: 0 !important;
        margin-bottom: 20px !important; /* 20px gap to subheading (optimal: 16-24px / 1-1.5em) */
        padding: 0 !important;
    }
    
    /* 
       4. SUBHEADING - Proper spacing and natural line breaks with increased font size
       Problem: Paragraph was breaking at awkward places
       Fix: Allow wider width so text flows naturally, optimized vertical spacing
    */
    .hero.hero-redesign .hero-subheading,
    .hero-text-center .hero-subheading,
    .hero-subheading {
        max-width: 100% !important; /* Allow full width - no forced line breaks */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important; /* No top margin - gap controlled by heading's bottom margin */
        margin-bottom: 2rem !important; /* 32px gap to buttons (optimal: 32-40px) */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1.6 !important; /* More open for better readability */
        font-size: 1.125rem !important; /* 18px - increased from 16px for better visibility */
        color: #555 !important;
        text-align: center !important;
    }
    
    /* 
       5. CTA BUTTONS - SIDE BY SIDE on tablet (768px to 476px)
       User requested: Buttons should be side-by-side in this screen range
       Fix: Use flex-direction: row to place buttons horizontally
    */
    .hero.hero-redesign .hero-buttons-frame,
    .hero-buttons-frame {
        display: flex !important;
        flex-direction: row !important; /* SIDE-BY-SIDE buttons on tablet */
        align-items: center !important;
        justify-content: center !important; /* Center the button pair */
        gap: 0.75rem !important; /* Gap between side-by-side buttons */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        flex-wrap: nowrap !important; /* Prevent wrapping - keep buttons on same line */
    }
    
    /* Primary CTA - auto width for side-by-side layout */
    .hero.hero-redesign .hero-btn-primary,
    .hero-btn-primary {
        width: auto !important; /* Auto width for side-by-side */
        flex: 1 !important; /* Equal flex sizing */
        max-width: 280px !important; /* Maximum width to prevent oversized buttons */
        margin-bottom: 0 !important; /* No bottom margin when side-by-side */
        margin-top: 0 !important;
    }
    
    /* Secondary CTA - auto width for side-by-side layout */
    .hero.hero-redesign .hero-btn-secondary,
    .hero-btn-secondary {
        width: auto !important; /* Auto width for side-by-side */
        flex: 1 !important; /* Equal flex sizing */
        max-width: 280px !important; /* Maximum width to prevent oversized buttons */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* 
       6. BUTTON SIZING CONSISTENCY - Tablet tap comfort
       Problem: Buttons could feel tighter than ideal for touch
       Fix: Ensure minimum 48px height (Apple/Google tap standard)
       
       Both buttons use identical styling to ensure they appear
       exactly the same size side by side on tablet.
    */
    .hero.hero-redesign .hero-btn-primary,
    .hero.hero-redesign .hero-btn-secondary,
    .hero-btn-primary,
    .hero-btn-secondary {
        box-sizing: border-box !important; /* Ensure border included in dimensions */
        min-height: 48px !important; /* Apple/Google tap target standard */
        padding: 0.875rem 1.25rem !important; /* Comfortable padding for side-by-side */
        font-size: 0.9rem !important; /* Slightly smaller font for side-by-side fit */
        line-height: 1.2 !important; /* Consistent line-height for both buttons */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important; /* Prevent text wrapping */
    }
    
    /* 
       7. SOCIAL PROOF LINE - Needs more separation
       Problem: "Join creators already using Podmod…" is cramped under CTAs
       Fix: Treat it like a footer note, not part of the hero
       More margin, smaller font, reduced opacity
    */
    .hero.hero-redesign .hero-social-proof,
    .hero-social-proof {
        margin-top: 28px !important; /* Strong separation from CTAs */
        margin-bottom: 0 !important;
        font-size: 13px !important; /* Slightly smaller - de-emphasized */
        opacity: 0.85 !important; /* Slightly reduced opacity */
        color: #666 !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }
    
    /* 
       HERO TEXT CENTER CONTAINER
       Ensure proper margin reset and alignment
    */
    .hero.hero-redesign .hero-text-center,
    .hero-text-center {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important; /* Individual element margins control spacing */
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* ========================================
   SMALL MOBILE HERO SECTION SPACING (476px and below)
   Buttons are STACKED VERTICALLY for smaller screens
   ======================================== */

@media (max-width: 476px) {
    
    /* 
       1. TOP PADDING OF HERO - Add breathing room
       Problem: The headline starts too close to the nav
       Fix: Increase top padding to 64px for premium/confident feel
    */
    .hero.hero-redesign .hero-content-wrapper,
    .hero-content-wrapper {
        padding-top: 64px !important; /* Generous top spacing from nav - premium feel */
        padding-bottom: 3rem !important; /* Comfortable bottom padding */
        padding-left: 1.25rem !important; /* Side padding for mobile */
        padding-right: 1.25rem !important;
    }
    
    /* 
       2. EYEBROW TEXT - Mobile styling
       Smaller font on mobile, maintains good spacing
    */
    .hero.hero-redesign .hero-eyebrow,
    .hero-text-center .hero-eyebrow,
    .hero-eyebrow {
        font-size: 0.6875rem !important; /* 11px - clear but not dominant */
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        color: #5B3AFF !important;
        line-height: 1 !important;
        margin: 0 !important;
        margin-bottom: 12px !important; /* Good gap to headline on mobile */
        padding: 0 !important;
    }
    
    /* 
       3. HEADLINE - Significantly larger, more impactful on mobile
       Problem: Headline needs to be bigger and more commanding
       Fix: Significantly increase font-size and maintain good line-height
    */
    .hero.hero-redesign .hero-main-heading,
    .hero.hero-redesign .hero-text-center .hero-main-heading,
    .hero.hero-redesign .hero-text-center h1.hero-main-heading,
    h1.hero-main-heading {
        font-size: 3rem !important; /* 48px - significantly larger, more impactful headline */
        line-height: 1.15 !important; /* Slightly more open than 1.1 - better breathing */
        letter-spacing: -0.02em !important; /* Tighter tracking for large text */
        margin-top: 0 !important;
        margin-bottom: 20px !important; /* 20px gap to subheading (optimal: 16-24px / 1-1.5em) */
        padding: 0 !important;
    }
    
    /* 
       4. SUBHEADING - Proper spacing and natural line breaks with increased font size
       Problem: Paragraph was breaking at awkward places
       Fix: Allow wider width so text flows naturally, optimized vertical spacing
    */
    .hero.hero-redesign .hero-subheading,
    .hero-text-center .hero-subheading,
    .hero-subheading {
        max-width: 100% !important; /* Allow full width - no forced line breaks */
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important; /* No top margin - gap controlled by heading's bottom margin */
        margin-bottom: 1.75rem !important; /* 28px gap to buttons (scaled for small mobile) */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 1.6 !important; /* More open for better readability */
        font-size: 1.0625rem !important; /* 17px - increased from 16px for better visibility */
        color: #555 !important;
        text-align: center !important;
    }
    
    /* 
       5. CTA BUTTON SPACING - STACKED VERTICALLY for small mobile
       Problem: Buttons need to stack on narrow screens
       Fix: Use flex-direction column to stack buttons vertically
    */
    .hero.hero-redesign .hero-buttons-frame,
    .hero-buttons-frame {
        display: flex !important;
        flex-direction: column !important; /* Stack buttons vertically on mobile */
        align-items: center !important;
        gap: 0 !important; /* Control spacing with margins instead */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important; /* Full width buttons */
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Primary CTA - full width and prominent */
    .hero.hero-redesign .hero-btn-primary,
    .hero-btn-primary {
        width: 100% !important;
        margin-bottom: 14px !important; /* Good gap between buttons */
        margin-top: 0 !important;
    }
    
    /* Secondary CTA - full width, slightly de-emphasized */
    .hero.hero-redesign .hero-btn-secondary,
    .hero-btn-secondary {
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* 
       6. BUTTON SIZING CONSISTENCY - Mobile tap comfort
       Problem: Buttons could feel tighter than ideal for touch
       Fix: Ensure minimum 48px height (Apple/Google tap standard)
       
       Both buttons use identical styling to ensure they appear
       exactly the same size when stacked on mobile.
    */
    .hero.hero-redesign .hero-btn-primary,
    .hero.hero-redesign .hero-btn-secondary,
    .hero-btn-primary,
    .hero-btn-secondary {
        box-sizing: border-box !important; /* Ensure border included in dimensions */
        min-height: 48px !important; /* Apple/Google tap target standard */
        padding: 0.875rem 1.5rem !important; /* Comfortable padding */
        font-size: 0.9375rem !important; /* 15px - readable button text */
        line-height: 1.2 !important; /* Consistent line-height for both buttons */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important; /* Allow text wrapping on mobile if needed */
    }
    
    /* 
       7. SOCIAL PROOF LINE - Needs more separation
       Problem: "Join creators already using Podmod…" is cramped under CTAs
       Fix: Treat it like a footer note, not part of the hero
       More margin, smaller font, reduced opacity
    */
    .hero.hero-redesign .hero-social-proof,
    .hero-social-proof {
        margin-top: 24px !important; /* Strong separation from CTAs */
        margin-bottom: 0 !important;
        font-size: 12px !important; /* Slightly smaller - de-emphasized */
        opacity: 0.85 !important; /* Slightly reduced opacity */
        color: #666 !important;
        text-align: center !important;
        line-height: 1.4 !important;
    }
    
    /* 
       HERO TEXT CENTER CONTAINER
       Ensure proper margin reset and alignment
    */
    .hero.hero-redesign .hero-text-center,
    .hero-text-center {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important; /* Individual element margins control spacing */
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* ========================================
   EXTRA SMALL MOBILE (400px and below)
   Minimal adjustments for very small screens
   ======================================== */

@media (max-width: 400px) {
    
    /* Even tighter padding for tiny screens */
    .hero.hero-redesign .hero-content-wrapper,
    .hero-content-wrapper {
        padding-top: 56px !important; /* Reduced but still comfortable */
        padding-bottom: 2.5rem !important;
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }
    
    /* Headline adjustments - significantly larger on tiny screens */
    .hero.hero-redesign .hero-main-heading,
    .hero.hero-redesign .hero-text-center .hero-main-heading,
    h1.hero-main-heading {
        font-size: 2.5rem !important; /* 40px - significantly larger and impactful */
        margin-bottom: 16px !important;
    }
    
    /* Eyebrow adjustments */
    .hero.hero-redesign .hero-eyebrow,
    .hero-eyebrow {
        font-size: 0.625rem !important; /* 10px */
        margin-bottom: 10px !important; /* Slightly reduced but still within 12-16px spirit for tiny screens */
    }
    
    /* Subheading adjustments - optimized vertical spacing */
    .hero.hero-redesign .hero-subheading,
    .hero-subheading {
        max-width: 100% !important; /* Full width on tiny screens */
        margin-top: 0 !important; /* No top margin - gap controlled by heading's bottom margin */
        margin-bottom: 1.25rem !important; /* 20px gap to buttons (compact for 400px screens) */
        font-size: 1rem !important; /* 16px - increased from 14px */
        line-height: 1.5 !important;
    }
    
    /* Buttons - remain stacked vertically */
    .hero.hero-redesign .hero-buttons-frame,
    .hero-buttons-frame {
        max-width: 100% !important;
        flex-direction: column !important; /* Ensure stacked on tiny screens */
    }
    
    .hero.hero-redesign .hero-btn-primary,
    .hero.hero-redesign .hero-btn-secondary,
    .hero-btn-primary,
    .hero-btn-secondary {
        box-sizing: border-box !important; /* Ensure border included in dimensions */
        min-height: 44px !important; /* Slightly smaller for tiny screens but still tappable */
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.2 !important; /* Consistent line-height */
        padding: 0.75rem 1.25rem !important;
        width: 100% !important; /* Full width stacked buttons */
    }
    
    /* Social proof */
    .hero.hero-redesign .hero-social-proof,
    .hero-social-proof {
        margin-top: 16px !important;
        font-size: 11px !important;
    }
}

/* ========================================
   LANDSCAPE MOBILE ADJUSTMENT
   For phones in landscape orientation
   Buttons stay SIDE BY SIDE in landscape for better use of horizontal space
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    
    /* Reduce vertical spacing in landscape */
    .hero.hero-redesign .hero-content-wrapper,
    .hero-content-wrapper {
        padding-top: 48px !important; /* Tighter for landscape */
        padding-bottom: 3rem !important; /* Good bottom padding in landscape */
    }
    
    .hero.hero-redesign .hero-main-heading,
    h1.hero-main-heading {
        margin-bottom: 12px !important;
    }
    
    .hero.hero-redesign .hero-subheading,
    .hero-subheading {
        margin-bottom: 28px !important; /* Gap to buttons in landscape */
        margin-top: 0 !important; /* No top margin - gap from heading's bottom margin */
    }
    
    /* Buttons SIDE BY SIDE in landscape - better use of horizontal space */
    .hero.hero-redesign .hero-buttons-frame,
    .hero-buttons-frame {
        flex-direction: row !important; /* Side by side in landscape */
        gap: 0.75rem !important;
        flex-wrap: nowrap !important;
    }
    
    .hero.hero-redesign .hero-btn-primary,
    .hero.hero-redesign .hero-btn-secondary,
    .hero-btn-primary,
    .hero-btn-secondary {
        width: auto !important;
        flex: 1 !important;
        max-width: 250px !important;
        margin-bottom: 0 !important;
    }
    
    .hero.hero-redesign .hero-social-proof,
    .hero-social-proof {
        margin-top: 16px !important;
    }
}