/* ============================================
   RESPONSIVE.CSS — Адаптивные стили
   Mobile-first подход
   ============================================ */

/* ==========================================
   ПЛАНШЕТЫ И ШИРОКИЕ ТЕЛЕФОНЫ (≤1024px)
   ========================================== */

@media (max-width: 1024px) {
  /* Хедер */
  .header__nav {
    display: none;
  }

  .header__phone {
    display: none;
  }

  .header__burger {
    display: flex;
  }

  /* Хедер CTA */
  .header__cta {
    display: none;
  }

  /* Статистика */
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2)::after {
    display: none;
  }

  .stat-item:nth-child(1),
  .stat-item:nth-child(2) {
    border-bottom: 1px solid;
    border-image: var(--gradient-divider) 1;
  }

  /* Медиафасады */
  .mediafacades__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Преимущества */
  .advantages__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Услуги */
  .services__grid {
    grid-template-columns: 1fr;
  }

  /* Кейсы */
  .cases__grid {
    grid-template-columns: 1fr 1fr;
  }

  .cases__grid .case-card:first-child {
    grid-column: span 1;
  }

  /* Клиенты */
  .clients-logos {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Футер */
  .footer__main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  /* Калькулятор */
  .facade-checkboxes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================
   МОБИЛЬНЫЕ (≤768px)
   ========================================== */

@media (max-width: 768px) {
  /* Базовый */
  :root {
    --section-padding: clamp(3rem, 6vw, 5rem);
  }

  /* Хедер */
  .header__inner {
    height: 64px;
  }

  .mobile-menu {
    top: 64px;
  }

  .header__logo-text span {
    display: none;
  }

  /* Hero */
  .hero {
    padding: 100px var(--container-padding) var(--space-3xl);
    min-height: 100svh;
  }

  .hero__title {
    letter-spacing: -0.02em;
    font-size: clamp(2rem, 5.5vw, 3.5rem);
  }

  .hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 320px;
  }

  /* Статистика */
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item::after {
    display: none;
  }

  .stat-item {
    padding: var(--space-xl) var(--space-lg);
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%) 1;
  }

  /* Медиафасады */
  .mediafacades__grid {
    grid-template-columns: 1fr;
  }

  .mediafacades__header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Карта */
  #map {
    height: 400px;
  }

  /* Калькулятор */
  .facade-checkboxes {
    grid-template-columns: 1fr;
  }

  .calc-nav {
    flex-direction: column;
    gap: var(--space-md);
  }

  .calc-nav .btn {
    width: 100%;
  }

  /* Кейсы */
  .cases__grid {
    grid-template-columns: 1fr;
  }

  .cases__grid .case-card:first-child {
    grid-column: span 1;
  }

  /* Клиенты */
  .clients-logos {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Преимущества */
  .advantages__grid {
    grid-template-columns: 1fr;
  }

  /* Контактная форма */
  .contact-form__grid {
    grid-template-columns: 1fr;
  }

  .contact-form__submit {
    flex-direction: column;
  }

  .contact-form__submit .btn {
    width: 100%;
  }

  .contact-form__box {
    padding: var(--space-xl);
  }

  /* Футер */
  .footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .footer__bottom-links {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  /* Шаги сервиса */
  .step {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* Сетки */
  .grid-2 {
    grid-template-columns: 1fr;
  }

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

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Калькулятор результат */
  .calc-result {
    padding: var(--space-xl);
  }
}

/* ==========================================
   МАЛЕНЬКИЕ ТЕЛЕФОНЫ (≤480px)
   ========================================== */

@media (max-width: 480px) {
  /* Увеличиваем боковые отступы на очень маленьких экранах */
  :root {
    --container-padding: 1.25rem;
  }

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

  .stat-item__value {
    font-size: clamp(2rem, 8vw, 3rem);
  }

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

  .clients-logos {
    grid-template-columns: repeat(2, 1fr);
  }

  .cases__filters {
    gap: var(--space-xs);
  }

  .footer__memberships {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Уменьшаем шрифт hero чтобы слова не разрывались */
  .hero__title {
    font-size: clamp(1.5rem, 7.5vw, 2rem);
  }

  .hero__subtitle {
    font-size: 0.9rem;
    padding: 0 var(--space-sm);
  }

  .hero__label {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    padding: 5px 12px;
    max-width: 100%;
    text-align: center;
    white-space: normal;
  }

  /* Кнопки не должны вылезать */
  .hero__actions .btn {
    max-width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Заголовки секций */
  .section-title {
    word-break: break-word;
  }
}

/* ==========================================
   ОЧЕНЬ ШИРОКИЕ ЭКРАНЫ (>1440px)
   ========================================== */

@media (min-width: 1440px) {
  :root {
    --container-max: 1400px;
  }

  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

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

/* ==========================================
   HOVER ТОЛЬКО ДЛЯ УСТРОЙСТВ С МЫШЬЮ
   ========================================== */

@media (hover: none) {
  .media-card:hover {
    transform: none;
    box-shadow: none;
  }

  .btn--primary:hover {
    transform: none;
  }

  .btn--outline:hover {
    transform: none;
  }

  .case-card:hover {
    transform: none;
  }

  .advantage-card:hover {
    transform: none;
  }
}

/* ==========================================
   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;
  }

  html {
    scroll-behavior: auto;
  }

  body::before {
    animation: none;
  }

  .hero__ambient--1,
  .hero__ambient--2,
  .hero__ambient--3 {
    animation: none;
  }

  .hero__scroll {
    animation: none;
  }
}

/* ==========================================
   PRINT
   ========================================== */

@media print {
  .header,
  .hero,
  .map-section,
  .calculator,
  .contact-form {
    display: none;
  }
}