/* Мобильная вёрстка.

   Заголовки и кнопки – по центру, абзацы – выключкой по ширине.
   Файл подключается на всех страницах последним, после собственных стилей
   страницы, поэтому переопределять ничего не приходится.

   Страницы документов помечены классом doc: там заголовки остаются слева –
   в договоре и политике нумерованные разделы по центру читаются плохо. */

@media (max-width: 640px) {

  /* Обёртка страницы одна на всю разметку – центрирование наследуется всему,
     что внутри: заголовкам, названиям карточек, подписям, подвалу. */
  body > div { text-align: center; }

  /* Абзацы – по ширине. Переносы включены, иначе на узком экране выключка
     рвёт строки большими промежутками. */
  p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Иконки не должны отрываться от текста под ними. В карточках «Вы узнаете
     себя» они остаются слева, в программе курса встают по центру – там иконка
     идёт прямо над номером занятия и названием роли, одним блоком. */
  div[style="margin-bottom:20px"]:has(svg) { margin-bottom: 10px !important; }
  div[style="margin-bottom:20px"]:has(svg) > svg { margin: 0 auto !important; }
  svg[style*="margin-bottom:14px"] {
    margin: 0 auto 8px !important;
  }
  /* Курс «Организатор конкурсов»: иконка в рамке 46×46 над заголовком карточки. */
  div[style*="width:46px"][style*="height:46px"][style*="margin-bottom:20px"] {
    margin: 0 auto 10px !important;
  }

  /* Кнопки на сайте – это ссылки с display:inline-flex в собственном стиле.
     Делаем их блочными по ширине содержимого и центрируем автополями.
     Карточки-ссылки (display:block) под это правило не попадают. */
  a[style*="display:inline-flex"] {
    display: flex !important;
    width: fit-content;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Строки из нескольких элементов – цена рядом с подписью, цифры, соцсети –
     это флексы. Горизонтальные центрируем по главной оси, вертикальные –
     по поперечной, иначе колонка центрируется по высоте и разъезжается. */
  div[style*="display:flex"]:not([style*="flex-direction:column"]):not(.cta-bar) {
    justify-content: center !important;
  }
  div[style*="display:flex"][style*="flex-direction:column"] {
    align-items: center !important;
  }

  /* Липкая панель внизу: там цена слева, кнопка справа – автополя ей мешают. */
  .cta-bar { justify-content: center !important; }
  .cta-bar a[style*="display:inline-flex"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }



  /* Частые вопросы и юридические развороты: вопрос и ответ читаются как список,
     поэтому здесь выключка влево, а не по центру и не по ширине. */
  details, details summary { text-align: left; }
  details p, details div, details li { text-align: left !important; }


  /* Подвал на телефоне: логотип сверху во всю ширину, «Контакты» и «Разделы»
     двумя колонками в одну строку, «Документы» снизу во всю ширину.
     Внутри колонок выключка влево – так две колонки читаются как список. */
  .site-footer {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 18px !important;
    text-align: left;
    font-size: 12px !important;
    line-height: 1.7 !important;
  }
  .site-footer > div:first-child,
  .site-footer > div:last-child { grid-column: 1 / -1; }
  .site-footer > div:first-child { text-align: center; }
  .site-footer > div:first-child img[alt="horeograf.by"] { margin-left: auto; margin-right: auto; }
  .site-footer > div:first-child > div[style*="max-width:300px"] {
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .site-footer p { text-align: left; }
  .site-footer div[style*="display:flex"] { justify-content: flex-start !important; }


  /* Карточки услуг и обучения: снимки чередуются – у второй карточки справа.
     У карточек обучения колонки заданы жёстко, поэтому переворачиваем и ширины:
     иначе текст уезжает в узкую колонку, а снимок занимает всю карточку. */
  .edu-card:nth-of-type(2) { grid-template-columns: 1fr 130px !important; }
  .edu-card:nth-of-type(2) > img,
  .serv-card:nth-of-type(2) > img { order: 3 !important; }
  .edu-card:nth-of-type(2) > div,
  .serv-card:nth-of-type(2) > div { order: 1 !important; }


  /* В узких колонках карточек выключка по ширине рвёт строки дырами –
     здесь текст идёт влево. */
  .edu-card p, .serv-card p { text-align: left !important; }


  /* Первый экран книги: три снимка в строку и на телефоне – они портретные,
     мельче не становятся до неразличимости. */
  .hero-shots { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }


  /* Стрелки листания относятся к десктопной ленте – на телефоне сетка. */
  .rail-arrows { display: none !important; }

  /* Галерея снимков: на телефоне по два кадра в строке, иначе фотографии
     занимают весь экран и блок растягивается на несколько экранов. */
  .photo-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Документы: заголовки и списки слева, текст по ширине как везде. */
  body > div.doc { text-align: left; }
  .doc ul, .doc ol { text-align: left; }
}

@media (max-width: 400px) {
  .edu-card:nth-of-type(2) { grid-template-columns: 1fr 112px !important; }
}