/**
 * styles/team.css
 *
 * SUP Journals Theme — the Editorial Team.
 *
 * Measured from the Editorial Team frame: the page title, then one heading
 * per group over a stack of cards 840px wide, each 32px of air around a
 * 110px round portrait and the person's details, with the biography folded
 * under a small control.
 *
 * The people come from SUP Journals Extensions; the styles below draw
 * whatever it hands over, and the page falls back to the journal's own
 * masthead prose when there is nobody to draw.
 */

/* ---------------------------------------------------------------
   The page

   The canvas leaves 52px between the title and the first heading.
   --------------------------------------------------------------- */
.sup-team .sup-page-head { margin-bottom: var(--sup-space-52); }

.sup-team__group + .sup-team__group { margin-top: var(--sup-space-42); }

.sup-team__heading,
.pkp_structure_page .sup-team__heading {
	margin: 0 0 var(--sup-space-12);
	font-family: var(--sup-font-display);
	font-size: var(--sup-text-h3);
	line-height: var(--sup-leading-display);
	font-weight: var(--sup-weight-team-heading);
	color: var(--sup-color-heading);
}

/* base.css zeroes the margin of every classed list, at the same
   specificity, so this rule names the element to win it back. */
.sup-team__list,
.pkp_structure_page ul.sup-team__list { margin: 0; padding: 0; list-style: none; }

/* Cards share their rules, as the canvas stacks them. */
.sup-team__item + .sup-team__item { margin-top: -1px; }

/* ---------------------------------------------------------------
   One person

   The stroke is drawn on the card's own line, so the 32px of air is
   measured inside it.
   --------------------------------------------------------------- */
.sup-member {
	display: flex;
	gap: var(--sup-space-24);
	box-sizing: border-box;
	padding: calc(var(--sup-space-32) - var(--sup-border-width));
	background: var(--sup-color-surface);
	border: var(--sup-border-width) solid var(--sup-color-panel-border);
}

/* The parent theme clears floats inside an article with two empty
   pseudo-elements; in this flex row they would count as items. */
.sup-member::before,
.sup-member::after { content: none; }

.sup-member__portrait { flex: 0 0 auto; }

.sup-member__photo {
	display: block;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--sup-color-surface-raised);
	box-shadow: inset 0 0 0 var(--sup-border-width) var(--sup-color-border);
}

.sup-member__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* The years of the appointment, over the name. */
.sup-member__years,
.pkp_structure_page .sup-member__years {
	display: flex;
	align-items: center;
	gap: var(--sup-space-2);
	margin: 0;
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-muted);
}

.sup-member__name,
.pkp_structure_page .sup-member__name {
	margin: 0;
	font-family: var(--sup-font-display);
	font-size: var(--sup-text-lead);
	line-height: var(--sup-leading-card);
	font-weight: var(--sup-weight-team-name);
	color: var(--sup-color-text);
}

.sup-member__affiliation,
.pkp_structure_page .sup-member__affiliation {
	margin: var(--sup-space-4) 0 0;
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-muted);
}

/* LinkedIn and a personal site, as two 24px marks in the accent colour. */
.sup-member__links,
.pkp_structure_page .sup-member__links {
	display: flex;
	align-items: center;
	gap: var(--sup-space-2);
	margin: var(--sup-space-12) 0 0;
}

.sup-member__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sup-color-accent-text);
}
.sup-member__link:hover,
.sup-member__link:focus-visible { color: var(--sup-color-brand-text); }

/* The fields a person works in: the same pill as an author's roles. */
.sup-member__tags,
.pkp_structure_page ul.sup-member__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sup-space-6);
	margin: var(--sup-space-8) 0 0;
	padding: 0;
	list-style: none;
}

.sup-member__tag,
.pkp_structure_page .sup-member__tag {
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	margin: 0;
	padding: 0 var(--sup-space-12);
	border-radius: var(--sup-radius-pill);
	box-shadow: inset 0 0 0 var(--sup-border-width) var(--sup-color-border);
	font-size: var(--sup-text-xs);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-muted);
}

/* ---------------------------------------------------------------
   The biography, folded under the card

   The control is the design's small accordion: a plus that becomes a
   minus, and a label beside it. Its 8px of padding is measured inside the
   1px stroke.
   --------------------------------------------------------------- */
.sup-member__bio { margin-top: var(--sup-space-20); }

.sup-member__bio-toggle {
	display: inline-block;
	list-style: none;
	cursor: pointer;
}
.sup-member__bio-toggle::-webkit-details-marker { display: none; }

.sup-member__bio-control {
	display: inline-flex;
	align-items: center;
	gap: var(--sup-space-4);
	min-height: 32px;
	padding: calc(var(--sup-space-8) - var(--sup-border-width));
	border: var(--sup-border-width) solid var(--sup-color-border);
	border-radius: var(--sup-radius);
	background: var(--sup-color-surface);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-flat);
	font-weight: var(--sup-weight-medium);
	color: var(--sup-color-muted);
}

.sup-member__bio-toggle:hover .sup-member__bio-control { border-color: var(--sup-color-border-strong); }
.sup-member__bio-toggle:focus-visible { outline: none; }
.sup-member__bio-toggle:focus-visible .sup-member__bio-control {
	outline: 2px solid var(--sup-color-focus);
	outline-offset: 2px;
}

/* Open, the control is pressed and the plus becomes a minus, as the
   Accordion component's Active state draws it. */
.sup-member__bio[open] .sup-member__bio-control {
	background: var(--sup-color-surface-sunken);
	box-shadow: var(--sup-shadow-pressed);
}

.sup-member__bio-mark {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat url('../images/plus.svg');
	mask: center / contain no-repeat url('../images/plus.svg');
}
.sup-member__bio[open] .sup-member__bio-mark {
	-webkit-mask-image: url('../images/minus.svg');
	mask-image: url('../images/minus.svg');
}

.sup-member__bio-body,
.pkp_structure_page .sup-member__bio-body {
	max-width: var(--sup-col-prose);
	margin-top: var(--sup-space-12);
	font-size: var(--sup-text-sm);
	line-height: var(--sup-leading-text);
	color: var(--sup-color-text);
}
.pkp_structure_page .sup-member__bio-body p { margin: 0; font-size: inherit; line-height: inherit; }
.pkp_structure_page .sup-member__bio-body p + p { margin-top: var(--sup-space-12); }
.sup-member__bio-body a { color: var(--sup-color-link); text-decoration: underline; }

/* The masthead prose, when the journal has added nobody to the list. */
.sup-team__prose { margin-top: var(--sup-space-16); }

/* ---------------------------------------------------------------
   Narrow screens — the portrait moves over the details
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sup-team .sup-page-head { margin-bottom: var(--sup-space-32); }
	.sup-team__group + .sup-team__group { margin-top: var(--sup-space-32); }

	.sup-member {
		flex-direction: column;
		gap: var(--sup-space-16);
		padding: calc(var(--sup-space-20) - var(--sup-border-width));
	}
}