/* Shop3 — секция «Текст и картинка» (ADR 0007, спецификация §8; plan-0.3 §1 п. 14). Подключается, только если такая секция есть на странице
   (render.php, assets()). Только токены var(--s3-*) и логические свойства (canon §6.2, docs/dev/rtl.md); общая обёртка — base.css. */

.s3-split { display: grid; grid-template-columns: repeat(var(--s3-section-text-image-columns), minmax(0, 1fr)); gap: var(--s3-space-7); align-items: center; }
.s3-split--end .s3-split__media { order: 1; }
.s3-split__media img { display: block; width: 100%; height: auto; aspect-ratio: var(--s3x-ratio); object-fit: cover; border-radius: var(--s3-radius-lg); border-start-start-radius: var(--s3x-flush-r, var(--s3-radius-lg)); border-start-end-radius: var(--s3x-flush-r, var(--s3-radius-lg)); }
.s3-split__body.s3-prose { color: var(--s3-text); }
.s3-split__buttons { display: flex; flex-wrap: wrap; gap: var(--s3-space-3); }

/* заголовок секции — в колонке текста, над ним, а не над обеими колонками (VD #4): заголовок и текст одной группой по середине картинки.
   Разметка прежняя (заголовок выводит обёртка секции, shop3_section.twig): сетка — у .s3-section__inner, .s3-split в ней — display: contents;
   колонки — те же section.text-image.columns, от шага sm (2 в пресете по умолчанию); на телефоне и без картинки — как было */
@media (min-width: 601px) {
  .s3-section__inner:has(> .s3-section__heading + .s3-split > .s3-split__media) { display: grid; grid-template-columns: repeat(var(--s3-section-text-image-columns), minmax(0, 1fr)); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--s3-space-7); }
  .s3-section__inner:has(> .s3-section__heading + .s3-split > .s3-split__media) > .s3-split { display: contents; }
  .s3-section__inner:has(> .s3-section__heading + .s3-split > .s3-split__media) > .s3-section__heading { grid-row: 2; grid-column: 2; }
  .s3-section__inner:has(> .s3-section__heading + .s3-split > .s3-split__media) .s3-split__media { grid-row: 1 / -1; grid-column: 1; align-self: center; }
  .s3-section__inner:has(> .s3-section__heading + .s3-split > .s3-split__media) .s3-split__body { grid-row: 3; grid-column: 2; }
  .s3-section__inner:has(> .s3-section__heading + .s3-split > .s3-split__media):has(> .s3-split--end) > .s3-section__heading, .s3-section__inner:has(> .s3-section__heading + .s3-split > .s3-split__media) .s3-split--end > .s3-split__body { grid-column: 1; }
  .s3-section__inner:has(> .s3-section__heading + .s3-split > .s3-split__media) .s3-split--end > .s3-split__media { grid-column: 2; }
}
@media (max-width: 600.98px) {
  .s3-split { gap: var(--s3-space-5); }
  .s3-split--end .s3-split__media { order: 0; }
}