/* Native core/image variant; ordinary images and featured images are untouched. */
.wp-block-image.is-style-smartitaly-wide-image {
  float: none;
  width: 100%;
  max-width: 100%;
  margin: clamp(24px, 3vw, 48px) auto;
}

.wp-block-image.is-style-smartitaly-wide-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  max-height: none;
  /* Keep the ratio supplied by the image's width/height attributes. Explicit
     aspect-ratio auto breaks lazy sizes=auto images under size containment. */
  object-fit: contain !important;
  border-radius: 0;
}

.wp-block-image.is-style-smartitaly-wide-image > a {
  display: block;
}

.wp-block-image.is-style-smartitaly-wide-image figcaption {
  margin: 12px 0 0;
  color: #62696e;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Only a top-level article image breaks out of the reading column. Images in
   columns/groups stay inside their local layout rather than overlapping it. */
@media (min-width: 821px) {
  .single-insight__content > .wp-block-image.is-style-smartitaly-wide-image {
    --si-wide-image-width: min(var(--si-content, 1180px), calc(100vw - (var(--si-page-pad, 20px) * 2)));
    width: var(--si-wide-image-width);
    max-width: none;
    margin-inline: calc((100% - var(--si-wide-image-width)) / 2);
  }
}

/* The editor uses core/image's alignwide canvas, never viewport-based breakout. */
.editor-styles-wrapper .wp-block-image.is-style-smartitaly-wide-image {
  max-width: min(1180px, 100%);
}

@media (max-width: 820px) {
  .single-insight__content > .wp-block-image.is-style-smartitaly-wide-image {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
}