/**
 * @file gallery_item.css
 * @component Gallery Item (Internal)
 * @description Keeps thumbnail, native summary, full media, and caption
 * visible and operable before parent enhancement.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * None.
 */
:where([data-component-id="marsal_sdc:gallery_item"]) {
  min-inline-size: 0;
  color: var(--marsal-color-textPrimary);

  & > .marsal-gallery-item__thumbnail :where(img, video) {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  & > .marsal-gallery-item__details {
    margin-block-start: var(--marsal-space-2xs);

    & > .marsal-gallery-item__summary {
      padding: var(--marsal-space-2xs) var(--marsal-space-xs);
      color: var(--marsal-color-link);
      font-family: var(--marsal-fontFamily-label-small);
      font-weight: var(--marsal-fontWeight-label-small);
      cursor: pointer;

      &:focus-visible {
        outline: 3px solid var(--marsal-color-focusRing);
        outline-offset: 3px;
        box-shadow: 0 0 0 2px var(--marsal-color-focusRingContrast);
      }
    }
  }

  & .marsal-gallery-item__full {
    display: grid;
    gap: var(--marsal-space-xs);
    margin-block-start: var(--marsal-space-xs);
  }

  & .marsal-gallery-item__media {
    & :where(img, video, iframe) {
      display: block;
      max-inline-size: 100%;
    }

    /* An iframe keeps its height attribute; auto would shrink it to 150px. */
    & :where(img, video) {
      block-size: auto;
    }
  }

  & .marsal-gallery-item__caption {
    color: var(--marsal-color-textMuted);
  }
}

/* Only the thumbnail's image path is reset; contextual controls and full media
   keep their own spacing.
   @todo WORKAROUND: behavioursoe listing.css:28-31
   `.marsal-container__content .contextual-region` margins and
   blazy/css/components/blazy.ratio.css:13-22 `.media.media--ratio` display and
   padding; delete when the theme is fixed and thumbnails no longer arrive in
   Blazy ratio wrappers. */
[data-component-id="marsal_sdc:gallery_item"]
  .marsal-gallery-item__thumbnail
  :is(:has(img), img) {
  display: block;
  margin: 0;
  padding: 0;
}