/* mobile.css - Responsive styles */

/* ===== BREAKPOINTS ===== */
/* 
    - Mobile: 320px - 767px
    - Tablet: 768px - 1023px 
    - Desktop: 1024px+
*/

/* ===== GENERAL RESPONSIVE RULES ===== */
@media screen and (max-width: 1023px) {
    /* Typography scale adjustments */
    :root {
        --font-size-max: 56px;
        --font-size-xxxl: 48px;
        --font-size-xxl: 36px;
        --font-size-xl: 28px;
    }

    /* Container padding adjustments */
    .container {
        padding: var(--space-m) var(--space-l);
    }
    
    .container-small {
        padding: var(--space-xm) var(--space-l);
    }

    /* Utility classes */
    .w-75 {
        width: 85%;
    }
    
    .w-50 {
        width: 75%;
    }
}

/* ===== TABLET SPECIFIC RULES ===== */
@media screen and (max-width: 1023px) and (min-width: 768px) {
    /* Header */
    .header {
        padding: var(--space-s) var(--space-l);
    }

    /* Hero */
    .hero-content {
        padding: 0 var(--space-l);
    }

    /* Logo Carousel */
    .logo-slide {
        flex: 0 0 20%;
    }

    /* Vantages */
    .vantages-container {
        flex-wrap: wrap;
    }
    
    .vantages-item {
        flex: 0 0 48%;
        margin-bottom: var(--space-m);
    }

    /* Tab */
    .tab-container {
        max-width: 100%;
    }
    
    .tab-nav-item {
        margin-right: 2rem;
        padding: 1.2rem 0;
    }

    /* Comparison slider */
    .comparison-slider-container {
        max-width: 90%;
        margin: 0 auto;
    }

    /* Testimonial */
    .testimonial-row {
        flex-wrap: wrap;
    }
    
    .carousel-card {
        flex: 0 0 100%;
        margin-bottom: var(--space-m);
    }

    /* Form section */
    .form-description {
        padding: var(--space-m);
    }
}

/* ===== MOBILE SPECIFIC RULES ===== */
@media screen and (max-width: 767px) {
    /* Typography scale adjustments */
    :root {
        --font-size-max: 42px;
        --font-size-xxxl: 36px;
        --font-size-xxl: 32px;
        --font-size-xl: 24px;
        --font-size-l: 20px;
        --font-size-m: 18px;
    }

    /* Container adjustments */
    .side-menu {
        width: 100vw;
    }

    .container {
        padding: var(--space-m) var(--space-xm);
    }

    .container-hero {
        padding: 32px 32px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100vh;
    }

    .hero-content {
        height: auto;
    }
    
    .container-small {
        padding: var(--space-s) var(--space-xm);
    }

    /* Utility classes */
    .w-75, .w-50 {
        width: 100%;
    }
    
    .mb-64 {
        margin-bottom: var(--space-l);
    }

    /* Header */
    .header {
        padding: var(--space-xm) var(--space-m);
        flex-direction: row !important;
    }

    /* Hero */
    .hero-content {
        padding: 0 var(--space-xm);
    }
    
    .hero-text {
        margin-bottom: var(--space-m);
    }
    
    .hero-button {
        text-align: left;
    }

    /* Logo Carousel */
    .logo-slide {
        flex: 0 0 33.333%;
    }

    /* Video mask section */
    .animation-container {
        height: 100vh;
    }

    /* Vantages */
    .vantages-container {
        flex-direction: column;
    }
    
    .vantages-item {
        margin-bottom: var(--space-m);
    }

    /* Tab section */
    .tab-container {
        max-width: 100%;
    }
    
    .tab-navigation {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-s);
        margin-bottom: var(--space-m);
    }
    
    .tab-nav-item {
        white-space: nowrap;
        padding: 1rem 0;
        margin-right: 1.5rem;
        font-size: var(--font-size-s);
    }
    
    .tab-video iframe {
        height: 250px;
    }

    /* Comparison slider */
    .comparison-slider-container {
        width: 100%;
    }
    
    .comparison-slider {
        height: 300px;
    }
    
    .comparison-label {
        font-size: var(--font-size-s);
    }

    /* Testimonial */
    .testimonial-container {
        flex-direction: column;
    }
    
    .testimonial-row {
        flex-direction: column;
    }
    
    .carousel-card {
        margin-bottom: var(--space-m);
    }

    /* Price section */
    .price-container {
        width: 100%;
    }

    /* Form section */
    .form-metasection, .form-description {
        width: 100%;
    }

    .form-description {
        margin-left: 0px;
      }
    
      .form-metasection {
        margin-right: 0px;
        margin-bottom: 48px;
      }
    
    .flex {
        flex-direction: column;
    }
    
    .input-margin-right, .input-margin-left {
        margin: 0 0 var(--space-xm) 0;
    }

    /* Map */
    #map {
        height: 300px;
    }

    /* Footer */
    .footer {
        padding: var(--space-l) var(--space-xm);
    }
    
    .footer .flex {
        flex-wrap: wrap;
        gap: var(--space-xm);
        justify-content: center;
    }
    
    .social {
        margin: 0 var(--space-s);
    }
    
    .footer .flex.items-center.justify-between {
        flex-direction: column;
    }
    
    .footer p {
        margin-bottom: var(--space-xm);
        text-align: center;
    }
}

/* ===== SMALL PHONE ADJUSTMENTS ===== */
@media screen and (max-width: 374px) {
    :root {
        --font-size-max: 36px;
        --font-size-xxxl: 32px;
        --font-size-xxl: 28px;
    }
    
    .hero-btn {
        padding: var(--space-s) var(--space-m);
    }
    
    .comparison-slider {
        height: 250px;
    }
    
    .tab-video iframe {
        height: 200px;
    }
}

/* =========  TABLET  (768-1023px) ========= */
@media screen and (min-width:768px) and (max-width:1023px){
  .vantages-grid{
    grid-template-columns:repeat(2,1fr); /* 2 carte */
  }
}

.img-garanzia {
    width: 20vw;
    height: auto;
}

/* =========  MOBILE  (<768px) ========= */
@media screen and (max-width:767px){
  .vantages-grid{
    grid-template-columns:1fr;           /* 1 carta */
    gap:var(--space-m);
  }
  
  .img-garanzia {
    width: 100%;
}

    .garanzia-test {
    justify-content: center !important;
}
}

.title-footer-link {
    font-family:Gotham-Bold;
}

.title-footer-link:hover {
    color: white;
}