/**
 * Profile styles
 * Loads on front end and back end
 */

.gb-block-profile {
	background: #f2f2f2;
	color: #293038;
	margin: 0 auto;
	padding: 3%;
	border-radius: 5px;
	margin-bottom: 1.2em;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	width: 100%;

	.gb-profile-column {
		display: block;
		padding: 15px;
		flex: 3 0 0;

		@media only screen and (max-width: 600px) {
			flex: auto;
		}
	}

	.gb-profile-avatar-wrap {
		position: relative;
		z-index: 0;
		flex: 1 0 0;

		@media only screen and (max-width: 600px) {
			flex: auto;
			max-width: 210px;
			margin: 0 auto;
		}
	}

	.gb-profile-content-wrap {

		@media only screen and (max-width: 600px) {
			text-align: center;
		}
	}

	.gb-profile-text {
		font-size: 18px;
		padding-top: 1em;

		a {
			color: inherit;
			box-shadow: 0 -1px 0 inset;
			text-decoration: none;

			&:hover {
				color: inherit;
				box-shadow: 0 -2px 0 inset;
			}
		}

		p {
			line-height: 1.6;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.gb-profile-name {
		font-size: 1.4em;
		font-weight: bold;
		line-height: 1.2;
		margin: 0;
	}

	.gb-profile-title {
		opacity: 0.8;
		padding-top: 5px;
		margin-bottom: 0;
	}

	.gb-profile-image-square {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 5;
		margin: 0;
	}

	.gb-profile-text:empty,
	.gb-profile-title:empty,
	.gb-profile-name:empty {
		display: none;
	}

	.gb-profile-image-wrap {
		width: 100%;
		background: #ddd;
		position: relative;

		&::before {
			content: "";
			display: inline-block;
			padding-top: 100%;
		}

		button {
			position: absolute;
			left: 0;
			z-index: 50;
			padding: 0;
			height: 100%;
			width: 100%;
		}

		button:focus {
			background: none;
			border: none;
			outline: none;
			box-shadow: none;
		}

		img {
			object-fit: cover;
			height: 100%;
			width: 100%;
			position: relative;
			z-index: 5;
		}
	}

	.gb-social-links {
		list-style: none;
		margin: 0 0 0 0;
		padding: 5% 0 0 0;

		&:empty {
			display: none;
		}

		li {
			display: inline-block;
			margin: 0 8px 0 0;
			padding: 0;

			a {
				display: grid;
				border: none;
				width: 38px;
				height: 38px;
				padding: 10px;
				border-radius: 100px;


				&:hover {
					opacity: 0.9;
				}

			}
		}
	}
}

.right .gb-profile-avatar-wrap {
	order: 2;
}

.round .gb-profile-image-wrap {
	border-radius: 500px;

	&::before {
		content: "";
		display: inline-block;
		padding-top: 92%;
	}

	img {
		border-radius: 500px;
	}
}