/* Základní proměnné – drží se stylu webu */
  :root{ --line:#e5e7eb; --fg:#0f172a; --muted:#475569; --wrap:1100px; --brand:#2563eb; }
  .wrap{ max-width:var(--wrap); margin:auto; padding:20px; }

  .before-after h2{ font-size:24px; margin:0 0 6px; text-align:center; }
  .ba-lead{ margin:0 0 14px; color:var(--muted); text-align:center; }

  .ba-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
  @media (min-width: 900px){ .ba-grid{ grid-template-columns:1fr 1fr; } }

  .ba{ margin:0; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(15,23,42,.06); }
  .ba figcaption{ padding:10px 12px; color:var(--muted); border-top:1px solid var(--line); font-size:14px; }

  .ba-viewport{ position:relative; aspect-ratio: 16/9; background:#f8fafc; }
  .ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .ba-before{ filter:contrast(0.98) saturate(0.98); }
  .ba-after{ clip-path:inset(0 0 0 50%); } /* výchozí 50% překrytí */

  /* Posuvník */
  .ba-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; }
  .ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:linear-gradient(#fff,#fff), var(--brand); box-shadow:0 0 0 1px rgba(0,0,0,.1); }
  .ba-handle::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:999px; border:1px solid var(--line); background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.12); }

  /* Štítky Před/Po */
  .ba-tag{ position:absolute; top:10px; padding:4px 8px; border-radius:999px; font-size:12px; background:#ffffffcc; backdrop-filter:saturate(1.2) blur(6px); border:1px solid var(--line); }
  .ba-tag.before{ left:10px; }
  .ba-tag.after{ right:10px; }