.mod-navigation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mod-navigation-grid__item {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.mod-navigation-grid__link {
  display: block;
  height: 100%;
  padding: var(--mod-navigation-grid-link-padding, calc(var(--base, 8px) * 2));
  color: var(--color-complementary-contrasting, var(--color-black, #000));
  background: var(
    --color-complementary-light,
    var(--color-background-card, #fff)
  );
  border-radius: var(--radius-lg, 0);
  text-decoration: none;
  transition:
    100ms color,
    100ms background-color;
}

.mod-navigation-grid__link:visited {
  color: var(--color-complementary-contrasting, var(--color-black, #000));
}

.mod-navigation-grid__link:hover,
.mod-navigation-grid__link:active,
.mod-navigation-grid__link:visited:hover,
.mod-navigation-grid__link:visited:active {
  color: var(--color-primary-contrasting, #fff);
  background: var(--color-primary, #000);
}

.mod-navigation-grid__link:focus-visible {
  outline: 3px solid
    var(--mod-navigation-grid-focus-color, var(--color-primary, #000));
  outline-offset: 3px;
}

.mod-navigation-grid__title,
.mod-navigation-grid__description {
  display: block;
  grid-column: 2;
}

.mod-navigation-grid__title {
  font-size: var(--font-size-h3, 1.25rem);
  font-weight: var(--font-weight-bold, 600);
  line-height: var(--line-height-heading, 1.2);
  text-decoration: underline;
}

.mod-navigation-grid__description {
  margin-block-start: calc(var(--base, 8px) / 2);
}

.mod-navigation-grid__link:has(.mod-navigation-grid__icon) {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: calc(var(--base, 8px) * 1.5);
  align-items: center;
}

.mod-navigation-grid__icon {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
}

.mod-navigation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--base, 8px) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mod-navigation-buttons__item {
  margin: 0;
  padding: 0;
}

.mod-navigation-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mod-navigation-list__item + .mod-navigation-list__item {
  margin-top: calc(var(--base, 8px) / 2);
}

.mod-navigation-list__link {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--base, 8px) / 2);
  text-decoration: none;
}

.mod-navigation-list__link:hover,
.mod-navigation-list__link:focus,
.mod-navigation-list__link:active,
.mod-navigation-list__link:visited {
  text-decoration: none;
}

.mod-navigation-list__icon {
  flex: none;
}

.mod-navigation-list__label {
  align-self: center;
  text-decoration: underline;
}

.mod-navigation-cards {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, 18rem), 1fr)
  );
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mod-navigation-cards__item {
  min-width: 0;
  margin: 0;
  padding: 0;
}

/*
 * Inline and bar are the LTS "quick links" bands (mxui.navigation.inline / .bar).
 * They share a primary-colored band, contrasting text and an underlined label, and
 * differ only in layout: inline is a horizontal, wrapping row of icon-beside-label
 * chips; bar is an auto-fit grid of stacked icon-above-label columns.
 */
.mod-navigation-inline {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--base, 8px) / 4);
  justify-content: center;
  margin: 0;
  padding: calc(var(--base, 8px) / 4);
  list-style: none;
  background: var(--color-primary, #000);
}

.mod-navigation-inline__item {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.mod-navigation-inline__link {
  display: inline-grid;
  grid-template-columns: max-content 1fr;
  gap: calc(var(--base, 8px) / 2);
  align-items: center;
  padding: calc(var(--base, 8px) * 1.5);
  color: var(--color-primary-contrasting, #fff);
  border-radius: var(--radius-lg, 0);
  text-decoration: none;
  transition: 100ms background-color;
}

.mod-navigation-inline__link:hover,
.mod-navigation-inline__link:focus,
.mod-navigation-inline__link:active,
.mod-navigation-inline__link:visited {
  color: var(--color-primary-contrasting, #fff);
  text-decoration: none;
}

.mod-navigation-inline__link:hover,
.mod-navigation-inline__link:active {
  background: var(--color-primary-dark, #000);
}

.mod-navigation-inline__link:focus-visible {
  outline: 3px solid var(--color-primary-contrasting, #fff);
  outline-offset: -3px;
}

.mod-navigation-inline__icon {
  flex: none;
}

.mod-navigation-inline__label {
  text-decoration: underline;
}

.mod-navigation-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-primary, #000);
}

.mod-navigation-bar__item {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.mod-navigation-bar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--base, 8px);
  height: 100%;
  padding: calc(var(--base, 8px) * 2.5) var(--base, 8px);
  color: var(--color-primary-contrasting, #fff);
  text-align: center;
  text-decoration: none;
  transition: 100ms background-color;
}

.mod-navigation-bar__link:hover,
.mod-navigation-bar__link:focus,
.mod-navigation-bar__link:active,
.mod-navigation-bar__link:visited {
  color: var(--color-primary-contrasting, #fff);
  text-decoration: none;
}

.mod-navigation-bar__link:hover,
.mod-navigation-bar__link:active {
  background: var(--color-primary-dark, #000);
}

.mod-navigation-bar__link:focus-visible {
  outline: 3px solid var(--color-primary-contrasting, #fff);
  outline-offset: -3px;
}

.mod-navigation-bar__icon {
  flex: none;
}

.mod-navigation-bar__label {
  text-decoration: underline;
}

/* Honor reduced-motion for every navigation hover transition. */
@media (prefers-reduced-motion: reduce) {
  .mod-navigation-grid__link,
  .mod-navigation-inline__link,
  .mod-navigation-bar__link {
    transition: none;
  }
}