/*
 * Врезка «читайте также» внутри текста (блок «Ссылка на статью» и шорткод
 * [bp_related]; div.thumbnail.read-more живого сайта): серая карточка слева
 * или справа, текст обтекает. Файл общий для сайта и редактора - в редакторе
 * нет переменных темы, поэтому у каждой var() есть запасное значение.
 */
.inline-related {
  width: 45%;
  background: #f5f5f5;
  margin-bottom: 15px;
  font-family: var(--sans, "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif);
}
.inline-related--right { float: right; clear: right; margin-left: 20px; }
/*
 * Справа вместо полей - белая рамка той же ширины: цитата, которая обтекает
 * карточку, уходит фоном под неё, и рамка отделяет карточку от фона цитаты.
 */
.article__body > .inline-related--right {
  width: calc(45% + 20px);
  margin: 0;
  border-left: 20px solid #fff;
  border-bottom: 15px solid #fff;
}
.inline-related--left { float: left; clear: left; margin-right: 20px; }
.inline-related__thumb { display: block; overflow: hidden; aspect-ratio: 16/9; }
.inline-related__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease-out;
}
.inline-related__thumb:hover img { transform: scale(1.1); }
.inline-related__body { padding: 10px 12px 12px; }
.inline-related__credit {
  display: block;
  font-size: 12px;
  font-style: italic;
  color: #959595;
  margin-bottom: 4px;
}
.inline-related__title {
  display: block;
  font-family: var(--serif, "PT Serif", Georgia, "Times New Roman", Times, serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--heading, #222222);
  text-decoration: none;
}
.inline-related__title:hover { color: var(--accent, #e67e22); }

/*
 * Абзацы, списки, подзаголовки и цитаты обтекают карточку, пока она не
 * кончится; под карточкой цитата снова во всю ширину (просьба редакции
 * 2026-10-14). Рядом с карточкой слева цитата - отдельной коробкой
 * (flow-root), иначе её полоса слева ушла бы под карточку; карточка выше
 * в пределах четырёх элементов - дальше она обычно уже кончилась.
 * Фото, галереи, видео и таблицы под карточку не заезжают - встают ниже неё.
 */
.article__body > .inline-related--left + blockquote,
.article__body > .inline-related--left + :not(.inline-related) + blockquote,
.article__body > .inline-related--left + :not(.inline-related) + :not(.inline-related) + blockquote,
.article__body > .inline-related--left + :not(.inline-related) + :not(.inline-related) + :not(.inline-related) + blockquote {
  display: flow-root;
}
.article__body > :is(figure, .wp-block-gallery, .wp-block-embed, .wp-block-table, table, hr) {
  clear: both;
}

/*
 * Если сразу за карточкой не текст (фото, конец статьи), обтекать нечему -
 * карточка встаёт горизонтальной плашкой во всю ширину: фото слева, подпись
 * и заголовок справа. Две карточки подряд обтекаются как обычно.
 */
.inline-related:not(:has(+ :is(p, ul, ol, h2, h3, h4, blockquote, .inline-related))) {
  float: none;
  width: auto;
  margin: 0 0 20px;
  border: 0;
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: center;
}
.inline-related:not(:has(+ :is(p, ul, ol, h2, h3, h4, blockquote, .inline-related))) .inline-related__body {
  padding: 12px 16px;
}

@media (max-width: 767px) {
  .inline-related--right,
  .article__body > .inline-related--right,
  .inline-related--left { float: none; width: 100%; margin: 0 0 15px; border: 0; }
}