/* Главный слайдер (index_slider) — tshop_3.
 * Ручки дизайнера стилей на корне блока (имена как в v2 tshop_2):
 *   --hero-height        высота на десктопе (иначе — поле модуля height, иначе адаптивная)
 *   --hero-corner        скругление слайдера в контейнере и кнопок управления
 *   --hero-accent-color  акцент: метка, точки-прогресс
 *   --hero-title-size, --hero-content-width
 */
@layer modules {
  .t3-hero {
    --hero-height: var(--hero-h-module, clamp(520px, 78vh, 820px));
    --hero-corner: var(--radius-l);
    --hero-accent-color: var(--brand);
    --hero-title-size: clamp(2.25rem, 1.1rem + 4.2vw, 4.75rem);
    --hero-content-width: 620px;
    --hero-pad-top: var(--s-8);
    --hero-ease: cubic-bezier(.22, .8, .2, 1);
    --hero-fade: .9s;
    padding: 0;
  }
  .t3-hero--boxed { padding-top: var(--s-5); }

  .t3-hero__frame { position: relative; isolation: isolate; overflow: hidden; color: var(--text); }
  .t3-hero--boxed .t3-hero__frame { border-radius: var(--hero-corner); box-shadow: var(--shadow-1); }
  [data-style="editorial"] .t3-hero--boxed .t3-hero__frame { border: var(--line-w) solid var(--line); }

  /* ── слайды: стопкой в одной ячейке, активный — видим ── */
  .t3-hero__track { display: grid; min-height: var(--hero-height); }
  .t3-hero__slide {
    grid-area: 1 / 1; position: relative; display: grid;
    opacity: 0; visibility: hidden;
    transition: opacity var(--hero-fade) var(--hero-ease), visibility 0s linear var(--hero-fade);
  }
  .t3-hero__slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }

  .t3-hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--surface-2); }
  .t3-hero__slide--plain .t3-hero__media { background: radial-gradient(120% 90% at 85% 10%, var(--brand-soft-2), transparent 60%), var(--surface-2); }
  .t3-hero__media picture, .t3-hero__bg, .t3-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
  .t3-hero__bg, .t3-hero__video { object-fit: cover; }
  .t3-hero__video { opacity: 0; transition: opacity .6s ease; }
  .t3-hero__video.is-playing { opacity: 1; }
  .t3-hero__bg--mobile-only { display: none; }
  /* медленное приближение фона на активном слайде */
  @media (prefers-reduced-motion: no-preference) {
    .t3-hero__bg { transform: scale(1.06); transition: transform 8s linear; }
    .t3-hero__slide.is-active .t3-hero__bg { transform: scale(1); }
  }

  /* вуаль (поле opacity): белая на светлых слайдах, тёмная — на тёмных; плюс градиент для читаемости */
  .t3-hero__veil { position: absolute; inset: 0; pointer-events: none; }
  .t3-hero__slide--light .t3-hero__veil { background: rgb(255 255 255 / var(--hero-veil, 0)); }
  .t3-hero__slide--dark .t3-hero__veil {
    background:
      linear-gradient(90deg, rgb(0 0 0 / .45), transparent 70%),
      rgb(0 0 0 / var(--hero-veil, 0));
  }

  /* ── содержимое ── */
  .t3-hero__inner {
    position: relative; z-index: 1; display: grid; align-items: center; gap: var(--s-6);
    padding-block: var(--hero-pad-top) calc(var(--s-8) + 40px);
  }
  .t3-hero--boxed .t3-hero__inner { padding-inline: clamp(24px, 5vw, 80px); }
  .t3-hero__content { display: grid; gap: var(--s-4); max-width: var(--hero-content-width); justify-items: start; }
  .t3-hero__tag {
    display: inline-flex; padding: 6px 12px; border-radius: var(--radius-pill);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--hero-accent-color); background: color-mix(in srgb, var(--hero-accent-color) 12%, var(--surface));
  }
  .t3-hero__title { font-size: var(--hero-title-size); max-width: 16ch; }
  .t3-hero__text { font-size: var(--fs-l); color: var(--text-2); max-width: 46ch; }
  .t3-hero__text > * + * { margin-top: .6em; }
  .t3-hero__actions { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-3); }

  .t3-hero__visual img { width: 100%; max-height: calc(var(--hero-height) - 200px); object-fit: contain; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .18)); }

  /* появление содержимого активного слайда */
  @media (prefers-reduced-motion: no-preference) {
    .t3-hero__content > *, .t3-hero__visual { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--hero-ease), transform .9s var(--hero-ease); }
    .t3-hero__slide.is-active .t3-hero__content > *, .t3-hero__slide.is-active .t3-hero__visual { opacity: 1; transform: none; }
    .t3-hero__slide.is-active .t3-hero__content > :nth-child(2) { transition-delay: .08s; }
    .t3-hero__slide.is-active .t3-hero__content > :nth-child(3) { transition-delay: .16s; }
    .t3-hero__slide.is-active .t3-hero__content > :nth-child(4) { transition-delay: .24s; }
    .t3-hero__slide.is-active .t3-hero__visual { transition-delay: .12s; }
  }

  /* тёмная сцена: светлый текст */
  .t3-hero__slide--dark { color: #fff; }
  .t3-hero__slide--dark .t3-hero__text { color: rgb(255 255 255 / .82); }
  .t3-hero__slide--dark .t3-hero__tag { color: #fff; background: rgb(255 255 255 / .16); backdrop-filter: blur(6px); }

  @media (min-width: 1024px) {
    .t3-hero__slide--visual .t3-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  }

  /* телефон: отдельный мобильный баннер заменяет композицию — остаётся только кнопка */
  @media (max-width: 767px) {
    .t3-hero { --hero-height: clamp(460px, 82svh, 640px); --hero-pad-top: var(--s-7); }
    .t3-hero__inner { align-items: end; padding-bottom: calc(var(--s-7) + 44px); }
    .t3-hero__visual { display: none; }
    .t3-hero__bg--mobile-only { display: block; }
    .t3-hero__slide--mobile .t3-hero__content > :not(.t3-hero__actions) { display: none; }
    .t3-hero__slide--light .t3-hero__veil { background: linear-gradient(0deg, rgb(255 255 255 / .9), rgb(255 255 255 / var(--hero-veil, 0)) 60%); }
    .t3-hero__slide--dark .t3-hero__veil { background: linear-gradient(0deg, rgb(0 0 0 / .65), rgb(0 0 0 / var(--hero-veil, 0)) 65%); }
  }

  /* ── управление ── */
  .t3-hero__controls { position: absolute; inset: auto 0 0; z-index: 2; pointer-events: none; }
  .t3-hero__controls-in { display: flex; align-items: center; gap: var(--s-4); padding-bottom: var(--s-6); pointer-events: auto; }
  .t3-hero--boxed .t3-hero__controls-in { padding-inline: clamp(24px, 5vw, 80px); }
  .t3-hero__dots { display: flex; gap: 6px; flex: 1; max-width: 360px; }
  .t3-hero__dot { position: relative; flex: 1; height: 24px; display: grid; align-items: center; cursor: pointer; }
  .t3-hero__dot::before { content: ""; height: 3px; border-radius: 3px; background: color-mix(in srgb, currentColor 22%, transparent); }
  .t3-hero__dot-fill { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--hero-accent-color); transform-origin: left; transform: scaleX(var(--p, 0)); }
  /* текущая точка заполнена; при автопрокрутке заполнение (--p) ведёт скрипт */
  .t3-hero__dot[aria-current="true"] .t3-hero__dot-fill { --p: 1; }
  .t3-hero__counter { font-variant-numeric: tabular-nums; font-size: var(--fs-s); font-weight: 600; display: flex; gap: 4px; margin-left: auto; }
  .t3-hero__counter-sep { opacity: .4; }
  .t3-hero__nav { display: flex; gap: var(--s-2); }
  .t3-hero__btn-ctrl {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 78%, transparent); color: var(--text);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); backdrop-filter: blur(10px);
    transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .t3-hero__btn-ctrl:hover { background: var(--surface); }
  .t3-hero__btn-ctrl:active { transform: scale(.96); }
  .t3-hero__btn-ctrl svg { width: 18px; height: 18px; fill: currentColor; }
  .t3-hero__btn-ctrl .i { fill: none; }
  .t3-hero__icon-play { display: none; }
  .t3-hero__frame.is-paused .t3-hero__icon-play { display: block; }
  .t3-hero__frame.is-paused .t3-hero__icon-pause { display: none; }
  .t3-hero__frame[data-tone="dark"] .t3-hero__controls { color: #fff; }

  @media (max-width: 767px) {
    .t3-hero__counter { display: none; }
    .t3-hero__btn-ctrl { width: 40px; height: 40px; }
    .t3-hero__controls-in { padding-bottom: var(--s-4); }
  }

  /* ── виджеты (зона sidebar): справа поверх слайда ── */
  .t3-hero__widgets { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: grid; align-items: center; }
  .t3-hero__widgets-in { display: grid; justify-items: end; gap: var(--s-4); }
  .t3-hero__widgets-in > * { pointer-events: auto; width: min(380px, 100%); }
  @media (max-width: 1023px) {
    .t3-hero__widgets { position: static; padding-block: var(--s-5); }
    .t3-hero__widgets-in { justify-items: stretch; }
    .t3-hero__widgets-in > * { width: 100%; }
  }

  /* ── «под шапкой»: только с шапками-оверлеями и только первым блоком страницы ── */
  [data-header="header_2"] .t3-content > .t3-hero--under:first-child { margin-top: calc(-1 * (var(--t3-header-h, 72px) + 24px)); }
  [data-header="header_4"] .t3-content > .t3-hero--under:first-child { margin-top: calc(-1 * var(--t3-header-h, 84px)); }
  [data-header="header_2"] .t3-content > .t3-hero--under:first-child,
  [data-header="header_4"] .t3-content > .t3-hero--under:first-child { --hero-pad-top: calc(var(--t3-header-h, 80px) + var(--s-7)); }
  .iww_panel_____visible .t3-content > .t3-hero--under:first-child { margin-top: 0 !important; }
  /* «Минимал» над тёмным слайдом — светлая шапка, пока страница не прокручена */
  [data-header="header_4"][data-t3-hero-tone="dark"] .hv-4:not(.is-scrolled) { --h-text: #fff; }
  [data-header="header_4"][data-t3-hero-tone="dark"] .hv-4:not(.is-scrolled) .icon-btn:hover { background: rgb(255 255 255 / .14); }
  [data-header="header_4"][data-t3-hero-tone="dark"] .hv-4:not(.is-scrolled) :is(.logo__name small, .logo__slogan) { color: rgb(255 255 255 / .72); }
}