/* AVS — компонент «До и После»: сравнение двух скриншотов шторкой (страницы кейсов).
   Снизу «Стало», сверху «Было», обрезается clip-path по --ba-pos. Поверх кадра — невидимый
   input[type=range]: мышь, палец, клавиатура и скринридеры без своего кода; touch-action: pan-y
   не мешает вертикальной прокрутке. Логика и вкладки ПК / Телефон — js/before-after.js. */

.ba{
  --ba-accent:var(--amethyst-500);
  --ba-accent-text:var(--text-on-accent);
  --ba-border:var(--line-2);
  --ba-bg:var(--bg-surface);
  --ba-radius:var(--radius-lg);
  --ba-label-bg:rgba(8,9,13,0.82);
  --ba-label-text:var(--text-primary);
  --ba-pos:50%;
  margin:0;display:grid;gap:10px;min-width:0
}
.ba,.ba *,.ba *::before,.ba *::after{box-sizing:border-box}
.ba__frame{position:relative;overflow:hidden;max-width:100%;border:1px solid var(--ba-border);border-radius:var(--ba-radius);background:var(--ba-bg);user-select:none;-webkit-user-select:none}
.ba--desk .ba__frame{aspect-ratio:1440/900}
.ba--phone .ba__frame{aspect-ratio:390/844;width:min(100%,360px);margin-inline:auto;border-radius:28px}
.ba__frame picture{display:contents}
.ba__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none}
.ba__img--before{clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0)}
.ba__line{position:absolute;top:0;bottom:0;left:var(--ba-pos);width:2px;transform:translateX(-1px);background:var(--ba-accent);pointer-events:none}
.ba__knob{position:absolute;top:50%;left:var(--ba-pos);width:46px;height:46px;display:grid;place-items:center;border-radius:50%;transform:translate(-50%,-50%);background:var(--ba-accent);color:var(--ba-accent-text);font:700 16px/1 var(--font-display);box-shadow:0 6px 20px rgba(0,0,0,0.45);pointer-events:none}
.ba__label{position:absolute;top:14px;padding:6px 12px;border-radius:999px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;pointer-events:none}
.ba__label--before{left:14px;background:var(--ba-label-bg);color:var(--ba-label-text)}
.ba__label--after{right:14px;background:var(--ba-accent);color:var(--ba-accent-text)}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none}
.ba__frame:has(.ba__range:focus-visible) .ba__knob{outline:3px solid var(--amethyst-300);outline-offset:4px}
.ba__caption{font-size:var(--fs-small);line-height:1.5;color:var(--text-muted);text-align:center}

@media (prefers-reduced-motion:no-preference){
  .ba.is-hinting .ba__img--before{transition:clip-path .6s ease}
  .ba.is-hinting .ba__line,.ba.is-hinting .ba__knob{transition:left .6s ease}
}

/* Вкладки ПК / Телефон над сравнениями */
.ba-tabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:16px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-surface)}
.ba-tab{height:36px;padding:0 18px;border:0;border-radius:999px;background:none;color:var(--text-secondary);font:600 var(--fs-small)/1 var(--font-display);cursor:pointer;transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.ba-tab:hover{color:var(--text-primary)}
.ba-tab[aria-selected="true"]{background:var(--amethyst-500);color:var(--text-on-accent)}
.ba-tab:focus-visible{outline:2px solid var(--amethyst-300);outline-offset:2px}