/**
 * @file card_content.css
 * @component Card Content (Content)
 * @description Styles a compact title hierarchy, metadata, description, and
 * actions.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * --_space-partGap    : Vertical space between content regions.
 * --_color-text       : Root and owned title/action foreground.
 * --_color-supporting : Owned subtitle, description and metadata foreground.
 * --_color-eyebrow    : Owned eyebrow foreground.
 * --_color-link       : Owned title-link foreground.
 */
:where([data-component-id="marsal_sdc:card_content"]) {
  --_space-partGap: 0.75rem;

  display: grid;
  gap: var(--_space-partGap);
  min-inline-size: 0;
  color: var(--_color-text);
  font-family: var(--marsal-fontFamily-body-standard);

  & > .marsal-card-content__eyebrow {
    color: var(--_color-eyebrow);
    font-family: var(--marsal-fontFamily-label-small);
    font-size: var(--marsal-fontSize-label-small);
    line-height: var(--marsal-lineHeight-label-small);
    text-wrap: pretty;
  }

  & > .marsal-card-content__title {
    min-inline-size: 0;
    margin: 0;
    color: var(--_color-text);
    overflow-wrap: anywhere;
    text-wrap: balance;

    & > a:any-link {
      text-decoration: none;
      text-underline-offset: 0.15em;

      &:is(:hover, :focus) {
        text-decoration-line: underline;
        text-decoration-thickness: 0.0625em;
      }
    }

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

      @media (forced-colors: active) {
        outline-color: Highlight;
      }

      @media (prefers-contrast: more) {
        outline-width: 4px;
      }
    }
  }

  & > .marsal-card-content__subtitle {
    color: var(--_color-supporting);
    font-family: var(--marsal-fontFamily-body-standard);
    font-size: var(--marsal-fontSize-body-standard);
    line-height: var(--marsal-lineHeight-body-standard);
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  & > .marsal-card-content__description {
    min-inline-size: 0;
    color: var(--_color-supporting);
    font-family: var(--marsal-fontFamily-body-standard);
    font-size: var(--marsal-fontSize-body-standard);
    line-height: var(--marsal-lineHeight-body-standard);
  }

  & > .marsal-card-content__metadata {
    min-inline-size: 0;
    color: var(--_color-supporting);
    font-family: var(--marsal-fontFamily-body-small);
    font-size: var(--marsal-fontSize-body-small);
    line-height: var(--marsal-lineHeight-body-small);
  }

  & > .marsal-card-content__actions {
    min-inline-size: 0;
    color: var(--_color-text);
    font-family: var(--marsal-fontFamily-body-standard);
  }
}

:where([data-component-id="marsal_sdc:card_content"]:not([data-text-palette])),
:where([data-component-id="marsal_sdc:card_content"][data-text-palette="primary"]) {
  --_color-text: var(--marsal-color-textPrimary);
  --_color-supporting: var(--marsal-color-textMuted);
  --_color-eyebrow: var(--marsal-color-textBrand);
  --_color-link: var(--marsal-color-link);
}

:where([data-component-id="marsal_sdc:card_content"][data-text-palette="secondary"]) {
  --_color-text: var(--marsal-color-textMuted);
  --_color-supporting: var(--marsal-color-textMuted);
  --_color-eyebrow: var(--marsal-color-textMuted);
  --_color-link: var(--marsal-color-link);
}

:where([data-component-id="marsal_sdc:card_content"][data-text-palette="on_brand"]) {
  --_color-text: var(--marsal-color-textOnBrand);
  --_color-supporting: var(--marsal-color-textOnBrand);
  --_color-eyebrow: var(--marsal-color-textOnBrand);
  --_color-link: var(--marsal-color-linkOnBrand);
}

:where([data-component-id="marsal_sdc:card_content"][data-text-palette="on_interactive"]) {
  --_color-text: var(--marsal-color-textOnInteractive);
  --_color-supporting: var(--marsal-color-textOnInteractive);
  --_color-eyebrow: var(--marsal-color-textOnInteractive);
  --_color-link: var(--marsal-color-textOnInteractive);
}

:where([data-component-id="marsal_sdc:card_content"][data-text-palette="on_accent"]) {
  --_color-text: var(--marsal-color-textOnAccent);
  --_color-supporting: var(--marsal-color-textOnAccent);
  --_color-eyebrow: var(--marsal-color-textOnAccent);
  --_color-link: var(--marsal-color-textOnAccent);
}

:where([data-component-id="marsal_sdc:card_content"][data-text-palette="on_info"]) {
  --_color-text: var(--marsal-color-textStatusInfo);
  --_color-supporting: var(--marsal-color-textStatusInfo);
  --_color-eyebrow: var(--marsal-color-textStatusInfo);
  --_color-link: var(--marsal-color-textStatusInfo);
}

:where([data-component-id="marsal_sdc:card_content"]:not([data-title-size="small"]):not([data-title-size="large"])) > .marsal-card-content__title {
  font-family: var(--marsal-fontFamily-heading-standard);
  font-size: var(--marsal-fontSize-heading-standard);
  font-weight: var(--marsal-fontWeight-heading-standard);
  line-height: var(--marsal-lineHeight-heading-standard);
}

:where([data-component-id="marsal_sdc:card_content"][data-title-size="small"]) > .marsal-card-content__title {
  font-family: var(--marsal-fontFamily-heading-small);
  font-size: var(--marsal-fontSize-heading-small);
  font-weight: var(--marsal-fontWeight-heading-small);
  line-height: var(--marsal-lineHeight-heading-small);
  letter-spacing: var(--marsal-letterSpacing-heading-small);
}

:where([data-component-id="marsal_sdc:card_content"][data-title-size="large"]) > .marsal-card-content__title {
  font-family: var(--marsal-fontFamily-heading-large);
  font-size: var(--marsal-fontSize-heading-large);
  font-weight: var(--marsal-fontWeight-heading-large);
  line-height: var(--marsal-lineHeight-heading-large);
  letter-spacing: var(--marsal-letterSpacing-heading-large);
}

/* @todo WORKAROUND: behavioursoe base.css:440-458 forces link color; delete when the theme is fixed. */
:where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:any-link {
  color: var(--_color-link);
}

:where([data-component-id="marsal_sdc:card"][data-component-variant="panel"]) > .marsal-card__layout > .marsal-card__content {
  /* Card's photo panel uses the title and body roles independently of headings. */
  & > :where([data-component-id="marsal_sdc:card_content"]),
  & > div.contextual-region:not([data-component-id]) > :where([data-component-id="marsal_sdc:card_content"]) {
    position: static;
    align-content: start;
    gap: var(--marsal-space-2xs);
  }

  & > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__eyebrow,
  & > div.contextual-region:not([data-component-id]) > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__eyebrow {
    color: var(--marsal-color-textBrand);
    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-transform: uppercase;
  }

  & > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title,
  & > div.contextual-region:not([data-component-id]) > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title {
    position: static;
    color: var(--marsal-color-textStrong);
    font-family: var(--marsal-fontFamily-title-verySmall);
    font-size: var(--marsal-fontSize-title-verySmall);
    font-weight: var(--marsal-fontWeight-title-verySmall);
    line-height: var(--marsal-lineHeight-title-verySmall);
    letter-spacing: var(--marsal-letterSpacing-title-verySmall);
    text-wrap: balance;
  }
}

/* @todo WORKAROUND: behavioursoe base.css:440-458 forces link color; delete when the theme is fixed. */
:where([data-component-id="marsal_sdc:card"][data-component-variant="panel"]) > .marsal-card__layout > .marsal-card__content > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a,
:where([data-component-id="marsal_sdc:card"][data-component-variant="panel"]) > .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 {
  color: var(--marsal-color-link);
}

:where([data-component-id="marsal_sdc:card"][data-component-variant="panel"]) > .marsal-card__layout > .marsal-card__content > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a,
:where([data-component-id="marsal_sdc:card"][data-component-variant="panel"]) > .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 {
  position: static;
  text-decoration-line: none;
  text-underline-offset: 0.18em;
}

:where([data-component-id="marsal_sdc:card"][data-component-variant="panel"]):hover > .marsal-card__layout > .marsal-card__content > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a,
:where([data-component-id="marsal_sdc:card"][data-component-variant="panel"]):hover > .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,
:where([data-component-id="marsal_sdc:card"][data-component-variant="panel"]) > .marsal-card__layout > .marsal-card__content > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus,
:where([data-component-id="marsal_sdc:card"][data-component-variant="panel"]) > .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 {
  text-decoration-line: underline;
  text-decoration-thickness: 0.125em;
}

:where([data-component-id="marsal_sdc:card"][data-component-variant="panel"]) > .marsal-card__layout > .marsal-card__content {
  & > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__description,
  & > div.contextual-region:not([data-component-id]) > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__description {
    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);
    text-wrap: pretty;
  }

  /* The title remains the only link; its empty overlay spans the Card root. */
  & > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a[href]::after,
  & > div.contextual-region:not([data-component-id]) > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a[href]::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    content: "";
  }

  & > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus-visible,
  & > div.contextual-region:not([data-component-id]) > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus-visible {
    outline: none;
    box-shadow: none;
  }

  /* The whole-card ring is drawn just inside the card edge, as Tabs does, so a
   * clipping Grid or other ancestor cannot cut off its outer sides.
   */
  & > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus-visible::after,
  & > div.contextual-region:not([data-component-id]) > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus-visible::after {
    outline: 3px solid var(--marsal-color-focusRing);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 5px var(--marsal-color-focusRingContrast);
  }

  @media (forced-colors: active) {
    & > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus-visible::after,
    & > div.contextual-region:not([data-component-id]) > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus-visible::after {
      outline-color: Highlight;
    }
  }

  @media (prefers-contrast: more) {
    & > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus-visible::after,
    & > div.contextual-region:not([data-component-id]) > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:focus-visible::after {
      outline-width: 4px;
      outline-offset: -4px;
      box-shadow: inset 0 0 0 6px var(--marsal-color-focusRingContrast);
    }
  }
}

/* Person names are one title-scale step below Small, independent of H level. */
:where([data-component-id="marsal_sdc:card"][data-component-variant="person"]) > .marsal-card__layout > .marsal-card__content > :where([data-component-id="marsal_sdc:card_content"]) {
  align-content: start;
  gap: var(--marsal-space-4xs);

  & > .marsal-card-content__title {
    font-family: var(--marsal-fontFamily-title-verySmall);
    font-size: var(--marsal-fontSize-title-verySmall);
    font-weight: var(--marsal-fontWeight-title-verySmall);
    line-height: var(--marsal-lineHeight-title-verySmall);
    letter-spacing: var(--marsal-letterSpacing-title-verySmall);
    text-wrap: pretty;

    & > a:any-link {
      text-decoration: none;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.25em;
    }

    & > a:is(:hover, :focus) {
      text-decoration-line: underline;
    }
  }

  & > :is(.marsal-card-content__description, .marsal-card-content__metadata) {
    color: var(--marsal-color-textMuted);
    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);
    overflow-wrap: anywhere;

    & > p {
      margin: 0;
      font: inherit;
    }
  }
}

/* @todo WORKAROUND: behavioursoe base.css:440-458 forces link color; delete when the theme is fixed. */
:where([data-component-id="marsal_sdc:card"][data-component-variant="person"]) > .marsal-card__layout > .marsal-card__content > :where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__title > a:any-link {
  color: var(--marsal-color-link);
}

/* Contact links render in the Actions region, before any slotted actions. */
:where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__actions > .marsal-card-content__contacts {
  display: grid;
  align-content: start;
  margin: 0;
  padding: 0;
  list-style: none;

  & > li {
    min-inline-size: 0;
    max-inline-size: 100%;
    margin: 0;
    padding: 0;
    list-style: none;

    & > a:any-link {
      display: flex;
      align-items: center;
      gap: var(--marsal-space-4xs);
      min-block-size: 44px;
      min-inline-size: 44px;
      max-inline-size: 100%;
      text-decoration-line: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
      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);
      overflow-wrap: anywhere;

      &:is(:hover, :focus) {
        text-decoration-thickness: 2px;
      }
    }

    & > a > span {
      min-inline-size: 0;
    }

    & > a > svg {
      flex: none;
      inline-size: 1.15rem;
      block-size: 1.15rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    & > a > .marsal-card-content__contact-context {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

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

/* @todo WORKAROUND: behavioursoe base.css:440-458 forces link color; delete when the theme is fixed. */
:where([data-component-id="marsal_sdc:card_content"]) > .marsal-card-content__actions > .marsal-card-content__contacts > li > a:any-link {
  color: var(--marsal-color-link);
}