/**
 * @file content_header.css
 * @component Content Header (Content)
 * @description Presents one page title with optional context, actions, and
 * media in overlay, split, or offset-band layouts.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * --_space-contentInset     : Responsive inset for the content panel.
 * --_space-partGap          : Space between content-panel regions.
 * --_color-background       : Root surface and shared overlay color.
 * --_color-foreground       : Background-exposed root foreground.
 * --_color-panelBackground  : Backing for the text and scroll cues.
 * --_color-panelBacking     : Opaque scroll backing, transparent over a Background image.
 * --_color-panelForeground  : Text and scroll-cue color.
 * --_color-panelEyebrow     : Eyebrow color on the text panel.
 * --_length-height          : Selected cap and media/background-only height; none by default.
 * --_number-aspect          : Photo ratio used for initial sizing.
 * --_space-bandHang         : Wide photo hang and matching space below the band.
 * --_space-scrollInset      : Space for focused links inside the scroll panel.
 * --_space-bandTop          : Equal clearance above and below the band's content.
 * --_length-bandEdge        : Header edge to navigation content lane.
 * --_length-bandBleed       : Photo extension, tapering to zero at the lane cap.
 */
:where([data-component-id="marsal_sdc:content_header"]) {
  --_space-contentInset: 1.5rem;
  --_space-partGap: 1rem;
  --_color-panelBackground: var(--marsal-color-surfaceBrand);
  --_color-panelBacking: var(--marsal-color-surfaceCanvas);
  --_color-panelForeground: var(--marsal-color-textOnBrand);
  --_color-panelEyebrow: var(--marsal-color-textAccentOnBrand);
  --_length-height: none;
  --_number-aspect: auto;
  --_space-bandHang: 0px;
  --_space-scrollInset: var(--marsal-space-xs);

  position: relative;
  container-name: marsal-sdc-content-header;
  container-type: inline-size;
  color: var(--_color-foreground);
  font-family: var(--marsal-fontFamily-body-standard);
  font-size: var(--marsal-fontSize-body-standard);
  line-height: var(--marsal-lineHeight-body-standard);

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

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

    & > .marsal-content-header__content,
    & > .marsal-content-header__band-panel > .marsal-content-header__content {
      box-sizing: border-box;
      display: grid;
      gap: var(--_space-partGap);
      inline-size: min(
        100%,
        calc(
          var(--marsal-length-contentWidth-wide) + var(--marsal-space-pageGutter) + var(--marsal-space-pageGutter)
        )
      );
      margin-inline: auto;
      padding-block: var(--_space-contentInset);
      padding-inline: max(var(--_space-contentInset), var(--marsal-space-pageGutter));
      background: var(--_color-panelBackground);
      color: var(--_color-panelForeground);
    }

    & > .marsal-content-header__content > .marsal-content-header__breadcrumbs,
    & > .marsal-content-header__band-panel > .marsal-content-header__content > .marsal-content-header__breadcrumbs {
      min-inline-size: 0;
    }

    & > .marsal-content-header__content > .marsal-content-header__eyebrow,
    & > .marsal-content-header__band-panel > .marsal-content-header__content > .marsal-content-header__eyebrow {
      color: var(--_color-panelEyebrow);
      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);
      text-transform: uppercase;
    }

    & > .marsal-content-header__content > .marsal-content-header__title,
    & > .marsal-content-header__band-panel > .marsal-content-header__content > .marsal-content-header__title {
      margin: 0;
      color: var(--_color-panelForeground);
      font-family: var(--marsal-fontFamily-display-standard);
      font-size: var(--marsal-fontSize-display-standard);
      font-weight: var(--marsal-fontWeight-display-standard);
      line-height: var(--marsal-lineHeight-display-standard);
      text-transform: uppercase;
      text-wrap: balance;
    }

    & > .marsal-content-header__content > .marsal-content-header__subtitle,
    & > .marsal-content-header__band-panel > .marsal-content-header__content > .marsal-content-header__subtitle {
      color: var(--_color-panelForeground);
      font-family: var(--marsal-fontFamily-title-standard);
      font-size: var(--marsal-fontSize-title-standard);
      font-weight: var(--marsal-fontWeight-title-standard);
      line-height: var(--marsal-lineHeight-title-standard);
      letter-spacing: var(--marsal-letterSpacing-title-standard);
    }

    & > .marsal-content-header__content > .marsal-content-header__description,
    & > .marsal-content-header__band-panel > .marsal-content-header__content > .marsal-content-header__description {
      min-inline-size: 0;
      color: var(--_color-panelForeground);
    }

    & > .marsal-content-header__content > .marsal-content-header__actions,
    & > .marsal-content-header__band-panel > .marsal-content-header__content > .marsal-content-header__actions {
      min-inline-size: 0;
    }

    & > .marsal-content-header__content[tabindex]:focus-visible,
    & > .marsal-content-header__breadcrumbs[tabindex]:focus-visible,
    & > .marsal-content-header__band-panel > .marsal-content-header__content[tabindex]:focus-visible {
      outline: 3px solid var(--marsal-color-focusRing);
      outline-offset: -3px;
      box-shadow: inset 0 0 0 5px var(--marsal-color-focusRingContrast);
    }
  }
}

/* Background emits data-background-fit only when it has an image. */
[data-component-id="marsal_sdc:content_header"]:is([data-component-variant="default"], [data-component-variant="split"])[data-background-fit] {
  --_color-backgroundOverlay: transparent;
  --_color-panelBackground: color-mix(in srgb, var(--marsal-color-surfaceBrand) var(--_percentage-backgroundOverlayOpacity), transparent);
  --_color-panelBacking: transparent;
}

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

:where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"]:not([data-background-surface])) {
  --_color-background: var(--marsal-color-surfaceBrand);
  --_color-foreground: var(--marsal-color-textOnBrand);
}

:where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"]) {
  --_color-panelBackground: var(--_color-background);
  --_color-panelForeground: var(--_color-foreground);
  --_color-panelEyebrow: var(--marsal-color-textBrand);
  --_space-bandTop: var(--marsal-space-xl-2xl);

  isolation: isolate;
  background-color: transparent;
}

/* Keep the photo-only panel low, with clearance at both header edges. */
:where([data-component-id="marsal_sdc:content_header"]:is([data-component-variant="default"], [data-component-variant="split"])[data-background-fit]:not(:has(> .marsal-content-header__layout > .marsal-content-header__media))) {
  display: grid;
  align-content: end;

  & > .marsal-content-header__layout {
    padding-block: var(--marsal-space-pageGutter);
  }
}

/* Fixed Brand paint owns its roles independently of the outer Background. */
[data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"]:not([data-background-surface]),
:where([data-component-id="marsal_sdc:content_header"]:not([data-component-variant="band_offset"])) > .marsal-content-header__layout > .marsal-content-header__content {
  --marsal-color-textPrimary: var(--marsal-color-textOnBrand);
  --marsal-color-textStrong: var(--marsal-color-textOnBrand);
  --marsal-color-textMuted: var(--marsal-color-textMutedOnDark);
  --marsal-color-textBrand: var(--marsal-color-textAccentOnBrand);
  --marsal-color-link: var(--marsal-color-linkOnBrand);
  --marsal-color-borderSubtle: var(--marsal-color-borderSubtleOnDark);
  --marsal-color-borderDefault: var(--marsal-color-borderOnDark);
  --marsal-color-borderControl: var(--marsal-color-borderOnDark);
  --marsal-color-borderInteractive: var(--marsal-color-borderOnDark);
  --marsal-color-borderAccent: var(--marsal-color-borderAccentOnDark);
  --marsal-color-dividerAccent: var(--marsal-color-borderAccentOnDark);
  --marsal-color-focusRing: var(--marsal-color-focusRingOnDark);
  --marsal-color-focusRingContrast: var(--marsal-color-focusRingContrastOnDark);
}

:where([data-component-id="marsal_sdc:content_header"][data-title-typeface="serif"]) > .marsal-content-header__layout > .marsal-content-header__content > .marsal-content-header__title,
:where([data-component-id="marsal_sdc:content_header"][data-title-typeface="serif"]) > .marsal-content-header__layout > .marsal-content-header__band-panel > .marsal-content-header__content > .marsal-content-header__title {
  font-family: var(--marsal-fontFamily-heading-veryLarge);
  font-size: var(--marsal-fontSize-heading-veryLarge);
  font-weight: var(--marsal-fontWeight-heading-veryLarge);
  line-height: var(--marsal-lineHeight-heading-veryLarge);
  letter-spacing: var(--marsal-letterSpacing-heading-veryLarge);
  text-transform: none;
}

:where([data-component-id="marsal_sdc:content_header"][data-aspect="square"]) {
  --_number-aspect: 1;
}

:where([data-component-id="marsal_sdc:content_header"][data-aspect="portrait"]) {
  --_number-aspect: 3 / 4;
}

:where([data-component-id="marsal_sdc:content_header"][data-aspect="landscape"]) {
  --_number-aspect: 4 / 3;
}

:where([data-component-id="marsal_sdc:content_header"][data-aspect="widescreen"]) {
  --_number-aspect: 16 / 9;
}

/* A selected shape sets the media's initial ratio before band stretching. */
:where([data-component-id="marsal_sdc:content_header"][data-aspect]) > .marsal-content-header__layout > .marsal-content-header__media :where(img, video, iframe) {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: var(--_number-aspect);
  object-fit: cover;
  object-position: var(--focus, 50% 0);
}

/* Stacked headers paint the text band before the overlapping full-width media. */
:where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"]) > .marsal-content-header__layout {
  --_length-bandEdge: max(var(--marsal-length-navGutter), calc((100cqi - var(--marsal-length-navWidth)) / 2 + var(--marsal-length-navGutter)));
  --_length-bandBleed: var(--_length-bandEdge);

  display: flex;
  flex-direction: column;
  align-items: stretch;

  /* Following content starts a fixed step below the photo at every width. */
  &:has(> .marsal-content-header__media) {
    margin-block-end: var(--marsal-space-xl-2xl);
  }

  & > .marsal-content-header__band-panel,
  & > .marsal-content-header__breadcrumbs,
  & > .marsal-content-header__media {
    position: relative;
    min-inline-size: 0;
  }

  & > .marsal-content-header__band-panel::before,
  & > .marsal-content-header__breadcrumbs::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset-block: 0;
    inset-inline: 0;
    pointer-events: none;
    /* An opaque backing keeps the translucent Scrim surface uniform. */
    background: linear-gradient(var(--_color-panelBackground), var(--_color-panelBackground)), var(--marsal-color-surfaceCanvas);
  }

  & > .marsal-content-header__band-panel > .marsal-content-header__content {
    align-content: start;
    min-inline-size: 0;
    overflow-wrap: anywhere;
    inline-size: calc(100% - var(--_length-bandEdge) - var(--_length-bandEdge));
    padding-block-start: var(--_space-bandTop);
    padding-block-end: var(--_space-bandTop);
    padding-inline: 0;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
  }

  /* From 1024px the navigation width is capped, so the bleed tapers to zero at that cap. */
  @media (min-width: 1024px) {
    --_length-bandBleed: min(var(--_length-bandEdge), max(0px, calc((var(--marsal-length-navWidth) - 100cqi) / 2)));
  }
}

:where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"]:has(> .marsal-content-header__layout > .marsal-content-header__media)) > .marsal-content-header__layout > .marsal-content-header__band-panel > .marsal-content-header__content {
  padding-block-end: calc(var(--_space-bandTop) + var(--marsal-space-s));
}

:where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"]) > .marsal-content-header__layout {
  & > .marsal-content-header__breadcrumbs {
    box-sizing: border-box;
    padding-block-start: var(--_space-bandTop);
    padding-inline: var(--_length-bandEdge);
    color: var(--_color-panelForeground);

    & + .marsal-content-header__band-panel > .marsal-content-header__content {
      padding-block-start: var(--_space-partGap);
    }
  }

  & > .marsal-content-header__media {
    margin-block-start: calc(-1 * var(--marsal-space-s));

    & :where(img, video, iframe) {
      display: block;
      inline-size: 100%;
      block-size: auto;
    }
  }
}

:where([data-component-id="marsal_sdc:content_header"][data-height="very_short"]) {
  --_length-height: 20vh;
}

:where([data-component-id="marsal_sdc:content_header"][data-height="short"]) {
  --_length-height: 30vh;
}

:where([data-component-id="marsal_sdc:content_header"][data-height="standard"]) {
  --_length-height: 40vh;
}

:where([data-component-id="marsal_sdc:content_header"][data-height="tall"]) {
  --_length-height: 50vh;
}

:where([data-component-id="marsal_sdc:content_header"][data-height="very_tall"]) {
  --_length-height: 60vh;
}

@container marsal-sdc-content-header (min-width: 48rem) {
  /*
   * The navigation shadow paints over media and panel from a root
   * pseudo-element, as the theme's homepage hero shadow does, and stops no
   * pointer event. Wide layout only; the token itself is none below 1024px,
   * where the theme shows its mobile navigation and paints no hero shadow.
   */
  :where([data-component-id="marsal_sdc:content_header"][data-drop-shadow="true"])::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: var(--marsal-shadow-header);
    pointer-events: none;
  }

  :where([data-component-id="marsal_sdc:content_header"]) > .marsal-content-header__layout {
    --_space-contentInset: clamp(1.5rem, 4cqi, 3rem);
  }

  :where([data-component-id="marsal_sdc:content_header"]:is([data-component-variant="default"], [data-component-variant="split"])[data-background-fit]:not(:has(> .marsal-content-header__layout > .marsal-content-header__media))) > .marsal-content-header__layout {
    padding-block: var(--marsal-space-xl-2xl);
  }

  :where(
    [data-component-id="marsal_sdc:content_header"][data-component-variant="default"]:has(> .marsal-content-header__layout > .marsal-content-header__media)
  ) > .marsal-content-header__layout {
    display: grid;

    & > .marsal-content-header__media,
    & > .marsal-content-header__content {
      grid-area: 1 / 1;
    }

    & > .marsal-content-header__content {
      align-self: end;
      justify-self: start;
      max-inline-size: 40rem;
      margin-inline-start: max(
        var(--marsal-space-pageGutter),
        calc((100cqi - var(--marsal-length-contentWidth-wide)) / 2)
      );
    }
  }

  :where(
    [data-component-id="marsal_sdc:content_header"][data-component-variant="split"][data-media-position="start"]:has(> .marsal-content-header__layout > .marsal-content-header__media)
  ) > .marsal-content-header__layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  :where(
    [data-component-id="marsal_sdc:content_header"][data-component-variant="split"][data-media-position="end"]:has(> .marsal-content-header__layout > .marsal-content-header__media)
  ) > .marsal-content-header__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  :where(
    [data-component-id="marsal_sdc:content_header"][data-component-variant="split"]:has(> .marsal-content-header__layout > .marsal-content-header__media)
  ) > .marsal-content-header__layout > .marsal-content-header__content {
    inline-size: auto;
    margin-inline: 0;
  }

  :where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"]) > .marsal-content-header__layout {
    box-sizing: border-box;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--marsal-space-l);
    inline-size: calc(100% - var(--_length-bandEdge) - var(--_length-bandEdge));
    margin-inline: auto;
    padding-block-start: var(--_space-bandTop);
    padding-block-end: var(--_space-bandHang);
    padding-inline: 0;

    &:has(> .marsal-content-header__media) {
      --_space-bandHang: var(--marsal-space-xl-2xl);

      grid-template-columns: minmax(0, 1fr) 40%;
    }

    /* One backdrop ends at the row edge; the stretched photo extends past it. */
    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset-block: 0 var(--_space-bandHang);
      inset-inline-start: 50%;
      inline-size: 100cqi;
      margin-inline-start: -50cqi;
      background: linear-gradient(var(--_color-panelBackground), var(--_color-panelBackground)), var(--marsal-color-surfaceCanvas);
      pointer-events: none;
    }

    & > .marsal-content-header__breadcrumbs {
      grid-area: 1 / 1 / 2 / -1;
      box-sizing: border-box;
      padding: 0;
      padding-block-end: var(--_space-partGap);
    }

    & > .marsal-content-header__band-panel {
      grid-area: 2 / 1;
      display: flex;
      flex-direction: column;
      min-block-size: 0;
      padding-block-end: var(--_space-bandTop);

      & > .marsal-content-header__content {
        inline-size: 100%;
        padding: 0;
      }
    }

    & > .marsal-content-header__breadcrumbs + .marsal-content-header__band-panel > .marsal-content-header__content {
      padding-block-start: 0;
    }

    & > .marsal-content-header__media {
      grid-area: 2 / 2;
      display: flex;
      flex-direction: column;
      inline-size: calc(100% + var(--_length-bandBleed));
      min-block-size: 0;
      aspect-ratio: var(--_number-aspect);
      margin-block-start: 0;
      margin-block-end: calc(-1 * var(--_space-bandHang));
      margin-inline-end: calc(-1 * var(--_length-bandBleed));
    }
  }

  /* Dimensioned images reserve their display-style ratio before loading. */
  :where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"]:not([data-aspect])) > .marsal-content-header__layout > .marsal-content-header__media:not(:has(img[width][height], video[width][height])),
  :where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"]:not([data-aspect])) > .marsal-content-header__layout > .marsal-content-header__media:not(:has(img[width][height], video[width][height])) :where(img, video, iframe) {
    aspect-ratio: 3 / 2;
  }

  :where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"]) > .marsal-content-header__layout > .marsal-content-header__media {
    /* Carry the stretched row through Drupal Media, field and picture wrappers. */
    & :where(:has(img, video, iframe)) {
      display: flex;
      flex-direction: column;
      block-size: 100%;
      min-block-size: 0;
      min-inline-size: 0;
    }

    & :where(img, video, iframe) {
      flex: 1 1 auto;
      inline-size: 100%;
      block-size: auto;
      min-block-size: 0;
      object-fit: cover;
      object-position: var(--focus, 50% 0);
    }

    /* Embedded players fill the same reserved frame as images. */
    & iframe {
      position: static;
    }

    & .video-embed-field-responsive-video::after {
      display: none;
    }
  }

  :where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"][data-media-position="start"]) > .marsal-content-header__layout {
    &:has(> .marsal-content-header__media) {
      grid-template-columns: 40% minmax(0, 1fr);

      & > .marsal-content-header__band-panel {
        grid-column: 2;
      }
    }

    & > .marsal-content-header__media {
      grid-column: 1;
      margin-inline-start: calc(-1 * var(--_length-bandBleed));
      margin-inline-end: 0;
    }
  }

  :where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"]) > .marsal-content-header__layout > .marsal-content-header__breadcrumbs::before,
  :where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"]) > .marsal-content-header__layout > .marsal-content-header__band-panel::before {
    display: none;
  }
}

/* Narrow headers and short viewports keep all text in the normal page flow. */
@media (min-height: 30rem) {
  /* Reserve photo area above the bottom-aligned panel without stretching it. */
  :where([data-component-id="marsal_sdc:content_header"]:is([data-component-variant="default"], [data-component-variant="split"])[data-background-fit][data-height]:not(:has(> .marsal-content-header__layout > .marsal-content-header__media))) {
    min-block-size: var(--_length-height);
  }

  :where([data-component-id="marsal_sdc:content_header"][data-height]:not([data-component-variant="band_offset"])) > .marsal-content-header__layout > .marsal-content-header__media :where(img, video, iframe) {
    display: block;
    inline-size: 100%;
    block-size: auto;
    max-block-size: var(--_length-height);
    object-fit: cover;
    object-position: var(--focus, 50% 0);
  }

  :where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"][data-height]) > .marsal-content-header__layout > .marsal-content-header__media :where(img, video, iframe) {
    block-size: var(--_length-height);
    object-fit: cover;
    object-position: var(--focus, 50% 0);
  }

  @container marsal-sdc-content-header (min-width: 48rem) {
    :where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"][data-height]) > .marsal-content-header__layout {
      --_space-scrollInset: min(var(--marsal-space-xs), calc(var(--_length-height) / 8));

      max-block-size: calc(var(--_length-height) + var(--_space-bandHang));
      /* Leave room to read and scroll even with the smallest Height. */
      padding-block-start: min(var(--_space-bandTop), calc(var(--_length-height) / 8));

      & > .marsal-content-header__band-panel {
        padding-block-end: min(var(--_space-bandTop), calc(var(--_length-height) / 8));
      }

      & > .marsal-content-header__breadcrumbs {
        /* A wrapping trail must leave part of the capped band for its title. */
        max-block-size: calc(var(--_length-height) / 2 + var(--_space-scrollInset));
        overflow: auto;
        /* Protect focus rings without moving the trail or the photo row. */
        padding-block-start: var(--_space-scrollInset);
        padding-inline: var(--_space-scrollInset);
        margin-block-start: calc(-1 * var(--_space-scrollInset));
        margin-inline: calc(-1 * var(--_space-scrollInset));
        inline-size: calc(100% + var(--_space-scrollInset) + var(--_space-scrollInset));
        scroll-padding: var(--_space-scrollInset);
      }
    }

    :where([data-component-id="marsal_sdc:content_header"][data-height]) > .marsal-content-header__layout {
      & > .marsal-content-header__content,
      & > .marsal-content-header__band-panel > .marsal-content-header__content {
        align-content: start;
        min-block-size: 0;
        max-block-size: var(--_length-height);
        overflow: auto;
        overflow-wrap: anywhere;
        /* The native scrollbar shows overflow wherever the edge cues cannot. */
        scrollbar-width: thin;
        scroll-padding-block: var(--marsal-space-xs);
        /* No local covers: translucent paint cannot conceal a second layer. */
        background-image:
          radial-gradient(farthest-side at 50% 0, var(--_color-panelForeground), transparent),
          radial-gradient(farthest-side at 50% 100%, var(--_color-panelForeground), transparent),
          linear-gradient(var(--_color-panelBackground), var(--_color-panelBackground));
        background-color: var(--_color-panelBacking);
        background-position: center top, center bottom, center;
        background-size: 100% 0, 100% 0, 100% 100%;
        background-repeat: no-repeat;
        background-attachment: scroll, scroll, scroll;
      }

      /* A self scroll timeline is inactive when the text fits. Unsupported
       * browsers keep the cue-free panel with its native scrollbar; no timer or
       * script is involved.
       */
      @supports (animation-timeline: scroll(self block)) {
        & > .marsal-content-header__content,
        & > .marsal-content-header__band-panel > .marsal-content-header__content {
          animation: marsal-content-header-scroll-cues linear both;
          animation-timeline: scroll(self block);
        }

        /* The cues replace the scrollbar only where they can run. */
        @media (prefers-reduced-motion: no-preference) {
          & > .marsal-content-header__content,
          & > .marsal-content-header__band-panel > .marsal-content-header__content {
            scrollbar-width: none;
          }

          /* Fallback for browsers without scrollbar-width. */
          & > .marsal-content-header__content::-webkit-scrollbar,
          & > .marsal-content-header__band-panel > .marsal-content-header__content::-webkit-scrollbar {
            display: none;
          }
        }
      }
    }

    :where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"][data-height]) > .marsal-content-header__layout {
      & > .marsal-content-header__band-panel > .marsal-content-header__content {
        flex: 0 1 auto;
        max-block-size: none;
        /* Keep focused links fully inside the native scrollport. */
        padding: var(--_space-scrollInset);
        margin: calc(-1 * var(--_space-scrollInset));
        inline-size: calc(100% + var(--_space-scrollInset) + var(--_space-scrollInset));
      }

      & > .marsal-content-header__breadcrumbs + .marsal-content-header__band-panel > .marsal-content-header__content {
        padding-block-start: var(--_space-scrollInset);
      }
    }
  }
}

@keyframes marsal-content-header-scroll-cues {
  0% {
    background-size: 100% 0, 100% var(--marsal-space-2xs), 100% 100%;
  }

  1%,
  99% {
    background-size: 100% var(--marsal-space-2xs), 100% var(--marsal-space-2xs), 100% 100%;
  }

  100% {
    background-size: 100% var(--marsal-space-2xs), 100% 0, 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active), print {
  :where([data-component-id="marsal_sdc:content_header"][data-height]) > .marsal-content-header__layout > .marsal-content-header__content,
  :where([data-component-id="marsal_sdc:content_header"][data-height]) > .marsal-content-header__layout > .marsal-content-header__band-panel > .marsal-content-header__content {
    animation: none;
  }
}

@media (forced-colors: active) {
  :where([data-component-id="marsal_sdc:content_header"]) > .marsal-content-header__layout > .marsal-content-header__content {
    border: 1px solid CanvasText;
  }

  :where([data-component-id="marsal_sdc:content_header"][data-height]) > .marsal-content-header__layout {
    & > .marsal-content-header__content,
    & > .marsal-content-header__band-panel > .marsal-content-header__content {
      scrollbar-width: auto;
      background-image: none;
    }

    & > .marsal-content-header__content::-webkit-scrollbar,
    & > .marsal-content-header__band-panel > .marsal-content-header__content::-webkit-scrollbar {
      display: block;
    }
  }

  :where([data-component-id="marsal_sdc:content_header"]) > .marsal-content-header__layout > .marsal-content-header__content[tabindex]:focus-visible,
  :where([data-component-id="marsal_sdc:content_header"]) > .marsal-content-header__layout > .marsal-content-header__breadcrumbs[tabindex]:focus-visible,
  :where([data-component-id="marsal_sdc:content_header"]) > .marsal-content-header__layout > .marsal-content-header__band-panel > .marsal-content-header__content[tabindex]:focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }
}

@media print {
  :where([data-component-id="marsal_sdc:content_header"]:is([data-component-variant="default"], [data-component-variant="split"])[data-background-fit]:not(:has(> .marsal-content-header__layout > .marsal-content-header__media))) > .marsal-content-header__layout {
    padding-block: 0;
  }

  :where([data-component-id="marsal_sdc:content_header"]:is([data-component-variant="default"], [data-component-variant="split"])[data-background-fit][data-height]:not(:has(> .marsal-content-header__layout > .marsal-content-header__media))) {
    min-block-size: 0;
  }

  :where([data-component-id="marsal_sdc:content_header"])::after {
    display: none;
  }

  :where([data-component-id="marsal_sdc:content_header"][data-height]) > .marsal-content-header__layout > .marsal-content-header__media :where(img, video, iframe) {
    block-size: auto;
    min-block-size: 0;
    max-block-size: none;
  }

  :where([data-component-id="marsal_sdc:content_header"][data-component-variant="band_offset"][data-height]) > .marsal-content-header__layout {
    max-block-size: none;

    & > .marsal-content-header__breadcrumbs {
      max-block-size: none;
      overflow: visible;
    }

    @container marsal-sdc-content-header (min-width: 48rem) {
      padding-block-start: var(--_space-bandTop);

      & > .marsal-content-header__band-panel {
        padding-block-end: var(--_space-bandTop);
      }
    }
  }

  :where([data-component-id="marsal_sdc:content_header"][data-height]) > .marsal-content-header__layout > .marsal-content-header__content,
  :where([data-component-id="marsal_sdc:content_header"][data-height]) > .marsal-content-header__layout > .marsal-content-header__band-panel > .marsal-content-header__content {
    max-block-size: none;
    overflow: visible;
    /* Remove scroll cues, but keep the surface behind its paired text color. */
    background: linear-gradient(var(--_color-panelBackground), var(--_color-panelBackground)), var(--_color-panelBacking);
  }
}