/* 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;
}

/* Three cards per row (release notes), two on phones */
.md-typeset .grid.three-per-row {
  grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 29.984375em) {
  .md-typeset .grid.three-per-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.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;
}

/* Cards with the link in the title and no link at the bottom (release
   notes): the title link is the main link, so stretch it instead */
.md-typeset .grid.cards > ul > li:not(:has(> p:last-child > a:only-child)) > p:first-child > a:only-of-type {
  position: static;
}

.md-typeset .grid.cards > ul > li:not(:has(> p:last-child > a:only-child)) > p:first-child > a:only-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 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;
}