/**
 * @file series_nav.css
 * @component Series Navigation (Navigation)
 * @description White index tiles with a maize edge and a navy current-page tile.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * --_image-arrow              : Mask for the decorative tile arrow.
 * --_color-link               : Tile link foreground, including the current tile.
 * --_color-focusRing          : The band's focus ring, drawn around a tile on the band.
 * --_color-focusRingContrast  : The band's focus halo, drawn around a tile on the band.
 */
:where([data-component-id="marsal_sdc:series_nav"]) {
  --_image-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 5.5l6.5 6.5-6.5 6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --_color-link: var(--marsal-color-textBrand);
  --_color-focusRing: var(--marsal-color-focusRing);
  --_color-focusRingContrast: var(--marsal-color-focusRingContrast);

  container: marsal-sdc-series-nav / inline-size;
  /* Containment needs a width even when a Flex parent does not stretch it. */
  inline-size: 100%;
  padding-block: var(--marsal-space-l) var(--marsal-space-xl);
  color: var(--marsal-color-textPrimary);
  font-family: var(--marsal-fontFamily-body-standard);
  font-size: var(--marsal-fontSize-body-standard);
  font-weight: var(--marsal-fontWeight-body-standard);
  line-height: var(--marsal-lineHeight-body-standard);
  -webkit-font-smoothing: antialiased;

  & .marsal-series-nav__head {
    display: grid;
    gap: var(--marsal-space-3xs);
    margin-block-end: var(--marsal-space-m);
  }

  & .marsal-series-nav__eyebrow {
    margin: 0;
    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);
    letter-spacing: var(--marsal-letterSpacing-label-small);
    text-transform: uppercase;
  }

  & .marsal-series-nav__title {
    margin: 0;
    color: var(--marsal-color-textStrong);
    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);
    text-wrap: balance;
  }

  & .marsal-series-nav__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--marsal-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Each tile paints its own light surface, so it restores the theme's neutral roles inside a dark band. */
  & .marsal-series-nav__tile {
    --_color-link: var(--marsal-color-textBrandTheme);
    --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;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--marsal-space-xs);
    row-gap: var(--marsal-space-3xs);
    align-items: center;
    min-block-size: max(44px, 2.75rem);
    margin: 0;
    padding: var(--marsal-space-xs) var(--marsal-space-s);
    border-block-start: var(--marsal-length-dividerAccent) solid var(--marsal-color-dividerAccent);
    color: var(--marsal-color-textPrimaryTheme);
    background: var(--marsal-color-surfacePrimary);

    &::after {
      content: "";
      grid-column: 2;
      grid-row: 1;
      inline-size: 1.4rem;
      block-size: 1.4rem;
      background: var(--marsal-color-textBrandTheme);
      mask: var(--_image-arrow) center / contain no-repeat;
    }

    &:hover {
      box-shadow: var(--marsal-shadow-elevation-medium);

      &::after {
        translate: 0.3rem 0;
      }
    }

    &:hover .marsal-series-nav__tile-title,
    &:has(.marsal-series-nav__link:focus) .marsal-series-nav__tile-title {
      text-decoration: underline;
      text-decoration-color: var(--marsal-color-dividerAccent);
      text-decoration-thickness: 2px;
      text-underline-offset: 0.2em;
    }

    /* The ring sits outside the tile, on the band, so it keeps the band's pair on white and navy tiles alike. */
    &:has(.marsal-series-nav__link:focus-visible) {
      outline: 3px solid var(--_color-focusRing);
      outline-offset: 3px;
      box-shadow: 0 0 0 2px var(--_color-focusRingContrast);
    }

    &:where(:has(> .marsal-series-nav__link[aria-current="page"])) {
      /* The current page is a navy tile, so it stands apart from the white tiles and the band. */
      &,
      &:hover {
        --_color-link: var(--marsal-color-textOnBrand);

        background: var(--marsal-color-surfaceBrand);
        box-shadow: none;
      }

      & .marsal-series-nav__tile-title,
      & .marsal-series-nav__description {
        color: var(--marsal-color-textOnBrand);
      }

      &::after {
        visibility: hidden;
      }
    }
  }

  & .marsal-series-nav__link {
    display: grid;
    gap: 0.15rem;
    text-decoration: none;

    /* The title link covers the whole tile. */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
    }

    /* Focus belongs to the whole tile, not only its title. */
    &:focus-visible {
      outline: none;
      box-shadow: none;
    }
  }

  & .marsal-series-nav__tile-title {
    font-family: var(--marsal-fontFamily-title-small);
    font-size: var(--marsal-fontSize-title-small);
    font-weight: var(--marsal-fontWeight-title-small);
    line-height: var(--marsal-lineHeight-title-small);
    text-wrap: balance;
  }

  & .marsal-series-nav__description {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--marsal-fontSize-body-small);
    line-height: var(--marsal-lineHeight-body-small);
  }

  @container marsal-sdc-series-nav (min-width: 34rem) {
    & .marsal-series-nav__grid:where(:not(:has(> li:nth-child(3):last-child))) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--marsal-space-s);
    }

    & .marsal-series-nav__grid:where(:has(> li:nth-child(5):last-child)) {
      grid-template-columns: repeat(6, minmax(0, 1fr));

      & > :nth-child(-n + 3) {
        grid-column: span 2;
      }

      & > :nth-child(n + 4) {
        grid-column: span 3;
      }
    }

    & .marsal-series-nav__tile {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto 1fr auto;
      align-items: start;
      row-gap: var(--marsal-space-2xs);
      block-size: 100%;
      padding: var(--marsal-space-s) var(--marsal-space-s) var(--marsal-space-xs);

      &::after {
        grid-column: 1;
        grid-row: 3;
        justify-self: end;
      }
    }

    & .marsal-series-nav__description {
      grid-column: 1;
    }
  }

  @container marsal-sdc-series-nav (min-width: 40rem) {
    & .marsal-series-nav__grid:where(:has(> li:nth-child(3):last-child)),
    & .marsal-series-nav__grid:where(:has(> li:nth-child(6):last-child)) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--marsal-space-s);
    }
  }

  @container marsal-sdc-series-nav (min-width: 56rem) {
    & .marsal-series-nav__grid:where(:has(> li:nth-child(4):last-child)) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* Five tiles use 3 + 2 until each can keep about 12rem of text. */
  @container marsal-sdc-series-nav (min-width: 68rem) {
    & .marsal-series-nav__grid:where(:has(> li:nth-child(5):last-child)) {
      grid-template-columns: repeat(5, minmax(0, 1fr));

      & > :nth-child(n) {
        grid-column: auto;
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    & .marsal-series-nav__tile {
      transition: box-shadow 180ms ease-out;

      &::after {
        transition: translate 180ms ease-out;
      }
    }
  }

  @media (forced-colors: active) {
    & .marsal-series-nav__tile {
      border: 1px solid CanvasText;
      border-block-start-width: var(--marsal-length-dividerAccent);

      &:where(:has(> .marsal-series-nav__link[aria-current="page"])) {
        border-inline-start: var(--marsal-length-dividerAccent) solid Highlight;
      }

      &::after {
        background: LinkText;
      }

      &:has(.marsal-series-nav__link:focus-visible) {
        outline-color: Highlight;
      }
    }
  }
}

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