/* ==================================================

	Profile card

================================================== */

.profile-card {
	overflow: hidden;
}

.profile-card__cover {
	height: 51.5px;
	background-image: url("../../images/leopard-print.png");
	background-image: image-set(url("../../images/leopard-print.webp") type("image/webp"), url("../../images/leopard-print.png") type("image/png"));
	background-size: 61.6%;
	background-position: 99% 100%; /* TODO: translate x/y closer to figma; probably must change size to be bigger than this area though */
	background-repeat: repeat;
	border-radius: var(--radius-card);
}

.profile-card__avatar {
	position: absolute;
	top: 23px;
	left: 12px;

	width:  var(--avatar-w-lg);
	height: var(--avatar-w-lg);
	border-radius: 50%;
	overflow: hidden;
}

.profile-card__avatar__img-wrap {
	padding: 2px;
}

/*
.profile-card__avatar__img {
	transform: scale(.99);
} */

.profile-card__avatar__outline {
	border: 3px solid var(--white);
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	border-radius: 50%;
	/* background: #00000085; */
	transform: scale(1.02);
}

/* explicit size: reset's max-width caps width at the 72.75px mobile avatar but leaves height at 77, so the artwork centers 2px low */
.profile-card__avatar__cover {
	position: absolute;
	left: 0;
	top: 0;

	width:  100%;
	height: 100%;
}

/* explicit size, not inset: percentage insets on a replaced element leave height at intrinsic size */
.profile-card__avatar-photo {
	position: absolute;
	top:  -2px;
	left: -2px;

	width:  77px;
	height: 77px;
	max-width: none;

	border-radius: 50%;
	object-fit: cover;
}

.profile-card__avatar-ring {
	position: absolute;
	top: 0;
	left: 0;

	width:  var(--avatar-w-lg);
	height: var(--avatar-w-lg);

	transform: rotate(45deg);
}

.profile-card__identity {
	padding-top: 52px;
	padding-left: 15.5px;
	padding-bottom: 18px;
}

.profile-card__name {
	margin-bottom: 3px;

	font-size:      var(--text-title);
	font-weight:    var(--font-weight-bold);
	line-height:    1.239;
	letter-spacing: var(--tracking-title);
}

.profile-card__role {
	margin-bottom: 3px;

	font-size:      var(--text-meta);
	line-height:    1.2;
	letter-spacing: var(--tracking-meta);
	color:          var(--color-fg-default);
}

.profile-card__badge {
	margin-top: 3px;
	font-size:   var(--text-meta);
	line-height: 1.2;
	color:       var(--color-fg-secondary);
}

/* -------------------------------------
	=Mobile

	Card height is load-bearing - posters and scoops are placed below it by px.
------------------------------------- */

@media ( max-width: 1076px ) {

	.profile-card__cover {
		height: 80px;
		/* @match leopard_tile_size_mobile - leopard tile width on mobile, shared with the Dr. Bombay page ground */
		background-size: 230px auto;
		/* offset by the header height so the Dr. Bombay ground pattern runs seamless into the cover */
		background-position: 0 calc(-1 * var(--header-h-mobile));
	}

	.profile-card__avatar {
		top: 45px;
		left: 17px;

		width:  72.75px;
		height: 72.75px;
	}

	.profile-card__identity {
		padding: 46.5px 17px 20.25px;
	}

}