/* ============================================================
   Иллюстрация в уроке: четыре способа поставить кадр.

   Одинаковые полосы во всю колонку через каждые две тысячи знаков
   читаются как обои: глаз перестаёт их замечать через три урока.
   Поэтому кадр ставится по-разному — поперёк колонки, узкой полосой,
   сбоку с обтеканием слева или справа, — и выбор зависит от того,
   что на кадре и сколько вокруг текста.

   Файл один на две стороны: уроки внутри платформы (.theory) и
   страницы уроков на витрине (.lp-body). Оформление схем когда-то
   продублировали в двух местах, и копии разошлись; здесь этого не
   повторяем.

   Своих цветов и радиусов тут нет — только токены, углы прямые.
   ============================================================ */

.fig-photo { margin: 28px 0; }

.fig-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--fig-line);
  background: var(--bg2);
}

.fig-photo figcaption {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fig-mute);
}

/* ---------- Поперёк колонки ----------
   Кадр в полный рост занимает весь экран и читается как обложка,
   отрывая человека от текста. Высоту режем, лишнее обрезается. */
.fig-photo.wide img,
.fig-photo:not(.side):not(.band) img {
  max-height: 320px;
  object-fit: cover;
}

.fig-photo.wide figcaption,
.fig-photo:not(.side):not(.band) figcaption {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Узкая полоса ----------
   Для панорам и для мест, где нужна не картинка, а пауза: кадр
   работает отбивкой между частями главы. */
.fig-photo.band img { max-height: 190px; object-fit: cover; }
.fig-photo.band figcaption { text-align: center; }

/* ---------- Сбоку, текст обтекает ----------
   Самый незаметный способ: кадр не разрывает чтение, а идёт рядом.
   Годится вертикальным кадрам и крупным планам одного предмета. */
.fig-photo.side {
  float: right;
  width: 34%;
  max-width: 300px;
  margin: 6px 0 16px 22px;
}

.fig-photo.side.left { float: left; margin: 6px 22px 16px 0; }
.fig-photo.side img { max-height: none; }
.fig-photo.side figcaption { text-align: left; font-size: 12px; }

/* Колонка текста уже колонки главы: абзац ограничен мерой чтения, а
   фигура — нет. Без этого сдвига кадр улетал бы к правому краю
   страницы, и обтекать его было бы нечему. */
.theory .fig-photo.side,
.lp-body .fig-photo.side { margin-right: max(0px, calc(100% - var(--measure))); }

.theory .fig-photo.side.left,
.lp-body .fig-photo.side.left { margin-right: 22px; margin-left: 0; }

/* На обтекаемый кадр не должно налезать ничего, кроме абзацев:
   заголовок, схема, таблица, словарь и врезка начинаются с новой
   строки. */
.theory h2, .theory h3, .theory .fig, .theory table, .theory .words, .theory .talk, .theory aside,
.lp-body h2, .lp-body h3, .lp-body .fig, .lp-body table, .lp-body .words, .lp-body .talk, .lp-body aside,
.fig-photo.wide, .fig-photo.band { clear: both; }

@media (max-width: 640px) {
  /* На телефоне обтекать нечем: колонка и так узкая. */
  .fig-photo.side { float: none; width: 100%; max-width: none; margin: 24px 0; }
  .theory .fig-photo.side, .lp-body .fig-photo.side { margin-right: 0; }
  .fig-photo.side figcaption { text-align: center; }
  .fig-photo.wide img, .fig-photo:not(.side):not(.band) img { max-height: 210px; }
  .fig-photo.band img { max-height: 140px; }
}