/* Home only (EN and AR), loaded after main.css through the fragment's
   `stylesheet: page-home.css` front-matter key. Tokens and logical properties
   only, so the Arabic twin mirrors by itself.

   1. Lifecycle rows: the quiet link now shows the case name, so it gets a
      measure and wraps on its reading end instead of stretching the column.
   2. "What our database contains": the full catalogue lives on /data/. Home
      shows the granularity strip as the lead, then a plain typographic index
      of the six family names (no icons, no badges, no sentences), so the page
      no longer stacks four look-alike icon row lists in a row. */

/* ---------- 1. Lifecycle row links ---------- */

.page-home .lifecycle .row-link {
  max-inline-size: 14rem;
  text-align: end;
}
@media (max-width: 1100px) {
  /* the link sits under the sentence, on the start edge */
  .page-home .lifecycle .row-link { max-inline-size: none; text-align: start; }
}

/* ---------- 2. Family index ---------- */

.family-index-wrap {
  margin-block-start: var(--gap-inner);
  display: grid;
  gap: 0.9rem;
}
/* two columns read down, like a list: three names, then three */
.family-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 0.2rem clamp(2rem, 6vw, 6rem);
  max-inline-size: 64rem;
}
.family-index a {
  display: inline-block;
  padding-block: 0.45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-row);
  line-height: 1.25;
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  transition: color 0.2s, text-decoration-color 0.2s;
}
[lang='ar'] .family-index a { line-height: 1.6; }
.family-index a:hover { color: var(--primary-bright); text-decoration-color: currentColor; }
@media (max-width: 640px) {
  .family-index {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}
