/* ═══════════════════════════════════════════════════════════════
   MOBILE.CSS — Mobile-first progressive enhancement
   Base = mobile (≤576 px). Enhanced via min-width breakpoints.
   Complements hero.css / header.css / landing.css / scale.css.
   Не дублирует существующие max-width-правила — только добавляет.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   BASE  — все экраны (акцент: ≤576 px)
   ───────────────────────────────────────────────────────────── */

/* 1. Readability: line-height 1.5 на всех размерах */
.s-lead {
  line-height: 1.5;
}

/* 2. Утечка текста: countdown-open__text имеет white-space:nowrap
      — на узких экранах вылезает за границу */
.countdown-open__text {
  white-space: normal;
}


/* ─────────────────────────────────────────────────────────────
   MOBILE S — 375 px и ниже (iPhone SE, старые Android)
   ───────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
  /* Шрифты секций */
  .s-lead   { font-size: 0.9375rem; }

  /* Бейджи: разрешаем перенос на 2 строки */
  .badges   { flex-wrap: wrap; }
  .badges__item { font-size: 12px; padding: 6px 10px; }

  /* Why-карточки: уменьшаем padding */
  .why-card { padding: 16px; min-height: 140px; }

  /* Сетка партнёров: одна колонка */
  .partners__grid { grid-template-columns: 1fr; gap: 12px; }

  /* Новостные карточки: полная ширина */
  .news-card { flex: 0 0 min(300px, 86vw); }

  /* Кнопки CTA: 100% ширины */
  .btn { min-width: 0; width: 100%; }

  /* Countdown-open: стопкой */
  .countdown-open { flex-direction: column; align-items: stretch; }
  .countdown-open__cta { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE — ≤576 px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 576px) {


  /* 4. About: когда две колонки схлопываются в одну,
        правая колонка с картами не нуждается в верхнем отступе 51px */
  .about__cards {
    margin-top: 0;
  }

  .about-card {
    padding: 20px;
  }

  .about-card__title {
    font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  }

  /* 5. Doc-card: фиксированная высота 372px ломает контент на мобиле */
  .doc-card {
    height: auto;
    min-height: 180px;
    padding: 20px;
  }

  /* 6. FAQ help-виджет: при схлопывании в 1 колонку должен быть full-width */
  .faq-help,
  .faq-help__stage {
    max-width: 100%;
  }

  /* 7. Footer: логотип и навигация — стопкой на маленьких экранах */
  .site-footer__top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 36px;
  }

  .site-footer__nav {
    gap: 4px 10px;
  }

  .site-footer__nav a {
    font-size: 14px;
  }

  .site-footer__inner {
    padding-top: 36px;
  }

  /* 8. Team scroll: чуть меньше карточки для лёгкого свайпа */
  .team-card {
    flex: 0 0 180px;
  }

  .team-card__photo {
    width: 180px;
    height: 180px;
  }

  .team-card__name {
    font-size: 16px;
  }

  .team-scroll {
    margin-bottom: 48px;
    gap: 16px;
  }

  .teamdocs__team-label {
    font-size: 1.1rem;
  }

  /* 9. Сетка партнёров: 2 колонки + меньше отступов */
  .partners__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .partners__cta {
    margin-top: 20px;
    gap: 12px;
  }

  /* Партнёр-лого: единый размер в сетке */
  .partner-logo {
    max-width: 100%;
    height: auto;
  }

  /* 10. Уменьшаем gap в why/ld-card для дыхания */
  .why__grid { gap: 8px; }
  .why__row  { gap: 8px; }

  /* 11. Кнопки счётчика таймера: гарантируем растяжение */
  .countdown__cta.btn,
  .countdown-open__cta.btn {
    width: 100%;
    justify-content: center;
  }

  /* 12. Social: min touch target */
  .social-btn,
  .social-btn img {
    width: 52px;
    height: 52px;
  }
}

/* ─────────────────────────────────────────────────────────────
   TABLET — 577 px и выше
   ───────────────────────────────────────────────────────────── */
@media (min-width: 577px) {
  /* Партнёры: 3 колонки восстанавливаем */
  .partners__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }

  /* Принудительные <br> восстанавливаем */
  /* About: возвращаем умеренный отступ для правой колонки */
  .about__cards {
    margin-top: 24px;
  }

  /* Doc-card: автовысота до планшета ≥768 */
  .doc-card {
    height: auto;
    padding: 24px;
  }

  /* FAQ help: возвращаем к ограниченной ширине */
  .faq-help,
  .faq-help__stage {
    max-width: 379px;
  }

  /* Docs: 2 колонки на планшете */
  .docs-grid {
    flex-wrap: wrap;
  }

  .docs-grid .doc-card {
    flex: 1 1 calc(50% - 12px);
  }

  /* Team: чуть крупнее */
  .team-card { flex: 0 0 220px; }
  .team-card__photo { width: 220px; height: 220px; }
}

/* ─────────────────────────────────────────────────────────────
   TABLET MID — 768 px и выше
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  /* s-lead: комфортный межстрочный на планшете */
  .s-lead {
    line-height: 1.45;
  }

  /* Footer top-row: восстанавливаем горизонталь */
  .site-footer__top-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 64px;
  }

  .site-footer__nav a {
    font-size: 16px;
  }

  .site-footer__inner {
    padding-top: 64px;
  }

  /* About cards: средний отступ */
  .about__cards {
    margin-top: 32px;
  }

  .about-card {
    padding: 28px;
  }

  .about-card__title {
    font-size: 1.35rem;
  }

  /* Team: приближаемся к десктопу */
  .team-card { flex: 0 0 240px; }
  .team-card__photo { width: 240px; height: 240px; }

  .team-scroll {
    margin-bottom: 80px;
    gap: 20px;
  }

  .teamdocs__team-label {
    font-size: 1.35rem;
  }

  /* Countdown-open: текст может переноситься, чтобы кнопка не вылезала за рамку */
  .countdown-open__text {
    white-space: normal;
  }

  /* Кнопки таймера: авто-ширина на планшете */
  .countdown__cta.btn,
  .countdown-open__cta.btn {
    width: auto;
    justify-content: center;
  }

  /* Social: полный размер */
  .social-btn,
  .social-btn img {
    width: 58px;
    height: 58px;
  }
}

/* ─────────────────────────────────────────────────────────────
   SMALL DESKTOP — 993 px и выше
   ───────────────────────────────────────────────────────────── */
@media (min-width: 993px) {
  /* Docs: 4 в ряд */
  .docs-grid {
    flex-wrap: nowrap;
  }

  .docs-grid .doc-card {
    flex: 1 1 0;
    height: 340px;
  }

  /* About: восстанавливаем оригинальный отступ Figma */
  .about__cards {
    margin-top: 51px;
  }

  .about-card {
    padding: 32px;
  }

  .about-card__title {
    font-size: 24px;
  }

  /* Team: полный размер */
  .team-card { flex: 0 0 278px; }
  .team-card__photo { width: 278px; height: 278px; }

  .team-scroll {
    margin-bottom: 128px;
    gap: 24px;
  }

  .teamdocs__team-label {
    font-size: 24px;
  }

  /* FAQ help: фиксированная ширина */
  .faq-help,
  .faq-help__stage {
    max-width: 379px;
  }
}

/* ─────────────────────────────────────────────────────────────
   STANDARD DESKTOP — 1201 px и выше
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1201px) {
  /* Docs: полная высота Figma */
  .docs-grid .doc-card {
    height: 372px;
  }

  /* s-lead: Figma line-height */
  .s-lead {
    line-height: 130%;
  }
}

/* ─────────────────────────────────────────────────────────────
   ULTRAWIDE — >1921 px: сдерживаем рост, сохраняем читаемость
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1921px) {
  .section__inner,
  .scale__inner {
    max-width: min(1600px, 90vw);
  }

  .hero__main {
    max-width: min(1600px, 90vw);
  }
}

/* ─────────────────────────────────────────────────────────────
   ACCESSIBILITY — prefers-reduced-motion
   Убираем анимации для пользователей с вестибулярными нарушениями
   ───────────────────────────────────────────────────────────── */
@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;
  }

  /* Исключения: скрытие/показ через visibility + opacity — оставляем мгновенными */
  .faq-help__intro,
  .faq-help__chat,
  .nav,
  .header__backdrop {
    transition: none !important;
  }
}