/* «До / после» (photo_gallery/before_after), tshop_3. Ручки на корне блока: --ba-ratio, --ba-radius, --card-min, --items-gap. */
@layer modules {
  .t3-ba { --ba-ratio: 4 / 3; --ba-radius: var(--radius-l); --card-min: 420px; --items-gap: var(--s-5); }
  [data-style="editorial"] .t3-ba { --ba-radius: 0px; }
  .t3-ba__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--card-min), 100%), 1fr));
    gap: var(--items-gap); margin: 0; padding: 0; list-style: none;
  }
  .t3-ba--single .t3-ba__grid { grid-template-columns: minmax(0, 1100px); justify-content: center; }
  .t3-ba__figure { display: grid; gap: var(--s-3); margin: 0; }
  .t3-ba__caption { font-weight: 600; font-size: var(--fs-l); }

  .t3-ba__stage {
    --ba-pos: 50%;
    position: relative; overflow: hidden; aspect-ratio: var(--ba-ratio);
    border-radius: var(--ba-radius); background: var(--surface-2); user-select: none;
  }
  .t3-ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
  /* «до» — верхний слой, виден слева от разделителя */
  .t3-ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }

  .t3-ba__label {
    position: absolute; top: var(--s-3); z-index: 1; pointer-events: none;
    padding: 5px 12px; border-radius: var(--radius-pill); background: rgb(0 0 0 / .55); color: #fff;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(6px);
    transition: opacity var(--dur) var(--ease);
  }
  .t3-ba__label--before { left: var(--s-3); }
  .t3-ba__label--after { right: var(--s-3); }
  /* подпись прячется, когда разделитель подходит к ней (list.js) */
  .t3-ba__stage.hide-before .t3-ba__label--before, .t3-ba__stage.hide-after .t3-ba__label--after { opacity: 0; }

  .t3-ba__handle {
    position: absolute; top: 0; bottom: 0; left: var(--ba-pos); z-index: 2; width: 2px; margin-left: -1px;
    background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .12); pointer-events: none;
  }
  .t3-ba__knob {
    position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
    width: 48px; height: 48px; translate: -50% -50%; border-radius: 50%;
    background: #fff; color: #0b0f17; box-shadow: 0 8px 24px -6px rgb(0 0 0 / .45);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .t3-ba__knob .i { width: 22px; height: 22px; stroke-width: 2; }

  /* ползунок — на всю сцену, невидимый: тянуть можно с любого места; вертикальная прокрутка на телефоне не блокируется */
  .t3-ba__range {
    position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: none;
  }
  .t3-ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100%; }
  .t3-ba__range::-moz-range-thumb { width: 48px; height: 100%; border: 0; }
  .t3-ba__stage:hover .t3-ba__knob { transform: scale(1.08); }
  .t3-ba__stage:has(.t3-ba__range:focus-visible) .t3-ba__knob { background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--brand); }

  @media (prefers-reduced-motion: reduce) { .t3-ba__knob, .t3-ba__label { transition: none; } }
}