/* The landing page's neutrals, so the docs read as the same site. */
:root {
  --keryx-line: #e4e1eb;
  --keryx-wash: #f5f4f8;
}

/* Home-page cards: an icon, a title, one line of description. */
.md-typeset .grid.cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 0.8rem;
}
.md-typeset .grid.cards > ul > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--keryx-line);
  border-radius: 0.7rem;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.md-typeset .grid.cards > ul > li > p {
  margin: 0;
}
.md-typeset .grid.cards > ul > li > p:first-child {
  margin-bottom: 0.4rem;
}
.md-typeset .grid.cards .twemoji {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.5rem;
  background: var(--keryx-wash);
  color: var(--md-accent-fg-color);
  transition: background-color 0.2s;
}
.md-typeset .grid.cards .twemoji svg {
  width: 1rem;
  height: 1rem;
  max-height: none;
  fill: none;
}
.md-typeset .grid.cards strong a {
  color: var(--md-default-fg-color);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.md-typeset .grid.cards > ul > li > p:last-child {
  color: var(--md-default-fg-color--light);
  font-size: 0.72rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Each card holds one link; stretch it so the whole card is clickable. */
.md-typeset .grid.cards > ul > li a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ul > li:focus-within {
  border-color: color-mix(in srgb, var(--md-accent-fg-color) 40%, var(--keryx-line));
  box-shadow: 0 8px 24px -14px rgb(29 25 40 / 0.3);
  transform: translateY(-1px);
}
.md-typeset .grid.cards > ul > li:hover strong a {
  color: var(--md-accent-fg-color);
}
.md-typeset .grid.cards > ul > li:hover .twemoji {
  background: color-mix(in srgb, var(--md-accent-fg-color) 12%, white);
}
/* The link's own focus ring would circle only the title; ring the card instead. */
.md-typeset .grid.cards > ul > li a {
  outline: none;
}
.md-typeset .grid.cards > ul > li:has(a:focus-visible) {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > ul > li {
    transition: none;
  }
  .md-typeset .grid.cards > ul > li:hover,
  .md-typeset .grid.cards > ul > li:focus-within {
    transform: none;
  }
}