/* ------------------------------------------------------------------------------
 *
 *  # User profile
 *
 *  Styles for all user profile layouts
 *
 *  Version: 1.1
 *  Latest update: Mar 6, 2016
 *
 * ---------------------------------------------------------------------------- */


// Cover image layout
// ------------------------------

.profile-cover {
	position: relative;

  	// Add extra spacing to navbar
	& + .navbar {
		margin-bottom: (@line-height-computed * 2);
	}

	// Cover details
	.media {
		position: absolute;
		bottom: @line-height-computed;
		left: @line-height-computed;
		right: @line-height-computed;

		.btn-default {
			border-color: @btn-default-bg;
			.box-shadow(0 0 3px fade(#000, 50%));
		}
	}

	// Text styles
	.media-body,
	small {
		color: #fff;
		text-shadow: 0 0 3px fade(#000, 80%);
	}

	// Mobile view
	@media (max-width: @screen-xs-max) {
		.media {
			text-align: center;
			margin-top: 0;
			bottom: auto;
			top: (@line-height-computed * 2);
		}

		.media-left,
		.media-right {
			padding: 0;
			display: block;
			overflow-x: auto;
		}

		.media-body {
			display: block;
			margin-bottom: @line-height-computed;
			width: 100%;

			> h1 {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 100%;
			}
		}
	}
}

// Cover image
.profile-cover-img {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	height: 350px;
	.border-top-radius(@border-radius-base);

	@media (max-width: @screen-xs-max) {
		height: 320px;
	}
}

// User thumbnail inside cover
.media .profile-thumb img {
	width: 100px;
	height: 100px;
	border: 3px solid #fff;
	.box-shadow(0 0 3px fade(#000, 50%));
}