@layer pmx.foundation, pmx.plugins, pmx.theme;
@layer pmx.plugins {
.pmx-document {
  --pmx-image-max-block-size: min(62dvh, 36rem);

  > [data-pmx-block] {
    &:has(
      > :is(
        img[data-pmx-image="background"],
        p:has(> img[data-pmx-image="background"]:only-child)
      )
    ) {
      isolation: isolate;
    }

    > :is(
      img[data-pmx-image="background"],
      p:has(> img[data-pmx-image="background"]:only-child)
    ) {
      margin: 0;
      overflow: hidden;

      &,
      > img {
        display: block;
        inline-size: 100%;
        block-size: 100%;
        border-radius: 0;
      }
    }
  }

  /* Slides and media columns already have a box; fill it. */
  &[data-pmx-play="presentation"] > [data-pmx-block],
  &:not([data-pmx-play="presentation"])
    > [data-pmx-block]:is(
      [data-pmx-block-layout="media-start"],
      [data-pmx-block-layout="media-end"]
    ) {
    position: relative;

    > :is(
      img[data-pmx-image="background"],
      p:has(> img[data-pmx-image="background"]:only-child)
    ) {
      position: absolute;
      z-index: -1;
      inset: 0;
      max-inline-size: none;

      &,
      > img {
        max-block-size: none;
      }
    }
  }

  /* Document and Focus: the image sizes the Block; content stacks over it. */
  &:not([data-pmx-play="presentation"])
    > [data-pmx-block]:not(
      [data-pmx-block-layout="media-start"],
      [data-pmx-block-layout="media-end"]
    ):has(
      > :is(
        img[data-pmx-image="background"],
        p:has(> img[data-pmx-image="background"]:only-child)
      )
    ) {
    display: grid;

    > * {
      grid-area: 1 / 1;
    }

    > :is(
      img[data-pmx-image="background"],
      p:has(> img[data-pmx-image="background"]:only-child)
    ) {
      z-index: 0;
      min-block-size: 100%;
      max-block-size: var(--pmx-image-max-block-size);

      &:has(> img) {
        display: grid;
      }

      &,
      > img {
        min-block-size: 100%;
        max-block-size: var(--pmx-image-max-block-size);
      }
    }

    > :not(
      img[data-pmx-image="background"],
      p:has(> img[data-pmx-image="background"]:only-child)
    ) {
      z-index: 1;
    }
  }

  &:not([data-pmx-play="presentation"])
    img[data-pmx-image="content"][data-pmx-image-hint] {
    max-inline-size: 100%;
    inline-size: auto;
    block-size: auto;
    max-block-size: var(--pmx-image-max-block-size);

    &[data-pmx-image-fit="cover"] {
      inline-size: 100%;
      aspect-ratio: 16 / 9;
    }
  }
}

img[data-pmx-image-fit="contain"] {
  object-fit: contain;
}

img[data-pmx-image-fit="cover"] {
  object-fit: cover;
}

img[data-pmx-image="content"] {
  max-inline-size: 100%;
  block-size: auto;
}

a[data-pmx-lightbox] {
  cursor: zoom-in;
}
a[data-pmx-lightbox]:focus-visible {
  outline: 2px solid var(--pmx-color-focus, currentColor);
  outline-offset: 4px;
  border-radius: var(--pmx-radius-md, 0.5rem);
}
}