/* =====================================
SOTUMA Hero Titles Mobile Enhancement
Makes all hero section titles display on single line for mobile/tablet (except index page)
===================================== */

/* Mobile and Tablet Hero Title Adjustments - REDUCED FONT SIZES */
@media (max-width: 1024px) {
    /* About Us Page */
    .about-hero h1 {
        font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
    }
    
    /* Project Categories Pages */
    .project-categories-page .hero-title,
    .project-categories-show-page .hero-title {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* Product Categories Pages */
    .hero-section .hero-title,
    .categories-page .hero-title {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* Blog Pages */
    .tiktok-hero-title {
        font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* Blog Detail Pages */
    .blog-hero .hero-content h1,
    .blog-hero .hero-title {
        font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* General Hero Title Fallback */
    .hero-section h1,
    .hero-content h1,
    .hero-title {
        font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* Ensure hero content containers have proper width */
    .hero-content,
    .hero-container {
        max-width: 100% !important;
        padding: 0 15px !important;
        text-align: center !important;
    }
    
    /* Adjust hero section padding for mobile */
    .hero-section,
    .about-hero,
    .tiktok-hero,
    .blog-hero {
        padding: 120px 0 80px !important;
        min-height: auto !important;
    }
}

/* Tablet Specific Adjustments - REDUCED FONT SIZES */
@media (max-width: 768px) {
    /* About Us Page */
    .about-hero h1 {
        font-size: clamp(1.1rem, 6vw, 1.4rem) !important;
    }
    
    /* Project Categories Pages */
    .project-categories-page .hero-title,
    .project-categories-show-page .hero-title {
        font-size: clamp(1.2rem, 6vw, 1.5rem) !important;
    }
    
    /* Product Categories Pages */
    .hero-section .hero-title,
    .categories-page .hero-title {
        font-size: clamp(1.2rem, 6vw, 1.5rem) !important;
    }
    
    /* Blog Pages */
    .tiktok-hero-title {
        font-size: clamp(1.2rem, 6vw, 1.5rem) !important;
    }
    
    /* Blog Detail Pages */
    .blog-hero .hero-content h1,
    .blog-hero .hero-title {
        font-size: clamp(1.1rem, 6vw, 1.4rem) !important;
    }
    
    /* General Hero Title Fallback */
    .hero-section h1,
    .hero-content h1,
    .hero-title {
        font-size: clamp(1.1rem, 6vw, 1.5rem) !important;
    }
    
    /* Adjust hero section padding for tablet */
    .hero-section,
    .about-hero,
    .tiktok-hero,
    .blog-hero {
        padding: 100px 0 60px !important;
    }
}

/* Mobile Specific Adjustments - REDUCED FONT SIZES */
@media (max-width: 480px) {
    /* About Us Page */
    .about-hero h1 {
        font-size: clamp(1rem, 8vw, 1.3rem) !important;
    }
    
    /* Project Categories Pages */
    .project-categories-page .hero-title,
    .project-categories-show-page .hero-title {
        font-size: clamp(1.1rem, 8vw, 1.4rem) !important;
    }
    
    /* Product Categories Pages */
    .hero-section .hero-title,
    .categories-page .hero-title {
        font-size: clamp(1.1rem, 8vw, 1.4rem) !important;
    }
    
    /* Blog Pages */
    .tiktok-hero-title {
        font-size: clamp(1.1rem, 8vw, 1.4rem) !important;
    }
    
    /* Blog Detail Pages */
    .blog-hero .hero-content h1,
    .blog-hero .hero-title {
        font-size: clamp(1rem, 8vw, 1.3rem) !important;
    }
    
    /* General Hero Title Fallback */
    .hero-section h1,
    .hero-content h1,
    .hero-title {
        font-size: clamp(1rem, 8vw, 1.4rem) !important;
    }
    
    /* Adjust hero section padding for mobile */
    .hero-section,
    .about-hero,
    .tiktok-hero,
    .blog-hero {
        padding: 80px 0 40px !important;
    }
    
    /* Ensure proper text alignment on small screens */
    .hero-content,
    .hero-container {
        padding: 0 10px !important;
    }
}

/* Very Small Mobile Adjustments - REDUCED FONT SIZES */
@media (max-width: 360px) {
    /* About Us Page */
    .about-hero h1 {
        font-size: clamp(0.9rem, 10vw, 1.2rem) !important;
    }
    
    /* Project Categories Pages */
    .project-categories-page .hero-title,
    .project-categories-show-page .hero-title {
        font-size: clamp(1rem, 10vw, 1.3rem) !important;
    }
    
    /* Product Categories Pages */
    .hero-section .hero-title,
    .categories-page .hero-title {
        font-size: clamp(1rem, 10vw, 1.3rem) !important;
    }
    
    /* Blog Pages */
    .tiktok-hero-title {
        font-size: clamp(1rem, 10vw, 1.3rem) !important;
    }
    
    /* Blog Detail Pages */
    .blog-hero .hero-content h1,
    .blog-hero .hero-title {
        font-size: clamp(0.9rem, 10vw, 1.2rem) !important;
    }
    
    /* General Hero Title Fallback */
    .hero-section h1,
    .hero-content h1,
    .hero-title {
        font-size: clamp(0.9rem, 10vw, 1.3rem) !important;
    }
    
    /* Adjust hero section padding for very small screens */
    .hero-section,
    .about-hero,
    .tiktok-hero,
    .blog-hero {
        padding: 60px 0 30px !important;
    }
    
    /* Ensure proper text alignment on very small screens */
    .hero-content,
    .hero-container {
        padding: 0 8px !important;
    }
}

/* Force Override for Any Existing Styles */
@media (max-width: 1024px) {
    .hero-section h1,
    .hero-content h1,
    .hero-title,
    .about-hero h1,
    .tiktok-hero-title,
    .project-categories-page .hero-title,
    .project-categories-show-page .hero-title {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
}