@layer components {
  /* ===================================================
     Image Block and Sacred Illustrations
     Version: 3.0, Editorial Responsive Rewrite (2026)

     Improvements:
     • Removes card background, border and outer container shadow
     • Lets artwork sit freely within the editorial flow
     • Preserves light and dark theme image swapping
     • Improves image sizing and responsive behaviour
     • Adds a refined editorial caption treatment
     • Supports long captions and linked images safely
     • Preserves existing class names and theme tokens
     =================================================== */

  /* ===================================================
     Image figure wrapper
     =================================================== */

  :where(.image-block) {
    width: 100%;
    max-width: 100%;

    margin:
      clamp(
        2rem,
        6vw,
        var(--space-lg, 3rem)
      )
      auto;

    padding: 0;

    text-align: center;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    overflow: visible;
  }

  /* ===================================================
     Linked image asset
     =================================================== */

  :where(.image-block__asset) {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;

    color: inherit;
    text-decoration: none;
  }

  :where(.image-block__asset:focus-visible) {
    outline:
      2px solid
      color-mix(
        in srgb,
        var(--text-accent) 70%,
        transparent
      );

    outline-offset: 4px;
    border-radius: var(--radius-lg, 1rem);
  }

  /* ===================================================
     Sacred image
     =================================================== */

  :where(.image-gnostic) {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    margin-inline: auto;

    border: 0;
    border-radius:
      var(
        --image-radius,
        var(--radius-lg, 1rem)
      );

    box-shadow:
      var(
        --image-shadow,
        0 12px 36px
        color-mix(
          in srgb,
          var(--shadow-glow) 35%,
          transparent
        )
      );
  }

  /* Optional full-width editorial image */
  :where(.image-block.image-block--wide) {
    width: min(100%, 1400px);
  }

  :where(.image-block.image-block--wide .image-gnostic) {
    width: 100%;
  }

  /* Optional completely unframed image */
  :where(.image-block.image-block--plain .image-gnostic) {
    border-radius: 0;
    box-shadow: none;
  }

  /* ===================================================
     Theme-swap support
     =================================================== */

  :where(.image-block--theme-swap)
  :where(.image-block__asset--dark) {
    display: block;
  }

  :where(.image-block--theme-swap)
  :where(.image-block__asset--light) {
    display: none;
  }

  html[data-theme="light"]
  :where(.image-block--theme-swap)
  :where(.image-block__asset--dark) {
    display: none;
  }

  html[data-theme="light"]
  :where(.image-block--theme-swap)
  :where(.image-block__asset--light) {
    display: block;
  }

  :where(.image-block--theme-swap)
  :where(.image-gnostic) {
    display: block;
    margin-inline: auto;
  }

  /* ===================================================
     Editorial caption
     =================================================== */

  :where(.caption-gnostic) {
    position: relative;

    width: min(100%, 70ch);

    margin:
      clamp(
        0.85rem,
        2.5vw,
        1.25rem
      )
      auto
      0;

    padding-top:
      clamp(
        0.75rem,
        2vw,
        1rem
      );

    color:
      var(
        --caption-color,
        var(--text-secondary, var(--text-primary))
      );

    background: transparent;

    font-family:
      var(
        --font-serif,
        "Libre Baskerville",
        serif
      );

    font-size:
      var(
        --type-caption-size,
        clamp(0.85rem, 1.2vw, var(--font-size-sm))
      );

    font-style: italic;
    font-weight: var(--type-weight-regular, 400);
    line-height: var(--type-caption-line, 1.65);
    letter-spacing: 0.015em;
    text-align: center;

    opacity: 0.9;

    overflow-wrap: anywhere;
    word-break: normal;
  }

  :where(.caption-gnostic)::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width:
      clamp(
        40px,
        8vw,
        72px
      );

    height: 1px;

    background:
      color-mix(
        in srgb,
        var(--text-accent) 55%,
        transparent
      );

    transform: translateX(-50%);
  }

  /* Caption title or lead text */
  :where(.caption-gnostic strong) {
    color:
      var(
        --caption-title-color,
        var(--text-accent)
      );

    font-family: var(--font-display);

    font-style: normal;
    font-weight: var(--type-weight-semibold, 600);
    letter-spacing: 0.035em;
  }

  /* Caption links */
  :where(.caption-gnostic a) {
    color: var(--text-accent);
    font-weight: var(--type-weight-semibold, 600);
    text-decoration: none;

    transition:
      color 0.25s ease,
      text-shadow 0.25s ease;
  }

  :where(.caption-gnostic a:hover) {
    color: var(--highlight);
    text-shadow:
      0
      0
      8px
      var(--shadow-glow);
  }

  :where(.caption-gnostic a:focus-visible) {
    color: var(--highlight);

    outline:
      2px solid
      color-mix(
        in srgb,
        var(--text-accent) 70%,
        transparent
      );

    outline-offset: 3px;
    border-radius: 0.15rem;
  }

  /* ===================================================
     Tablet responsiveness
     =================================================== */

  @media (max-width: 1024px) {
    :where(.image-block) {
      margin:
        clamp(
          1.75rem,
          5vw,
          2.75rem
        )
        auto;
    }

    :where(.image-gnostic) {
      border-radius:
        var(
          --image-radius,
          0.85rem
        );
    }

    :where(.caption-gnostic) {
      width: min(100%, 64ch);
    }
  }

  /* ===================================================
     Mobile responsiveness
     =================================================== */

  @media (max-width: 768px) {
    :where(.image-block) {
      margin:
        clamp(
          1.5rem,
          7vw,
          2.25rem
        )
        auto;
    }

    :where(.image-block__asset) {
      width: 100%;
    }

    :where(.image-gnostic) {
      width: 100%;
      max-width: 100%;

      border-radius:
        var(
          --image-radius-mobile,
          0.75rem
        );

      box-shadow:
        var(
          --image-shadow-mobile,
          0 8px 24px
          color-mix(
            in srgb,
            var(--shadow-glow) 28%,
            transparent
          )
        );
    }

    :where(.caption-gnostic) {
      width: min(100%, 58ch);

      margin-top: 0.85rem;
      padding-top: 0.75rem;

      font-size:
        clamp(
          0.82rem,
          3.6vw,
          0.92rem
        );

      line-height: 1.6;
      letter-spacing: 0.01em;
    }

    :where(.caption-gnostic)::before {
      width:
        clamp(
          36px,
          12vw,
          56px
        );
    }
  }

  /* ===================================================
     Narrow mobile responsiveness
     =================================================== */

  @media (max-width: 420px) {
    :where(.image-block) {
      margin-block: 1.5rem;
    }

    :where(.image-gnostic) {
      border-radius: 0.65rem;
      box-shadow:
        0
        6px
        18px
        color-mix(
          in srgb,
          var(--shadow-glow) 24%,
          transparent
        );
    }

    :where(.caption-gnostic) {
      width: 100%;

      margin-top: 0.75rem;
      padding-top: 0.65rem;

      font-size: 0.82rem;
      line-height: 1.55;
    }
  }

  /* ===================================================
     Reduced motion
     =================================================== */

  @media (prefers-reduced-motion: reduce) {
    :where(.caption-gnostic a) {
      transition: none;
    }
  }
}