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

.s3-banners { display: grid; grid-template-columns: repeat(var(--s3-columns-banners), minmax(0, 1fr)); gap: var(--s3-space-4); margin: 0; padding: 0; list-style: none; }
.s3-banners--3 { grid-template-columns: repeat(var(--s3-section-banners-columns-3), minmax(0, 1fr)); }
.s3-banners--4 { grid-template-columns: repeat(var(--s3-section-banners-columns-4), minmax(0, 1fr)); }
.s3-banners--mosaic { grid-template-columns: repeat(var(--s3-section-banners-columns-mosaic), minmax(0, 1fr)); }
.s3-banners--mosaic .s3-banners__item:first-child { grid-column: span var(--s3-section-banners-mosaic-span); grid-row: span var(--s3-section-banners-mosaic-span); }
.s3-banners__link { position: relative; display: flex; flex-direction: column; height: 100%; color: var(--s3-text); text-decoration: none; }
/* a:hover, a:focus темы и Bootstrap (0,1,1) сильнее одного класса: без этого блок-ссылка при наведении подчёркнута и в цвете ссылки (VD-2 #2) */
.s3-banners__link:is(:hover, :focus) { color: var(--s3-text); text-decoration: none; }
.s3-banners--square { --s3x-ratio: var(--s3-ratio-square); }
.s3-banners--landscape { --s3x-ratio: var(--s3-ratio-photo); }
.s3-banners--portrait { --s3x-ratio: var(--s3-ratio-portrait); }
.s3-banners--wide { --s3x-ratio: var(--s3-section-banners-ratio-wide); }
.s3-banners__link img { display: block; width: 100%; height: auto; aspect-ratio: var(--s3x-ratio); object-fit: cover; border-radius: var(--s3-radius-lg); transition: transform var(--s3-duration-base); }
.s3-banners--mosaic .s3-banners__item:first-child img { flex: 1; height: 100%; aspect-ratio: auto; }
.s3-banners__link:is(a):hover img { transform: scale(var(--s3-section-banners-hover-scale)); }
.s3-banners--caption-over .s3-banners__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-banners--caption-under .s3-banners__caption { margin-top: var(--s3-space-2); font-weight: var(--s3-font-weight-medium); }
.s3-banners__link:is(a):hover .s3-banners__caption { color: var(--s3-link); }

/* первая секция вплотную под шапкой (VD #5, base.css --s3x-flush-r): верхние углы — у картинок первого ряда. Первый баннер — всегда в нём;
   остальные — по числу колонок вида на этом шаге в пресете по умолчанию (columns.banners, section.banners.columns-*): у магазина своё число
   колонок — углы могут разойтись с рядом, у линии меню тогда снова скругление, как до VD */
.s3-banners__item:first-child .s3-banners__link img { 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 (min-width: 601px) {
  .s3-banners:not(.s3-banners--3, .s3-banners--mosaic) .s3-banners__item:nth-child(-n + 2) .s3-banners__link img,
  .s3-banners--3 .s3-banners__item:nth-child(-n + 3) .s3-banners__link img { 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 (min-width: 992px) {
  .s3-banners--4 .s3-banners__item:nth-child(-n + 4) .s3-banners__link img,
  .s3-banners--mosaic .s3-banners__item:nth-child(-n + 3) .s3-banners__link img { border-start-start-radius: var(--s3x-flush-r, var(--s3-radius-lg)); border-start-end-radius: var(--s3x-flush-r, var(--s3-radius-lg)); }
}