/* ==========================================================
   ASTRO TECHNOLOGY — responsive.css
   Все медиа-запросы, КРОМЕ шапки (шапка — в critical-css.php).
   Подключать после common.css.
   ========================================================== */

/* 08. SERVICES — бейдж */
@media (max-width: 600px) {
    .service-price__badge {
        font-size: 11px;
        padding: 5px 12px;
    }
}

/* 11. CASES */
@media (max-width: 1200px) {
    .case-slide__content { padding: 36px 50px 36px 32px; }
    .cases-preview { margin-left: -100px; }
    .cases-nav { padding-left: 32px; }
}

@media (max-width: 992px) {
    .cases { padding: 60px 0; }
    .cases-head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
    .cases-slider { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 0; }
    .cases-track { min-height: 0; margin-top: 0; grid-column: 1; grid-row: 2; }
    .case-slide { position: relative; inset: auto; }
    .case-slide:not(.is-active) { display: none; }
    .case-slide__content { height: auto; padding: 24px 24px; gap: 14px; }
    .cases-preview { order: -1; margin-left: 0; margin-bottom: 16px; grid-column: 1; grid-row: 1; aspect-ratio: 16 / 10; }
    .cases-nav { grid-column: 1; grid-row: 3; padding: 16px 0 0; justify-content: center; background: transparent; border: none; }
}

@media (max-width: 600px) {
    .case-slide__content { padding: 20px 20px; gap: 12px; }
    .case-slide__desc { font-size: 15px; }
    .cases-nav { padding-top: 12px; }
}

/* 16.5. RELOCATION */
@media (max-width: 1200px) {
    .relocation-inner { grid-template-columns: 1.1fr 1fr; gap: 60px; }
    .relocation-card { padding: 32px 28px; }
}

@media (max-width: 992px) {
    .relocation { padding: 60px 0; }
    .relocation-inner { grid-template-columns: 1fr; gap: 40px; }
    .relocation-actions { flex-direction: column; align-items: stretch; }
    .relocation-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
    .relocation-card { padding: 32px 24px; }
    .relocation-card__value { font-size: 56px; }
    .relocation-list li { font-size: 15px; }
    .relocation-disclaimer { padding: 12px 14px; font-size: 11px; }
}

/* 23. MODAL */
@media (max-width: 600px) {
    .modal { padding: 0; align-items: flex-end; }
    .modal__dialog { max-width: 100%; border-radius: 24px 24px 0 0; padding: 32px 24px 24px; max-height: 90vh; animation: modalSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
    @keyframes modalSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .modal__title { font-size: 22px; }
}

/* 24. PORTFOLIO MODAL */
@media (max-width: 768px) {
    .portfolio-modal { padding: 0; align-items: flex-end; }
    .portfolio-modal__dialog { max-width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; }
    .portfolio-modal__info { padding: 20px 20px 24px; }
    .portfolio-modal__title { font-size: 20px; }
    .portfolio-modal__image img { max-height: 50vh; }
}

/* 28. ALT */
@media (max-width: 992px) {
    .alt-grid--three { grid-template-columns: 1fr; }
}

/* 35. MOBILE — SERVICES */
@media (max-width: 600px) {
    .btn--ghost, .btn--primary.btn--sm { width: 100%; justify-content: center; }
}

/* 35. MOBILE — CONTEXT */
@media (max-width: 992px) {
    .context { padding: 60px 0; }
    .context-inner { grid-template-columns: 1fr; gap: 40px; }
    .context-list { grid-template-columns: 1fr; }
    .context-actions { flex-direction: column; align-items: stretch; }
    .context-actions .btn { width: 100%; justify-content: center; }
    .context-note { text-align: center; }
}

@media (max-width: 500px) {
    .context-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
    .context-stat { padding: 20px 18px; }
    .context-stat__value { font-size: 22px; }
    .context-stat__label { font-size: 12px; }
    .context-stat--wide { grid-column: 1 / -1; }
}

/* 35. MOBILE — INDUSTRIES / WHY */
@media (max-width: 1200px) {
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
    .cases-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .industries, .cases, .why { padding: 60px 0; }
    .industries-head, .cases-head { margin-bottom: 40px; }
    .why-inner { grid-template-columns: 1fr; gap: 40px; }
    .why-actions { flex-direction: column; align-items: stretch; }
    .why-actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
    .industries-grid, .cases-grid, .why-stats { grid-template-columns: 1fr; }
}

/* 35. MOBILE — REVIEWS */
@media (max-width: 992px) {
    .reviews { padding: 60px 0; }
    .reviews-head { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
    .review-card { flex: 0 0 320px; padding: 24px 22px; }
    .review-card__stars { padding-right: 80px; }
    .reviews-footer { margin-top: 40px; }
}

@media (max-width: 500px) {
    .review-card { flex: 0 0 280px; }
    .reviews-arrow { width: 44px; height: 44px; font-size: 15px; }
}

/* 35. MOBILE — FAQ */
@media (max-width: 992px) {
    .faq { padding: 60px 0; }
    .faq-head { margin-bottom: 40px; }
    .faq-grid { grid-template-columns: 1fr; gap: 12px; }
    .faq-col { gap: 12px; }
    .faq-item__question { padding: 18px 20px; font-size: 15px; }
    .faq-item__answer { padding: 0 20px 18px; font-size: 14px; }
    .faq-ask { padding: 18px 20px; font-size: 15px; }
}

/* 35. MOBILE — CONTACTS */
@media (max-width: 992px) {
    .contacts { padding: 60px 0 0; }
    .contacts-inner { grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; }
    .contacts-form { padding: 28px 24px; }
    .contacts-form__title { font-size: 22px; }
    .contacts-map { height: 350px; }
}

/* 35. MOBILE — PROTOTYPE */
@media (max-width: 992px) {
    .prototype { padding: 60px 0; }
    .prototype-inner { grid-template-columns: 1fr; gap: 50px; }
    .prototype-actions { flex-direction: column; align-items: stretch; }
    .prototype-actions .btn { width: 100%; justify-content: center; }
    .prototype-note { text-align: center; }
    .prototype-visual { order: -1; margin-bottom: 20px; }
    .prototype-badge { bottom: -10px; right: 0; padding: 12px 18px; }
    .prototype-badge i { width: 34px; height: 34px; font-size: 15px; }
    .prototype-badge strong { font-size: 16px; }
    .prototype-badge span { font-size: 11px; }
    .prototype-mockup__topbar, .prototype-mockup__footer { display: none; }
    .prototype-mockup__hero { padding: 12px 0; }
    .prototype-mockup__grid { padding: 12px 0; }
    .prototype-mockup__card { padding: 8px; }
    .prototype-mockup__icon { width: 16px; height: 16px; }
}

/* 35. MOBILE — GUARANTEES */
@media (max-width: 1200px) {
    .guarantees-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .guarantees { padding: 60px 0; }
    .guarantees-head { margin-bottom: 40px; }
}

@media (max-width: 600px) {
    .guarantees-grid { grid-template-columns: 1fr; }
}

/* 35. MOBILE — FOOTER / SCROLL UP */
@media (max-width: 992px) {
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-legal__list { flex-direction: column; gap: 10px; align-items: center; text-align: center; }
}

@media (max-width: 600px) {
    .footer-inner { grid-template-columns: 1fr; gap: 30px; }
    .scroll-up { bottom: 20px; right: 20px; width: 44px; height: 44px; }
}

/* 36. MOBILE — SERVICE PAGE (без head-части) */
@media (max-width: 1200px) {
    .portfolio-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .process-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .process-grid--four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .service-page__section { margin-bottom: 50px; }
    .fit-grid { grid-template-columns: 1fr 1fr; }
    .includes-list { grid-template-columns: 1fr; }
    .alt-grid { grid-template-columns: 1fr; }
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .service-page__prototype { grid-template-columns: 1fr; gap: 50px; padding: 40px 30px; border-radius: 24px; }
    .service-page__prototype-visual { order: -1; }
    .service-page__prototype-note { display: block; margin: 12px 0 0; text-align: center; }
    .service-page__prototype-badge { bottom: -10px; right: 0; padding: 12px 16px; }
    .service-page__prototype-badge i { width: 34px; height: 34px; font-size: 15px; }
    .service-page__prototype-badge strong { font-size: 15px; }
    .service-page__prototype-badge span { font-size: 11px; }
}

@media (max-width: 600px) {
    .fit-grid { grid-template-columns: 1fr; }
    .portfolio-grid { grid-template-columns: 1fr; gap: 20px; }
    .process-grid { grid-template-columns: 1fr; }
    .process-grid--four { grid-template-columns: 1fr; }
    .process-card { padding: 28px 22px 22px; }
    .process-card__num { font-size: 44px; }
    .process-card__icon { width: 48px; height: 48px; font-size: 20px; }
    .service-page__prototype { padding: 30px 20px; }
    .service-page__prototype .btn { width: 100%; justify-content: center; }
    .service-page__prototype-mockup { max-width: 100%; }
}

/* 37. MOBILE — LIMITS / TYPES */
@media (max-width: 1024px) {
    .limits-grid { grid-template-columns: 1fr 1fr; }
    .limits-block { grid-column: 1 / -1; }
    .types-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .limits-grid { grid-template-columns: 1fr; gap: 16px; }
    .limits-item { padding: 20px; }
    .limits-block { padding: 20px; }
    .types-grid { grid-template-columns: 1fr; }
    .type-card { padding: 22px; }
}

/* 36.5. QUIZ */
@media (max-width: 992px) {
    .quiz-page { padding: 20px 0 60px; }
    .quiz { padding: 40px 24px 32px; border-radius: 24px; }
    .quiz-discount { top: -16px; right: 20px; padding: 12px 20px; }
    .quiz-discount__value { font-size: 32px; }
    .quiz-discount__percent { font-size: 18px; }
    .quiz-options--grid { grid-template-columns: 1fr; }
    .quiz-option__inner { padding: 18px 20px; gap: 14px; min-height: auto; }
    .quiz-option__inner i { width: 40px; height: 40px; font-size: 17px; }
    .quiz-option__text { font-size: 15px; }
    .quiz-step__title { margin-bottom: 10px; }
    .quiz-result { padding: 24px 20px; }
    .quiz-result__type strong { font-size: 22px; }
    .quiz-result__total strong { font-size: 26px; }
}

@media (max-width: 600px) {
    .quiz-nav { flex-direction: column-reverse; gap: 10px; }
    .quiz-nav .btn { width: 100%; justify-content: center; }
    .quiz-nav .btn--primary { margin-left: 0; }
}

/* Квиз — модалка на весь экран (мобильный) */
@media (max-width: 992px) {
    /* Сбрасываем отступы и рамки у модалки квиза */
    .modal--quiz { padding: 0; }
    .modal__dialog--quiz {
        padding: 0;
        border-radius: 0;
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        width: 100vw;
        overflow-y: auto;
        background: var(--color-bg);
    }

    /* Внутренний .quiz — без рамок и отступов, на всю высоту */
    .modal__dialog--quiz.quiz {
        padding: 0;
        border: none;
        border-radius: 0;
        background: var(--color-bg);
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    /* Прогресс — сверху, с отступом, чтобы не наезжал на скидку */
    .modal__dialog--quiz .quiz-progress {
        padding: 64px 20px 0;
        margin-bottom: 24px;
    }

    /* Скидка — в правом верхнем углу, не наезжает на прогресс */
    .modal__dialog--quiz .quiz-discount {
        top: 12px;
        right: 16px;
        padding: 8px 14px;
        border-radius: 12px;
        border: 1px solid var(--color-border-accent);
        background: linear-gradient(135deg, var(--color-bg-soft), var(--color-bg));
        box-shadow: 0 4px 16px rgba(91, 207, 254, 0.2);
        animation: none;
    }
    .modal__dialog--quiz .quiz-discount.is-max {
        animation: none;
    }
    .modal__dialog--quiz .quiz-discount__label {
        font-size: 10px;
        letter-spacing: 1px;
    }
    .modal__dialog--quiz .quiz-discount__value {
        font-size: 22px;
    }
    .modal__dialog--quiz .quiz-discount__percent {
        font-size: 14px;
    }

    /* Кнопка закрытия — в правом верхнем углу, поверх всего */
    .modal__dialog--quiz .modal__close {
        top: 12px;
        right: auto;
        left: 16px;
        width: 36px;
        height: 36px;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.08);
        z-index: 10;
    }

    /* Форма и контент — с боковыми отступами */
    .modal__dialog--quiz .quiz-form {
        padding: 0 20px 32px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* Шаги — занимают всё доступное место */
    .modal__dialog--quiz .quiz-step {
        flex: 1;
    }

    /* Кнопки навигации — прижаты к низу */
    .modal__dialog--quiz .quiz-nav {
        margin-top: auto;
        padding-top: 16px;
    }
}

@media (max-width: 600px) {
    .modal__dialog--quiz .quiz-progress {
        padding: 56px 16px 0;
    }
    .modal__dialog--quiz .quiz-discount {
        top: 10px;
        right: 12px;
        padding: 6px 12px;
    }
    .modal__dialog--quiz .modal__close {
        top: 10px;
        left: 12px;
    }
    .modal__dialog--quiz .quiz-form {
        padding: 0 16px 24px;
    }
    .modal__dialog--quiz .quiz-step__title {
        font-size: 18px;
    }
    .modal__dialog--quiz .quiz-step__hint {
        font-size: 13px;
        margin-bottom: 20px;
    }
    .modal__dialog--quiz .quiz-options {
        margin-bottom: 24px;
    }
}

/* 404 */
@media (max-width: 600px) {
    .error-page { padding: 40px 0 80px; }
    .error-page__title { font-size: 24px; }
    .error-page__desc { font-size: 15px; }
    .error-page__quiz { flex-direction: column; text-align: center; padding: 24px; }
    .error-page__quiz-icon { width: 56px; height: 56px; font-size: 20px; }
    .error-page__actions { flex-direction: column; }
    .error-page__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .error-page__inner, .error-page__digit { animation: none; }
}

/* DOC PAGE (без head-части) */
@media (max-width: 992px) {
    .doc-page__content h4 { margin-top: 32px; }
    .doc-page__content p, .doc-page__content ul li, .doc-page__content ol li { font-size: 15px; }
    .doc-page__numbered-list li { font-size: clamp(20px, 5vw, 26px); }
}

@media (max-width: 600px) {
    .doc-page__content p, .doc-page__content ul li, .doc-page__content ol li { font-size: 14px; }
    .doc-page__content ul li { padding-left: 20px; }
    .doc-page__content ol li { padding-left: 32px; }
}