/* =========================================================
   АДАПТАЦИЯ ПОД ПЛАНШЕТЫ И ТЕЛЕФОНЫ (ориентир — 375px)
   ========================================================= */

@media (max-width: 900px) {
  .section { padding: 60px 0; }
  .section__title { font-size: 31px; }

  .hero { padding: 64px 0; }
  .hero__inner { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { font-size: 40px; }
  /* Фото — под кнопки, чтобы кнопка записи была видна без прокрутки */
  .hero__photo { max-width: 360px; }

  .page-hero { padding: 56px 0; }
  .page-hero h1 { font-size: 36px; }

  .facts { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .place { grid-template-columns: 1fr; }

  .course-card { grid-template-columns: 1fr; gap: 28px; padding: 36px; }
}

/* ---------- Телефон ---------- */
@media (max-width: 640px) {

  body { font-size: 16px; }
  .container { padding: 0 20px; }

  .section { padding: 48px 0; }
  .section__title { font-size: 26px; margin-bottom: 26px; }
  .lead { font-size: 17px; }

  /* ----- Меню превращается в выпадающий список ----- */
  .nav__toggle { display: block; }

  .nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--dark);
    box-shadow: 0 12px 24px rgba(58, 48, 42, .25);
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }

  .nav.is-open { max-height: 320px; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 20px;
  }

  .nav__list li { border-top: 1px solid rgba(255, 255, 255, .12); }

  .nav__list a {
    display: block;
    padding: 15px 0;
    font-size: 17px;
  }

  .nav__list a[aria-current="page"] { box-shadow: none; color: var(--accent); }

  /* ----- Кнопки на всю ширину ----- */
  .btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 22px;
    font-size: 16px;
  }

  .hero__buttons { flex-direction: column; gap: 12px; }

  /* ----- Первый экран ----- */
  .hero { padding: 48px 0; }
  .hero h1 { font-size: 31px; }
  .hero__text { font-size: 16px; }
  .hero__photo { max-width: none; }

  .page-hero { padding: 44px 0; }
  .page-hero h1 { font-size: 29px; }
  .page-hero p { font-size: 16px; }

  .blob--1 { width: 260px; height: 260px; top: -110px; right: -90px; }
  .blob--2 { width: 190px; height: 190px; bottom: -90px; left: -70px; }

  /* ----- Карточки ----- */
  .fact { padding: 24px 22px; }
  .fact__num { font-size: 34px; }

  .split__card { padding: 28px 22px; }
  .split__card h3 { font-size: 22px; }

  /* Цена уезжает под название, а не в правый край */
  .service {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 22px;
  }

  .service__price { text-align: left; }
  .service__sum { font-size: 26px; display: inline; }
  .service__time { display: inline; margin-left: 8px; }

  .steps li { padding-left: 50px; }

  /* Фото кабинета — в один столбик */
  .gallery { grid-template-columns: 1fr; gap: 16px; }

  .place__card { padding: 24px 22px; }

  .cta { padding: 32px 22px; border-radius: var(--radius); }
  .cta h2 { font-size: 25px; }
  .cta__buttons { flex-direction: column; gap: 12px; }
  .actions { flex-direction: column; gap: 12px; }

  .course-card { padding: 28px 22px; border-radius: var(--radius); }
  .course-card h2 { font-size: 25px; }

  .soon { padding: 22px; }

  /* ----- Подвал ----- */
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 28px; }
  .page-hero h1 { font-size: 26px; }
  .section__title { font-size: 24px; }
}