$_person-distance: (
	small: 6rem,
	large: 14rem
);

.c-person {
	margin-top: 2rem;

	&:first-of-type {
		margin-top: 0;
	}
}

// Photos use background images since we can't control the dimensions of
// submitted avatars. This centers whatever is added, which hopefully creates a
// good cropping effect.
.c-person__photo {
	@include avatar-size("tiny");

	margin-top: -2.75rem;
	position: absolute;
	right: calc(50% - #{map-get($avatar_dimensions, "tiny") * 0.5});

	// Breakpoints
	@include mappy-bp(wrist-large) {
		@include avatar-size("small");

		right: 2rem;
	}

	@include mappy-bp(palm-small) {
		@include avatar-size("medium");

		margin-top: -3.5rem;
		right: 3rem;
	}

	@include mappy-bp(palm-medium) {
		@include avatar-size("medium");

		left: 1rem;
		margin-top: -2rem;
	}

	@include mappy-bp(palm-large) {
		left: 3rem;
	}

	@include mappy-bp(lap-small) {
		@include avatar-size("medium");

		left: initial;
		margin-left: 1rem;
		right: initial;
	}

	@include mappy-bp(lap-medium) {
		@include avatar-size("large");

		margin-top: -3rem;
		margin-left: -1rem;
	}

	// User Queries
	@media screen and (prefers-reduced-motion: reduce) {
		transition: none;
	}

	@media screen and (-ms-high-contrast: active) {
		-ms-high-contrast-adjust: none;
	}
}


.c-person__info {
	border: $border-thinnest solid;
	@include var(border-color, card-outline);
	@include var(background-color, card-background);
	margin-top: 4rem;
	min-height: 10rem;
	padding: 1.5rem;
	max-width: $global-type-measure;
	transition: $animation-duration-shorter $animation-easing-character background-color;

	// Breakpoints
	@include mappy-bp(palm-small) {
		margin-top: 5rem;
	}

	@include mappy-bp(palm-medium) {
		margin-left: 5rem;
		padding-left: 3rem;
	}

	@include mappy-bp(palm-large) {
		margin-left: 7rem;
	}

	@include mappy-bp(lap-medium) {
		padding: 2rem 6rem;
	}

	// User Queries
	@media screen and (prefers-reduced-motion: reduce) {
		transition: none;
	}
}


.c-person__link {
	@include link-states(card-heading-text);
	font-family: $font-family-secondary;
	/* stylelint-disable-next-line property-no-unknown */
	text-decoration-thickness: $border-thinnest;
	text-underline-offset: 0.3em;

	// States
	&:hover {
		text-decoration: none;
	}

	&--primary {
		letter-spacing: $font-tracking-slight;
	}
}


.c-person__spotlight-link {
	@include link-states(card-heading-text);

	display: inline-block;
	margin-top: 1rem;
}


.c-person__name {
	font-family: $font-family-secondary;

	&:target {
		scroll-margin-top: 5rem;

		// Breakpoints
		@include mappy-bp(wrist-large) {
			scroll-margin-top: 4rem;
		}

		@include mappy-bp(lap-medium) {
			scroll-margin-top: 5rem;
		}
	}
}


.c-person__biography {
	font-family: $font-family-secondary;
	margin-top: 1rem;
	max-width: $global-type-measure;
}
