/* ========================================
   ARCHIVE HERO - MOBILE FIX DEFINITIVO
   Per: archive-tc_experience.php e page-blog.php
   ======================================== */

/* RESET - Rimuove tutti i conflitti */
.tc-archive-hero,
.tc-blog-header {
    padding: 0 !important;
    margin: 0 !important;
}

/* Container con padding corretto */
.tc-archive-hero .tc-container,
.tc-blog-header .tc-container {
    padding-top: 50px;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 100%;
    margin: 0 auto;
}

/* H1 - Centrato e con max-width */
.tc-archive-hero h1,
.tc-blog-header h1,
.tc-blog-header__title {
    font-size: 2rem;
    line-height: 1.2;
    margin: 0 auto 16px auto;
    padding: 0;
    max-width: 90%;
    text-align: center;
    word-wrap: break-word;
}

/* P/Subtitle - Centrato e con max-width */
.tc-archive-hero p,
.tc-blog-header p,
.tc-blog-header__subtitle {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 auto;
    padding: 0;
    max-width: 85%;
    text-align: center;
    word-wrap: break-word;
}

/* iPhone SE e piccoli (≤375px) */
@media (max-width: 375px) {
    .tc-archive-hero .tc-container,
    .tc-blog-header .tc-container {
        padding-top: 40px;
        padding-bottom: 24px;
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .tc-archive-hero h1,
    .tc-blog-header h1,
    .tc-blog-header__title {
        font-size: 1.75rem;
        margin-bottom: 12px;
        max-width: 95%;
    }
    
    .tc-archive-hero p,
    .tc-blog-header p,
    .tc-blog-header__subtitle {
        font-size: 0.9375rem;
        max-width: 92%;
    }
}

/* iPhone Standard (376px-428px) */
@media (min-width: 376px) and (max-width: 428px) {
    .tc-archive-hero .tc-container,
    .tc-blog-header .tc-container {
        padding-top: 45px;
        padding-bottom: 28px;
        padding-left: 18px;
        padding-right: 18px;
    }
    
    .tc-archive-hero h1,
    .tc-blog-header h1,
    .tc-blog-header__title {
        font-size: 1.875rem;
        margin-bottom: 14px;
        max-width: 92%;
    }
    
    .tc-archive-hero p,
    .tc-blog-header p,
    .tc-blog-header__subtitle {
        font-size: 1rem;
        max-width: 88%;
    }
}

/* iPhone 16 Pro Max e simili (429px-480px) */
@media (min-width: 429px) and (max-width: 480px) {
    .tc-archive-hero .tc-container,
    .tc-blog-header .tc-container {
        padding-top: 50px;
        padding-bottom: 30px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .tc-archive-hero h1,
    .tc-blog-header h1,
    .tc-blog-header__title {
        font-size: 2rem;
        margin-bottom: 16px;
        max-width: 90%;
    }
    
    .tc-archive-hero p,
    .tc-blog-header p,
    .tc-blog-header__subtitle {
        font-size: 1.0625rem;
        max-width: 86%;
    }
}

/* Mobile Landscape (481px-767px) */
@media (min-width: 481px) and (max-width: 767px) {
    .tc-archive-hero .tc-container,
    .tc-blog-header .tc-container {
        padding-top: 55px;
        padding-bottom: 32px;
        padding-left: 24px;
        padding-right: 24px;
    }
    
    .tc-archive-hero h1,
    .tc-blog-header h1,
    .tc-blog-header__title {
        font-size: 2.25rem;
        margin-bottom: 18px;
        max-width: 88%;
    }
    
    .tc-archive-hero p,
    .tc-blog-header p,
    .tc-blog-header__subtitle {
        font-size: 1.125rem;
        max-width: 84%;
    }
}

/* Tablet (768px-1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .tc-archive-hero .tc-container,
    .tc-blog-header .tc-container {
        padding-top: 70px;
        padding-bottom: 40px;
        padding-left: 32px;
        padding-right: 32px;
    }
    
    .tc-archive-hero h1,
    .tc-blog-header h1,
    .tc-blog-header__title {
        font-size: 2.75rem;
        margin-bottom: 20px;
        max-width: 100%;
    }
    
    .tc-archive-hero p,
    .tc-blog-header p,
    .tc-blog-header__subtitle {
        font-size: 1.25rem;
        max-width: 100%;
    }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
    .tc-archive-hero .tc-container,
    .tc-blog-header .tc-container {
        padding-top: 80px;
        padding-bottom: 50px;
        padding-left: 40px;
        padding-right: 40px;
        max-width: 1200px;
    }
    
    .tc-archive-hero h1,
    .tc-blog-header h1,
    .tc-blog-header__title {
        font-size: 3.5rem;
        margin-bottom: 24px;
        max-width: 100%;
    }
    
    .tc-archive-hero p,
    .tc-blog-header p,
    .tc-blog-header__subtitle {
        font-size: 1.5rem;
        max-width: 100%;
    }
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
    .tc-archive-hero .tc-container,
    .tc-blog-header .tc-container {
        padding-left: 18px;
        padding-right: 18px;
    }
    
    .tc-archive-hero h1,
    .tc-blog-header h1,
    .tc-blog-header__title,
    .tc-archive-hero p,
    .tc-blog-header p,
    .tc-blog-header__subtitle {
        max-width: 92%;
    }
}