/*
 * PEOPLE.CSS
 * A group's Members page (/members/{group}/) and a member's profile (/member/{id}/): jm-core templates members.php and
 * profile.php. Sections under a thin line and a title; each member is a centred block (stacked on phones, two side by
 * side from 700px): round photo and name, then a row of their mixes that scrolls sideways (card.css
 * .jm-grid--carousel). A profile: a large photo with the name beside it, then the wall of covers.
 */

.jm-people__title {
	text-align: center;
}

.jm-people__section {
	margin: var(--jm-space-5) 0 0;
	padding-top: var(--jm-space-3);
	border-top: 1px solid var(--jm-colour-line);
}

.jm-people__heading {
	margin: 0 0 var(--jm-space-3);
	font-size: var(--jm-text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--jm-colour-text-soft);
}

/* The members of one section: blocks stacked on phones, two side by side from 700px. */
.jm-people__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--jm-space-3);
}

@media (min-width: 700px) {
	.jm-people__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* One member: a neat block, everything centred. */
.jm-person {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	padding: var(--jm-space-3);
	border-radius: var(--jm-radius-block);
	background: var(--jm-colour-header);
	box-shadow: var(--jm-shadow-2);
	text-align: center;
}

/* Their mixes: a plain row that scrolls sideways (Nick, 23 Oct: no inset window). */
.jm-person__mixes {
	width: 100%;
}

/* A few mixes sit in the middle; more scroll sideways from the first one (auto margins centre without ever cutting
   off the start, which "justify-content: center" would do once the row overflows). */
.jm-person__mixes .jm-grid--carousel {
	display: flex;
	padding: var(--jm-space-3);
	scrollbar-width: thin;
	scrollbar-color: var(--jm-colour-action) transparent;
}

.jm-person__mixes .jm-grid--carousel > .jm-card { flex: 0 0 132px; }
.jm-person__mixes .jm-grid--carousel > .jm-card:first-child { margin-left: auto; }
.jm-person__mixes .jm-grid--carousel > .jm-card:last-child { margin-right: auto; }

@media (min-width: 900px) {
	.jm-person__mixes .jm-grid--carousel > .jm-card { flex-basis: 152px; }
}

.jm-person__mixes .jm-grid--carousel::-webkit-scrollbar { height: 6px; }
.jm-person__mixes .jm-grid--carousel::-webkit-scrollbar-thumb { border-radius: var(--jm-radius-button); background: var(--jm-colour-action); }
.jm-person__mixes .jm-grid--carousel::-webkit-scrollbar-track { background: transparent; }

.jm-person__who {
	display: inline-flex;
	align-items: center;
	gap: var(--jm-space-3);
	margin: 0 0 var(--jm-space-2);
	color: var(--jm-colour-text);
	text-decoration: none;
}

.jm-person__photo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--jm-shadow-1);
}

.jm-person__name {
	margin: 0;
	font-size: var(--jm-text-m);
	font-weight: 600;
}

/* ---------- A profile ---------- */

.jm-profile__head {
	display: flex;
	justify-content: center;
	margin: 0 0 var(--jm-space-5);
}

.jm-person__photo--large {
	width: 96px;
	height: 96px;
	box-shadow: var(--jm-shadow-2);
}

.jm-person__name--large {
	font-size: var(--jm-text-xl);
	color: var(--jm-colour-heading);
}

a.jm-person__who:hover .jm-person__name { text-decoration: underline; }