/**
 * index: loaded only on pages that show it.
 *
 * Split out of the shared stylesheets by bin/split-css.py; loaded by
 * inc/feature-styles.php when something on the page has the class.
 */

/* ---------- From blocks.css ---------- */
/* ---------- Site index -----------------------------------------------------
 *
 * Columns, because the thing a site map is for is scanning: one column of a
 * hundred and eighteen programs is a scroll, two or three is a glance.
 *
 * Grid, not CSS `columns`. Multi-column flows a group into whichever column
 * has room, so the page came out Pages, then Sermons, with Ministry pages,
 * Programs and Events somewhere further down — which is a worse index than no
 * index. A grid keeps the groups in the order the block emits them, reading
 * across and then down, and `align-items: start` stops a short group being
 * stretched to match the tall one beside it.
 * -------------------------------------------------------------------------- */

.cong-index {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

/* minmax(0, 1fr), not 1fr: a programme title longer than its share of the
   row must wrap rather than widen the column. */
.cong-index--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cong-index--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cong-index__group { min-inline-size: 0; }

.cong-index__heading {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-block-end: 0.35rem;
	border-block-end: 2px solid var(--wp--preset--color--lime);
	font-size: var(--wp--preset--font-size--lg);
}

.cong-index__heading a {
	color: inherit;
	text-decoration: none;
}

.cong-index__heading a:hover { color: var(--wp--preset--color--leaf); }

.cong-index__count {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

.cong-index__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-index__list li { margin-block-end: 0.3rem; }

.cong-index__list a {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	text-decoration: none;
}

.cong-index__list a:hover {
	color: var(--wp--preset--color--leaf);
	text-decoration: underline;
}

@media (max-width: 48rem) {
	.cong-index--cols-2,
	.cong-index--cols-3 { grid-template-columns: minmax(0, 1fr); }
}