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

/* слайдер и колонка баннеров рядом; слайдер — стили hero.css (поставщик называет hero в uses) */
.s3-herob { display: grid; grid-template-columns: var(--s3-split-wide); gap: var(--s3-space-4); align-items: stretch; }
.s3-herob--start .s3-herob__banners { order: -1; }
.s3-herob--below { grid-template-columns: minmax(0, 1fr); }
.s3-herob__hero { min-width: 0; }
.s3-herob__hero .s3-hero { height: 100%; }
.s3-herob__banners { display: grid; min-width: 0; grid-auto-rows: minmax(0, 1fr); gap: var(--s3-space-4); margin: 0; padding: 0; list-style: none; }
.s3-herob--below .s3-herob__banners { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: auto; }
.s3-herob__link { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--s3-radius-lg); color: var(--s3-text); text-decoration: none; background: var(--s3-surface-alt); }
/* a:hover, a:focus темы и Bootstrap (0,1,1) сильнее одного класса: без этого блок-ссылка при наведении подчёркнута и в цвете ссылки (VD-2 #2) */
.s3-herob__link:is(:hover, :focus) { color: var(--s3-text); text-decoration: none; }
.s3-herob__link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--s3-duration-base); }
.s3-herob--below .s3-herob__link img { height: auto; aspect-ratio: var(--s3-ratio-photo); }
.s3-herob__link:is(a):hover img { transform: scale(var(--s3-section-hero-banners-hover-scale)); }
.s3-herob__caption { position: absolute; inset-inline-start: var(--s3-space-3); bottom: var(--s3-space-3); padding: var(--s3-space-2) var(--s3-space-3); border-radius: var(--s3-radius-md); background: var(--s3-surface); color: var(--s3-text); font-weight: var(--s3-font-weight-bold); }
.s3-herob__link:is(a):hover .s3-herob__caption { color: var(--s3-link); }

/* первая секция вплотную под шапкой (VD #5, base.css --s3x-flush-r): колонка баннеров рядом со слайдером — верхний баннер у линии меню */
@media (min-width: 992px) {
  .s3-herob:not(.s3-herob--below) .s3-herob__banners > :first-child .s3-herob__link { border-start-start-radius: var(--s3x-flush-r, var(--s3-radius-lg)); border-start-end-radius: var(--s3x-flush-r, var(--s3-radius-lg)); }
}
@media (max-width: 991.98px) {
  .s3-herob { grid-template-columns: minmax(0, 1fr); }
  .s3-herob--start .s3-herob__banners { order: 0; }
  .s3-herob__banners { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .s3-herob__link img { height: auto; aspect-ratio: var(--s3-ratio-photo); }
}
@media (max-width: 600.98px) {
  .s3-herob__banners { grid-auto-flow: row; }
}