/**
 * @file card.css
 * @component Card (Content)
 * @description Presents required content with optional media in stacked or
 * horizontal layouts, including compact link panels and photo panels.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * --_color-background : Root surface and shared overlay color.
 * --_color-foreground : Root-to-owned-content foreground.
 * --_length-thumbnailWidth : Compact media width; default 8rem.
 */
:where([data-component-id="marsal_sdc:card"]) {
  --_length-thumbnailWidth: 8rem;

  container: marsal-sdc-card / inline-size;
  min-inline-size: 0;
  border: 1px solid var(--marsal-color-borderDefault);
  border-radius: 0;
  color: var(--_color-foreground);

  & > .marsal-card__layout {
    min-inline-size: 0;

    & > .marsal-card__media {
      min-inline-size: 0;
    }

    & > .marsal-card__content {
      min-inline-size: 0;
      padding: 1.5rem;
      color: inherit;
    }
  }
}

:where([data-component-id="marsal_sdc:card"]:not([data-background-surface])) {
  --_color-background: var(--marsal-color-surfacePrimary);
  --_color-foreground: var(--marsal-color-textPrimary);
}

/* Primary and Subtle panel paint share the surface system's neutral roles. */
[data-component-id="marsal_sdc:card"]:not([data-background-surface]) {
  --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);
}

:where([data-component-id="marsal_sdc:card"][data-component-variant="compact"]) > .marsal-card__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--marsal-space-s);
  padding: var(--marsal-space-s);

  & > .marsal-card__media {
    inline-size: min(100%, var(--_length-thumbnailWidth));
  }

  & > .marsal-card__content {
    padding: 0;
  }
}

/* The photo panel has no root paint or border; its content owns the surface. */
:where([data-component-id="marsal_sdc:card"][data-component-variant="panel"]) {
  --_color-background: transparent;

  position: relative;
  isolation: isolate;
  block-size: 100%;
  border: 0;
  background: transparent;

  & > .marsal-card__layout {
    display: flex;
    flex-direction: column;
    block-size: 100%;

    & > .marsal-card__media {
      flex: none;
      inline-size: 100%;
    }

    & > .marsal-card__content {
      flex: 1;
      display: grid;
      align-content: start;
      gap: var(--marsal-space-2xs);
      padding: var(--marsal-space-s) var(--marsal-space-s) var(--marsal-space-m);
      border-block-start: var(--marsal-length-dividerAccent) solid var(--marsal-color-dividerAccent);
      background: var(--marsal-color-surfacePrimary);
      color: var(--marsal-color-textPrimary);

      /* Plain editor wrappers must not become the stretched link's containing box.
       * Drupal's positioned .contextual controls retain their native z-index: 500.
       */
      & > div.contextual-region:not([data-component-id]) {
        position: static;
      }
    }
  }

  &:hover,
  &:has(> .marsal-card__layout > .marsal-card__content > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus-visible, > .marsal-card__layout > .marsal-card__content > div.contextual-region:not([data-component-id]) > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus-visible) {
    box-shadow: var(--marsal-shadow-elevation-medium);
  }

  @media (prefers-reduced-motion: no-preference) {
    transition: translate 200ms ease, box-shadow 200ms ease;

    &:hover,
    &:has(> .marsal-card__layout > .marsal-card__content > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus-visible, > .marsal-card__layout > .marsal-card__content > div.contextual-region:not([data-component-id]) > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus-visible) {
      translate: 0 -0.25rem;
    }
  }
}

/* Panel color paints only the text panel, not the root or photo. */
:where([data-component-id="marsal_sdc:card"][data-component-variant="panel"][data-panel-surface="subtle"]) > .marsal-card__layout > .marsal-card__content {
  background: var(--marsal-color-surfaceSubtle);
}

/* Opt-in image cropping; Auto leaves the supplied media untouched. */
:where([data-component-id="marsal_sdc:card"][data-aspect]) > .marsal-card__layout > .marsal-card__media {
  position: relative;
  align-self: start;
  overflow: hidden;
}

:where([data-component-id="marsal_sdc:card"][data-aspect="square"]) > .marsal-card__layout > .marsal-card__media {
  aspect-ratio: 1;
}

:where([data-component-id="marsal_sdc:card"][data-aspect="landscape"]) > .marsal-card__layout > .marsal-card__media {
  aspect-ratio: 4 / 3;
}

:where([data-component-id="marsal_sdc:card"][data-aspect="tall"]) > .marsal-card__layout > .marsal-card__media {
  aspect-ratio: 1 / 2;
}

/* Full-width photo panels keep a shorter portrait frame when cards stack. */
@container marsal-sdc-card (width > 20rem) {
  :where([data-component-id="marsal_sdc:card"][data-component-variant="panel"][data-aspect="tall"]) > .marsal-card__layout > .marsal-card__media {
    aspect-ratio: 4 / 5;
  }
}

/* Tall images and Person portraits fill a definite box through every Drupal
 * wrapper, as in Media Frame.
 */
:where(
  [data-component-id="marsal_sdc:card"][data-aspect="tall"],
  [data-component-id="marsal_sdc:card"][data-component-variant="person"]
) > .marsal-card__layout > .marsal-card__media {
  & > :where(img, picture, :has(img)) {
    position: absolute;
    inset: 0;
  }

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

/* Include responsive pictures and Drupal image-field wrappers. The image is
 * positioned against the frame-filling first wrapper, so an inner wrapper's
 * inline ratio padding, such as Blazy's fluid .media--ratio, cannot size it.
 */
:where([data-component-id="marsal_sdc:card"][data-aspect]) > .marsal-card__layout > .marsal-card__media img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 0);
}

@container marsal-sdc-card (min-width: 30rem) {
  :where(
    [data-component-id="marsal_sdc:card"][data-component-variant="horizontal"]:has(> .marsal-card__layout > .marsal-card__media)
  ) > .marsal-card__layout {
    display: grid;
  }

  :where(
    [data-component-id="marsal_sdc:card"][data-component-variant="horizontal"][data-media-position="start"]:has(> .marsal-card__layout > .marsal-card__media)
  ) > .marsal-card__layout {
    grid-template-columns: minmax(12rem, 2fr) minmax(0, 3fr);
  }

  :where(
    [data-component-id="marsal_sdc:card"][data-component-variant="horizontal"][data-media-position="end"]:has(> .marsal-card__layout > .marsal-card__media)
  ) > .marsal-card__layout {
    grid-template-columns: minmax(0, 3fr) minmax(12rem, 2fr);
  }

  :where([data-component-id="marsal_sdc:card"][data-component-variant="compact"][data-media-position="start"]:has(> .marsal-card__layout > .marsal-card__media)) > .marsal-card__layout {
    grid-template-columns: var(--_length-thumbnailWidth) minmax(0, 1fr);
  }

  :where([data-component-id="marsal_sdc:card"][data-component-variant="compact"][data-media-position="end"]:has(> .marsal-card__layout > .marsal-card__media)) > .marsal-card__layout {
    grid-template-columns: minmax(0, 1fr) var(--_length-thumbnailWidth);
  }
}

@media (forced-colors: active) {
  :where([data-component-id="marsal_sdc:card"]) {
    border-color: CanvasText;
  }
}

/* Person cards are unpainted; the containing page band owns the grey surface. */
:where([data-component-id="marsal_sdc:card"][data-component-variant="person"]) {
  --_color-background: transparent;

  border: 0;
  background: transparent;

  & > .marsal-card__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    align-content: start;
    gap: var(--marsal-space-s);
    padding-block: var(--marsal-space-s);
    border-block-end: 1px solid var(--marsal-color-borderSubtle);

    & > .marsal-card__content {
      padding: 0;
    }

    & > .marsal-card__media {
      position: relative;
      aspect-ratio: 3 / 4;
      overflow: hidden;

      /* Out of flow against the frame-filling first wrapper, as in cropped media, so
       * an inner wrapper's inline ratio padding cannot shorten the portrait.
       */
      & img {
        position: absolute;
        inset: 0;
        object-fit: cover;
        object-position: var(--focus, 50% 0);
      }
    }
  }
}

/* The portrait sits beside the text; only a Grid with People roster on stacks it. */
:where([data-component-id="marsal_sdc:card"][data-component-variant="person"]:has(> .marsal-card__layout > .marsal-card__media)) > .marsal-card__layout {
  grid-template-columns: 5rem minmax(0, 1fr);
}

:where([data-component-id="marsal_sdc:card"][data-component-variant="person"][data-media-position="end"]:has(> .marsal-card__layout > .marsal-card__media)) > .marsal-card__layout {
  grid-template-columns: minmax(0, 1fr) 5rem;
}