/* ============================================================
   ГЛАВНАЯ — мобильная/планшетная адаптация (desktop-first overrides).
   Брейкпоинты: 1200 (гаттеры) / 1024 (планшет, стек) / 768 (мобильный) / 480 (узкий).
   Подключается только на главной, ПОСЛЕ page-home.css.
   ============================================================ */

/* ============ ≤1200px — боковые поля (гаттеры) ============ */
/* До этой ширины центрирующие поля контейнера (≈(vw−1160)/2) исчезают,
   и контент прилипает к краям. Добавляем явные отступы. */
@media (max-width: 1200px) {
    .td-home .container {
        padding-left: 32px;
        padding-right: 32px;
        box-sizing: border-box;
    }
    .td-stats .container,
    .td-case-section .container { padding-left: 32px; padding-right: 32px; }
}

/* ================= ≤1024px — ПЛАНШЕТ (стек) ================= */
@media (max-width: 1024px) {
    .td-home .container { padding-left: 28px; padding-right: 28px; }
    .td-home img:not(.iti__flag) { max-width: 100%; height: auto; }

    /* убавляем гигантские вертикальные отступы секций */
    .td-sec99 { padding-top: 70px; }
    .td-replace { padding-top: 60px; }
    .td-founder { padding: 60px 0; }
    .td-guarantee { padding: 60px 0; }
    .td-readall { padding: 70px 0; }
    .td-faq { padding: 60px 0; }
    .td-auditform { padding: 70px 0 60px; }
    .td-clients { padding: 60px 0; }

    /* — STATS: контейнер не шире вьюпорта — */
    .td-stats .container { max-width: none; }

    /* — SEC99 «99% задач»: 2 карточки → колонка — */
    .td-sec99__title { font-size: 44px; margin-bottom: 36px; }
    .td-sec99__cards { flex-direction: column; align-items: center; }
    .td-sec99__card,
    .td-sec99__card--dark { width: 100%; max-width: 560px; margin-top: 0; min-height: 0; padding: 36px 28px; }
    .td-sec99__card-title { font-size: 28px; }
    .td-sec99__card-list li { font-size: 17px; line-height: 25px; }

    /* — BENEFITS: 2 колонки → 1; широкая карточка → вертикально — */
    .td-benefits__title { font-size: 38px; margin-bottom: 32px; }
    .td-benefits__cards { grid-template-columns: 1fr; }
    .td-benefit-card__body { padding: 32px 28px 22px; }
    .td-benefit-card__title { font-size: 26px; }
    .td-benefit-card--wide { flex-direction: column; }
    .td-benefit-card--wide .td-benefit-card__body { flex: none; }

    /* — INTERVIEW: шапка в колонку — */
    .td-interview__header { flex-direction: column; gap: 20px; }
    .td-interview__stats-col { flex: none; }
    .td-interview__title { font-size: 34px; }

    /* — REPLACE «Заменим отдел»: из абсолютного макета в поток — */
    .td-replace__inner { height: auto; }
    .td-replace__title { font-size: 40px; margin-bottom: 28px; }
    .td-replace__content { max-width: none; }
    .td-replace__text { max-width: none; }
    .td-replace__image {
        position: relative;
        left: auto; top: auto;
        width: 100%; max-width: 360px;
        margin: 28px auto 0;
    }
    .td-replace__image img.td-replace__main-img { width: 100%; }
    .td-replace__img-bottom { display: none; }
    .td-replace__sidebar {
        position: relative;
        right: auto; top: auto;
        width: 100%; max-width: 420px;
        margin: 28px auto 0;
    }
    .td-replace__line { display: none; }

    /* — SERVICES: шапка в колонку (слайдер остаётся, скролл внутри) — */
    .td-services__header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .td-services__title { font-size: 34px; }

    /* — REVIEWS (видео-слайд): левая+правая части → стек —
       Слайд во всю ширину экрана (был фикс 1160px и торчал за край,
       обрезая композит и заголовок). Композитному блоку задаём пропорции
       самой картинки (1680×1025), чтобы он целиком уменьшался под ширину
       экрана, а не обрезался. */
    .td-rv-slide { flex: 0 0 100%; flex-direction: column; height: auto; }
    .td-rv-slide__left {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 1680 / 1025;
    }
    .td-reviews__title { font-size: 34px; }
    .td-reviews__header { flex-wrap: wrap; gap: 16px; }

    /* — PROCESS «Как мы сделаем результат»: на планшете карточки 1 и 2 стоят
       в ряд (по половине), а тёмная карточка 3 — на всю ширину под ними, как
       в оригинале. Фикс-высоту 500px снимаем (высота по контенту). Коннекторы
       спозиционированы под десктоп (1160px), поэтому на планшете их убираем. */
    .td-process__title { font-size: 38px; }
    .td-process__cards { flex-wrap: wrap; }
    .td-process-card { min-height: 0; }
    .td-process-card--purple,
    .td-process-card--orange { flex: 1 1 calc(50% - 10px); }
    .td-process-card--dark { flex: 0 0 100%; }
    .td-process__conn, .td-process__conn-curve { display: none; }

    /* — GUARANTEE: 2 колонки → стек — */
    .td-guarantee__inner { flex-direction: column; gap: 32px; }
    .td-guarantee__content { width: 100%; }
    .td-guarantee__title { font-size: 38px; }
    .td-guarantee__visual {
        position: relative;
        left: auto; top: auto;          /* сброс десктопного смещения left:500px */
        width: 100%; max-width: 520px;
        margin: 8px auto 0;
    }
    .td-guarantee__contract { width: 100%; }
    .td-guarantee__bubble {
        left: auto; right: 0;            /* сброс десктопного left:360px → в правый верх */
        top: -16px;
        width: 45%; max-width: 170px;
    }

    /* — FOUNDER «Кто гарантирует результат»: 2 колонки → 1 — */
    .td-founder__inner { grid-template-columns: 1fr; gap: 36px; }
    .td-founder__title { font-size: 40px; }
    .td-founder__visual { justify-content: center; }

    /* — CLIENTS: шапка в колонку, логотипы 8 → 4 — */
    .td-clients__header { flex-direction: column; gap: 20px; }
    .td-clients__title { font-size: 38px; }
    .td-clients__logos { grid-template-columns: repeat(4, 1fr); }

    /* — READALL «Если дочитали…»: 3 колонки → 1; боковой декор убираем,
       воин переходит в поток под карточками по центру (как в оригинале),
       а не остаётся абсолютным сбоку. — */
    .td-readall__title { font-size: 40px; margin-bottom: 32px; }
    .td-readall__cols { grid-template-columns: 1fr; }
    .td-readall__deco-left,
    .td-readall__deco-right { display: none; }
    .td-readall__warrior {
        position: static;
        right: auto;
        bottom: auto;
        display: block;
        width: min(520px, 86%);
        margin: 16px auto 0;
    }

    /* — FAQ — */
    .td-faq__title { font-size: 40px; }

    /* — CONTACT: 2 колонки → 1, воин убрать — */
    .td-contact__inner { grid-template-columns: 1fr; }
    .td-contact__title { font-size: 38px; }
    .td-contact__warrior { display: none; }
    .td-contact__left { padding-bottom: 50px; }
}

/* ================= ≤768px — МОБИЛЬНЫЙ ================= */
@media (max-width: 768px) {
    .td-home .container { padding-left: 16px; padding-right: 16px; }
    .td-stats .container,
    .td-case-section .container { padding-left: 16px; padding-right: 16px; }

    /* ---------- HERO ---------- */
    .td-hero { height: auto; }
    .td-hero .container {
        display: block;
        height: auto;
        padding-top: 96px;   /* очистка фиксированной шапки */
        padding-bottom: 32px;
    }
    .td-hero__content { width: 100%; }
    .td-hero__title { font-size: 30px; line-height: 1.05; }
    .td-hero__subtitle { font-size: 22px; line-height: 1.05; margin-bottom: 28px; }
    .td-hero__bullets { margin-bottom: 32px; }
    .td-hero__bullets li { font-size: 16px; line-height: 24px; }
    .td-hero__image {
        position: relative; z-index: 2;
        width: 100%; max-width: 360px;
        right: auto; top: auto;
        margin: 8px auto 0;
    }
    .td-hero__deco-fire,
    .td-hero__deco-badge { display: none; }

    /* ---------- STATS 95% ---------- */
    .td-stats { height: auto; padding: 40px 0; }
    .td-stats .container { flex-direction: column; align-items: flex-start; gap: 18px; }
    .td-stats__big { font-size: 86px; }
    .td-stats__pct { font-size: 42px; }
    .td-stats__text { font-size: 24px; max-width: none; }
    .td-stats__right { width: 100%; margin-left: 0; }

    /* ---------- КЕЙСЫ ---------- */
    .td-case-section { padding: 12px 0; }
    .td-case-section .container { max-width: none; }
    .td-card { grid-template-columns: 1fr; }
    .td-card__body { padding: 28px 22px; gap: 16px; }
    .td-card__title { font-size: 26px; }
    .td-card__metrics { column-gap: 8px; }
    .td-num { font-size: 22px; }
    .td-badge { font-size: 13px; height: 24px; padding: 4px 9px; }
    .td-card__actions { flex-wrap: wrap; gap: 12px; }
    .td-btn--primary { font-size: 16px; padding: 18px 26px; }
    .td-btn--outline { font-size: 13px; padding: 16px 22px; }

    /* ---------- ФОРМА АУДИТА ---------- */
    .td-auditform__title { font-size: 32px; }
    .td-auditform__subtitle { margin-bottom: 28px; }
    .td-auditform__card { padding: 28px 20px; max-width: none; }
    .td-af-group { margin-bottom: 22px; }
    .td-af-btn { width: 100%; text-align: center; }

    /* ---------- общие заголовки секций ---------- */
    .td-sec99__title { font-size: 34px; }
    .td-benefits__title,
    .td-process__title,
    .td-guarantee__title,
    .td-founder__title,
    .td-clients__title,
    .td-readall__title,
    .td-faq__title,
    .td-contact__title,
    .td-replace__title { font-size: 30px; }
    .td-interview__title,
    .td-services__title,
    .td-reviews__title { font-size: 28px; }

    /* Заголовок «И это не просто…» над «Видео отзывы» на мобильном скрыт
       (как в оригинале) — так же, как в блоке «Интервью». */
    .td-reviews__header { display: none; }

    /* ---------- слайдеры: карточки под телефон ---------- */
    .td-wr-card { flex: 0 0 86vw; max-width: 420px; }
    .td-wr-card__layout { flex-direction: column; }
    .td-sc-card { flex: 0 0 86vw; max-width: 420px; }
    .td-srv-card { flex: 0 0 78vw; max-width: 360px; }

    /* ---------- INTERVIEW: видео над карточкой, высота карточки по контенту ----------
       На десктопе слайд — две колонки фиксированной высоты 460px, цитата обрезана
       до 6 строк, а атрибуция прижата к низу (margin-top:auto). На телефоне контент
       выше 460px, поэтому нижняя атрибуция наезжала на текст цитаты. Снимаем фикс-высоту
       и обрезку — блоки идут потоком друг за другом. */
    .td-interview__slide { flex-direction: column; height: auto; gap: 16px; }
    /* Видео горизонтальное, как в оригинале (16:9). Постер портретный —
       object-position смещаем вверх, чтобы лицо оставалось в кадре. */
    .td-interview__video { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .td-interview__video img { object-position: center 28%; }
    .td-interview__card { height: auto; padding: 32px 24px; gap: 14px; }
    .td-interview__card-title { font-size: 24px; }
    .td-interview__quote {
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
        font-size: 15px;
    }
    .td-interview__attribution { margin-top: 6px; }
    /* Заголовок «И это не просто…» на мобильном скрыт (как в оригинале):
       сразу идут навигация «Интервью» → видео → карточка. */
    .td-interview__header { display: none; }
    /* Кавычка-знак — вверху справа, на уровне бейджа (как в оригинале),
       а не внизу карточки. */
    .td-interview__quotemark { top: 80px; right: 20px; bottom: auto; font-size: 72px; }

    /* ---------- CLIENTS: логотипы 4 в ряд (как на /razrabotka/) ---------- */
    .td-clients__logos { grid-template-columns: repeat(4, 1fr); }
    /* картинки резиновые — вписываются в узкие ячейки 4-колоночной сетки */
    .td-clients__logo img { width: 100%; height: 100%; object-fit: contain; padding: 14px 10px; box-sizing: border-box; }

    /* ---------- CONTACT форма ---------- */
    .td-form__submit { width: 100%; }

    /* ---------- кнопки секций на всю ширину ---------- */
    .td-sec99__card-btn,
    .td-replace__btn { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* ============ ≤600px — ТЕЛЕФОН: PROCESS в один столбец ============
   На планшете карточки «Как мы сделаем результат» идут 2-в-ряд, но на
   узких экранах два столбца становятся слишком тесными — стекаем в колонку. */
@media (max-width: 600px) {
    .td-process-card--purple,
    .td-process-card--orange,
    .td-process-card--dark {
        flex: 0 0 100%;
        margin-top: 0;
    }
    /* Декоративная линия-завиток: десктопные координаты (right:137px) на узком
       экране уводили её влево «в никуда». Ставим компактно в правый верхний
       угол, справа от заголовка, как в оригинале на мобильном. */
    .td-process__line {
        top: 16px;
        right: 24px;
        left: auto;
        width: 100px;
        height: 85px;
    }
}

/* ================= ≤480px — УЗКИЙ ТЕЛЕФОН ================= */
@media (max-width: 480px) {
    /* HERO: как в оригинале (Tilda) — узкая центр. колонка (поля растут с шириной),
       размеры заголовка/подзаголовка крупнее. */
    .td-hero__content { max-width: 298px; margin-left: auto; margin-right: auto; }
    .td-hero__title { font-size: 30px; line-height: 0.97; }
    .td-hero__subtitle { font-size: 21px; line-height: 0.97; }

    .td-stats__big { font-size: 66px; }
    .td-stats__pct { font-size: 34px; }
    .td-stats__text { font-size: 21px; }

    .td-card__body { padding: 22px 16px; }
    .td-card__title { font-size: 22px; }
    .td-card__metrics { grid-template-columns: auto auto 16px auto auto; column-gap: 6px; }
    .td-num { font-size: 18px; }
    .td-badge { font-size: 11px; padding: 3px 7px; height: 22px; }

    .td-auditform__title { font-size: 26px; }

    /* крупные заголовки ещё меньше */
    .td-sec99__title,
    .td-benefits__title,
    .td-process__title,
    .td-guarantee__title,
    .td-founder__title,
    .td-clients__title,
    .td-readall__title,
    .td-faq__title,
    .td-contact__title,
    .td-replace__title { font-size: 26px; }

    /* CLIENTS: оставляем 4 в ряд (как на /razrabotka/) */
    .td-clients__logos { grid-template-columns: repeat(4, 1fr); }

    /* слайдер-карточки занимают почти весь экран */
    .td-wr-card,
    .td-sc-card { flex-basis: 90vw; }
    .td-srv-card { flex-basis: 84vw; }
}

/* ===== HERO «Увеличим прибыль» — раскладка по брейкпоинтам Tilda =====
   Центрированная колонка фикс. ширины (артборды 640/480/320), поэтому боковые
   поля растут с шириной экрана. Заголовок/подзаголовок крупнее на планшете.
   В конце файла — чтобы переопределять общие правила hero выше. */
@media (max-width: 959px) {
    .td-hero__content { max-width: 618px; margin-left: auto; margin-right: auto; }
    .td-hero__title { font-size: 35px; line-height: 0.97; }
    .td-hero__subtitle { font-size: 25px; line-height: 0.97; }
}
@media (max-width: 639px) {
    .td-hero__content { max-width: 458px; }
    .td-hero__title { font-size: 33px; }
    .td-hero__subtitle { font-size: 23px; }
}
@media (max-width: 480px) {
    .td-hero__content { max-width: 298px; }
    .td-hero__title { font-size: 30px; }
    .td-hero__subtitle { font-size: 21px; }
}

/* ===== CASE CARD «Подняли онлайн продажи» — как в оригинале (Tilda) =====
   Карточка — центрированный бокс фикс. ширины (артборды 640/480/320), поэтому
   поля по бокам растут с шириной экрана (карточка «плавает»). Одна колонка
   (тело сверху, скриншот снизу), мелкие теги, заголовок крупнее. */
@media (max-width: 959px) {
    .td-card { grid-template-columns: 1fr; max-width: 620px; margin-left: auto; margin-right: auto; border-radius: 25px; }
    .td-card__body { padding: 40px; gap: 16px; }
    .td-card__title { font-size: 35px; line-height: 1.05; }
    .td-card__tag { font-size: 10px; padding: 4px 12px; }
}
@media (max-width: 639px) {
    .td-card { max-width: 460px; border-radius: 15px; }
    .td-card__body { padding: 24px 20px; }
    .td-card__title { font-size: 30px; }
}
@media (max-width: 480px) {
    .td-card { max-width: 320px; border-radius: 11px; }
    .td-card__body { padding: 18px 15px; gap: 12px; }
    .td-card__title { font-size: 20px; line-height: 1.1; }
    .td-card__tag { font-size: 8px; padding: 3px 10px; letter-spacing: 0.3px; }
}

/* ===== BENEFITS «Делаем всё, чтобы маркетинг…» — как в оригинале (Tilda) =====
   Заголовок и карточки — в одной центрированной колонке фикс. ширины
   (артборды 640/480/320), поэтому боковые поля растут с шириной экрана. */
@media (max-width: 959px) {
    .td-benefits__title,
    .td-benefits__cards { max-width: 620px; margin-left: auto; margin-right: auto; }
    .td-benefits__title { font-size: 32px; line-height: 1.1; }
    .td-benefit-card { border-radius: 10px; }
    .td-benefit-card__body { padding: 30px 30px 22px; }
}
@media (max-width: 639px) {
    .td-benefits__title,
    .td-benefits__cards { max-width: 460px; }
    .td-benefits__title { font-size: 30px; }
    .td-benefit-card__body { padding: 24px 20px 18px; }
}
@media (max-width: 480px) {
    .td-benefits__title,
    .td-benefits__cards { max-width: 310px; }
    .td-benefits__title { font-size: 27px; line-height: 1.1; }
    .td-benefit-card__body { padding: 18px 15px 16px; }
}

/* ===== REPLACE «Заменим отдел маркетинга по цене одного сотрудника» =====
   Как в оригинале (Tilda) — центрированная колонка фикс. ширины (артборды
   640/480/320): боковые поля растут с экраном, иллюстрация и теги — в колонке. */
@media (max-width: 959px) {
    .td-replace__inner { max-width: 620px; margin-left: auto; margin-right: auto; }
    .td-replace__title { font-size: 42px; line-height: 1.1; }
    .td-replace__image { max-width: none; }
}
@media (max-width: 639px) {
    .td-replace__inner { max-width: 460px; }
    .td-replace__title { font-size: 34px; }
}
@media (max-width: 480px) {
    .td-replace__inner { max-width: 310px; }
    .td-replace__title { font-size: 28px; }
}

/* ===== GUARANTEE «Даём чёткие гарантии в договоре» — как в оригинале (Tilda) =====
   Контент и изображение — в центрированной колонке фикс. ширины (640/480/320):
   боковые поля растут с экраном. Чиним также line-height заголовка (был 55px). */
@media (max-width: 959px) {
    .td-guarantee__content,
    .td-guarantee__visual { max-width: 620px; margin-left: auto; margin-right: auto; }
    .td-guarantee__title { font-size: 45px; line-height: 1.05; }
    .td-guarantee__subtitle { font-size: 20px; }
}
@media (max-width: 639px) {
    .td-guarantee__content,
    .td-guarantee__visual { max-width: 460px; }
    .td-guarantee__title { font-size: 34px; }
    .td-guarantee__subtitle { font-size: 16px; }
}
@media (max-width: 480px) {
    .td-guarantee__content,
    .td-guarantee__visual { max-width: 310px; }
    .td-guarantee__title { font-size: 28px; line-height: 1.1; }
    .td-guarantee__subtitle { font-size: 14px; }
}

/* ===== FOUNDER «Кто гарантирует результат» — как в оригинале (Tilda) =====
   Тот же подход, что на /razrabotka/: контент в центрированной колонке
   фикс. ширины (640/480/320), крупный заголовок, мелкие лид/абзацы. */
@media (max-width: 959px) {
    .td-founder__content { max-width: 620px; margin-left: auto; margin-right: auto; }
    .td-founder__title { font-size: 42px; line-height: 1.1; margin-bottom: 18px; }
    .td-founder__lead { font-size: 20px; line-height: 1.35; margin-bottom: 22px; }
    .td-founder__text { font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 12px; }
}
@media (max-width: 639px) {
    .td-founder__content { max-width: 460px; }
    .td-founder__title { font-size: 40px; }
    .td-founder__lead { font-size: 19px; }
}
@media (max-width: 480px) {
    .td-founder__content { max-width: 308px; }
    .td-founder__title { font-size: 28px; margin-bottom: 12px; }
    .td-founder__lead { font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
    .td-founder__text { font-size: 12px; line-height: 1.55; margin-bottom: 8px; }
}

/* ===== READALL «Если вы дочитали до конца…» — как в оригинале (Tilda) =====
   Заголовок и карточки — в центрированной колонке фикс. ширины (640/480/320):
   боковые поля растут с экраном. Чиним line-height заголовка (был 75px). */
@media (max-width: 959px) {
    .td-readall__title { max-width: 620px; margin-left: auto; margin-right: auto; font-size: 48px; line-height: 1.1; }
    .td-readall__cols { max-width: 620px; margin-left: auto; margin-right: auto; grid-template-columns: repeat(2, 1fr); }
    .td-readall__item { border-radius: 10px; }
}
@media (max-width: 639px) {
    .td-readall__title { max-width: 460px; font-size: 34px; }
    .td-readall__cols { max-width: 460px; grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .td-readall__title { max-width: 310px; font-size: 23px; line-height: 1.15; }
    .td-readall__cols { max-width: 310px; }
}

/* ===== CONTACT «Расскажите нам о своих задачах» — как в оригинале (Tilda) =====
   Заголовок, подзаголовок и форма — в центрированной колонке фикс. ширины
   (640/480/320): боковые поля растут с шириной экрана. */
@media (max-width: 959px) {
    .td-contact__left { max-width: 620px; margin-left: auto; margin-right: auto; }
    .td-contact__title { font-size: 44px; line-height: 1.05; }
    .td-contact__sub { font-size: 18px; }
}
@media (max-width: 639px) {
    .td-contact__left { max-width: 460px; }
    .td-contact__title { font-size: 34px; }
}
@media (max-width: 480px) {
    .td-contact__left { max-width: 320px; }
    .td-contact__title { font-size: 24px; }
    .td-contact__sub { font-size: 15px; }
}