/* Article figure component — used in blog posts and long-form landings
   to insert AI-generated images between paragraphs without breaking the
   narrow reading column. Loaded alongside article layouts. */

.art-figure {
  margin: 32px auto;
  max-width: 740px;              /* matches .art-body max-width */
  padding: 0;
}

.art-figure-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(212, 175, 55, 0.05);
  background: linear-gradient(180deg, #14101f, #0a0814);
  aspect-ratio: 16 / 10;         /* prevents layout shift while loading */
  object-fit: cover;
}

.art-figure-img.square {
  aspect-ratio: 1 / 1;
}

.art-figure-img.portrait {
  aspect-ratio: 3 / 4;
}

.art-figure-caption {
  margin: 12px 4px 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  color: #9f92ab;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.2px;
}

/* Fade-in handled by the site's existing .reveal IntersectionObserver.
   Add class="art-figure reveal" in templates to enable the animation. */

/* Mobile: full-bleed inside the 20px page gutters */
@media (max-width: 720px) {
  .art-figure {
    margin: 24px 0;
  }
  .art-figure-img {
    border-radius: 12px;
  }
  .art-figure-caption {
    font-size: 0.88rem;
  }
}

/* When figure appears inside .art-body, keep the reading measure */
.art-body .art-figure {
  margin-left: auto;
  margin-right: auto;
}