/*
 * Faculty filter.
 *
 * Colours are the site's: #369 for the active state and the section headings, #933 for the
 * fee level badge and the accent red used throughout Canvas's child theme.
 *
 * The whole filter block starts hidden and is revealed by the script. Without JavaScript
 * there is nothing to filter with, so the visitor gets the plain full list they had before
 * rather than a row of buttons that do nothing.
 */

.tss-faculty-filter {
	display: none;

	/*
	 * Canvas floats the archive heading. `.archive_header` is
	 * `float: left; width: 100%` (canvas/style.css:2800), so the H1 above this block
	 * occupies the full column as a left float.
	 *
	 * A plain block box would simply overlap it, which is why the panel itself looked
	 * correctly placed. The rows inside are flex containers, and a flex container
	 * establishes an independent formatting context, so it refuses to overlap the float
	 * and gets placed to the right of it instead - off the end of the column, on top of
	 * the sidebar and the header logo, squeezed to zero width.
	 *
	 * Clearing puts the block below the heading, where it belongs. Anything flex or grid
	 * dropped after a Canvas archive header needs this.
	 */
	clear: both;

	margin: 0 0 1.5em;
	padding: 0.75em 1em;
	background-color: #eceef3;
	border-left: 4px solid #369;
}

.tss-faculty-filter.is-ready {
	display: block;
}

.tss-faculty-filter__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
	margin-bottom: 0.5em;
}

.tss-faculty-filter__row:last-of-type {
	margin-bottom: 0;
}

.tss-faculty-filter__label {
	flex: 0 0 5.5em;
	font-weight: 700;
	color: #369;
}

.tss-faculty-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;

	/*
	 * Take the rest of the row and wrap internally.
	 *
	 * `min-width: 0` is the load-bearing part. A flex item defaults to `min-width: auto`,
	 * which for a nested wrapping flex container resolves to the width of all its chips
	 * laid out on one line - far more than the row has - so it refuses to shrink and
	 * wraps onto a line of its own, pushing the label above it.
	 */
	flex: 1 1 0;
	min-width: 0;
}

.tss-faculty-chip {
	margin: 0;
	padding: 0.25em 0.75em;
	font: inherit;
	font-size: 0.9em;
	line-height: 1.4;
	color: #369;
	background-color: #fff;
	border: 1px solid #dce0e9;
	border-radius: 1em;
	cursor: pointer;
}

.tss-faculty-chip:hover,
.tss-faculty-chip:focus-visible {
	background-color: #dce0e9;
}

.tss-faculty-chip.is-active {
	color: #fff;
	background-color: #369;
	border-color: #369;
}

.tss-faculty-filter__count {
	margin: 0.75em 0 0;
	font-size: 0.85em;
	color: #666;
}

.tss-faculty-filter__empty {
	margin: 0.5em 0 0;
	padding: 0.5em 0.75em;
	background-color: #f2dede;
	color: #933;
}

.tss-faculty-filter__empty[hidden] {
	display: none;
}

/*
 * The badge sits on the same line as the teacher's summary, so it has to be quiet enough
 * not to compete with the name above it.
 */

.tss-faculty-badge {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.15em 0.7em;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

	/*
	 * Sized in rem, not em.
	 *
	 * The badge now sits inside the teacher's name - an h1 on their own page, an h2 on the
	 * archive, and Canvas sets those at very different sizes. An em would inherit that and
	 * make the badge twice as large on one page as the other; rem keeps it the same
	 * wherever it lands.
	 */
	font-size: 0.72rem;

	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
	color: #fff;
	background-color: #933;
	border-radius: 0.9em;
}

/*
 * Role on one line, instruments on the next.
 *
 * The role element is always emitted, even when a teacher has no title, and the minimum
 * height keeps the instruments on the same baseline right down the list. Without it the
 * cards would jog up and down depending on who happens to be a director.
 */

.tss-faculty-summary__role,
.tss-faculty-summary__instruments {
	display: block;
}

.tss-faculty-summary__role {
	min-height: 1.4em;
}

/*
 * Separate the teachers.
 *
 * Content is truncated at the more tag, so the "...->" link used to finish a hairsbreadth
 * above the next teacher's name with nothing to say one had ended and the next begun.
 *
 * The rule is drawn on every teacher that follows another. `is-first-shown` takes it off
 * again for whichever teacher is currently at the top of the list, because after filtering
 * that is often not the first one in the markup, and it would otherwise open with a stray
 * line above it.
 */

.tss-teacher + .tss-teacher {
	margin-top: 2.5em;
	padding-top: 2em;
	border-top: 1px solid #dce0e9;
}

.tss-teacher.is-first-shown {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/*
 * A hidden teacher must not leave its floated photo behind, hence display rather than
 * visibility.
 */

.tss-teacher.is-filtered-out {
	display: none;
}

@media (max-width: 480px) {

	.tss-faculty-filter__label {
		flex-basis: 100%;
	}
}