/* Grid cards, site-wide: tinted fill, thin border, bare icon, compact
   type, and the whole card is clickable. Colors derive from the theme
   foreground, so the cards work in both light and dark schemes. Covers
   both card shapes used in these docs:
   - multi-line cards, where the icon and title are in the first <p> and
     the link is the last <p>
   - one-line cards (icon + link), where both are directly in the <li> */

.md-typeset .grid.cards > ul {
  gap: 0.6rem;
}

.md-typeset .grid.cards > ul > li {
  position: relative;
  padding: 0.8rem;
  font-size: 0.7rem;
  background: color-mix(in srgb, var(--md-default-fg-color) 4%, transparent);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0;
  box-shadow: none;
  transition:
    background-color 0.1s ease,
    border-color 0.1s ease;
}

/* Hover: fill and border get a little stronger */
.md-typeset .grid.cards > ul > li:hover {
  background: color-mix(in srgb, var(--md-default-fg-color) 7%, transparent);
  border-color: var(--md-default-fg-color--lighter);
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li:focus-within {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

/* Stretch the card's main link over the whole card. Other links in the
   description stay clickable above the overlay. */
.md-typeset .grid.cards > ul > li > a::after,
.md-typeset .grid.cards > ul > li > p:last-child > a:only-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.md-typeset .grid.cards > ul > li > p:not(:last-child) a {
  position: relative;
  z-index: 2;
}

/* One-line cards: icon and link in a row */
.md-typeset .grid.cards > ul > li:not(:has(> p)) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Multi-line cards: stack the content and push the link to the bottom,
   so the links in a row line up */
.md-typeset .grid.cards > ul > li:has(> p) {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.md-typeset .grid.cards > ul > li > hr {
  display: none;
}

.md-typeset .grid.cards > ul > li > p {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
}

.md-typeset .grid.cards > ul > li > p:last-child:has(> a:only-child) {
  margin-top: auto;
  padding-top: 0.4rem;
}

/* Title row: icon + title */
.md-typeset .grid.cards > ul > li > p:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--md-default-fg-color);
}

.md-typeset .grid.cards > ul > li > p:first-child strong,
.md-typeset .grid.cards > ul > li > a strong {
  font-weight: 700;
}

/* Icon: bare 20px glyph, no badge */
.md-typeset .grid.cards > ul > li > p:first-child .twemoji,
.md-typeset .grid.cards > ul > li > .twemoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--md-default-fg-color);
}

.md-typeset .grid.cards > ul > li > p:first-child .twemoji svg,
.md-typeset .grid.cards > ul > li > .twemoji svg {
  width: 100%;
  height: 100%;
}

.md-typeset .grid.cards > ul > li > p:last-child a {
  font-weight: 400;
}