/**
 * АвтоGarant — responsive.css
 * Путь: /assets/css/responsive.css
 * 
 * Mobile First. Breakpoints: 768px (tablet), 1024px (desktop).
 */

/* ============================================================
   TABLET (768px+)
   ============================================================ */
@media (min-width: 768px) {
    :root {
        --container-padding: var(--space-4);
    }
}

/* ============================================================
   DESKTOP (1024px+)
   ============================================================ */
@media (min-width: 1024px) {
    :root {
        --container-padding: var(--space-3);
    }
}

/* ============================================================
   MOBILE (< 768px)
   ============================================================ */
@media (max-width: 767px) {
    :root {
        --font-size-h1: 32px;
        --font-size-h2: 28px;
        --font-size-h3: 22px;
        --font-size-h4: 18px;
        --font-size-body: 16px;
        --container-padding: var(--space-2);
    }
    
    .hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero__cta {
        justify-content: center;
    }
    
    .hero__image {
        order: -1;
        max-height: 300px;
    }
    
    .advantages,
    .steps,
    .reviews,
    .gallery,
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        text-align: center;
    }
    
    .footer__desc {
        margin-left: auto;
        margin-right: auto;
    }
    
    .contacts__grid {
        grid-template-columns: 1fr;
    }
    
    .header__nav {
        display: none; /* Мобильное меню — отдельно */
    }
    
    .header__phone {
        display: none;
    }
}

/* ============================================================
   TABLET (768px - 1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .advantages,
    .steps,
    .reviews,
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}