/*
------------------------------------------------
Trainer Profile
------------------------------------------------
*/

.tl-trainer-profile {
	width: 100%;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;
}


.tl-trainer-profile .tl-list-header p {
	margin: 6px 0 0;

	color: var(--tl-color-text-secondary);

	font-size: .875em;
	line-height: 1.45;
}


.tl-trainer-profile .tl-notice {
	margin-bottom: 18px;
}


/*
------------------------------------------------
Profile Card
------------------------------------------------
*/

.tl-trainer-profile-card {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 18px;

	padding: 18px;

	background: var(--tl-color-surface);
	border: 1px solid var(--tl-color-border-soft);
	border-radius: var(--tl-radius);

	box-shadow:
		0 1px 2px rgba(0, 0, 0, .03),
		0 4px 12px rgba(0, 0, 0, .05);
}


.tl-trainer-profile-photo {
	width: 96px;
	height: 96px;

	overflow: hidden;

	background: var(--tl-color-background);
	border-radius: var(--tl-radius);
}


.tl-trainer-profile-photo img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}


.tl-trainer-profile-content {
	min-width: 0;
}


.tl-trainer-profile-name {
	color: var(--tl-color-text);

	font-size: 1.0625em;
	font-weight: 700;
	line-height: 1.3;
}


.tl-trainer-profile-title {
	margin-top: 2px;

	color: var(--tl-color-text-secondary);

	font-size: .8125em;
	line-height: 1.35;
}


.tl-trainer-profile-form {
	margin-top: 18px;
}




/*
------------------------------------------------
Remove Photo
------------------------------------------------
*/

.tl-trainer-profile-remove-form {
	margin-top: 10px;
}


.tl-trainer-profile-remove {
	margin: 0;
	padding: 0;

	background: transparent;
	border: 0;

	color: var(--tl-color-text-secondary);

	font: inherit;
	font-size: .8125em;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;

	cursor: pointer;
}


.tl-trainer-profile-remove:hover,
.tl-trainer-profile-remove:focus {
	color: var(--tl-color-danger);
}


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

@media (max-width: 520px) {

	.tl-trainer-profile-card {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 14px;

		padding: 16px;
	}


	.tl-trainer-profile-photo {
		width: 72px;
		height: 72px;
	}


	.tl-trainer-profile-form {
		grid-column: 1 / -1;
	}

}