/* =========================================================
   Image component (with optional rich text)
   - sb-* = runtime
   - Uses tokens so dark mode behaves.
   ========================================================= */

.sb-image {
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* alignment (figure itself) */
.sb-image--left { margin-right: auto; text-align: left; }
.sb-image--center { margin-left: auto; margin-right: auto; text-align: center; }
.sb-image--right { margin-left: auto; text-align: right; }

.sb-image__link {
  display: block;
  border-radius: var(--sb-img-radius, 16px);
  overflow: hidden;
  box-shadow: var(--sb-img-shadow, none);
  text-decoration: none;
}

.sb-image__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: var(--sb-img-fit, cover);
}

/* aspect ratio support */
.sb-image--aspect .sb-image__img {
  aspect-ratio: var(--sb-img-aspect, 1/1);
}

/* placeholder (keeps it visible in canvas when no src) */
.sb-image__img--placeholder {
  background: color-mix(in oklab, Canvas, gray 10%);
  min-height: 160px;
}

/* no-link mode */
.sb-image--nolink .sb-image__link {
  pointer-events: none;
  cursor: default;
}

.sb-image__cap {
  margin-top: .5rem;
  font-weight: 600;
  color: var(--sb-text, inherit);
}

/* ---------------------------------------------------------
   Rich text region (styled like rich-text-block)
   We load rich-text-block.css dynamically from image.js
   --------------------------------------------------------- */

.sb-image__rich {
  margin-top: .5rem;
  border-radius: .75rem;
  box-sizing: border-box;
}

/* If a background or border is applied, give it padding */
.sb-image__rich.sb-image__rich--hasbg {
  padding: .75rem;
}

/* Keep long URLs/etc from wrecking cards */
.sb-image__rich .sb-richtext-prose {
  overflow-wrap: anywhere;
}