/*
 * Vimmera Image System 0.1.22-rab7
 * Scope: only active when body.vimmera-image-system-active is present.
 */

body.vimmera-image-system-active{
  --z-lightbox: 10950;
  --lightbox-gap: 24px;
  --lightbox-close-size: 44px;
  --lightbox-close-offset: 12px;
  --lightbox-max-width: calc(100vw - (var(--lightbox-gap) * 2));
  --lightbox-max-height: calc(
    100vh - var(--lightbox-gap) - var(--lightbox-close-size) - var(--lightbox-close-offset) - 24px
  );


  --vis-img-float-s: 20%;
  --vis-img-float-m: 25%;
  --vis-img-float-l: 33%;
  --vis-float-s-factor: 0.20;
  --vis-float-m-factor: 0.25;
  --vis-float-l-factor: 0.333333;
  --vis-float-featured-width: 33%;
  --vis-float-featured-factor: 0.333333;
  --vis-float-min-width: 240px;
  --vis-float-gap: 2em;
  --vis-float-bottom-margin: 1.25em;
  --vis-tablet-float-width: 45%;
  --vis-tablet-float-factor: 0.454545;
  --vis-tablet-float-gap: 1.5em;
  --vis-tablet-float-bottom-margin: 1em;
  --vis-img-crop-s: 20vh;
  --vis-img-crop-m: 30vh;
  --vis-img-crop-l: 40vh;
  --vis-test-design-width: 420px;
  --vis-media-bg: #ffffff;
}

/* =========================================================
   Zoom Image: Zoom / Lightbox card state
   ========================================================= */

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-test-design,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-test-design{
  width: min(100%, var(--vis-test-design-width));
  max-width: var(--vis-test-design-width);
  margin: 0 auto 1.5em;
  position: relative;
  overflow: hidden;
  border-radius: var(--vis-card-radius);
  background: var(--vis-caption-bg);
  box-shadow: var(--vis-card-shadow);
  transform: translate3d(0, 0, 0);
  will-change: transform, box-shadow;
  transition:
    transform .22s ease,
    box-shadow .22s ease;
  cursor: pointer;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-test-design img,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-test-design img{
  display: block;
  width: calc(100% + var(--vis-right-crop)) !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  transform: translateX(0);
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-test-design::before,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-test-design::after,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-test-design::before,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-test-design::after{
  content: none !important;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-test-design figcaption,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-test-design figcaption{
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 42px 12px 14px;
  background: var(--vis-caption-bg);
  color: var(--vis-caption-color);
  font-size: 0.9em;
  line-height: 1.45;
  text-align: center;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-test-design figcaption:empty,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-test-design figcaption:empty{
  display: block;
  min-height: 2.2em;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-test-design figcaption::after,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-test-design figcaption::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.72;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13L13 3'/%3E%3Cpath d='M9.5 3H13v3.5'/%3E%3Cpath d='M6.5 13H3V9.5'/%3E%3C/svg%3E");
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-test-design:hover{
  transform: translate3d(0, var(--vis-hover-lift), 0);
  box-shadow: var(--vis-card-shadow-hover);
}

/* =========================================================
   Cards: Query Loop, archives, search results.
   Hover is navigation affordance, not general image animation.
   ========================================================= */

body.vimmera-image-system-active .wp-block-query figure.wp-block-post-featured-image,
body.vimmera-image-system-active article.entry-card figure,
body.vimmera-image-system-active article.entry-card .post-thumb,
body.vimmera-image-system-active article.entry-card .ct-media-container,
body.vimmera-image-system-active article.entry-card .ct-image-container,
body.vimmera-image-system-active .ct-featured-image,
body.vimmera-image-system-active .ct-media-container,
body.vimmera-image-system-active .post-thumb{
  position: relative;
  overflow: hidden;
  border-radius: var(--vis-card-radius);
  background: var(--vis-media-bg);
  box-shadow: var(--vis-card-shadow);
  transform: translate3d(0, 0, 0);
  transition: transform .22s ease, box-shadow .22s ease;
}

body.vimmera-image-system-active .wp-block-query figure.wp-block-post-featured-image img,
body.vimmera-image-system-active article.entry-card figure img,
body.vimmera-image-system-active article.entry-card .post-thumb img,
body.vimmera-image-system-active article.entry-card .ct-media-container img,
body.vimmera-image-system-active article.entry-card .ct-image-container img,
body.vimmera-image-system-active .ct-featured-image img,
body.vimmera-image-system-active .ct-media-container img,
body.vimmera-image-system-active .post-thumb img{
  display: block;
  width: calc(100% + var(--vis-right-crop)) !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  transform: translateX(0) !important;
}

/* Ensure featured/card image wrappers fill their intended card width. */
body.vimmera-image-system-active .wp-block-query figure.wp-block-post-featured-image,
body.vimmera-image-system-active article.entry-card figure,
body.vimmera-image-system-active article.entry-card .post-thumb,
body.vimmera-image-system-active article.entry-card .ct-featured-image,
body.vimmera-image-system-active article.entry-card .ct-media-container,
body.vimmera-image-system-active article.entry-card .ct-image-container,
body.vimmera-image-system-active .ct-featured-image,
body.vimmera-image-system-active .post-thumb{
  box-sizing: border-box;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.vimmera-image-system-active .ct-featured-image > a,
body.vimmera-image-system-active .ct-featured-image > picture,
body.vimmera-image-system-active .ct-featured-image > .ct-media-container,
body.vimmera-image-system-active .post-thumb > a,
body.vimmera-image-system-active .post-thumb > picture,
body.vimmera-image-system-active .post-thumb > .ct-media-container,
body.vimmera-image-system-active article.entry-card figure > a,
body.vimmera-image-system-active article.entry-card figure > picture{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}

body.vimmera-image-system-active .ct-featured-image img,
body.vimmera-image-system-active .post-thumb img,
body.vimmera-image-system-active article.entry-card figure img{
  min-width: 100%;
  object-fit: cover;
}

body.vimmera-image-system-active .wp-block-query figure.wp-block-post-featured-image::after,
body.vimmera-image-system-active article.entry-card figure::after,
body.vimmera-image-system-active article.entry-card .post-thumb::after,
body.vimmera-image-system-active article.entry-card .ct-media-container::after,
body.vimmera-image-system-active article.entry-card .ct-image-container::after,
body.vimmera-image-system-active .ct-featured-image::after,
body.vimmera-image-system-active .ct-media-container::after,
body.vimmera-image-system-active .post-thumb::after{
  content: none !important;
}

body.vimmera-image-system-active .wp-block-query figure.wp-block-post-featured-image:hover,
body.vimmera-image-system-active article.entry-card:hover figure,
body.vimmera-image-system-active article.entry-card:hover .post-thumb,
body.vimmera-image-system-active article.entry-card:hover .ct-media-container,
body.vimmera-image-system-active article.entry-card:hover .ct-image-container,
body.vimmera-image-system-active .ct-featured-image:hover,
body.vimmera-image-system-active .ct-media-container:hover,
body.vimmera-image-system-active .post-thumb:hover{
  transform: translate3d(0, var(--vis-hover-lift), 0);
  box-shadow: var(--vis-card-shadow-hover);
}

/* =========================================================
   Smart Post Show compatibility.
   Decision: keep radius, no outer shadow, no movement.
   Hover: inner shadow only.
   ========================================================= */

body.vimmera-image-system-active .sp-pcp-post-thumb-area,
body.vimmera-image-system-active .sp-pcp-thumb{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--vis-card-radius);
  background: var(--vis-media-bg);
  box-shadow: none !important;
  transform: none !important;
}

body.vimmera-image-system-active .sp-pcp-thumb img,
body.vimmera-image-system-active .sp-pcp-post-thumb-area img{
  display: block;
  width: calc(100% + var(--vis-right-crop)) !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
}

body.vimmera-image-system-active .sp-pcp-post-thumb-area::after,
body.vimmera-image-system-active .sp-pcp-thumb::after{
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: var(--vis-smart-inner-shadow);
  opacity: 1;
  transition: box-shadow .22s ease;
}

body.vimmera-image-system-active .sp-pcp-post:hover .sp-pcp-post-thumb-area,
body.vimmera-image-system-active .sp-pcp-post:hover .sp-pcp-thumb,
body.vimmera-image-system-active .sp-pcp-thumb:hover{
  transform: none !important;
  box-shadow: none !important;
}

body.vimmera-image-system-active .sp-pcp-post:hover .sp-pcp-post-thumb-area::after,
body.vimmera-image-system-active .sp-pcp-post:hover .sp-pcp-thumb::after,
body.vimmera-image-system-active .sp-pcp-thumb:hover::after{
  box-shadow: var(--vis-smart-inner-shadow-hover);
}

/* =========================================================
   Float Featured / Hover Media basis.
   Functional geometry follows the legacy float contract.
   The active text track is measured generically by frontend.js and exposed on
   .entry-content. If measurement is unavailable, the original legacy formula
   remains the fallback. Visual styling stays from the new plugin.
   ========================================================= */

body.vimmera-image-system-active .entry-content{
  --vis-legacy-content: var(--wp--style--global--content-size, var(--theme-block-max-width, 800px));
  --vis-legacy-edge: 16px;
  --vis-legacy-content-left: calc((100% - min(var(--vis-legacy-content), 100%)) / 2);
  --vis-float-track-left: max(var(--vis-legacy-edge), var(--vis-legacy-content-left));
  --vis-float-track-right: max(var(--vis-legacy-edge), var(--vis-legacy-content-left));
  --vis-float-track-width: var(--vis-legacy-content);
}

body.vimmera-image-system-active .entry-content .float-featured{
  --content: var(--vis-float-track-width, var(--wp--style--global--content-size, var(--theme-block-max-width, 800px)));
  --edge: var(--vis-legacy-edge, 16px);
  --content-left: var(--vis-float-track-left, calc((100% - min(var(--content), 100%)) / 2));

  float: left;
  width: clamp(var(--vis-float-min-width), var(--vis-float-featured-width), calc(var(--content) * var(--vis-float-featured-factor)));
  max-width: calc(var(--content) * var(--vis-float-featured-factor));

  margin-top: 0 !important;
  margin-right: var(--vis-float-gap) !important;
  margin-bottom: var(--vis-float-bottom-margin) !important;
  margin-left: var(--vis-float-track-left, max(var(--edge), var(--content-left))) !important;

  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0;
  border-radius: var(--vis-card-radius);
  background: var(--vis-media-bg);
  box-shadow: var(--vis-card-shadow);
  transform: none !important;
}

body.vimmera-image-system-active .entry-content .float-featured:hover{
  transform: none !important;
}

body.vimmera-image-system-active .entry-content .float-featured img:not(.hover-sequence__layer){
  display: block;
  width: calc(100% + var(--vis-right-crop)) !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  transform: translateX(0) !important;
}

body.vimmera-image-system-active .entry-content .float-featured video,
body.vimmera-image-system-active .entry-content .float-featured .hover-sequence__layer{
  border-radius: inherit;
}

/* Hover Video: apply the same right-edge crop to the video layer only.
   Geometry stays on .float-featured; this only overdraws the inner video by the configured right crop. */
body.vimmera-image-system-active .entry-content .hover-video:not(.hover-sequence):not(.hover-video--video-only) .hover-video__video{
  inset: 0 calc(-1 * var(--vis-right-crop)) 0 0 !important;
  width: auto !important;
  max-width: none !important;
}

body.vimmera-image-system-active .entry-content .hover-video.hover-video--video-only:not(.hover-sequence) .hover-video__video{
  width: calc(100% + var(--vis-right-crop)) !important;
  max-width: none !important;
}

/* Sequence layers must stay absolute overlays.
   They are <img> elements, so they must be excluded from the generic 1px poster crop. */
body.vimmera-image-system-active .entry-content .hover-sequence.float-featured .hover-sequence__layer{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover;
  object-position: center center;
  transform: none !important;
}

body.vimmera-image-system-active .entry-content .float-featured::after{
  content: none !important;
}

body.vimmera-image-system-active .entry-content .float-featured + *{
  clear: none !important;
  margin-top: 0 !important;
}

body.vimmera-image-system-active .entry-content::after{
  content: "";
  display: block;
  clear: both;
}

/* Float responsive rules are generated from admin settings. */

/* =========================================================
   Gutenberg image styles: Float / Crop / Panorama.
   ========================================================= */

body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-float-"],
body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-crop-"],
body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-panorama-"],
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-float-"],
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-crop-"],
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-panorama-"]{
  /* Legacy layout contract for Gutenberg image presets. */
  --content: var(--wp--style--global--content-size, var(--theme-block-max-width, 800px));
  --wide: var(--wp--style--global--wide-size, var(--theme-block-wide-max-width, 1290px));
  --edge: 16px;
  --content-left: calc((100% - min(var(--content), 100%)) / 2);
  position: relative;
  overflow: hidden;
  margin-top: 0 !important;
  border-radius: var(--vis-card-radius);
  background: var(--vis-media-bg);
  box-shadow: var(--vis-card-shadow);
}

body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-float-"] img,
body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-crop-"] img,
body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-panorama-"] img,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-float-"] img,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-crop-"] img,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-panorama-"] img{
  display: block;
  width: calc(100% + var(--vis-right-crop)) !important;
  max-width: none !important;
  height: auto !important;
  transform: translateX(0) !important;
  margin: 0 !important;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-float-"] a,
body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-crop-"] a,
body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-panorama-"] a,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-float-"] a,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-crop-"] a,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-panorama-"] a{
  display: block;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-float-"]::after,
body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-crop-"]::after,
body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-panorama-"]::after,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-float-"]::after,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-crop-"]::after,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-panorama-"]::after{
  content: none !important;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-float-"]{
  --content: var(--vis-float-track-width, var(--wp--style--global--content-size, var(--theme-block-max-width, 800px)));
  --edge: var(--vis-legacy-edge, 16px);
  --content-left: var(--vis-float-track-left, calc((100% - min(var(--content), 100%)) / 2));
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-float-left-s,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-float-left-m,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-float-left-l{
  float: left;
  width: clamp(var(--vis-float-min-width), var(--float-w), var(--float-max));
  max-width: var(--float-max);
  margin-top: 0 !important;
  margin-right: var(--vis-float-gap) !important;
  margin-bottom: var(--vis-float-bottom-margin) !important;
  margin-left: var(--vis-float-track-left, max(var(--edge), var(--content-left))) !important;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-float-right-s,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-float-right-m,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-float-right-l{
  float: right;
  width: clamp(var(--vis-float-min-width), var(--float-w), var(--float-max));
  max-width: var(--float-max);
  margin-top: 0 !important;
  margin-left: var(--vis-float-gap) !important;
  margin-bottom: var(--vis-float-bottom-margin) !important;
  margin-right: var(--vis-float-track-right, max(var(--edge), var(--content-left))) !important;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-float-left-s,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-float-right-s{
  --float-w: var(--vis-img-float-s);
  --float-max: calc(var(--content) * var(--vis-float-s-factor));
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-float-left-m,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-float-right-m{
  --float-w: var(--vis-img-float-m);
  --float-max: calc(var(--content) * var(--vis-float-m-factor));
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-float-left-l,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-float-right-l{
  --float-w: var(--vis-img-float-l);
  --float-max: calc(var(--content) * var(--vis-float-l-factor));
}

body.vimmera-image-system-active .entry-content figure.wp-block-image[class*="is-style-img-float-"] + *{
  clear: none !important;
  margin-top: 0 !important;
}

/* Editor preview uses the legacy fallback geometry; runtime measurement is frontend-only. */
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-float-left-s,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-float-left-m,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-float-left-l{
  float: left;
  width: clamp(var(--vis-float-min-width), var(--float-w), var(--float-max));
  max-width: var(--float-max);
  margin-top: 0 !important;
  margin-right: var(--vis-float-gap) !important;
  margin-bottom: var(--vis-float-bottom-margin) !important;
  margin-left: max(var(--edge), var(--content-left)) !important;
}
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-float-right-s,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-float-right-m,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-float-right-l{
  float: right;
  width: clamp(var(--vis-float-min-width), var(--float-w), var(--float-max));
  max-width: var(--float-max);
  margin-top: 0 !important;
  margin-left: var(--vis-float-gap) !important;
  margin-bottom: var(--vis-float-bottom-margin) !important;
  margin-right: max(var(--edge), var(--content-left)) !important;
}
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-float-left-s,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-float-right-s{ --float-w: var(--vis-img-float-s); --float-max: calc(var(--content) * var(--vis-float-s-factor)); }
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-float-left-m,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-float-right-m{ --float-w: var(--vis-img-float-m); --float-max: calc(var(--content) * var(--vis-float-m-factor)); }
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-float-left-l,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.is-style-img-float-right-l{ --float-w: var(--vis-img-float-l); --float-max: calc(var(--content) * var(--vis-float-l-factor)); }
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image[class*="is-style-img-float-"] + *{ clear: none !important; margin-top: 0 !important; }

/* Gutenberg Float responsive rules are generated from admin settings. */

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-crop-center-s,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-crop-center-m,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-crop-center-l{
  float: none;
  width: min(100%, var(--content)) !important;
  max-width: var(--content) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 1.25em !important;
  height: var(--crop-h);
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-crop-center-s{ --crop-h: var(--vis-img-crop-s); }
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-crop-center-m{ --crop-h: var(--vis-img-crop-m); }
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-crop-center-l{ --crop-h: var(--vis-img-crop-l); }

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-crop-center-s img,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-crop-center-m img,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-crop-center-l img{
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-panorama-s,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-panorama-m,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-panorama-l{
  float: none;
  display: table;
  width: auto !important;
  max-width: var(--content) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 1.25em !important;
  overflow: hidden;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-panorama-s img,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-panorama-m img,
body.vimmera-image-system-active .entry-content figure.wp-block-image.is-style-img-panorama-l img{
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  object-fit: contain;
  object-position: center;
}

/* Captions stay intentionally limited to zoom-image contexts. */


/* =========================================================
   Legacy Zoom Images: .zoom bleibt ein eigener produktiver Zoom-Bildtyp.
   JS erzeugt fehlende Captions, damit Icon und Klickfläche auch ohne Caption existieren.
   ========================================================= */

body.vimmera-image-system-active .entry-content figure.wp-block-image.zoom,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.zoom{
  cursor: pointer;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.zoom img,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.zoom img,
body.vimmera-image-system-active .entry-content figure.wp-block-image.zoom figcaption,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.zoom figcaption{
  cursor: pointer;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.zoom figcaption,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.zoom figcaption{
  position: relative;
  box-sizing: border-box;
  padding-left: 14px;
  padding-right: 42px;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.zoom figcaption:empty,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.zoom figcaption:empty{
  display: block;
  min-height: 2.2em;
}

body.vimmera-image-system-active .entry-content figure.wp-block-image.zoom figcaption::after,
body.vimmera-image-system-active .editor-styles-wrapper figure.wp-block-image.zoom figcaption::after{
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.85;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13L13 3'/%3E%3Cpath d='M9.5 3H13v3.5'/%3E%3Cpath d='M6.5 13H3V9.5'/%3E%3C/svg%3E");
}

/* =========================================================
   Float stopper.
   ========================================================= */

body.vimmera-image-system-active .entry-content .wp-block-separator,
body.vimmera-image-system-active .entry-content hr{
  clear: both;
  display: block;
}

/* =========================================================
   Zoom / Lightbox Lightbox. Only active if JS adds is-test-design-lightbox.
   ========================================================= */

body.vimmera-image-system-active.lightbox-open{
  overflow: hidden;
}

body.vimmera-image-system-active #img-lightbox{
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: none;
}

body.vimmera-image-system-active #img-lightbox[aria-hidden="false"]{
  display: block;
}

body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox){
  background: var(--vis-lightbox-backdrop);
}

body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox) .lb-inner{
  position: absolute;
  inset: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    calc(var(--lightbox-close-size) + var(--lightbox-close-offset) + 12px)
    var(--lightbox-gap)
    var(--lightbox-gap);
}

body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox) .lb-figure{
  width: fit-content;
  max-width: var(--lightbox-max-width);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--vis-lightbox-radius);
  background: var(--vis-media-bg);
  box-shadow:
    0 12px 36px rgba(0,0,0,0.34),
    0 34px 90px rgba(0,0,0,0.24);
}

body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox) .lb-media{
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  max-height: calc(var(--lightbox-max-height) - var(--vis-lightbox-caption-space));
  margin: 0 auto;
  overflow: hidden;
  background: var(--vis-media-bg);
  box-shadow: none !important;
}

body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox) .lb-media img{
  display: block;
  width: auto;
  max-width: var(--lightbox-max-width);
  max-height: calc(var(--lightbox-max-height) - var(--vis-lightbox-caption-space));
  height: auto;
  margin: 0 auto;
}

body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox) .lb-media::after{
  content: none !important;
}

body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox) .lb-caption{
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 12px 16px 15px;
  background: var(--vis-caption-bg);
  color: rgba(0,0,0,0.68);
  text-align: center;
  line-height: 1.45;
  box-shadow: none !important;
}

body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox) .lb-caption:empty{
  display: none;
}

body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox) .lb-close{
  position: fixed;
  top: var(--lightbox-close-offset);
  right: var(--lightbox-close-offset);
  z-index: calc(var(--z-lightbox) + 2);
  width: var(--lightbox-close-size);
  height: var(--lightbox-close-size);
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  color: #111;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.24);
}

@media (max-width: 600px){
  body.vimmera-image-system-active{
    --lightbox-gap: 14px;
    --lightbox-close-size: 40px;
    --lightbox-close-offset: 10px;
    --lightbox-max-width: calc(100vw - (var(--lightbox-gap) * 2));
    --lightbox-max-height: calc(
      100vh - var(--lightbox-gap) - var(--lightbox-close-size) - var(--lightbox-close-offset) - 18px
    );
  }

  body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox) .lb-figure{
    border-radius: var(--vis-mobile-radius);
  }

  body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox) .lb-media,
  body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox) .lb-media img{
    max-height: calc(var(--lightbox-max-height) - var(--vis-lightbox-caption-space-mobile));
  }

  body.vimmera-image-system-active #img-lightbox:is(.is-test-design-lightbox,.is-vis-zoom-lightbox) .lb-caption{
    padding: 10px 12px 12px;
  }
}