/**
 * @file figure.css
 * @component Figure (Content)
 * @description Frames opaque media with caption and credit content.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * --_length-insetSize : Inset share of the containing text column.
 */
:where([data-component-id="marsal_sdc:figure"]) {
  --_length-insetSize: 40%;

  position: relative;
  min-inline-size: 0;
  margin: 0;
  color: var(--marsal-color-textPrimary);

  &[data-alignment="start"],
  &[data-alignment="center"],
  &[data-alignment="end"] {
    inline-size: fit-content;
    max-inline-size: 100%;
  }

  &[data-alignment="center"] {
    margin-inline: auto;
  }

  &[data-alignment="start"] {
    margin-inline-end: auto;
  }

  &[data-alignment="end"] {
    margin-inline-start: auto;
  }

  &[data-alignment="wide"] {
    inline-size: min(100%, var(--marsal-length-contentWidth-wide));
    margin-inline: auto;
  }

  & > .marsal-figure__media {
    min-inline-size: 0;
    overflow: hidden;
  }

  &[data-aspect="square"] > .marsal-figure__media {
    aspect-ratio: 1;
  }

  &[data-aspect="portrait"] > .marsal-figure__media {
    aspect-ratio: 3 / 4;
  }

  &[data-aspect="landscape"] > .marsal-figure__media {
    aspect-ratio: 4 / 3;
  }

  &[data-aspect="wide"] > .marsal-figure__media {
    aspect-ratio: 16 / 9;
  }

  /* Owns every property the theme's global `figure figcaption` rule sets
     (behavioursoe base.css:84-90): no grey box, no side padding, no italics. */
  & > .marsal-figure__caption {
    display: flex;
    gap: var(--marsal-space-2xs);
    flex-wrap: wrap;
    padding-block: var(--marsal-space-2xs);
    padding-inline: 0;
    background: none;
    font-size: var(--marsal-fontSize-body-small);
    font-style: normal;
    line-height: var(--marsal-lineHeight-body-small);
  }

  &[data-caption-position="overlay"] > .marsal-figure__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--marsal-space-xs);
    color: var(--marsal-color-textOnBrand);
    background: var(--marsal-color-surfaceScrim);
  }

  & .marsal-figure__credit {
    color: inherit;
    font-style: italic;
  }

  &:not([data-aspect="auto"]) > .marsal-figure__media {
    & > :where(img, picture, video, iframe) {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      object-position: var(--focus, 50% 0);
    }

    /* Fixed frames include every Drupal image wrapper, not just a direct img. */
    &:has(img) {
      position: relative;
    }

    & :where(*:has(img), img) {
      display: block;
      box-sizing: border-box;
      inline-size: 100%;
      block-size: 100%;
      min-inline-size: 0;
      max-inline-size: none;
      margin: 0;
      padding: 0;
    }

    /* Give the entire wrapper chain a definite frame, as in Media Frame. */
    & > :where(:has(img)) {
      position: absolute;
      inset: 0;
    }

    & img {
      position: absolute;
      inset: 0;
      object-fit: cover;
      object-position: var(--focus, 50% 0);
    }
  }

  /* Insets stack at full width until their own text column can support a float. */
  &:is([data-alignment="inset_start"], [data-alignment="inset_end"]) {
    float: none;
    margin-inline: 0;
  }

  &[data-inset-size="small"] {
    --_length-insetSize: 33.333%;
  }

  /* Large photo and insets share the news caption treatment. */
  &:is([data-alignment="large"], [data-alignment="inset_start"], [data-alignment="inset_end"]) {
    inline-size: 100%;
    margin-block: var(--marsal-space-3xs) var(--marsal-space-m);

    & > .marsal-figure__media {
      background: var(--marsal-color-surfaceSubtle);
    }

    &[data-caption-position="below"] > .marsal-figure__caption {
      display: block;
      margin-block-start: var(--marsal-space-2xs);
      padding: 0;
      color: var(--marsal-color-textPrimary);
      font-family: var(--marsal-fontFamily-body-small);
      font-size: var(--marsal-fontSize-body-small);
      font-weight: var(--marsal-fontWeight-body-small);
      line-height: var(--marsal-lineHeight-body-small);
      letter-spacing: var(--marsal-letterSpacing-body-small);
      text-wrap: pretty;

      &::before {
        content: "";
        display: block;
        inline-size: 2rem;
        block-size: var(--marsal-length-dividerAccent);
        margin-block-end: var(--marsal-space-3xs);
        background: var(--marsal-color-dividerAccent);
      }
    }

    &[data-caption-position="below"] :where(.marsal-figure__caption-text, .marsal-figure__credit, .marsal-figure__caption p) {
      display: inline;
      margin: 0;
    }

    &[data-caption-position="below"] .marsal-figure__credit {
      margin-inline-start: var(--marsal-space-3xs);
      color: var(--marsal-color-textMuted);
      font-family: var(--marsal-fontFamily-label-small);
      font-size: var(--marsal-fontSize-label-small);
      font-weight: var(--marsal-fontWeight-label-small);
      font-style: normal;
      line-height: var(--marsal-lineHeight-label-small);
      letter-spacing: var(--marsal-letterSpacing-label-small);
      text-transform: uppercase;
    }
  }

  @container marsal-sdc-prose-inset (min-width: 40rem) {
    &:is([data-alignment="inset_start"], [data-alignment="inset_end"]) {
      inline-size: var(--_length-insetSize);
      margin-block: var(--marsal-space-4xs) var(--marsal-space-s);
    }

    &[data-alignment="inset_start"] {
      float: inline-start;
      margin-inline-end: var(--marsal-space-l);
    }

    &[data-alignment="inset_end"] {
      float: inline-end;
      margin-inline-start: var(--marsal-space-l);
    }
  }
}

/* @todo WORKAROUND: blazy/css/components/blazy.ratio.css:13-22 `.media.media--ratio`
   makes its wrapper the photo's containing block, sized by an inline
   padding-bottom ratio; delete when Figure media no longer arrives in Blazy
   ratio wrappers. */
[data-component-id="marsal_sdc:figure"]:not([data-aspect="auto"]) > .marsal-figure__media .media--ratio {
  position: static;
}