@import "minerva.variables";
@import "minerva.mixins";


@cardMargin: 16px;
@captionPadding: 8px;

// FIXME: Refactor our CSS for errors - 1 class for the text, 1 for the block
.error {
	padding: 1em;
}

.profile {
	margin: 1em 0 0 0;
	color: @grayMedium;

	.footer a,
	.caption a {
		color: @grayMediumDark;
		font-weight: bold;
	}

	// TODO: make centering work
	.card-container,
	.footer {
		font-size: 0.9em;
	}

	h2 {
		color: @grayLight;
		text-transform: uppercase;
	}

	.card-container {
		padding: 1px;
	}

	.card {
		text-align: center;
		max-width: @wgMFDeviceWidthTablet;
		background: #fff;
		color: @grayMediumDark;
		border: solid 1px @grayLight;
		margin: 0 @cardMargin @cardMargin;
		text-align: left;

		.caption {
			width: 66%;
			vertical-align: top;
			padding: @captionPadding;
		}
	}

	.footer {
		text-align: center;
		color: @grayMediumDark;
		clear: both;
		padding: 2em 0 0;

		// talk button
		> a {
			margin-top: 1.5em;
		}
	}
}

// Tablet styling
@media all and (min-width: @wgMFDeviceWidthTablet) {
	.profile {
		margin: 0 auto;
		.card {
			margin: @cardMargin auto;
			min-height: @wgMFThumbnailSmall;

			.list-thumb {

				&.list-thumb-placeholder {
					// FIXME: Make this a generic responsive class in icons.less
					.background-size( 64px, auto );
					min-height: @wgMFThumbnailSmall;
				}
			}
		}
	}
}