/**
 * @file gallery.css
 * @component Gallery (Interaction)
 * @description Styles a labelled fallback item list and the native dialog
 * produced only by successful enhancement.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * None.
 */
:where([data-component-id="marsal_sdc:gallery"]) {
  color: var(--marsal-color-textPrimary);

  & > .marsal-gallery__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--marsal-space-s);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &[data-layout="strip"] > .marsal-gallery__items {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-color: var(--marsal-color-borderInteractive) transparent;
    scrollbar-width: thin;

    & > * {
      flex: 0 0 min(80%, 24rem);
      scroll-snap-align: start;
    }
  }

  & .marsal-gallery__trigger,
  & .marsal-gallery__control {
    border: 1px solid var(--marsal-color-borderControl);
    color: var(--marsal-color-textControl);
    background: var(--marsal-color-surfaceControl);
    font: inherit;
    cursor: pointer;
  }

  & .marsal-gallery__trigger {
    display: block;
    inline-size: 100%;
    padding: 0;
  }

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

  /* The viewer paints its own light panel inside the Gallery root, so it restores
     the thirteen neutral roles, as Card does; a Brand or Scrim band's light text
     never reaches its title, caption or status. */
  & > .marsal-gallery__dialog {
    --marsal-color-textPrimary: var(--marsal-color-textPrimaryTheme);
    --marsal-color-textStrong: var(--marsal-color-textStrongTheme);
    --marsal-color-textMuted: var(--marsal-color-textMutedTheme);
    --marsal-color-textBrand: var(--marsal-color-textBrandTheme);
    --marsal-color-link: var(--marsal-color-linkTheme);
    --marsal-color-borderSubtle: var(--marsal-color-borderSubtleTheme);
    --marsal-color-borderDefault: var(--marsal-color-borderDefaultTheme);
    --marsal-color-borderControl: var(--marsal-color-borderControlTheme);
    --marsal-color-borderInteractive: var(--marsal-color-borderInteractiveTheme);
    --marsal-color-borderAccent: var(--marsal-color-borderAccentTheme);
    --marsal-color-dividerAccent: var(--marsal-color-dividerAccentTheme);
    --marsal-color-focusRing: var(--marsal-color-focusRingTheme);
    --marsal-color-focusRingContrast: var(--marsal-color-focusRingContrastTheme);

    box-sizing: border-box;
    inline-size: min(90vi, 75rem);
    block-size: calc(100dvh - 2rem);
    max-block-size: calc(100dvh - 2rem);
    padding: min(var(--marsal-space-m), 2vmin);
    border: 1px solid var(--marsal-color-borderDefault);
    color: var(--marsal-color-textPrimary);
    background: var(--marsal-color-surfacePrimary);

    &[open] {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
    }

    &::backdrop {
      background: var(--marsal-color-surfaceScrim);
    }
  }

  & .marsal-gallery__dialog-title {
    margin-block: 0 var(--marsal-space-s);
    color: var(--marsal-color-textStrong);
    font-family: var(--marsal-fontFamily-heading-standard);
    font-size: var(--marsal-fontSize-heading-standard);
    line-height: var(--marsal-lineHeight-heading-standard);
    text-wrap: balance;

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

  /* Empty layout boxes pass clicks to the dialog; content remains interactive. */
  & .marsal-gallery__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--marsal-space-2xs);
    margin-block-end: var(--marsal-space-s);
    pointer-events: none;
  }

  & .marsal-gallery__control {
    min-block-size: max(44px, 2.75rem);
    padding: var(--marsal-space-2xs) var(--marsal-space-xs);
    font-family: var(--marsal-fontFamily-label-small);
    font-weight: var(--marsal-fontWeight-label-small);
  }

  & .marsal-gallery__media-container {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-block-size: 0;
    min-inline-size: 0;
    pointer-events: none;

    &[aria-busy="true"] {
      cursor: progress;
    }
  }
}

/* Full media moves out of Gallery Item, so its viewer geometry lives here. */
[data-component-id="marsal_sdc:gallery"] .marsal-gallery__media-container
  > .marsal-gallery-item__full {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--marsal-space-2xs);
  min-block-size: 0;
  min-inline-size: 0;
  margin: 0;
}

[data-component-id="marsal_sdc:gallery"] .marsal-gallery__media-container
  .marsal-gallery-item__media:has(img) {
  container-type: size;
  min-block-size: 0;
  min-inline-size: 0;
}

/* Field, media and contextual-region wrappers on the image path fill the
   viewer; the thumbnail's crop never governs the full photo.
   @todo WORKAROUND: behavioursoe listing.css:28-31
   `.marsal-container__content .contextual-region` margins, listing.css:2885-2891
   `.grd-lst .marsal-container__content .contextual-region` padding and
   blazy/css/components/blazy.ratio.css:13-22 `.media.media--ratio` padding
   ratios; delete when the theme is fixed and Gallery media no longer arrives
   in Blazy ratio wrappers. */
[data-component-id="marsal_sdc:gallery"] .marsal-gallery__media-container
  .marsal-gallery-item__media :has(img) {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* Video and embeds keep the size their width and height attributes give them;
   an iframe has no natural size, so auto sizing would shrink it to 300 by 150. */
[data-component-id="marsal_sdc:gallery"]
  .marsal-gallery__media-container
  :where(img, video, iframe) {
  display: block;
  max-inline-size: 100%;
  max-block-size: 65vb;
  margin-inline: auto;
}

/* Only a photo resets to its own ratio and fits the remaining viewer space. */
[data-component-id="marsal_sdc:gallery"] .marsal-gallery__media-container img {
  inline-size: auto;
  block-size: auto;
  max-block-size: 100cqb;
  aspect-ratio: auto;
  object-fit: contain;
}

:where([data-component-id="marsal_sdc:gallery"])
  :where(.marsal-gallery__control, .marsal-gallery-item__caption,
    .marsal-gallery__error),
:where([data-component-id="marsal_sdc:gallery"])
  .marsal-gallery-item__media > *,
:where([data-component-id="marsal_sdc:gallery"])
  .marsal-gallery__media-container :where(img, video, audio, iframe, .contextual) {
  pointer-events: auto;
}

[data-component-id="marsal_sdc:gallery"] .marsal-gallery__media-container
  .marsal-gallery-item__caption {
  color: var(--marsal-color-textMuted);

  & > :first-child {
    margin-block-start: 0;
  }

  & > :last-child {
    margin-block-end: 0;
  }
}

:where([data-component-id="marsal_sdc:gallery"]) {
  & .marsal-gallery__status:not(:empty),
  & .marsal-gallery__error {
    margin-block-start: var(--marsal-space-xs);
    padding: var(--marsal-space-2xs) var(--marsal-space-xs);
  }

  & .marsal-gallery__error {
    border: 1px solid var(--marsal-color-borderStatusError);
    color: var(--marsal-color-textStatusError);
    background: var(--marsal-color-surfaceStatusError);
  }

  @media (forced-colors: active) {
    & :where(.marsal-gallery__trigger, .marsal-gallery__control) {
      border-width: 2px;
    }
  }

  &[data-layout="mosaic"] {
    container: marsal-sdc-gallery / inline-size;
    /* Containment needs a width even when a Flex parent does not stretch it. */
    inline-size: 100%;

    /* Photo mosaic: the lead photo runs full width on narrow galleries. */
    & > .marsal-gallery__items {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--marsal-space-4xs);
      /* Outranks the behavioursoe base.css:941-943 `.field--name-body ul` indent. */
      padding: 0;
    }

    & > .marsal-gallery__items > li {
      display: grid;
      min-inline-size: 0;

      &:first-child {
        grid-column: 1 / -1;
      }

      /* An odd number of small photos ends with a full-width tile. */
      &:last-child:nth-child(even) {
        grid-column: span 2;
      }
    }

    /* Each thumbnail is the Gallery's trigger button. */
    & .marsal-gallery__trigger {
      position: relative;
      aspect-ratio: 4 / 3;
      margin: 0;
      overflow: hidden;
      border: 0;
      border-radius: 0;
      color: inherit;
      background: var(--marsal-color-surfaceSubtle);
      cursor: zoom-in;

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

      /* Focus: a white and navy ring drawn inside the tile, so tight gaps never hide it. */
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      &:focus-visible {
        outline: 3px solid transparent;
        outline-offset: -3px;
        box-shadow: none;
      }

      &:focus-visible::after {
        box-shadow:
          inset 0 0 0 3px var(--marsal-color-focusRingContrast),
          inset 0 0 0 6px var(--marsal-color-focusRing);
      }
    }

    & > .marsal-gallery__items > li:first-child .marsal-gallery__trigger {
      aspect-ratio: 16 / 9;
    }

    & > .marsal-gallery__items > li:last-child:nth-child(even) .marsal-gallery__trigger {
      aspect-ratio: 8 / 3;
    }

    /* A solid label identifies the lead photo. Small tiles keep faces clear;
       their Gallery Item labels remain available to assistive technology. */
    & .marsal-gallery__tile-label {
      position: absolute;
      inset-inline-start: var(--marsal-space-2xs);
      inset-block-end: var(--marsal-space-2xs);
      max-inline-size: calc(100% - 2 * var(--marsal-space-2xs));
      padding: var(--marsal-space-5xs) var(--marsal-space-2xs);
      color: var(--marsal-color-textOnBrand);
      background: var(--marsal-color-surfaceBrand);
      font-family: var(--marsal-fontFamily-label-verySmall);
      font-size: var(--marsal-fontSize-label-verySmall);
      font-weight: var(--marsal-fontWeight-label-verySmall);
      line-height: var(--marsal-lineHeight-label-verySmall);
      letter-spacing: var(--marsal-letterSpacing-label-verySmall);
      text-align: start;
    }

    & > .marsal-gallery__items > li:not(:first-child) .marsal-gallery__tile-label {
      display: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      & .marsal-gallery__trigger img {
        transition: transform 0.45s ease;
      }

      & .marsal-gallery__trigger:hover img {
        transform: scale(1.04);
      }
    }

    /* The lead tile spans two columns and two rows; item-count queries fill
       the remaining rows. */
    @container marsal-sdc-gallery (min-width: 42rem) {
      & > .marsal-gallery__items {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      & > .marsal-gallery__items > li:first-child {
        grid-column: span 2;
        grid-row: span 2;
      }

      & > .marsal-gallery__items > li:first-child .marsal-gallery__trigger {
        aspect-ratio: auto;
        block-size: 100%;
      }

      & > .marsal-gallery__items:has(> li:nth-child(7):last-child) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      & > .marsal-gallery__items:has(> li:last-child:is(:nth-child(3), :nth-child(6))) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      & > .marsal-gallery__items > li:last-child:nth-child(even) {
        grid-column: auto;
      }

      & > .marsal-gallery__items > li:not(:first-child) .marsal-gallery__trigger,
      & > .marsal-gallery__items > li:last-child:nth-child(even) .marsal-gallery__trigger {
        aspect-ratio: 3 / 2;
      }

      /* A wider final tile fills the hole without making its row taller. */
      & > .marsal-gallery__items:has(> li:last-child:is(:nth-child(4), :nth-child(8))) {
        grid-auto-rows: 1fr;
      }

      & > .marsal-gallery__items > li:last-child:is(:nth-child(4), :nth-child(8)) {
        grid-column: span 2;
      }

      & > .marsal-gallery__items > li:last-child:is(:nth-child(4), :nth-child(8)) .marsal-gallery__trigger {
        aspect-ratio: auto;
        block-size: 100%;
      }

      & > .marsal-gallery__items > li:first-child .marsal-gallery__tile-label {
        padding: var(--marsal-space-4xs) var(--marsal-space-xs);
        font-family: var(--marsal-fontFamily-label-small);
        font-size: var(--marsal-fontSize-label-small);
        font-weight: var(--marsal-fontWeight-label-small);
        line-height: var(--marsal-lineHeight-label-small);
        letter-spacing: var(--marsal-letterSpacing-label-small);
      }
    }

    /* Every Drupal field/media/picture wrapper fills the cropped thumbnail. */
    & .marsal-gallery-item__thumbnail,
    & .marsal-gallery-item__thumbnail :where(*:has(img), img) {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      min-inline-size: 0;
      max-inline-size: none;
      margin: 0;
      padding: 0;
    }

    /* Without enhancement, the View toggle and full media stay in normal flow. */
    &:not([data-gallery-enhanced]) .marsal-gallery-item__thumbnail {
      position: relative;
      block-size: auto;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: var(--marsal-color-surfaceSubtle);

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

    &:not([data-gallery-enhanced]) > .marsal-gallery__items > li:first-child .marsal-gallery-item__thumbnail {
      aspect-ratio: 16 / 9;
    }

    @media (forced-colors: active) {
      & .marsal-gallery__trigger:focus-visible {
        outline-color: Highlight;
      }
    }
  }
}