/* CNV Compare — one frame, labelled buttons swap the image, and the frame takes
   the ratio of the image on show. All images stay in the HTML; only the active one is visible. Without JS (scripting:none)
   the labelled images stack as a plain list.
   The article theme styles .gallery-icon with !important (grey background,
   height:auto, object-fit:unset), so this block overrides those on purpose. */
.cnv-post-content .cnv-compare{width:90%;max-width:90%;margin:var(--cnv-media-gap,32px) auto;color:var(--cnv-text,#1f2933)}
/* A tall (portrait) frame would be taller than the screen at column width: cap its
   height near 80vh by narrowing it, centred together with its buttons. */
@supports (max-width:min(100%,1px)){.cnv-post-content .cnv-compare{max-width:min(90%,calc(80vh * var(--cnv-compare-ratio,1.5)));transition:max-width 220ms ease}}
/* Same rule as the theme's other CNV gallery types: 90% of the column, centred, with
   the article media gap above and below; full width on phones. */
@media(max-width:767px){
  .cnv-post-content .cnv-compare{width:100%;max-width:100%}
  @supports (max-width:min(100%,1px)){.cnv-post-content .cnv-compare{max-width:min(100%,calc(80vh * var(--cnv-compare-ratio,1.5)))}}
}
.cnv-post-content .cnv-compare__stage{position:relative;overflow:hidden;border-radius:4px;background:var(--cnv-compare-bg,#101214)}
/* Ratio box from padding, not aspect-ratio/inset: older Safari/Chrome ignore those
   and would collapse the frame to nothing, leaving only the buttons. */
.cnv-post-content .cnv-compare__stage::before{content:"";display:block;padding-top:calc(100% / var(--cnv-compare-ratio, 1.5));transition:padding-top 220ms ease}
.cnv-post-content .cnv-compare__layer{position:absolute;top:0;right:0;bottom:0;left:0;float:none;width:auto;margin:0;padding:0;opacity:0;visibility:hidden;transition:opacity 160ms ease-out,visibility 0s linear 160ms}
.cnv-post-content .cnv-compare__layer.is-active{opacity:1;visibility:visible;transition:opacity 160ms ease-out}
/* The theme forces visibility:visible on every <img>, so an image in a faded-out layer
   would still be hit-tested (the topmost, last layer received every click and the
   lightbox opened the wrong picture). Take inactive layers out of play entirely; the
   delay lets the outgoing image finish its fade. */
.cnv-post-content .cnv-compare__layer:not(.is-active),.cnv-post-content .cnv-compare__layer:not(.is-active) *{pointer-events:none!important}
.cnv-post-content .cnv-compare__layer:not(.is-active) *{visibility:hidden!important;transition:visibility 0s linear 160ms}
.cnv-post-content .cnv-compare .gallery-icon{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:100%!important;margin:0;padding:0;border-radius:0;background:transparent!important;line-height:0}
.cnv-post-content .cnv-compare .gallery-icon a{display:block;width:100%;height:100%;cursor:zoom-in}
/* The frame follows each image's ratio (see compare-v3.js); contain only absorbs the
   moment of transition, so an image is never stretched or cropped. */
.cnv-post-content .cnv-compare .gallery-icon img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;margin:0!important}
.cnv-post-content .cnv-compare .gallery-icon a:hover img{transform:none}
/* The label lives on the button; keep the caption for screen readers and search. */
.cnv-post-content .cnv-compare__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cnv-post-content .cnv-compare__controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cnv-post-content .cnv-compare__ctrl{min-height:40px;margin:0;padding:0 16px;border:1px solid var(--cnv-line,#d3d9df);border-radius:4px;background:#fff;color:var(--cnv-text,#1f2933);font:inherit;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;transition:border-color 140ms ease-out,background-color 140ms ease-out,color 140ms ease-out}
.cnv-post-content .cnv-compare__ctrl:hover{border-color:var(--cnv-accent,#1769e0)}
.cnv-post-content .cnv-compare__ctrl.is-active{border-color:var(--cnv-accent,#1769e0);background:var(--cnv-accent,#1769e0);color:#fff}
.cnv-post-content .cnv-compare__ctrl:focus-visible{outline:2px solid var(--cnv-accent,#1769e0);outline-offset:2px}
@media(max-width:767px){
  .cnv-post-content .cnv-compare__controls{flex-wrap:nowrap;margin-right:-16px;padding-right:16px;overflow-x:auto;scrollbar-width:none}
  .cnv-post-content .cnv-compare__controls::-webkit-scrollbar{display:none}
  .cnv-post-content .cnv-compare__ctrl{flex:0 0 auto;min-height:44px}
}
@media(prefers-reduced-motion:reduce){.cnv-post-content .cnv-compare,.cnv-post-content .cnv-compare__stage::before,.cnv-post-content .cnv-compare__layer,.cnv-post-content .cnv-compare__layer *,.cnv-post-content .cnv-compare__ctrl{transition:none}}
@media(scripting:none){
  .cnv-post-content .cnv-compare{max-width:none}
  .cnv-post-content .cnv-compare__stage{overflow:visible;background:none}
  .cnv-post-content .cnv-compare__stage::before{display:none}
  .cnv-post-content .cnv-compare__layer{position:static;opacity:1;visibility:visible;margin:0 0 14px}
  .cnv-post-content .cnv-compare__layer:not(.is-active),.cnv-post-content .cnv-compare__layer:not(.is-active) *{pointer-events:auto!important}
  .cnv-post-content .cnv-compare__layer:not(.is-active) *{visibility:visible!important}
  .cnv-post-content .cnv-compare__caption{position:static;width:auto;height:auto;margin:6px 0 0;overflow:visible;clip-path:none;white-space:normal;font-size:13.5px}
  .cnv-post-content .cnv-compare__controls{display:none}
  .cnv-post-content .cnv-compare .gallery-icon{display:block!important;height:auto!important}
  .cnv-post-content .cnv-compare .gallery-icon a{height:auto}
  .cnv-post-content .cnv-compare .gallery-icon img{height:auto!important;object-fit:unset!important}
}