/*
 * Врезка «читайте также» внутри текста (блок «Ссылка на статью» и шорткод
 * [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; }
.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); }

/*
 * Абзацы, списки и подзаголовки обтекают карточку, пока она не кончится.
 * Цитата тоже встаёт рядом (как на живом сайте), но отдельной коробкой
 * (flow-root): иначе её серый фон и полоса слева уходили бы под карточку.
 * Фото, галереи, видео и таблицы под карточку не заезжают - встают ниже неё.
 */
.article__body > 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;
  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,
  .inline-related--left { float: none; width: 100%; margin: 0 0 15px; }
}