/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — IMAGE
   Classification : UI Atom | Simple Image Display
   Version        : 1.0.0 | Genesis • Image Primitive
   File           : /tools/modules/ui.image/ui.image.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ──────────────────────────────────────────────────────────────── */

@layer ui.image {

  /* ─── Image Container (figure) ──────────────────────────────── */
  .ui-image[data-module="ui.image"],
  [data-module="ui.image"] {
    display: block;
    width: var(--ui-image-width, auto);
    max-width: var(--ui-image-max-width, 100%);
    height: var(--ui-image-height, auto);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border-radius: var(--ui-image-border-radius, 0);
  }

  /* ─── The Image Element ─────────────────────────────────────── */
  .ui-image__img,
  [data-module="ui.image"] > img {
    display: block;
    width: 100%;
    height: var(--ui-image-height, auto);
    aspect-ratio: var(--ui-image-aspect-ratio, auto);
    object-fit: var(--ui-image-object-fit, cover);
    border-radius: var(--ui-image-border-radius, 0);
  }

  /* ─── Caption ───────────────────────────────────────────────── */
  .ui-image__caption,
  [data-module="ui.image"] > figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--site-fg-muted, #666);
    text-align: center;
  }

  /* ─── Loading State ─────────────────────────────────────────── */
  [data-module="ui.image"] > img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  [data-module="ui.image"] > img[loading="lazy"][data-loaded="true"],
  [data-module="ui.image"] > img:not([loading="lazy"]) {
    opacity: 1;
  }

  /* ─── Theme Awareness ───────────────────────────────────────── */
  [data-theme="dark"] .ui-image__caption,
  [data-theme="dark"] [data-module="ui.image"] > figcaption {
    color: var(--site-fg-muted, #aaa);
  }

  /* ─── Motion Reduction ──────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    [data-module="ui.image"] > img {
      transition: none !important;
    }
  }

  /* ─── Genesis Token Bridges ─────────────────────────────────── */
  :root {
    --ui-image-width: auto;
    --ui-image-max-width: 100%;
    --ui-image-height: auto;
    --ui-image-aspect-ratio: auto;
    --ui-image-object-fit: cover;
    --ui-image-border-radius: 0;
  }

  /* ─── Debug Visualization ───────────────────────────────────── */
  [data-module="ui.image"][data-debug="true"] {
    outline: 1px dashed rgba(255, 128, 0, 0.3);
    outline-offset: 2px;
  }
}