/* Index row — auto-loaded for the index-row snippet (site/snippets/landing/index-row.php) */

/* issue: a list item (ui/list-item) — dot · number · title, the title
   wrapping beside the number */
.index-row--issue {
    padding-inline: var(--space-2xs);
}
.index-row--issue .list-item__label {
    display: flex;
    gap: var(--space-2xs);
}
.index-row__dot {
    --dot-size: 20px;
}
.index-row__number {
    font-variant-numeric: tabular-nums;
}
/* A title is never wider than its column: its long words break (main.css),
   and the label may shrink below its longest word, so the row can't push the
   side column into scrolling sideways. */
.index-row__label {
    min-width: 0;
}

/* Selected or hovered issue: fill the whole row with the issue's own colour
   (--dot, from the backend `color` field), flipping text to a readable ink
   (--ink). Issue rows carry --dot/--ink directly; article rows inherit them
   from the enclosing issue's .landing__children (see landing.php). */
.index-row--issue.is-active,
.index-row--issue:hover {
    background: var(--dot, var(--color-accent));
    color: var(--ink, #000);
}
/* On the filled row the background is already --dot, so a --dot dot would
   vanish — fill the shape with the contrasting --ink instead. */
.index-row--issue.is-active .index-row__dot,
.index-row--issue:hover .index-row__dot {
    background: var(--ink, var(--color-bg));
}

/* article: [bookmark cell] · (title + author); the body is a list item
   without a rule, the row draws the thin rule under both cells */
.index-row--article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr); /* the title track doesn't grow to its longest word */
    align-items: stretch;
    border-bottom: var(--border-thin);
    font-size: var(--fs-subheading);
}

/* Bookmark cell — the shared .bookmark button (site/snippets/ui/bookmark.php) laid
   out as a bordered cell. Its glyph draws in currentColor, so on the filled
   (hover) cell it flips to --ink (e.g. white) for contrast. */
.index-row__mark {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 16px;
    border-right: var(--border-thin);
}

.index-row__body {
    padding-inline: var(--space-s);
}
.index-row__body .list-item__label {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}
.index-row__author {
    --fa-italic: 100;
} /* black, per spec */

/* Hover/selection fill for an article is split between its two cells:
   – hovering anywhere on the row fills the body side;
   – the bookmark cell fills only when it is itself hovered.
   Both use the parent issue's --dot, flipping text/icon to --ink. */
.index-row--article.is-active .index-row__body,
.index-row--article:hover .index-row__body {
    background: var(--dot, var(--color-accent));
    color: var(--ink, #000);
}
.index-row__mark:hover {
    background: var(--dot, var(--color-accent));
    color: var(--ink, #000);
}