/**
 * roles: 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 ---------- */
/* Roles ------------------------------------------------------------------- */

.cong-roles {
	/*
	 * --50, not --70. These blocks are not bands: a band spans the window and
	 * earns 7.5rem of air, while this one is usually dropped halfway down a
	 * program page, often inside a 300px column beside a "Meets / Register"
	 * card — where --70 put 120px of nothing above it and 120px below.
	 *
	 * The block now carries WordPress's own padding control (block.json
	 * supports.spacing), and the control writes an inline style, which beats
	 * this rule. So this is a starting point an editor can raise to band
	 * proportions on the one page that wants it, rather than a decision taken
	 * once in a stylesheet for all 116 of them.
	 */
	padding-block: var(--wp--preset--spacing--50);
}

.cong-roles__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--40);
}

.cong-roles__count {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
}

.cong-roles__groups {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin-block-start: var(--wp--preset--spacing--50);
}

.cong-roles__group-name {
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding-block-end: var(--wp--preset--spacing--10);
	border-bottom: 2px solid var(--wp--preset--color--lime);
	font-size: var(--wp--preset--font-size--xl);
}

.cong-roles__group-name a { color: inherit; text-decoration: none; }
.cong-roles__group-name a:hover { color: var(--wp--preset--color--leaf); }

.cong-roles__group-n {
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
}

.cong-roles__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * `hidden` has to win here.
 *
 * The filter sets the attribute, and the browser's own `[hidden] {display:
 * none}` is a bare element rule — a class setting `display: flex` outranks it,
 * so the first version of this filtered the count and left every card on
 * screen. Anything this block hides says so explicitly.
 */
.cong-role[hidden],
.cong-roles__group[hidden] {
	display: none;
}

.cong-role {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
}

.cong-role__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.25;
}

.cong-role__name a { color: inherit; text-decoration: none; }
.cong-role__name a:hover { color: var(--wp--preset--color--leaf); }

.cong-role__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

.cong-role__days,
.cong-role__gift {
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
}

.cong-role__days {
	background: var(--wp--preset--color--sky-soft);
	color: var(--wp--preset--color--ink);
}

.cong-role__gift {
	background: var(--wp--preset--color--lime-soft);
	color: var(--wp--preset--color--leaf);
}

.cong-role__program { margin: 0; font-size: var(--wp--preset--font-size--sm); }

.cong-role__signup { margin: auto 0 0; padding-block-start: 0.4rem; }

.cong-roles__none {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-muted);
	text-align: center;
}