/* Byggium before/after comparison (shared component). Master copy: _template/src/static/assets/css/before-after.css.
   Never edit a project's copy: change the template, then run node tools/sync-components.js in each project.

   Without JS: the two photos side by side with their Före/Efter labels (stacked for .ba-wide). With JS (html.js
   from layout.html, plus before-after.js): stacked, the "efter" photo clipped from the left at --pos, controlled
   by a native range input (arrow keys, Home/End, touch). The handle shows the focus ring when the range has
   keyboard focus. No transitions, so reduced motion needs nothing extra.

   Theme it in the site's own CSS with these variables (the fallbacks below apply when one is not set):
     --ba-radius  --ba-placeholder  --ba-tag-bg  --ba-tag-fg  --ba-handle  --ba-handle-shadow  --ba-handle-icon
     --ba-focus   --ba-muted        --ba-note
   Variants: .ba-wide (landscape pairs: native wide crop, 3:2 on small screens). Default is 3:4 portrait. */
.ba{margin:0}
.ba-stage{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ba-layer{position:relative;margin:0}
.ba-layer img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--ba-radius,6px);background:var(--ba-placeholder,#eee)}
.ba-tag{position:absolute;top:12px;padding:4px 12px;border-radius:4px;background:var(--ba-tag-bg,#222);color:var(--ba-tag-fg,#fff);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ba-before .ba-tag{left:12px}
.ba-after .ba-tag{right:12px}
.ba-range,.ba-handle{display:none}
.js .ba-stage{display:block;position:relative;border-radius:var(--ba-radius,6px);overflow:hidden;--pos:50%;touch-action:pan-y}
.js .ba-layer img{border-radius:0}
.js .ba-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.js .ba-after img{height:100%}
.js .ba-range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none}
.js .ba-handle{display:block;position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--ba-handle,#fff);z-index:2;pointer-events:none}
.js .ba-handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--ba-handle,#fff);box-shadow:0 1px 6px var(--ba-handle-shadow,rgba(0,0,0,.35));
  background-image:var(--ba-handle-icon,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E"));background-size:24px;background-repeat:no-repeat;background-position:center}
.js .ba-range:focus-visible~.ba-handle::after{outline:3px solid var(--ba-focus,#005fcc);outline-offset:3px}
.ba-wide .ba-stage{grid-template-columns:1fr}
.ba-wide .ba-layer img{aspect-ratio:1312/516}
@media (max-width:560px){.ba-wide .ba-layer img{aspect-ratio:3/2}}
.ba-caption{margin-top:10px}
/* The note (e.g. "Exempelbilder, ...") sits directly under the photos, so it travels with the slider. */
.ba-note{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:600;color:var(--ba-note,#222)}
.ba-note::before{content:"";width:8px;height:8px;flex:none;background:currentColor;transform:rotate(45deg)}
.ba-note:empty{display:none}
.ba-hint{display:none}
.js .ba-hint{display:block;font-size:15px;color:var(--ba-muted,#555)}
.ba-note:not(:empty)+.ba-hint{margin-top:6px}