/* Russian Vektor comparison. Geometry and fonts follow the existing gallery. */
.v2-comparison{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;max-width:100%;padding:3px;border:1px solid var(--line);border-radius:6px;background:#171717}
.v2-comparison[hidden]{display:none}
.v2-comparison button{min-height:40px;padding:8px 14px;border:0;border-radius:3px;background:transparent;color:var(--muted);font:inherit;font-size:13px;font-weight:500;line-height:1.35;white-space:nowrap}
.v2-comparison button[aria-pressed="true"]{background:var(--yellow);color:#111}
.v2-comparison button:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.v2-actions{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}
.v2-actions>.v2-comparison{flex:0 0 auto}
.vektor-feature .vektor-viewer>.v2-actions{margin:12px 18px}
.vektor-case-card>.v2-actions{margin:0 0 12px}
#vektor-gallery-dialog .vektor-dialog-toolbar>.v2-actions{margin:0 0 0 auto}
@media(max-width:700px){
  .v2-actions{gap:6px;flex-wrap:nowrap}
  .vektor-feature .vektor-viewer>.v2-actions{grid-column:1/-1;grid-row:1;justify-self:stretch;margin:0 10px 10px}
  .vektor-feature[data-v2-comparison-ready] .vektor-slides{grid-row:2}
  .vektor-feature[data-v2-comparison-ready] .vektor-project-heading{grid-row:3}
  .vektor-feature[data-v2-comparison-ready] .vektor-story>.button,.vektor-feature[data-v2-comparison-ready] .vektor-viewer>.vektor-controls{grid-row:4}
  .portfolio-projects .vektor-feature[data-v2-comparison-ready] .vektor-story>.button,.portfolio-projects .vektor-feature[data-v2-comparison-ready] .vektor-viewer>.vektor-controls{grid-row:3}
  .v2-comparison button{font-size:12px;padding:8px 7px}
  #vektor-gallery-dialog:has(.v2-actions) .v2-dialog-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #vektor-gallery-dialog .vektor-dialog-toolbar:has(.v2-actions){gap:8px;padding:10px 12px}
  #vektor-gallery-dialog .vektor-dialog-toolbar>.v2-actions{flex:1;margin:0}
}
/* Russian paired-image reveal. Both canvases keep the current image geometry. */
.v2-reveal{position:relative;min-width:0;isolation:isolate;--v2-reveal-position:0%}
.v2-reveal-before{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;clip-path:inset(0 calc(100% - var(--v2-reveal-position)) 0 0)}
.v2-reveal .v2-reveal-before picture,.v2-reveal .v2-reveal-before img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:fill;object-position:center}
.v2-reveal .vektor-zoom{z-index:2}
.v2-reveal-line{position:absolute;z-index:2;left:var(--v2-reveal-position);top:0;bottom:0;width:2px;transform:translateX(-50%);background:#fff;box-shadow:0 0 4px #0009;pointer-events:none}
.v2-reveal-handle{position:absolute;z-index:3;left:clamp(22px,var(--v2-reveal-position),calc(100% - 22px));top:50%;width:44px;height:44px;min-height:44px;transform:translate(-50%,-50%);display:grid;place-items:center;padding:0;border:0;border-radius:0;background:transparent;color:#111;cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none}
.v2-reveal-handle>span{display:grid;place-items:center;width:44px;height:44px;border:2px solid #101010;border-radius:50%;background:var(--yellow);box-shadow:0 2px 10px #0006;pointer-events:none}
.v2-reveal-handle svg{width:26px;height:26px}
.v2-reveal-handle:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.v2-reveal-label{position:absolute;z-index:2;top:12px;padding:5px 8px;border-radius:3px;background:#101010d9;color:#fff;font-size:12px;font-weight:500;line-height:1.4;pointer-events:none}
.v2-reveal-label-before{left:12px}.v2-reveal-label-after{right:12px}
.v2-reveal[data-v2-reveal-position="0"] .v2-reveal-label-before,.v2-reveal[data-v2-reveal-position="100"] .v2-reveal-label-after{visibility:hidden}
.v2-reveal[data-v2-reveal-ready="false"]>.v2-reveal-handle,.v2-reveal[data-v2-reveal-ready="false"]>.v2-reveal-line,.v2-reveal[data-v2-reveal-ready="false"]>.v2-reveal-label{visibility:hidden}
.vektor-case-card>.v2-reveal{overflow:hidden;border-radius:12px}
#vektor-gallery-dialog .v2-reveal-modal{flex:none;max-width:100%;max-height:100%}
#vektor-gallery-dialog .v2-reveal-modal>img{display:block;width:100%;height:100%;object-fit:fill}
@media(max-width:700px){.vektor-case-card>.v2-reveal{border-radius:10px}.v2-reveal-label{top:10px;font-size:11px}.v2-reveal-label-before{left:10px}.v2-reveal-label-after{right:10px}}