/* program-topics — program-card chip list with overflow clip + "See all" toggle.
   Reuses .topic-tag pill styling for the chips themselves.

   Two modes via [data-can-overflow]:
   - absent: render flat, no clip, no toggle (small tag sets).
   - 'true': clip to ~2.5 rows with a bottom fade. Toggle reveals the rest.
     One-way: once expanded, the toggle hides (no "show fewer"). */

.program-topics {
	margin-block: 0.5em;

	.topic-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25em;
		padding: 0;
		margin: 0;
		max-inline-size: 40rem;
	}

	&[data-can-overflow='true'] {
		.topic-chips {
			max-block-size: 5.4em;
			overflow: hidden;
			mask-image: linear-gradient(to bottom, black 70%, transparent);
		}

		&[data-expanded='true'] .topic-chips {
			max-block-size: none;
			mask-image: none;
		}
	}

	&[data-expanded='true'] .topics-toggle {
		display: none;
	}

	.topics-toggle {
		margin-block-start: 0.5em;
		font-size: 0.75rem;
		text-decoration: underline;
		text-underline-offset: 0.2em;
		cursor: pointer;

		margin-top: 1em;
		color: var(--ink-auxiliary);
		font-family: var(--font-mono);
	}

	.topic-tag abbr {
		text-decoration: none;
		cursor: help;
	}
}