/* ============================================
   RESPONSIVE — мобильная адаптация
   Идёт ПОСЛЕДНИМ, переопределяет всё выше
   ============================================ */

/* ---------- Планшеты (≤ 1024px) ---------- */
@media (max-width: 1024px) {
    :root {
        --section-padding-y: 50px;
    }
}

/* ---------- Планшеты вертикальные (≤ 768px) ---------- */
@media (max-width: 768px) {
    :root {
        --fs-h1: 2rem;
        --fs-h2: 1.5rem;
        --fs-lead: 1rem;
        --section-padding-y: 40px;
        --section-padding-x: 15px;
        --space-lg: 30px;
        --space-xl: 40px;
        --ls-mega: 4px;
        --ls-wide: 3px;
    }

    .about__advantages {
        grid-template-columns: 1fr;
    }

    /* Шапка */
    .header {
        padding: var(--space-lg) var(--space-md);
    }

    /* О студии */
    .about__stats {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        padding-top: var(--space-md);
        margin-top: var(--space-md);
    }

    .about__stat-value {
        font-size: 2rem;
    }

    /* Процесс */
    .work-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .work-grid img {
        height: 200px;
    }

    /* Прайс */
    .price-list {
        padding: var(--space-md) var(--space-sm);
    }

    .price-item {
        font-size: var(--fs-body);
        gap: var(--space-sm);
    }

    /* Портфолио */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    /* Popup */
    .popup__nav {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .popup__close {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }

    /* Форма */
    .booking-form {
        padding: var(--space-md) var(--space-sm);
    }

    .time-slots {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Плавающая кнопка TG */
    .tg-float {
        width: 50px;
        height: 50px;
        bottom: var(--space-sm);
        right: var(--space-sm);
    }

    .tg-float svg {
        width: 20px;
        height: 20px;
    }
}

/* ---------- Мобильные (≤ 480px) ---------- */
@media (max-width: 480px) {
    :root {
        --fs-h1: 1.6rem;
        --fs-h2: 1.25rem;
        --fs-body: 0.95rem;
        --fs-small: 0.85rem;
        --space-md: 15px;
        --space-lg: 25px;
    }

    .header__brand {
        letter-spacing: 3px;
    }

    .header__tagline {
        font-size: var(--fs-tiny);
        letter-spacing: var(--ls-normal);
    }

    /* Процесс — одна колонка на очень маленьких */
    .work-grid {
        grid-template-columns: 1fr;
    }

    .work-grid img {
        height: 250px;
    }

    /* Прайс — на очень узких переносим цену под название */
    .price-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .price-item__value {
        align-self: flex-end;
    }

    /* Портфолио */
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    /* Слоты — 2 колонки */
    .time-slots {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Модалка */
    .popup {
        padding: var(--space-xs);
    }

    .popup__nav {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .popup__nav--prev { left: var(--space-xs); }
    .popup__nav--next { right: var(--space-xs); }
}

/* ---------- Отключаем tilt на тач-устройствах ---------- */
@media (hover: none) {
    .card:hover {
        transform: none;
    }

    .card:hover .card__img {
        transform: none;
    }

    /* Уменьшаем агрессивность hover-эффектов */
    .work-grid img:hover {
        transform: none;
    }

    .section:hover .section__title::after {
        width: 80px;
    }
}

/* ---------- Отключаем тяжёлые анимации для слабых устройств ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .header__brand {
        animation: none;
    }

    .tg-float {
        animation: none;
    }
}