/*
 * mw-list: a list group for "where to go next" sets (docs/design-system.md,
 * spec D15): tasks, related help, a guide list, next steps. Things a reader
 * compares or chooses between stay cards (mw-card).
 *
 * One bordered box; its rows are divided by hairlines (the gap shows the
 * border colour). Each row is one stretched link: a small icon, the title and
 * one line, and a chevron. Borders, no shadow; a row tints on hover.
 *
 *   mw-list          the box (a <ul>)
 *   mw-list--columns two columns where there is room, one on a phone
 *   mw-list__item    a row (an <li>), the link's target
 *   mw-list__icon    a navy glyph on the selected blue
 *   mw-list__body    the title and text
 *   mw-list__title   the row's heading (pick the h level the page needs)
 *   mw-list__link    the one <a>, inside the title; its ::after covers the row
 *   mw-list__text    one line of description
 *   mw-list__chevron the arrow on the right, aria-hidden
 */
.mw-list {
  display: grid;
  gap: var(--border-width);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.mw-list--columns {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
}

.mw-list__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
}

.mw-list__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--control-height);
  height: var(--control-height);
  border-radius: var(--radius-control);
  background: var(--color-selected);
  color: var(--color-primary-text);
}

.mw-list__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.mw-list__title {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.mw-list__link {
  color: inherit;
  text-decoration: none;
}

.mw-list__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.mw-list__link:focus-visible {
  outline: none;
}

.mw-list__item:focus-within {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.mw-list__text {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.mw-list__chevron {
  flex: none;
  align-self: center;
  color: var(--color-text-muted);
}

@media (hover: hover) {
  .mw-list__item:hover {
    background: var(--color-hover-fill);
  }

  .mw-list__item:hover .mw-list__title {
    text-decoration: underline;
  }

  .mw-list__item:hover .mw-list__chevron {
    color: var(--color-link);
  }
}