/* Block "compare" (before / after, 2026-10, docs/reports/template-renovation.md). Loaded only on pages with the block.
   Default markup = the two photos side by side ("pair", and the slider without JavaScript); compare.js turns a slider
   figure into one frame (is-live): the "after" photo is clipped at --ls-cmp, a handle and a range input sit on top. */
.ls-compare{list-style:none;display:grid;gap:clamp(32px,4vw,48px) clamp(20px,3vw,32px);grid-template-columns:minmax(0,1fr);--_ratio:3/2}
@media (min-width:900px){.ls-compare--c2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ls-compare--wide{--_ratio:16/9}
.ls-compare--square{--_ratio:1/1}
.ls-compare--portrait{--_ratio:4/5}
.ls-compare__fig{position:relative;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;border-radius:var(--ls-r-lg);overflow:hidden;background:var(--_line)}
@media (min-width:560px){.ls-compare__fig{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ls-compare__pane{position:relative;aspect-ratio:var(--_ratio);overflow:hidden;background:var(--ls-surface)}
.ls-compare__img{display:block;width:100%;height:100%;object-fit:cover}
.ls-compare__tag{position:absolute;top:12px;left:12px;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--ls-primary) 78%,#0000);color:var(--ls-on-primary);font:600 var(--ls-fs-xs)/1.2 var(--ls-font-ui);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.ls-compare__pane--after .ls-compare__tag{background:var(--ls-accent);color:var(--ls-accent-contrast)}
/* live slider: one frame, the "after" photo over the "before" photo, clipped from the left edge to the handle */
.ls-compare__fig.is-live{display:block;aspect-ratio:var(--_ratio);gap:0;touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none}
.ls-compare__fig.is-live .ls-compare__pane{position:absolute;inset:0;aspect-ratio:auto}
.ls-compare__fig.is-live .ls-compare__pane--after{clip-path:inset(0 0 0 var(--ls-cmp,50%))}
.ls-compare__fig.is-live .ls-compare__pane--after .ls-compare__tag{left:auto;right:12px}
.ls-compare__fig.is-live img{pointer-events:none;-webkit-user-drag:none}
.ls-compare__handle{position:absolute;top:0;bottom:0;left:var(--ls-cmp,50%);width:2px;margin-left:-1px;background:var(--ls-on-primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--ls-primary) 25%,#0000);pointer-events:none}
.ls-compare__handle::after{content:"";position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--ls-on-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 22px no-repeat;box-shadow:var(--ls-shadow);transition:transform .2s var(--ls-ease)}
.ls-compare__fig.is-dragging .ls-compare__handle::after{transform:scale(1.08)}
.ls-compare__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.ls-compare__fig:has(.ls-compare__range:focus-visible) .ls-compare__handle::after{outline:3px solid var(--ls-accent);outline-offset:3px}
.ls-compare__body{margin-top:18px;max-width:680px}
.ls-compare__meta{margin-bottom:6px;font:600 var(--ls-fs-xs)/1.4 var(--ls-font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--_muted)}
.ls-compare__title{font-size:var(--ls-fs-h3);line-height:1.3}
.ls-compare__link{text-decoration:none}
.ls-compare__link:hover{text-decoration:underline;text-decoration-color:var(--_deco)}
.ls-compare__text{margin-top:8px;color:var(--_muted)}
.ls-compare__more{margin-top:6px}
.ls-compare + .ls-btns{justify-content:center}