/* The staff list (inc/staff-render.php). Only the LBS Foundation theme's design tokens (--lbs-*): no colour of its
   own. Two classes in rules that set a look, as in sites.css. The fields themselves take the theme's form look
   (class "lbs-form", forms.css). */

/* The filters hide people and groups with [hidden]; the grid and flex rules below must not show them again. */
.lbs-staff [hidden] { display: none !important; }

/* Filters: a grey panel, search and department side by side from 768px, the letters under them. */
.lbs-staff .lbs-staff__filters {
	display: grid;
	gap: var(--lbs-space-5);
	margin: 0 0 var(--lbs-space-4);
	padding: var(--lbs-space-5);
	background: var(--lbs-panel);
}
/* Fields may shrink below the browser's own minimum width (a text field is 20 characters wide by default), so
   enlarged text (200%) on a 320px screen does not push the page sideways. */
.lbs-staff .lbs-staff__filters > *,
.lbs-staff .lbs-staff__fields > *,
.lbs-staff .lbs-staff__fields input,
.lbs-staff .lbs-staff__fields select { min-width: 0; }
/* The grids set the spacing: not the theme's bottom margin and 32rem cap on a form field (forms.css). */
.lbs-staff .lbs-field { max-width: none; margin: 0; }
.lbs-staff .lbs-staff__fields { display: grid; gap: var(--lbs-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
	.lbs-staff .lbs-staff__fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; }
}
.lbs-staff .lbs-staff__letters { min-width: 0; margin: 0; padding: 0; border: 0; }
.lbs-staff .lbs-staff__letters legend { margin-bottom: var(--lbs-space-2); padding: 0; font-weight: 700; }
.lbs-staff .lbs-staff__letter-row { display: flex; flex-wrap: wrap; gap: var(--lbs-space-1); }
.lbs-staff .lbs-staff__letter {
	min-width: var(--lbs-target);
	min-height: var(--lbs-target);
	margin: 0;
	padding: 0 var(--lbs-space-2);
	border: 1px solid var(--lbs-border-strong);
	border-radius: var(--lbs-radius-control);
	background: var(--lbs-white);
	color: var(--lbs-text);
	font: inherit;
	font-size: var(--lbs-fs-sm);
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--lbs-transition), color var(--lbs-transition);
}
.lbs-staff .lbs-staff__letter:hover { border-color: var(--lbs-red); color: var(--lbs-red); }
.lbs-staff .lbs-staff__letter[aria-pressed="true"] { border-color: var(--lbs-text); background: var(--lbs-text); color: var(--lbs-white); }

.lbs-staff .lbs-staff__status { margin: 0 0 var(--lbs-space-4); color: var(--lbs-muted); font-size: var(--lbs-fs-sm); }
.lbs-staff .lbs-staff__none { margin: var(--lbs-space-5) 0 0; }

/* A department: its heading with the count at the other end, a heavier rule below (as the website list). */
.lbs-staff .lbs-staff__group + .lbs-staff__group { margin-top: var(--lbs-space-7); }
.lbs-staff .lbs-staff__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--lbs-space-2) var(--lbs-space-5);
	padding-bottom: var(--lbs-space-3);
	border-bottom: 2px solid var(--lbs-text);
}
/* A one-word department name ("Landsbókavörður") at enlarged text is wider than a phone: it may break. */
.lbs-staff .lbs-staff__dept { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.lbs-staff .lbs-staff__count { margin: 0; color: var(--lbs-muted); font-size: var(--lbs-fs-sm); }

/* A person: on phones one under the other (name, position, e-mail, phone); from 768px four columns. */
.lbs-staff .lbs-staff__list { margin: 0; padding: 0; list-style: none; }
.lbs-staff .lbs-staff__person {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: var(--lbs-space-3) 0;
	border-bottom: 1px solid var(--lbs-border);
	font-size: var(--lbs-fs-sm);
	line-height: var(--lbs-lh-tight);
}
.lbs-staff .lbs-staff__person p { margin: 0; }
.lbs-staff .lbs-staff__name { font-size: var(--lbs-fs-md); font-weight: 700; }
.lbs-staff .lbs-staff__position { margin-top: var(--lbs-space-1); color: var(--lbs-muted); }
.lbs-staff .lbs-staff__email { overflow-wrap: anywhere; }
/* E-mail and phone are links in the theme's look for links in text (red, underlined). Set here because the theme's
   rule skips links with a class, and the theme's script gives each protected address its class "tpostur". */
.lbs-staff .lbs-staff__person a {
	color: var(--lbs-red);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
.lbs-staff .lbs-staff__person a:is(:hover, :focus-visible) { color: var(--lbs-red-dark); text-decoration-thickness: 2px; }
/* The links are a tap target of their own on phones: taller than the text (Vefstaðall 6.4, 24px at least). */
.lbs-staff .lbs-staff__email a,
.lbs-staff .lbs-staff__phone a { display: inline-block; padding-block: var(--lbs-space-2); }
.lbs-staff .lbs-staff__phone a { white-space: nowrap; }
.lbs-staff .lbs-staff__email:empty,
.lbs-staff .lbs-staff__phone:empty { display: none; }

/* From 768px two columns: name and position, e-mail and phone. From 1200px one row of four. (At 768–1199px four
   columns would break the longer addresses mid-word.) */
@media (min-width: 768px) {
	.lbs-staff .lbs-staff__person {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--lbs-space-5);
		align-items: baseline;
	}
	.lbs-staff .lbs-staff__name,
	.lbs-staff .lbs-staff__position { grid-column: 1; }
	.lbs-staff .lbs-staff__email { grid-column: 2; grid-row: 1; }
	.lbs-staff .lbs-staff__phone { grid-column: 2; grid-row: 2; }
	.lbs-staff .lbs-staff__email a,
	.lbs-staff .lbs-staff__phone a { padding-block: var(--lbs-space-1); }
}
@media (min-width: 1200px) {
	.lbs-staff .lbs-staff__person { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr) minmax(0, 2fr); column-gap: var(--lbs-space-4); }
	.lbs-staff .lbs-staff__name,
	.lbs-staff .lbs-staff__position,
	.lbs-staff .lbs-staff__email,
	.lbs-staff .lbs-staff__phone { grid-column: auto; grid-row: auto; }
	.lbs-staff .lbs-staff__name { font-size: var(--lbs-fs-sm); }
	.lbs-staff .lbs-staff__position { margin-top: 0; }
	.lbs-staff .lbs-staff__email:empty,
	.lbs-staff .lbs-staff__phone:empty { display: block; }
	.lbs-staff .lbs-staff__phone { text-align: right; }
}