@use "@naomi-2025/ui-core/site-config";
@use "s360-scss-toolkit";

.media--image {
  &.media--image-photo-gallery {
    --figure--display: block;
    --caption--margin: 0;
    --caption--font-size: #{ s360-scss-toolkit.font-size-ms(-1) };
    --caption--padding: 0.25em 0.75em;

    overflow: hidden;

    &:hover {
      .media__figcaption {
        translate: 0px 0px;
      }
    }

    .media__figcaption {
      position: absolute;
      bottom: 0;
      border-top: 1px solid var(--highlight-color);
      width: 100%;

      // Only hide the caption if the browser allows hovering.
      @media (hover: hover) {
        translate: 0px calc(100% + 1px);
        transition: translate 200ms ease-in-out;
      }

      > * {
        position: relative;
      }

      &::before {
        content: '';
        background-color: var(--bg-color);
        opacity: 0.8;
        inset: 0;
        position: absolute;
      }
    }
  }
}
