/* ============================================================
   responsive.css — адаптив для мобильных и узких экранов
   Подключается ПОСЛЕДНИМ, дополняет style.css, не меняя его.
   Обновлено: 2026-06-15 (v2: бургер-меню, заголовки, футер).
   Откат: удалить файл + <link> и блок бургера/скрипта в header.php.
   ============================================================ */

/* 1. Базовая защита от горизонтального переполнения ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }

.news-detail-content img, .news-detail-image,
.page-content-wrapper img, .distance-content img { height: auto; }

.news-detail-content, .page-content-wrapper, .news-detail-title,
.section-title, .hp-hero-content, .specialty-content,
.news-card-content, .news-detail-meta,
.site-footer, .site-footer-brand, .site-footer-title, .site-footer-copy {
  overflow-wrap: break-word; word-wrap: break-word; word-break: break-word;
}

.news-detail-content table, .page-content-wrapper table,
.distance-content table {
  display: block; width: 100%; max-width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* 2. Сетки: на узких экранах — одна колонка ------------------ */
@media (max-width: 700px) {
  .news-grid, .news-page-grid, .spec-grid, .specialties-list,
  .qa-grid, .hp-actions-grid, .cta-grid, .cta-form-row,
  .contacts-layout, .contacts-cards, .contacts-feedback-row,
  .specialty-grid, .specialties-page-stats, .site-footer-main {
    grid-template-columns: 1fr !important;
  }
  .albums-grid, .photos-grid, .news-detail-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }
}

/* 3. Бургер-меню (главная навигация на мобиле) --------------- */
.nav-burger { display: none; }

@media (max-width: 768px) {
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px; padding: 11px; flex: 0 0 auto;
    border: 1px solid #d6dee9; border-radius: 10px; background: #f8fafd;
    cursor: pointer; margin-left: 8px;
  }
  .nav-burger span {
    display: block; width: 100%; height: 2px; border-radius: 2px;
    background: #1f2a3a; transition: transform .2s ease, opacity .2s ease;
  }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* меню скрыто, пока не нажат бургер; при .open — вертикальный список */
  .nav-wrap.open { border-top: 1px solid #eee; }
  .nav-wrap.open .main-menu {
    display: flex !important; flex-direction: column; gap: 0;
    padding: 6px 0 12px;
  }
  .nav-wrap.open .main-menu .menu-link {
    padding: 14px 6px; border-bottom: 1px solid #eef1f5; padding-right: 30px;
  }
  /* подменю раскрываем прямо в потоке, без абсолютного позиционирования */
  .nav-wrap.open .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; box-shadow: none; min-width: 0;
    background: transparent; padding: 0 0 0 16px;
  }
  .nav-wrap.open .dropdown a { padding: 11px 6px; }

  /* тёмная тема */
  body.dark-mode .nav-burger { background: #111826; border-color: #2a3444; }
  body.dark-mode .nav-burger span { background: #e5ebf5; }
}

/* 4. Шапка на узких экранах --------------------------------- */
@media (max-width: 600px) {
  .brand-subtitle { display: none; }          /* длинное название прячем, остаётся БМТ */
  .header-search-form { display: none; }       /* поиск дублируется блоком на главной */
  .header-main { padding: 12px 0; }
}

/* 5. Отступы и типографика на телефонах --------------------- */
@media (max-width: 576px) {
  .container { padding-left: 14px; padding-right: 14px; }

  .section-title,
  .specialties-page .section-title, .news-page .section-title,
  .teachers-page-head .section-title, .gallery-page .section-title,
  .gallery-album-page .section-title, .homepage-v2 .hp-section-title,
  .teacher-profile-section-title {
    font-size: clamp(1.35rem, 5.6vw, 1.8rem) !important;
    line-height: 1.2 !important; white-space: normal !important;
  }
  .section-subtitle { font-size: 0.95rem; }

  .hp-hero-content h1, .hp-hero-title {
    font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.2;
  }
  .hp-hero-inner, .hp-hero-content { padding-top: 24px; padding-bottom: 24px; }
  .hp-hero-actions { flex-wrap: wrap; }
  .hp-hero-actions .btn, .hp-hero-btn-main, .hp-hero-btn-ghost {
    width: 100%; justify-content: center;
  }

  .news-detail-card { padding: 16px !important; }

  .news-filter-actions { flex-wrap: wrap; }
  .news-filter-btn, .news-filter-reset { width: 100%; }

  .site-footer-bottom-row { flex-direction: column; gap: 10px; align-items: flex-start; }
  .site-footer-bottom-links { flex-wrap: wrap; gap: 8px 14px; }
  .site-footer-social { flex-wrap: wrap; }
}

/* 6. Очень узкие экраны ------------------------------------- */
@media (max-width: 380px) {
  .container { padding-left: 10px; padding-right: 10px; }
  body { font-size: 15px; }
  .specialties-page-stats, .contacts-cards { grid-template-columns: 1fr !important; }
  .hp-action-card { padding: 14px !important; }
}

/* 7. Удобные тач-таргеты ------------------------------------- */
@media (max-width: 576px) {
  .btn, .news-filter-btn, .btn-details,
  .hp-hero-btn-main, .hp-hero-btn-ghost {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

/* 8. Футер: длинное название (пилюля) и ссылки переносим ----- */
@media (max-width: 600px) {
  .site-footer-badge {
    display: block; max-width: 100%; white-space: normal;
    word-break: break-word; text-align: left; border-radius: 14px;
  }
  .site-footer-bottom-links { flex: 1 1 auto !important; justify-content: flex-start; }
  .site-footer-bottom-links a { white-space: normal; word-break: break-word; }
}
.section-subtitle { overflow-wrap: break-word; max-width: 100%; }