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

.index-row {
    display: grid;
    gap: var(--space-2xs) var(--space-2xs);
    padding: var(--space-2xs) 0;
    border-bottom: var(--border);
    font-size: var(--fs-subheading);
}
.index-row:hover {
    text-decoration: none;
}

/* issue: dot · number · title */
.index-row--issue {
    grid-template-columns: auto auto 1fr;
    padding-inline: var(--space-2xs);
}
.index-row__dot {
    width: 20px;
    height: 20px;
    clip-path: var(--shape, var(--shape-circle));
    background: var(--dot, #ccc);
}
.index-row__number {
    font-variant-numeric: tabular-nums;
}

/* 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) */
.index-row--article {
    grid-template-columns: 44px 1fr;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-bottom: var(--border-thin);
}

/* Bookmark cell — the shared .bookmark button (site/snippets/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 {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-2xs) var(--space-s);
    color: inherit;
}
.index-row__body:hover {
    text-decoration: none;
}
.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);
}