/**
 * staff: 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 ---------- */
/* ---------- Staff -------------------------------------------------------- */

.cong-staff__photo {
	aspect-ratio: 4 / 5;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.cong-staff__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cong-staff__role {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-staff__group-heading {
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--30);
}

.cong-staff__group-heading:first-child {
	margin-top: 0;
}

/* ---------- Staff contact ------------------------------------------------ */

.cong-staff-contact {
	display: grid;
	gap: 0.35rem;
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--sky-mid);
}

.cong-staff-contact p {
	margin: 0;
}

.cong-staff-contact__role {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--ink);
}

.cong-staff-contact__pronouns,
.cong-staff-contact__groups {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-family: var(--wp--preset--font-family--body);
}

.cong-staff-contact__reach {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	font-size: var(--wp--preset--font-size--sm);
}

.cong-staff__contact {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	word-break: break-word;
}

/* Group headings sit between grids, so they need their own rhythm rather
   than the document-wide h2 size. */
.cong-staff__group-heading {
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--ink);
}

.cong-staff__group-heading::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.5rem;
	background: var(--wp--preset--color--lime);
	border-radius: 3px;
}

/* Staff cards are portraits: the photo is the card's top edge. */
.cong-staff__card {
	padding-top: 0;
}

.cong-staff__photo {
	margin: 0 calc(var(--wp--preset--spacing--30) * -1) var(--wp--preset--spacing--10);
	border-radius: var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 0 0;
}

.cong-staff__role {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: normal;
}

/* ------------------------------------------------------------------ *
 * Finding a counselor
 *
 * The filter bar above a staff grid. Deliberately plain: somebody using this
 * is usually having a hard week, and a clever interface is the last thing
 * they need between them and a phone number.
 * ------------------------------------------------------------------ */
.cong-staff-filter {
	margin-bottom: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface, #f3f8fb);
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
}

.cong-staff-filter__row {
	display: grid;
	grid-template-columns: minmax(16rem, 2fr) repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}

@media (max-width: 720px) {
	.cong-staff-filter__row {
		grid-template-columns: 1fr;
	}
}

.cong-staff-filter p {
	margin: 0;
}

.cong-staff-filter label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
}

.cong-staff-filter input[type="search"],
.cong-staff-filter select {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--wp--preset--color--sky-mid, #d8e3ea);
	border-radius: var(--wp--custom--radius--sm, 4px);
	background: var(--wp--preset--color--base, #fff);
	font: inherit;
	color: var(--wp--preset--color--ink, #04436a);
}

.cong-staff-filter__hint {
	display: block;
	margin-top: 0.3rem;
	color: var(--wp--preset--color--ink-muted, #5b6b78);
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
}

.cong-staff-filter__state {
	margin-top: var(--wp--preset--spacing--20) !important;
	font-weight: 600;
}

.cong-staff-filter__state:empty {
	display: none;
}

.cong-staff-filter__clear {
	margin-top: var(--wp--preset--spacing--20);
	padding: 0.4rem 1rem;
	border: 1px solid var(--wp--preset--color--sky-mid, #d8e3ea);
	border-radius: 999px;
	background: var(--wp--preset--color--base, #fff);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	cursor: pointer;
}

.cong-staff-filter__clear:hover {
	border-color: var(--wp--preset--color--ink, #04436a);
}