/* ═══════════════════════════════════════
   Файл: responsive.css
   Описание: Медиа-запросы для адаптивности лендинга СТРОЙ-ДОМ.
             Поддерживаемые breakpoints:
             - Desktop wide: до 1920px (baseline в style.css)
             - Desktop mid:  до 1440px
             - Desktop sm:   до 1280px
             - Tablet:       до 1024px
             - Tablet sm:    до 768px
             - Mobile:       до 480px
             - Mobile xs:    до 375px
             Подход: Desktop-first (медиа-запросы идут от большего к меньшему).
   Проект: Лендинг СТРОЙ-ДОМ
   Автор: Дмитрий Гальченко
   Дата: 2026-04-10
═══════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   BREAKPOINT: до 1440px
   Уменьшаем типографику и отступы для средних десктопов.
   На 1440px лендинг должен выглядеть так же хорошо как на 1920px.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1440px) {

  /* Заголовок hero чуть меньше на средних экранах */
  .hero__title {
    font-size: 4rem; /* ~64px вместо 72px */
  }

  /* Уменьшаем числа в статистике */
  .stats__number {
    font-size: 3.5rem;
  }

  .stats__number--large {
    font-size: 2.8rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   BREAKPOINT: до 1280px
   Стандартный десктоп. Небольшие коррекции сетки и типографики.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {

  /* Уменьшаем горизонтальные отступы контейнера */
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Заголовки секций чуть меньше */
  .section__title {
    font-size: 2rem; /* ~32px вместо 36px */
  }

  /* Hero-заголовок */
  .hero__title {
    font-size: 3.5rem; /* ~56px */
  }

  /* Уменьшаем вертикальные отступы секций */
  .section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  /* Сетка "О компании" — уменьшаем gap */
  .about__grid {
    gap: 3rem;
  }

  /* Навигация шапки — уменьшаем отступы между пунктами */
  .nav__list {
    gap: 1.5rem;
  }

  /* Сетка проектов — оставляем 3 колонки, но меньше gap */
  .projects__grid {
    gap: 1rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   BREAKPOINT: до 1024px (Tablet landscape / большой планшет)
   Переходим от 3-колоночных сеток к 2-колоночным.
   Навигация шапки пока остаётся горизонтальной.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* ── Шапка ────────────────────────────────────────────────────── */

  /* Скрываем кнопку CTA в шапке — она есть в мобильном меню */
  .header__cta {
    display: none;
  }

  /* Показываем бургер */
  .burger {
    display: flex;
  }

  /* Показываем мобильное меню (display: block — visible когда --open) */
  .mobile-menu {
    display: block;
  }

  /* Скрываем горизонтальную навигацию */
  .header__nav {
    display: none;
  }

  /* Скрываем контакты в шапке - на мобильном остаётся только лого + бургер */
  .header__contacts {
    display: none;
  }

  /* ── Hero ─────────────────────────────────────────────────────── */

  .hero__title {
    font-size: 3rem; /* 48px */
  }

  .hero__subtitle {
    font-size: 1rem;
  }

  /* ── Статистика ───────────────────────────────────────────────── */

  /* 3 колонки оставляем, но уменьшаем padding карточек */
  .stats__card {
    padding: 2rem 1rem;
  }

  .stats__number {
    font-size: 3rem;
  }

  .stats__number--large {
    font-size: 2.5rem;
  }

  /* ── Проекты ──────────────────────────────────────────────────── */

  /* Переходим с 3 колонок на 2 */
  .projects__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Производство ─────────────────────────────────────────────── */

  /* Галерея производства — 2 колонки вместо 3 */
  .production__gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Футер ────────────────────────────────────────────────────── */

  /* 2 колонки вместо 3 */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  /* Бренд на всю ширину первой строки */
  .footer__brand {
    grid-column: 1 / -1; /* Растягиваем на всю строку */
  }
}


/* ══════════════════════════════════════════════════════════════════════
   BREAKPOINT: до 768px (Tablet portrait / стандартный планшет)
   Переходим к одноколоночным сеткам для большинства блоков.
   Типографика активно уменьшается.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Базовые размеры ──────────────────────────────────────────── */

  /* Секции — меньше вертикальных отступов */
  .section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Заголовки секций */
  .section__title {
    font-size: 1.75rem; /* ~28px */
    margin-bottom: 2rem;
  }

  /* ── Шапка ────────────────────────────────────────────────────── */

  /* Уменьшаем высоту шапки */
  :root {
    --header-height: 64px;
  }

  /* ── Hero ─────────────────────────────────────────────────────── */

  .hero__title {
    font-size: 2.5rem;
    white-space: normal; /* Убираем nowrap - на мобильном текст должен переноситься */
    letter-spacing: 0.04em;
  }

  /* Центрируем контент hero на планшете */
  .hero__content {
    margin-left: auto;
    text-align: center;
    align-items: center;
  }

  .hero__eyebrow {
    justify-content: center;
  }

  .hero__rule {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__actions {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero__subtitle {
    font-size: 0.9375rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
  }

  .hero__cta {
    padding: 0.875rem 2rem;
  }

  /* Фото в секции О компании - меньше высота */
  .about__photo {
    min-height: 300px;
  }

  /* ── О компании ───────────────────────────────────────────────── */

  /* Одна колонка: текст сверху, фото снизу */
  .about__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Фото-заглушка после текста */
  .about__image {
    order: -1; /* Фото наверх — визуально привлекательнее */
  }

  .placeholder--tall {
    min-height: 300px;
  }

  /* ── Статистика ───────────────────────────────────────────────── */

  /* Одна колонка вместо трёх */
  .stats__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Горизонтальные карточки статистики (иконка + текст в ряд) */
  .stats__card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    text-align: left;
  }

  .stats__number {
    font-size: 2.5rem;
    flex-shrink: 0;
    margin-bottom: 0;
    min-width: 100px;
  }

  .stats__number--large {
    font-size: 2rem;
  }

  /* ── Направления ──────────────────────────────────────────────── */

  /* Одна колонка */
  .directions__grid {
    grid-template-columns: 1fr;
  }

  /* ── Производство ─────────────────────────────────────────────── */

  /* Одна колонка */
  .production__gallery {
    grid-template-columns: 1fr;
  }

  .production__text {
    font-size: 1rem;
  }

  /* ── Проекты ──────────────────────────────────────────────────── */

  /* Две колонки оставляем */
  .projects__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  /* ── Модальное окно ───────────────────────────────────────────── */

  .modal {
    padding: 1rem;
    overflow-y: auto;
  }

  .modal__dialog {
    padding: 1.5rem;
    max-width: calc(100vw - 2rem);
    max-height: 90vh;
    border-radius: 12px;
  }

  .modal__dialog--wide {
    max-width: calc(100vw - 2rem);
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal__title {
    font-size: 1.5rem;
  }

  /* ── Футер ────────────────────────────────────────────────────── */

  /* Одна колонка */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer__brand {
    grid-column: auto; /* Отменяем растяжку на всю строку */
  }
}


/* ══════════════════════════════════════════════════════════════════════
   BREAKPOINT: до 480px (Mobile)
   Одноколоночные сетки везде. Максимальная оптимизация для телефонов.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Базовые размеры ──────────────────────────────────────────── */

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .section__title {
    font-size: 1.5rem; /* 24px */
  }

  /* Декоративная линия под заголовком — уже */
  .section__title::after {
    width: 40px;
    height: 3px;
  }

  /* ── Hero ─────────────────────────────────────────────────────── */

  .hero {
    min-height: 100svh;
  }

  .hero__title {
    font-size: 2.25rem;
    white-space: normal;
    letter-spacing: 0.03em;
  }

  .hero__eyebrow {
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    gap: 0.75rem;
    justify-content: center;
  }

  .hero__eyebrow-line {
    width: 20px;
  }

  .hero__subtitle {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    max-width: 90vw;
  }

  /* Кнопки hero - в колонку */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero__actions .btn {
    text-align: center;
    justify-content: center;
  }

  /* Фоновые SVG-иллюстрации - скрываем на мобильном для чистоты */
  .section__art {
    display: none;
  }

  /* Стрелка прокрутки — меньше на мобильном */
  .hero__scroll-hint svg {
    width: 28px;
    height: 28px;
  }

  /* ── Шапка ────────────────────────────────────────────────────── */

  .header__logo-img {
    height: 48px;
  }

  .placeholder--logo {
    width: 140px;
    height: 44px;
  }

  /* ── О компании ───────────────────────────────────────────────── */

  .about__paragraph {
    font-size: 1rem;
    line-height: 1.7;
  }

  .about__photo {
    min-height: 220px;
  }

  .placeholder--tall {
    min-height: 220px;
  }

  /* ── Фото в секциях ───────────────────────────────────────────── */

  .production__photo {
    height: 200px;
  }

  .project-card__photo {
    height: 180px;
  }

  .direction-card__img {
    height: 160px;
  }

  .card-detail__photo {
    height: 200px;
  }

  /* ── Статистика ───────────────────────────────────────────────── */

  /* На маленьком экране возвращаем вертикальное расположение карточки */
  .stats__card {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
  }

  .stats__number {
    font-size: 2.25rem;
    min-width: auto;
  }

  .stats__number--large {
    font-size: 1.75rem;
  }

  .stats__label {
    font-size: 0.875rem;
  }

  /* ── Направления ──────────────────────────────────────────────── */

  /* Карточки направлений — один столбец (уже было в 768px) */
  .direction-card__title {
    font-size: 1.125rem;
  }

  /* ── Проекты ──────────────────────────────────────────────────── */

  /* На мобильном — одна колонка */
  .projects__grid {
    grid-template-columns: 1fr;
  }

  /* Заглушка фото проекта — чуть ниже */
  .placeholder--project-photo {
    height: 200px;
  }

  /* ── Производство ─────────────────────────────────────────────── */

  .production__text {
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
  }

  .placeholder--production {
    min-height: 180px;
  }

  /* ── Контакты ─────────────────────────────────────────────────── */

  .contacts__info {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .contact-item__value {
    font-size: 1rem;
  }

  /* CTA контактов — полная ширина */
  .contacts__cta {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* ── Кнопки ───────────────────────────────────────────────────── */

  /* Большая кнопка на мобильном — уменьшаем padding */
  .btn--lg {
    padding: 0.875rem 2rem;
    font-size: 0.875rem;
  }

  /* ── Футер ────────────────────────────────────────────────────── */

  .footer {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
  }


  /* ── Модальное окно ───────────────────────────────────────────── */

  .modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal__dialog {
    padding: 1.25rem;
    max-width: 100%;
    max-height: 85vh;
    max-height: 85dvh;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    transform: translateY(24px);
    transition: transform var(--transition-base);
  }

  /* Открытый: выезжает снизу вверх */
  .modal--open .modal__dialog {
    transform: translateY(0);
  }

  .modal__title {
    font-size: 1.375rem;
    padding-right: 2rem; /* Место под крестик */
  }

  .modal__subtitle {
    font-size: 0.875rem;
  }

  /* Инпуты формы — чуть выше для удобства касания */
  .form-group__input,
  .form-group__textarea {
    padding: 0.875rem 1rem;
    font-size: 1rem; /* iOS не зумит поля с font-size >= 16px */
  }

  .form-group__textarea {
    min-height: 80px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   BREAKPOINT: до 375px (Mobile XS — iPhone SE и аналоги)
   Финальная оптимизация для самых маленьких экранов.
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {

  /* Самые мелкие заголовки */
  .hero__title {
    font-size: 1.75rem; /* 28px */
  }

  .section__title {
    font-size: 1.375rem;
  }

  /* Логотип ещё компактнее */
  .placeholder--logo {
    width: 120px;
    height: 40px;
  }

  /* Числа статистики */
  .stats__number {
    font-size: 2rem;
  }

  .stats__number--large {
    font-size: 1.625rem;
  }

  /* Кнопки — меньше padding */
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.75rem;
  }

  .btn--lg {
    padding: 0.75rem 1.5rem;
  }

  /* Заголовок модала */
  .modal__title {
    font-size: 1.25rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   АДАПТИВНОСТЬ: МОДАЛ-ДЕТАЛИ КАРТОЧКИ
══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* На планшете — убираем отступы у тела попапа */
  .card-detail__body {
    padding: var(--space-6) var(--space-6) var(--space-8);
  }

  /* Фото-заглушка чуть ниже */
  .placeholder--detail-photo {
    height: 240px;
  }

  /* Заголовок меньше */
  .card-detail__title {
    font-size: var(--text-2xl);
    padding-right: var(--space-8);
  }
}

@media (max-width: 480px) {
  /* На мобильном — широкий диалог тоже drawer (выезжает снизу) */
  .modal--card .modal__dialog--wide {
    max-width: 100%;
    max-height: 85vh;
    max-height: 85dvh;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    transform: translateY(24px);
  }

  .modal--card.modal--open .modal__dialog--wide {
    transform: translateY(0);
  }

  /* Фото уменьшаем */
  .placeholder--detail-photo {
    height: 180px;
  }

  .card-detail__body {
    padding: var(--space-5) var(--space-5) var(--space-8);
  }

  .card-detail__title {
    font-size: var(--text-xl);
  }

  .card-detail__description {
    font-size: var(--text-base);
  }

  /* CTA на всю ширину */
  .card-detail__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   УТИЛИТЫ ДЛЯ ДОСТУПНОСТИ
   Не связаны с breakpoints, но важны для всех устройств.
══════════════════════════════════════════════════════════════════════ */

/* Класс для визуально скрытых элементов (только для screen readers).
   Используется там где нужен текст для доступности, но не для глаз. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Убираем анимации для пользователей с prefers-reduced-motion.
   Важно для людей с вестибулярными расстройствами. */
@media (prefers-reduced-motion: reduce) {
  /* Отключаем все CSS-анимации */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Отключаем плавный скролл */
  html {
    scroll-behavior: auto;
  }

  /* Стрелка прокрутки — без анимации */
  .hero__scroll-hint {
    animation: none;
  }
}