/* ============================================================
   SERVICES-MOBILE.CSS — адаптивные стили страницы услуг
   Подключается после services.css
   ============================================================ */


/* ============================================================
   ПЛАНШЕТ (≤ 1200px)
   ============================================================ */
@media (max-width: 1200px) {
  .srv-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {

  /* ── Блокируем горизонтальный скролл ── */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* ── Сетка услуг — 2 колонки ── */
  .srv-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Калькулятор: на всю ширину, результат снизу ── */
  .calc-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .calc-result {
    position: static !important;
    order: 1;
  }

  /* ── Иконка категории — размер уже задан в services.css,
        дублируем здесь чтобы переопределить при необходимости ── */
  .srv-cat-icon {
    font-size: 40px;
    width: 68px;
    height: 68px;
  }

  /* ── Typewriter отключён — показываем текст статично ── */
  .srv-typewriter-line { opacity: 1 !important; visibility: visible !important; }
  .srv-typewriter-cursor { display: none; }
  .srv-hero-after { opacity: 1 !important; transform: none !important; visibility: visible !important; }

  /* ── Отключаем тяжёлые анимации карточек на планшете ── */
  .srv-card {
    animation: none !important;
  }
  .srv-card::after {
    animation: none !important;
  }
  .srv-card__price {
    animation: none !important;
  }
  .srv-card__list li {
    animation: none !important;
  }
  .srv-cat-icon {
    animation: none !important;
  }
  .cat-nav__btn.active {
    animation: none !important;
  }
  .cat-nav__btn .cat-nav__icon {
    animation: none !important;
  }

  /* ── Отключаем hover-трансформации (нет hover на тач) ── */
  .srv-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .srv-cat-header:hover .srv-cat-icon {
    transform: none !important;
    animation: none !important;
  }

  /* ── Навигация: бургер ── */
  .navbar__inner { padding: 0 28px; }
  .navbar__links { display: none; }
  .burger { display: flex !important; }

  /* ── Сбрасываем JS-эффекты на буквах навбара ── */
  .scatter-char {
    display: inline !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .logo-char {
    display: inline !important;
    transition: none !important;
    transform: none !important;
  }

  /* ── Pricing grid — 1 колонка ── */
  .srv-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .srv-plan--popular {
    transform: none;
    order: -1;
  }

  /* ── Секции — чуть меньше отступы ── */
  .srv-section { padding: 64px 0; }

  /* ── Hero — чуть меньше padding ── */
  .srv-hero { padding: 90px 0 52px; }
}


/* ============================================================
   МОБИЛЬНЫЙ (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

  .srv-hero { padding: 90px 0 40px; }
  .srv-section { padding: 48px 0; }

  /* Hero текст */
  .srv-hero__title { font-size: clamp(20px, 5vw, 26px); }
  .srv-hero__sub { font-size: 14px; }

  /* Cat-nav — горизонтальный скролл в одну строку */
  .cat-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cat-nav::-webkit-scrollbar { display: none; }

  .cat-nav__btn {
    flex-shrink: 0;
    font-size: 11px;
    padding: 6px 10px;
    gap: 4px;
  }
  .cat-nav__icon img {
    width: 16px !important;
    height: 16px !important;
  }

  /* Категория */
  .srv-cat-header { flex-direction: column; gap: 10px; text-align: center; }
  .srv-cat-icon { font-size: 32px; width: 56px; height: 56px; }

  /* Сетка карточек */
  .srv-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
  }

  /* Карточки */
  .srv-card { padding: 20px 16px 18px; }
  .srv-card__title { font-size: 15px; }
  .srv-card__price { font-size: 17px; }
  .srv-card__list li { font-size: 13px; }
  .srv-order-btn { width: 100%; text-align: center; }

  /* Pricing */
  .srv-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .srv-plan--popular { transform: none; order: -1; }

  /* FAQ */
  .faq-item__btn { font-size: 14px; padding: 16px; }

  /* CTA секция */
  .cta-contacts { flex-direction: column; align-items: center; gap: 12px; }
}


/* ============================================================
   МАЛЕНЬКИЙ МОБИЛЬНЫЙ (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {

  /* ── Hero ── */
  .srv-hero { padding: 80px 0 32px; }
  .srv-hero__title { font-size: 20px; }
  .srv-hero__sub { font-size: 13px; }
  .breadcrumb { font-size: 11px; }

  /* ── Типографика секций ── */
  .srv-section { padding: 40px 0; }
  .container { padding: 0 16px; }
  h2, .srv-section__title { font-size: 20px; }
  .section-intro { font-size: 13px; }
  .divider { margin-left: auto; margin-right: auto; }

  /* ── Cat-nav — ещё компактнее ── */
  .cat-nav { gap: 5px; padding-bottom: 4px; }
  .cat-nav__btn { font-size: 10px; padding: 5px 8px; gap: 3px; }
  .cat-nav__icon img { width: 14px !important; height: 14px !important; }
  .cat-nav__label { font-size: 10px; }

  /* ── Заголовок категории ── */
  .srv-cat-header { gap: 8px; }
  .srv-cat-icon { font-size: 26px; width: 48px; height: 48px; }

  /* ── Карточки услуг ── */
  .srv-grid { gap: 10px; margin-top: 16px; }
  .srv-card { padding: 16px 14px 14px; }
  .srv-card__head { gap: 4px; margin-bottom: 8px; }
  .srv-card__title { font-size: 14px; }
  .srv-card__price { font-size: 15px; }
  .srv-card__desc { font-size: 12px; }
  .srv-card__list li { font-size: 12px; }
  .srv-card__tech { font-size: 11px; }
  .srv-order-btn { font-size: 12px; padding: 10px 14px; }

  /* ── Калькулятор ── */
  .calc-wrap { gap: 14px; }
  .calc-option { font-size: 13px; padding: 10px 12px; }
  .calc-result__total { font-size: 22px; }
  .calc-result { padding: 16px; }

  /* ── Тарифы ── */
  .srv-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 300px;
    gap: 10px;
  }
  .srv-plan { padding: 20px 16px 18px; }
  .srv-plan__name { font-size: 16px; }
  .srv-plan__price { font-size: 26px; }
  .srv-plan__features li { font-size: 12px; }
  .srv-plan__btn { font-size: 13px; padding: 11px 16px; width: 100%; text-align: center; }

  /* ── DR-FAQ ── */
  .dr-faq-item__q { padding: 13px 12px; font-size: 13px; gap: 8px; }
  .dr-faq-item__num { display: none; }
  .dr-faq-item__icon-wrap { width: 28px; height: 28px; flex-shrink: 0; }
  .dr-faq-item__toggle { width: 24px; height: 24px; }
  .dr-faq-item__a-inner { font-size: 12.5px; padding: 12px; flex-direction: column; gap: 10px; }
  .dr-faq-item__stat { padding: 8px 10px; align-self: flex-start; }
  .dr-faq-item__stat-num { font-size: 16px; }

  /* ── CTA ── */
  .cta-section { padding: 44px 0; }
  .cta-contacts { gap: 10px; }
  .contact-form { grid-template-columns: 1fr; padding: 0 16px; gap: 10px; }
  .contact-form__full { grid-column: 1; }
  .form-input, .form-textarea { font-size: 14px; }

  /* ── Footer ── */
  .footer__grid { grid-template-columns: 1fr; gap: 20px; }
  .footer__col--about { grid-column: 1; }
  .footer__col--last { grid-column: 1; }
  .footer__logo { font-size: 18px; }
  .footer__desc { font-size: 12px; }
  .footer__links li { font-size: 13px; }
  .footer__col-title { font-size: 12px; }
  .footer__busy-wrap { flex-direction: column; gap: 8px; align-items: flex-start; }
  .footer__busy-bar { width: 100%; }
}

/* ============================================================
   FIX: КНОПКИ КАТЕГОРИЙ НЕ ВЫЛЕЗАЮТ ЗА ЭКРАН
   ============================================================ */
.cat-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.cat-nav__btn {
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  .cat-nav {
    gap: 6px;
  }
  .cat-nav__btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  .cat-nav__icon img {
    width: 16px !important;
    height: 16px !important;
  }
}

@media (max-width: 550px) {
  .cat-nav {
    gap: 5px;
  }
  .cat-nav__btn {
    padding: 5px 8px;
    font-size: 10px;
  }
  .cat-nav__icon img {
    width: 14px !important;
    height: 14px !important;
  }
}