/* ==========================================================================
   MODULE: Image Block

   Standalone full-width image module.
   - Image always fills the full 740px blog column width
   - Height is determined by the image's natural aspect ratio (never fixed)
   - 10px corner radius applied via base.css global rule
   - Optional caption below the image

   WP DEVELOPER NOTE:
   This is its own ACF flexible content row with:
   - image field (required)
   - text field for caption (optional)

   For inline images within body copy, editors insert directly
   into the WYSIWYG text field — no custom block needed.
   ========================================================================== */

.skd-blog-new .skd-module-image {
  padding-top: 60px;
  padding-bottom: 0;
}

/* — Splitter variant: used when an image sits between a heading and body copy.
   Add class skd-module-image--splitter to the outer wrapper div.
   Pattern:
     <div class="skd-block skd-module-text">                              ← H2 only
     <div class="skd-block skd-module-image skd-module-image--splitter">  ← this class
     <div class="skd-block skd-module-text" style="padding-top:0">        ← body copy
   ————————————————————————————————————————————————————————————————————— */
.skd-blog-new .skd-module-image.skd-module-image--splitter {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Full-width image — natural height, never cropped or fixed */
.skd-blog-new .skd-module-image__img {
  width: 100%;
  height: auto;
  display: block;
}

/* Optional caption */
.skd-blog-new .skd-module-image__caption {
  margin-top: 12px;
  font-size: 14px;
  font-weight: var(--skd-fw-regular);
  line-height: 1.5;
  color: var(--skd-color-text);
  opacity: 0.75;
}