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

/* во всю ширину (база — base.css): содержимое hero — во весь экран */
.s3-layout:not(.s3-layout--left):not(.s3-layout--right) .s3-section--hero.s3-section--full > .s3-section__inner { max-width: none; padding: 0; }
.s3-section--full .s3-hero__track, .s3-section--full .s3-hero__slide { border-radius: 0; }
/* hero во всю ширину: не выше, чем был бы шириной в контейнер (иначе на широком экране кнопка уходит за первый экран), лишнее
   по высоте срезает object-fit; текст и кнопки — по краю содержимого страницы, а не экрана.
   Высоту задаёт распорка ::before: padding в процентах считается от ширины, поэтому min() работает и при ручке ширины «full»
   (container.width = 100%) — в max-height проценты считались бы от высоты, и картинка занимала ≈ 40 % слайда (D1).
   Картинка не участвует в высоте ряда (absolute) и покрывает слайд целиком: распорку или текст, что выше. */
.s3-section--full .s3-hero__slide::before { content: ""; grid-area: 1 / 1; padding-top: calc(min(100%, var(--s3-container-width)) / (var(--s3x-ratio))); }
.s3-section--full .s3-hero__media { position: absolute; inset: 0; }
.s3-section--full .s3-hero__media img { aspect-ratio: auto; }
.s3-section--full .s3-hero__body { padding-inline: max(var(--s3-space-7), calc((100% - var(--s3-container-width)) / 2 + var(--s3-container-gutter) + var(--s3-space-5))); max-width: none; box-sizing: border-box; }
.s3-section--full .s3-hero__body > * { max-width: var(--s3-layout-measure); }
.s3-section--full .s3-hero > .s3-slider__controls { inset-inline-end: max(var(--s3-space-3), calc((100% - var(--s3-container-width)) / 2 + var(--s3-container-gutter))); }

.s3-hero { position: relative; }
.s3-hero__track { 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)); overflow: hidden; }
.s3-hero__slide { position: relative; display: grid; min-height: var(--s3-size-area); overflow: hidden; background: var(--s3-surface-alt); }
.s3-hero__media, .s3-hero__media img { display: block; width: 100%; height: 100%; }
.s3-hero__media { grid-area: 1 / 1; }
/* картинка задаёт высоту слайда пропорцией, но если текст выше (узкий экран), растягивается на всю высоту слайда с обрезкой:
   height: 100% у растянутого элемента сетки считается от высоты ячейки, а та — по большему из картинки и текста */
.s3-hero__media img { aspect-ratio: var(--s3x-ratio); object-fit: cover; height: 100%; }
.s3-hero__slide::after { content: ""; grid-area: 1 / 1; background: var(--s3-color-neutral-950); opacity: var(--s3x-overlay, 0); pointer-events: none; }
.s3-hero__body { grid-area: 1 / 1; position: relative; z-index: var(--s3-z-raised); align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3-space-4); max-width: var(--s3-layout-measure); padding: var(--s3-space-7) var(--s3-space-7); color: var(--s3-color-neutral-0); }
.s3-hero__media + .s3-hero__body { text-shadow: 0 var(--s3-border-width-thin) var(--s3-space-1) var(--s3-color-alpha-black-45); }
.s3-hero__slide:not(:has(.s3-hero__media)) .s3-hero__body { color: var(--s3-text); }
.s3-hero__slide--center .s3-hero__body { justify-self: center; align-items: center; text-align: center; }
.s3-hero__slide--end .s3-hero__body { justify-self: end; align-items: flex-end; text-align: end; }
/* по высоте (valign) и выравнивание строк отдельно от положения (text_align; R03-14) — после правил положения, чтобы перекрывать их */
.s3-hero__slide--v-start .s3-hero__body { align-self: start; }
.s3-hero__slide--v-end .s3-hero__body { align-self: end; }
.s3-hero__slide--t-start .s3-hero__body { align-items: flex-start; text-align: start; }
.s3-hero__slide--t-center .s3-hero__body { align-items: center; text-align: center; }
.s3-hero__slide--t-end .s3-hero__body { align-items: flex-end; text-align: end; }
.s3-hero__title { margin: 0; font-family: var(--s3-font-family-heading); font-size: var(--s3-font-size-3xl); font-weight: var(--s3-font-weight-bold); letter-spacing: var(--s3-font-tracking-tight); line-height: var(--s3-line-height-tight); }
.s3-hero__text { margin: 0; font-size: var(--s3-font-size-lg); }
.s3-hero__body .s3-btn { text-shadow: none; }
.s3-hero__cover { position: absolute; inset: 0; z-index: var(--s3-z-raised); }
.s3-hero.s3-slider { margin-bottom: 0; }

/* карусель с соседними слайдами (layout peek, R03-14): слайд — 80 % ленты, привязка по центру — у средних слайдов видны края обоих
   соседей, первый стоит у начала ленты, край второго — в конце; без JS — лента листается
   прокруткой (scroll-snap), первый слайд виден. Во всю ширину — тоже соседние, текст — по краю слайда, а не страницы */
.s3-hero--peek .s3-hero__track { gap: var(--s3-space-4); border-radius: 0; overflow-x: auto; }
.s3-hero--peek .s3-hero__slide { flex: 0 0 var(--s3-section-hero-peek-width); scroll-snap-align: center; 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-section--full .s3-hero--peek .s3-hero__slide { 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-section--full .s3-hero--peek .s3-hero__body { padding-inline: var(--s3-space-7); }
.s3-section--full .s3-hero--peek .s3-hero__slide::before { padding-top: calc(100% / (var(--s3x-ratio))); }

@media (max-width: 991.98px) {
  .s3-hero__title { font-size: var(--s3-font-size-2xl); }
}
@media (max-width: 600.98px) {
  .s3-hero__body { padding: var(--s3-space-6) var(--s3-space-5); }
  .s3-hero__media--mobile img { aspect-ratio: var(--s3-ratio-tall); }
  .s3-section--full .s3-hero__body { padding-inline: var(--s3-space-5); }
  .s3-section--full .s3-hero__media--mobile img { max-height: none; }
  /* кнопки слайдера на слайде, как на компьютере; текст и кнопка слайда заканчиваются выше них */
  .s3-hero.s3-slider .s3-hero__body { padding-bottom: calc(var(--s3-size-control-md) + 2 * var(--s3-space-3)); }
  .s3-hero__title { font-size: var(--s3-font-size-xl); }
  .s3-hero__text { font-size: var(--s3-font-size-md); }
  .s3-hero--peek .s3-hero__track { gap: var(--s3-space-3); }
  .s3-section--full .s3-hero--peek .s3-hero__body { padding-inline: var(--s3-space-5); }
}

/* наезд следующей секции (контракт 1.2 §4, base.css): запаса снизу нет — наезд ложится на картинку; текст слайда и кнопки слайдера
   поднимаются на величину наезда, чтобы их не перекрыть (фокус кнопок — тоже). На телефоне наезда нет */
@media (min-width: 601px) {
  .s3-section--hero:has(+ .s3-section--overlap) { padding-bottom: var(--s3x-pb); }
  .s3-section--hero:has(+ .s3-section--overlap) .s3-hero__body { padding-bottom: calc(var(--s3-space-7) + var(--s3x-under)); }
  .s3-section--hero:has(+ .s3-section--overlap) .s3-hero > .s3-slider__controls { bottom: calc(var(--s3-space-3) + var(--s3x-under)); }
}