/*
 * Taxonomy Column Map — frontend styles.
 * Intentionally minimal: colors, fonts, and spacing inherit from the active
 * theme. Override any class here from your theme's stylesheet.
 */

.tcm-list {
	--tcm-min-width: 200px;
	--tcm-max-columns: 3;

	/*
	 * Makes this element a container so child rules can use cqi units.
	 * cqi = 1% of the container's inline (width) size.
	 */
	container-type: inline-size;
}

.tcm-list__sections {
	display: grid;
	/*
	 * Two constraints work together here:
	 *   1. calc((100cqi + 2rem) / N - 2rem) is the per-track share of the
	 *      container once gaps are factored out. Using this as the floor means
	 *      N+1 tracks can never fit, capping columns at --tcm-max-columns.
	 *      (Naive 100cqi/N ignores the gaps and causes one fewer column than
	 *      requested — that's the bug this formula fixes.)
	 *   2. On narrow viewports --tcm-min-width takes over via max(), causing
	 *      columns to wrap naturally down to a single column.
	 */
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(var(--tcm-min-width), calc((100cqi + 2rem) / var(--tcm-max-columns) - 2rem)),
			1fr
		)
	);
	gap: 2rem;
	align-items: start;
}

/*
 * Column flow — newspaper style (A D G / B E H / C F I).
 * Switches from CSS Grid to CSS multi-column so content fills top-to-bottom
 * within each column before moving to the next.
 * column-count + column-width together give the same responsive behaviour as
 * the grid: the browser picks min(count, floor(container / width)) columns.
 */
.tcm-list--flow-column .tcm-list__sections {
	display: block;
	columns: var(--tcm-max-columns) var(--tcm-min-width);
	column-gap: 2rem;
}

.tcm-list--flow-column .tcm-section {
	break-inside: avoid;
	margin-bottom: 2rem;
}

.tcm-section {
	/* Prevents a section from splitting across print columns. */
	break-inside: avoid;
}

.tcm-section__heading {
	margin: 0 0 0.4em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid currentColor;
	font-size: 1.1em;
}

.tcm-section__terms {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcm-term {
	margin: 0.25em 0;
	line-height: 1.4;
}

.tcm-term__link {
	text-decoration: none;
}

.tcm-term__link:hover,
.tcm-term__link:focus {
	text-decoration: underline;
}

.tcm-term__count {
	font-size: 0.85em;
	opacity: 0.65;
	margin-left: 0.2em;
}