/* Модуль text — «Текст с изображением» (tshop_3).
 * Ручки дизайнера стилей на корне блока (.idblock-N):
 *   --text-measure   ширина колонки текста (символов)
 *   --text-size      размер основного текста
 *   --title-size     размер заголовка
 *   --media-width    доля изображения при расположении сбоку (%)
 *   --media-radius   скругление изображения
 *   --text-gap       расстояние между изображением и текстом
 *   --items-gap      расстояние между элементами
 *   --title-color, --text-color
 */
@layer modules {
  .t3-text {
    --text-measure: 72ch;
    --text-size: var(--fs-m);
    --title-size: var(--fs-2xl);
    --media-width: 44%;
    --media-radius: var(--radius-l);
    --text-gap: clamp(20px, 3.5vw, 56px);
    --items-gap: clamp(40px, 6vw, 88px);
    --title-color: inherit;
    --text-color: inherit;
  }

  .t3-text__wrap { display: grid; gap: var(--items-gap); }
  .t3-text__item { container-type: inline-size; }

  .t3-text__title { font-size: var(--title-size); color: var(--title-color); margin-bottom: var(--s-5); max-width: 24ch; }

  .t3-text__content { max-width: var(--text-measure); font-size: var(--text-size); color: var(--text-color); }
  .t3-text__content > :first-child { margin-top: 0; }

  .t3-text__media { margin: 0; overflow: hidden; border-radius: var(--media-radius); background: var(--surface-2); }
  .t3-text__img { width: 100%; height: auto; display: block; }
  [data-style="editorial"] .t3-text__media { border: var(--line-w) solid var(--line); }

  /* сверху / снизу: изображение во всю ширину, текст под ним */
  .t3-text__body { display: grid; gap: var(--text-gap); }
  .t3-text__item--bottom .t3-text__media { order: 2; }

  /* сбоку — только когда самому блоку хватает ширины (container query), иначе — стопкой */
  @container (min-width: 720px) {
    .t3-text__item--left .t3-text__body,
    .t3-text__item--right .t3-text__body {
      grid-template-columns: var(--media-width) minmax(0, 1fr);
      align-items: start;
    }
    .t3-text__item--right .t3-text__body { grid-template-columns: minmax(0, 1fr) var(--media-width); }
    .t3-text__item--right .t3-text__media { order: 2; }
    .t3-text__item--left .t3-text__media,
    .t3-text__item--right .t3-text__media { position: sticky; top: calc(var(--header-h) + 24px); }
  }

  .t3-text__pagination { display: flex; justify-content: center; }
}