/* =====================================
SOTUMA Frontend Mobile Responsive CSS
Complete Mobile-First Solution for All Frontend Pages
Version: 1.0 - Production Ready
===================================== */

/* ===== GLOBAL MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    /* Improve touch targets */
    a, button, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better font rendering on mobile */
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ===== PROJECTS PAGE MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
    /* Projects Show Page */
    .breadcrumb-container {
        padding: 0 20px !important;
    }
    
    .breadcrumb {
        font-size: 0.9rem !important;
        gap: 8px !important;
    }
    
    .main-slider-section {
        padding: 0 20px !important;
    }
    
    .main-slider-container {
        height: 300px !important;
        border-radius: 12px !important;
    }
    
    .slider-nav {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
    
    .slider-nav.prev {
        left: 10px !important;
    }
    
    .slider-nav.next {
        right: 10px !important;
    }
    
    .image-counter {
        bottom: 15px !important;
        right: 15px !important;
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
    
    .thumbnail-slider-container {
        padding: 0 20px !important;
    }
    
    .thumbnail-item {
        flex: 0 0 150px !important;
        height: 100px !important;
        border-radius: 6px !important;
    }
    
    .thumbnail-nav {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }
    
    .project-info-container {
        padding: 0 20px !important;
        gap: 20px !important;
        grid-template-columns: 1fr !important;
    }
    
    .project-info-card,
    .project-description {
        padding: 20px !important;
        border-radius: 12px !important;
    }
    
    .project-info-card h3,
    .project-description h3 {
        font-size: 1.1rem !important;
        margin-bottom: 15px !important;
    }
    
    .project-info-list li {
        padding: 10px 0 !important;
        font-size: 0.9rem !important;
    }
    
    .project-info-list .label {
        font-size: 0.85rem !important;
    }
    
    .project-info-list .value {
        font-size: 0.85rem !important;
        max-width: 50% !important;
    }
}

@media (max-width: 480px) {
    .main-slider-container {
        height: 250px !important;
    }
    
    .slider-nav {
        width: 35px !important;
        height: 35px !important;
        font-size: 14px !important;
    }
    
    .thumbnail-item {
        flex: 0 0 120px !important;
        height: 80px !important;
    }
    
    .project-info-container {
        padding: 0 15px !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .project-info-card,
    .project-description {
        padding: 15px !important;
    }
}

/* ===== PRODUCTS PAGE MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
    /* Products Main Page */
    .aluprof-heading {
        font-size: 2rem !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .aluprof-subheading {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
    }
    
    .aluprof-category-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin: 40px 0 60px 0 !important;
        padding: 0 20px !important;
    }
    
    /* Force override for products grid in categories show page */
    .products-section .products-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 30px !important;
    }
    
    /* Force override for products grid in products main page */
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 30px !important;
    }
    
    .aluprof-category-block {
        min-height: 200px !important;
        padding: 20px 0 15px 0 !important;
        border-radius: 16px !important;
    }
    
    .aluprof-category-img-wrapper {
        margin-bottom: 15px !important;
        border-radius: 12px !important;
    }
    
    .aluprof-category-title {
        font-size: 1.1rem !important;
        margin: 15px 0 8px 0 !important;
    }
    
    .aluprof-category-desc {
        font-size: 0.9rem !important;
        margin-bottom: 12px !important;
    }
    
    .aluprof-category-arrow {
        width: 35px !important;
        height: 35px !important;
        font-size: 1rem !important;
        bottom: 15px !important;
        right: 15px !important;
    }
}

@media (max-width: 480px) {
    .aluprof-heading {
        font-size: 1.8rem !important;
    }
    
    .aluprof-category-grid {
        grid-template-columns: 1fr !important;
        padding: 0 15px !important;
        gap: 15px !important;
    }
    
    /* Force override for products grid on small mobile */
    .products-section .products-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-top: 25px !important;
    }
    
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-top: 25px !important;
    }
    
    .aluprof-category-block {
        min-height: 180px !important;
        padding: 15px 0 10px 0 !important;
    }
    
    .aluprof-category-title {
        font-size: 1rem !important;
    }
    
    .aluprof-category-arrow {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.9rem !important;
    }
}

/* ===== CATEGORIES PAGE MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
    /* Categories Index Page */
    .hero-section {
        padding: 80px 0 60px !important;
    }
    
    .hero-title {
        font-size: 2.5rem !important;
    }
    
    .hero-subtitle {
        font-size: 1.1rem !important;
    }
    
    .categories-section {
        padding: 40px 0 80px !important;
    }
    
    .categories-container {
        padding: 0 20px !important;
    }
    
    .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        margin-top: 30px !important;
    }
    
    .category-card {
        min-height: 200px !important;
        max-width: 100% !important;
        border-radius: 12px !important;
    }
    
    .category-content {
        padding: 15px !important;
    }
    
    .category-title {
        font-size: 1rem !important;
    }
    
    /* Categories Show Page */
    .category-hero {
        padding: 60px 0 40px !important;
    }
    
    .category-title-large {
        font-size: 2.5rem !important;
    }
    
    .products-section {
        padding: 40px 0 !important;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        padding: 0 20px !important;
    }
    
    /* Additional override for categories show page */
    .products-section .container .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
    
    .product-card {
        border-radius: 12px !important;
    }
    
    .product-image-container {
        height: 200px !important;
    }
    
    .product-content {
        padding: 15px !important;
    }
    
    .product-title {
        font-size: 1.1rem !important;
        text-align: center !important;
    }
    
    .product-category {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem !important;
    }
    
    .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .category-card {
        min-height: 200px !important;
    }
    
    .category-content {
        padding: 15px !important;
    }
    
    .category-title-large {
        font-size: 2rem !important;
    }
    
    .products-grid {
        grid-template-columns: 1fr !important;
        padding: 0 15px !important;
        gap: 15px !important;
    }
    
    /* Additional override for categories show page on small mobile */
    .products-section .container .products-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .product-image-container {
        height: 200px !important;
    }
    
    .product-content {
        padding: 15px !important;
    }
}

/* ===== CERTIFICATES PAGE MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
    .certificates-content {
        padding: 1rem !important;
    }
    
    .certificates-hero {
        padding: 2rem 1.5rem !important;
        margin: 1rem 0 2rem 0 !important;
        border-radius: 16px !important;
    }
    
    .hero-title {
        font-size: 2.2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    .section-title {
        font-size: 1.8rem !important;
    }
    
    .certificates-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .certificate-card {
        border-radius: 16px !important;
        min-height: 400px !important;
    }
    
    .certificate-image-container {
        height: 200px !important;
    }
    
    .certificate-content {
        padding: 1.5rem !important;
    }
    
    .certificate-title {
        font-size: 1.2rem !important;
        min-height: 3rem !important;
    }
    
    .certificate-description {
        font-size: 0.9rem !important;
        min-height: 3.5rem !important;
    }
    
    .modal-content {
        max-width: 95vw !important;
        max-height: 95vh !important;
        border-radius: 16px !important;
    }
    
    .modal-close {
        width: 35px !important;
        height: 35px !important;
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .certificates-hero {
        padding: 1.5rem 1rem !important;
    }
    
    .hero-title {
        font-size: 1.8rem !important;
    }
    
    .certificate-card {
        min-height: 350px !important;
    }
    
    .certificate-image-container {
        height: 180px !important;
    }
    
    .certificate-content {
        padding: 1rem !important;
    }
}

/* ===== ABOUT US PAGE MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
    .about-hero {
        min-height: 40vh !important;
        padding: 40px 0 !important;
    }
    
    .about-hero h1 {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
    }
    
    .about-hero p {
        font-size: 1.1rem !important;
        padding: 0 20px !important;
    }
    
    .about-presentation,
    .about-mission,
    .about-objectifs,
    .about-expertise,
    .about-approche {
        padding: 40px 0 !important;
    }
    
    .presentation-text,
    .mission-text,
    .objectifs-text,
    .expertise-text,
    .approche-text {
        padding: 20px !important;
        margin: 20px !important;
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    
    .presentation-text h2,
    .mission-text h2,
    .objectifs-text h2,
    .expertise-text h2,
    .approche-text h2 {
        font-size: 1.8rem !important;
        margin-bottom: 20px !important;
    }
    
    .presentation-image,
    .mission-image,
    .objectifs-image,
    .expertise-image,
    .approche-image {
        min-height: 250px !important;
    }
    
    .partners-scroll {
        padding: 40px 0 !important;
    }
    
    .partners-scroll h2 {
        font-size: 1.8rem !important;
        margin-bottom: 30px !important;
    }
    
    .partner-item {
        margin: 0 15px !important;
        min-width: 120px !important;
    }
    
    .partner-item div {
        width: 100px !important;
        height: 80px !important;
    }
    
    .about-cta {
        padding: 40px 0 !important;
    }
    
    .about-cta h2 {
        font-size: 1.8rem !important;
        margin-bottom: 20px !important;
    }
    
    .about-cta p {
        font-size: 1.1rem !important;
        margin-bottom: 20px !important;
    }
    
    .about-cta .btn {
        font-size: 1rem !important;
        padding: 12px 30px !important;
    }
}

@media (max-width: 480px) {
    .about-hero h1 {
        font-size: 1.8rem !important;
    }
    
    .about-hero p {
        font-size: 1rem !important;
    }
    
    .presentation-text,
    .mission-text,
    .objectifs-text,
    .expertise-text,
    .approche-text {
        padding: 15px !important;
        margin: 15px !important;
        font-size: 0.9rem !important;
    }
    
    .presentation-text h2,
    .mission-text h2,
    .objectifs-text h2,
    .expertise-text h2,
    .approche-text h2 {
        font-size: 1.5rem !important;
    }
    
    .presentation-image,
    .mission-image,
    .objectifs-image,
    .expertise-image,
    .approche-image {
        min-height: 200px !important;
    }
    
    .partner-item {
        margin: 0 10px !important;
        min-width: 100px !important;
    }
    
    .partner-item div {
        width: 80px !important;
        height: 60px !important;
    }
}

/* ===== CONTACT PAGE MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
    .map-section {
        height: 300px !important;
    }
    
    .map-overlay {
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
        padding: 15px !important;
        border-radius: 12px !important;
    }
    
    .map-overlay h3 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }
    
    .map-overlay p {
        font-size: 0.85rem !important;
    }
    
    .contact-info-section {
        padding: 40px 0 30px 0 !important;
    }
    
    .contact-info-container {
        padding: 0 20px !important;
    }
    
    .section-title h2 {
        font-size: 2rem !important;
        margin-bottom: 10px !important;
    }
    
    .section-title p {
        font-size: 1rem !important;
    }
    
    .social-media-row {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
    }
    
    .social-media-row .contact-card {
        max-width: 100% !important;
        min-width: auto !important;
        padding: 25px 20px !important;
    }
    
    .contact-card-icon {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
        margin-bottom: 15px !important;
    }
    
    .contact-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 10px !important;
    }
    
    .contact-card p {
        font-size: 0.9rem !important;
    }
    
    .contact-form-section {
        padding: 30px 20px !important;
        margin: 0 20px !important;
        border-radius: 16px !important;
    }
    
    .contact-form-title {
        font-size: 1.6rem !important;
        margin-bottom: 25px !important;
    }
    
    .contact-form {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .contact-form input,
    .contact-form textarea {
        padding: 15px 18px !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        border-radius: 10px !important;
    }
    
    .contact-form button {
        padding: 15px 30px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
    }
    
    .file-upload-area {
        padding: 20px 15px !important;
        border-radius: 10px !important;
    }
    
    .file-upload-area i {
        font-size: 2rem !important;
        margin-bottom: 8px !important;
    }
    
    .file-upload-area span {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .map-section {
        height: 250px !important;
    }
    
    .map-overlay {
        padding: 12px !important;
    }
    
    .map-overlay h3 {
        font-size: 1rem !important;
    }
    
    .map-overlay p {
        font-size: 0.8rem !important;
    }
    
    .section-title h2 {
        font-size: 1.6rem !important;
    }
    
    .contact-card {
        padding: 20px 15px !important;
    }
    
    .contact-card-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.2rem !important;
    }
    
    .contact-form-section {
        padding: 25px 15px !important;
        margin: 0 15px !important;
    }
    
    .contact-form-title {
        font-size: 1.4rem !important;
    }
    
    .contact-form input,
    .contact-form textarea {
        padding: 12px 15px !important;
    }
    
    .file-upload-area {
        padding: 15px 12px !important;
    }
}

/* ===== MEDIA/BLOG PAGE MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
    .tiktok-hero {
        min-height: 200px !important;
        padding: 40px 0 20px 0 !important;
    }
    
    .tiktok-hero-title {
        font-size: 2rem !important;
        margin-bottom: 12px !important;
    }
    
    .tiktok-hero-desc {
        font-size: 1rem !important;
        padding: 0 20px !important;
    }
    
    .tiktok-feed-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        padding: 20px 15px !important;
    }
    
    .tiktok-feed-item {
        min-height: 250px !important;
        max-height: 350px !important;
        border-radius: 12px !important;
        width: 45% !important;
        max-width: 45% !important;
        flex: 0 0 45% !important;
    }
    
    .tiktok-feed-thumb,
    .tiktok-feed-video {
        border-radius: 12px !important;
    }
    
    .tiktok-feed-badge {
        top: 12px !important;
        left: 12px !important;
        font-size: 0.9rem !important;
        padding: 8px 12px !important;
        border-radius: 10px !important;
    }
    
    .tiktok-feed-overlay {
        padding: 15px !important;
        font-size: 1rem !important;
    }
    
    .tiktok-empty-state {
        min-height: 300px !important;
        padding: 40px 20px !important;
        font-size: 1.2rem !important;
    }
    
    .tiktok-empty-state i {
        font-size: 3rem !important;
        margin-bottom: 15px !important;
    }
}

@media (max-width: 480px) {
    .tiktok-hero {
        padding: 30px 0 15px 0 !important;
    }
    
    .tiktok-hero-title {
        font-size: 1.6rem !important;
    }
    
    .tiktok-feed-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 15px 10px !important;
    }
    
    .tiktok-feed-item {
        min-height: 200px !important;
        max-height: 300px !important;
        border-radius: 8px !important;
        width: 80% !important;
        max-width: 80% !important;
        flex: 0 0 80% !important;
    }
    
    .tiktok-feed-thumb,
    .tiktok-feed-video {
        border-radius: 8px !important;
    }
    
    .tiktok-feed-badge {
        top: 8px !important;
        left: 8px !important;
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
    }
    
    .tiktok-feed-overlay {
        padding: 12px !important;
        font-size: 0.9rem !important;
    }
}

/* ===== MODAL RESPONSIVENESS ===== */
@media (max-width: 768px) {
    #feedModal {
        padding: 10px !important;
    }
    
    #feedModal span {
        top: 5px !important;
        right: 10px !important;
        font-size: 2rem !important;
    }
    
    #feedModalContent video,
    #feedModalContent img {
        max-width: 95vw !important;
        max-height: 80vh !important;
        border-radius: 16px !important;
    }
    
    #feedModalTitle {
        margin-top: 15px !important;
        font-size: 1.1rem !important;
        padding: 0 10px !important;
    }
}

/* ===== UTILITY CLASSES FOR MOBILE ===== */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-visible {
        display: block !important;
    }
    
    .mobile-text-center {
        text-align: center !important;
    }
    
    .mobile-text-left {
        text-align: left !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
    
    .mobile-no-padding {
        padding: 0 !important;
    }
    
    .mobile-small-padding {
        padding: 10px !important;
    }
    
    .mobile-medium-padding {
        padding: 20px !important;
    }
}

/* ===== TOUCH OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* Improve touch targets */
    .btn, .contact-card, .category-card, .product-card, .certificate-card {
        min-height: 44px !important;
        cursor: pointer !important;
    }
    
    /* Touch feedback */
    .btn:active,
    .contact-card:active,
    .category-card:active,
    .product-card:active,
    .certificate-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Better scrolling */
    .thumbnail-slider,
    .partners-scroll-content {
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .certificate-card,
    .product-card,
    .category-card,
    .contact-card {
        animation-duration: 0.3s !important;
    }
    
    /* Optimize images */
    img {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
    
    /* Reduce box shadows for better performance */
    .certificate-card,
    .product-card,
    .category-card,
    .contact-card {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .certificate-card:hover,
    .product-card:hover,
    .category-card:hover,
    .contact-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (max-width: 768px) {
    /* Better focus indicators */
    .btn:focus,
    .contact-card:focus,
    .category-card:focus,
    .product-card:focus,
    .certificate-card:focus {
        outline: 2px solid #007bff !important;
        outline-offset: 2px !important;
    }
    
    /* Improve contrast for small screens */
    .text-muted,
    .text-secondary {
        color: #666 !important;
    }
    
    /* Better button contrast */
    .btn-primary {
        background-color: #007bff !important;
        border-color: #007bff !important;
    }
}

/* ===== BLOG DETAIL PAGE MOBILE RESPONSIVENESS ===== */
@media (max-width: 768px) {
    .blog-hero {
        min-height: 300px !important;
        padding: 20px 0 !important;
    }
    
    .hero-container {
        padding: 0 20px !important;
    }
    
    .hero-content {
        padding: 20px !important;
        text-align: center !important;
    }
    
    .hero-breadcrumb {
        font-size: 0.8rem !important;
        margin-bottom: 15px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .hero-title {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }
    
    .hero-meta {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
    }
    
    .meta-item {
        font-size: 0.85rem !important;
    }
    
    .blog-content {
        padding: 20px !important;
    }
    
    .blog-content h1,
    .blog-content h2,
    .blog-content h3,
    .blog-content h4,
    .blog-content h5,
    .blog-content h6 {
        font-size: 1.4rem !important;
        margin: 20px 0 15px 0 !important;
    }
    
    .blog-content p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }
    
    .blog-content img {
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
        margin: 15px 0 !important;
    }
    
    .blog-content blockquote {
        margin: 20px 0 !important;
        padding: 15px !important;
        font-size: 1rem !important;
    }
    
    .blog-content ul,
    .blog-content ol {
        padding-left: 20px !important;
        margin: 15px 0 !important;
    }
    
    .blog-content li {
        margin-bottom: 8px !important;
        font-size: 1rem !important;
    }
    
    .blog-tags {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    
    .blog-tag {
        font-size: 0.8rem !important;
        padding: 6px 12px !important;
    }
    
    .blog-navigation {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .blog-nav-item {
        width: 100% !important;
        text-align: center !important;
    }
    
    .blog-nav-item h4 {
        font-size: 1rem !important;
    }
    
    .blog-nav-item p {
        font-size: 0.85rem !important;
    }
    
    .related-posts {
        padding: 20px !important;
    }
    
    .related-posts h3 {
        font-size: 1.5rem !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    
    .related-posts-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .related-post-card {
        border-radius: 12px !important;
    }
    
    .related-post-image {
        height: 150px !important;
    }
    
    .related-post-content {
        padding: 15px !important;
    }
    
    .related-post-title {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
    }
    
    .related-post-meta {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .blog-hero {
        min-height: 250px !important;
    }
    
    .hero-container {
        padding: 0 15px !important;
    }
    
    .hero-content {
        padding: 15px !important;
    }
    
    .hero-title {
        font-size: 1.5rem !important;
    }
    
    .blog-content {
        padding: 15px !important;
    }
    
    .blog-content h1,
    .blog-content h2,
    .blog-content h3,
    .blog-content h4,
    .blog-content h5,
    .blog-content h6 {
        font-size: 1.2rem !important;
    }
    
    .blog-content p {
        font-size: 0.95rem !important;
    }
    
    .related-posts {
        padding: 15px !important;
    }
    
    .related-posts h3 {
        font-size: 1.3rem !important;
    }
    
    .related-post-image {
        height: 120px !important;
    }
    
    .related-post-content {
        padding: 12px !important;
    }
}

/* ===== FORCE MOBILE RESPONSIVE OVERRIDES ===== */
/* These rules have higher specificity to override inline styles */

@media (max-width: 768px) {
    /* Force products grid to 1 column on mobile - MAXIMUM SPECIFICITY */
    html body .products-section .products-grid,
    html body .products-grid,
    html body .aluprof-category-grid,
    html body .main-content .products-section .products-grid,
    html body .main-content .products-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Force categories grid to 1 column on mobile - MAXIMUM SPECIFICITY */
    html body .categories-grid,
    html body .main-content .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Force projects grid to 1 column on mobile - MAXIMUM SPECIFICITY */
    html body .project-info-container,
    html body .main-content .project-info-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    /* Force all grids to 1 column on small mobile */
    body .products-section .products-grid,
    body .products-grid,
    body .aluprof-category-grid,
    body .categories-grid,
    body .project-info-container {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* ===== ADDITIONAL SPECIFICITY OVERRIDES ===== */
/* Target specific page containers for maximum override power */

@media (max-width: 768px) {
    /* Products page specific overrides */
    .main-content .products-section .products-grid,
    .main-content .aluprof-category-grid,
    .main-content .categories-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Projects page specific overrides */
    .main-content .project-info-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ===== ULTRA-HIGH SPECIFICITY OVERRIDES ===== */
/* These rules target the exact inline styles from the pages */

@media (max-width: 768px) {
    /* Override the specific inline grid styles */
    .products-grid[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    
    .project-info-container[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Force override for any grid with inline styles */
    .products-grid,
    .project-info-container,
    .categories-grid,
    .aluprof-category-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Additional attribute-based overrides */
    [data-mobile-override="1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ===== NUCLEAR OPTION - MAXIMUM FORCE ===== */
/* These rules will override ANY inline style */

@media (max-width: 768px) {
    /* Protect index page grids from any CSS interference */
    .projects-categories-grid,
    .offer-grid {
        display: flex !important;
        grid-template-columns: unset !important;
    }
    
    /* Specific overrides for known grid classes (excluding index page grids) */
    .products-grid:not(.projects-categories-grid):not(.offer-grid),
    .project-info-container:not(.projects-categories-grid):not(.offer-grid),
    .categories-grid:not(.projects-categories-grid):not(.offer-grid),
    .aluprof-category-grid:not(.projects-categories-grid):not(.offer-grid),
    .products-section .products-grid:not(.projects-categories-grid):not(.offer-grid),
    .main-content .products-grid:not(.projects-categories-grid):not(.offer-grid),
    .main-content .project-info-container:not(.projects-categories-grid):not(.offer-grid),
    .main-content .categories-grid:not(.projects-categories-grid):not(.offer-grid) {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    /* Protect index page grids from any CSS interference on small mobile */
    .projects-categories-grid,
    .offer-grid {
        display: flex !important;
        grid-template-columns: unset !important;
    }
    
    /* Small mobile overrides with maximum specificity (excluding index page grids) */
    .main-content .products-section .products-grid:not(.projects-categories-grid):not(.offer-grid),
    .main-content .products-grid:not(.projects-categories-grid):not(.offer-grid),
    .main-content .aluprof-category-grid:not(.projects-categories-grid):not(.offer-grid),
    .main-content .categories-grid:not(.projects-categories-grid):not(.offer-grid),
    .main-content .project-info-container:not(.projects-categories-grid):not(.offer-grid) {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* ===== MOBILE CARD OPTIMIZATIONS ===== */
/* Ensure cards look great in single column layout */

@media (max-width: 768px) {
    /* Product cards mobile optimization */
    .product-card {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    .product-image-container {
        height: 250px !important;
    }
    
    .product-content {
        padding: 20px !important;
    }
    
    /* Category cards mobile optimization */
    .category-card {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    .category-content {
        padding: 20px !important;
    }
    
    /* Aluprof category blocks mobile optimization */
    .aluprof-category-block {
        max-width: 100% !important;
        margin: 0 auto !important;
        min-height: 300px !important;
    }
    
    /* Project info cards mobile optimization */
    .project-info-card,
    .project-description {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    /* Small mobile card optimizations */
    .product-card {
        margin-bottom: 20px !important;
    }
    
    .product-image-container {
        height: 200px !important;
    }
    
    .product-content {
        padding: 15px !important;
    }
    
    .category-card {
        margin-bottom: 20px !important;
    }
    
    .category-content {
        padding: 15px !important;
    }
    
    .aluprof-category-block {
        min-height: 250px !important;
        margin-bottom: 20px !important;
    }
    
    .project-info-card,
    .project-description {
        margin-bottom: 20px !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .slider-nav,
    .thumbnail-nav,
    .modal-close,
    .tiktok-feed-badge,
    .contact-card-icon,
    .aluprof-category-arrow {
        display: none !important;
    }
    
    .certificate-card,
    .product-card,
    .category-card,
    .contact-card {
        break-inside: avoid !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* ===== MOBILE SIDEBAR ENHANCEMENT ===== */
@media (max-width: 1200px) {
    /* Make mobile sidebar wider (450px) */
    .mobile-sidebar {
        width: 450px !important;
        max-width: 450px !important;
        min-width: 450px !important;
    }
    
    /* Force mobile menu toggle to show */
    .mobile-menu-toggle {
        display: flex !important;
    }
    
    /* Force mobile menu toggle button to show and make it 1.5x bigger */
    .mobile-menu-toggle {
        display: flex !important;
        padding: 25px 40px !important;
        width: 150px !important;
        height: 100px !important;
        justify-content: center !important;
        align-items: center !important;
        cursor: pointer !important;
    }
    
    /* Make hamburger lines 1.5x bigger */
    .hamburger-line {
        width: 70px !important;
        height: 8px !important;
        margin: 8px 0 !important;
        background: #000 !important;
        transition: 0.3s !important;
    }
    
    /* Make sidebar buttons wider with bigger fonts */
    .sidebar-menu li a {
        padding: 20px 30px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Make sidebar submenu items wider with bigger fonts */
    .sidebar-menu ul li a {
        padding: 15px 50px !important;
        font-size: 16px !important;
        min-height: 50px !important;
        width: 100% !important;
    }
    
    /* Make sidebar auth buttons wider with bigger fonts */
    .sidebar-auth a {
        padding: 18px 25px !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        min-height: 60px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
}