/* ============================================================
   IMAGES — hero & article
   Apvesto · data-editorial dark theme
   ============================================================ */

/* Hero image — centered, matches content width, between hero and breadcrumb */
.hero-image {
  display: block;
  width: 100%;
  max-width: var(--content-w, 720px);
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(-1 * var(--sp-32, 32px));
  margin-bottom: var(--sp-32, 32px);
  padding: 0 var(--sp-24, 24px);
  position: relative;
  z-index: 1;
}

.hero-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 8px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 60px var(--glow, #C9A84C22);
  object-fit: cover;
  aspect-ratio: 1200 / 630;
}

/* Article images — within content sections, after H2 */
.article-image {
  display: block;
  margin: var(--sp-24, 24px) 0 var(--sp-32, 32px);
}

.article-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, 0.25));
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

/* Subtle border for images on dark background */
.hero-image img,
.article-image img {
  border: 1px solid var(--border, #2A2E3A);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .hero-image {
    padding: 0 var(--sp-16, 16px);
    margin-top: calc(-1 * var(--sp-16, 16px));
    margin-bottom: var(--sp-24, 24px);
  }

  .article-image {
    margin: var(--sp-16, 16px) 0 var(--sp-24, 24px);
  }
}