/**
 * Block
 *
 * Description: Base for blocks. When making submodules use convention e.g block-calendar.
 * Version: 1.0.3
 * -----------------------------------------------------------------------------
 */

/**
 * Table of Contents:
 *
 * 1.0 - Base
 * 2.0 - Contact
 * 3.0 - Block link
 * 4.0 - Block header media
 * 5.0 - Block process
 * 6.0 - Block contact person
 *   6.1 - Block contact person in fullwidth (and rte)
 *   6.2 - Block contact person in fullwidth (and rte) (responsive)
 * 7.0 - Block facts
 * 8.0 - Block preview
 * 9.0 - Block social medias
 * -----------------------------------------------------------------------------
 */


/**
 * 1.0 - Base
 * -----------------------------------------------------------------------------
 */

.block {
	background-color: $white;

	.block-bd {

	}
}



/**
 * 2.0 - Contact
 * -----------------------------------------------------------------------------
 */

.block-contact {
	position: relative;
	background-color: $white;

	h1.small {
		margin-bottom: em(24px, getFontsize($h1-small-sizes, 'medium'));
	}

	.map-holder {
		position: static;

		.map {
			position: absolute;
			top: 0;
			bottom: 0;
			height: 100%;
			width: 40%;
		}
	}

	@media (max-width: $device-small-max) {
		.t-rte {
			@include font-size($p-small-sizes);
		}
		.map-holder {
			.map {
				position: relative;
				height: 200px;
				width: 100%;
			}
		}
	}
}



/**
 * 3.0 - Block link
 * -----------------------------------------------------------------------------
 */

.block-link {
	background-color: $white;

	a {
		display: block;
		overflow: hidden;
		color: $text-color;

		&:hover {
			text-decoration: none;

			header {
				text-decoration: underline;
			}
		}
	}

	img {
		@include transition(transform $transition-time-short ease-in);
		max-width: 1000px;
		width: 100%;
	}

	header {
		color: $link-color;
		margin-bottom: em(-6px);
	}

	.layout-content-small {
		position: relative;
		margin: em(-42px) em(15px) 0;
		padding-top: em(6px);
		z-index: 10;
		text-align: center;

		p {
			@include font-size($p-small-sizes);
		}
	}

	&:hover img {
		transform: scale(1.1);
	}

	&.no-image {
		padding-top: em(10px);
		background-color: $grey-lighter;

		.layout-content-small {
			margin-top: 0;
			background-color: $grey-lighter;
		}
	}
}



/**
 * 4.0 - Block header media
 * -----------------------------------------------------------------------------
 */

.block-header-media {
	&.layout-width-full {
		margin-bottom: 0;

		.layout-unit {
			margin: 0;
			padding: 0;

			.layout-content {
				padding: 0;
			}

			img {
				width: 100%;
			}
		}
	}

	.narrow-image-container {
		text-align: center;
		background-color: $grey-light;
	}

	.caption {
		//background-color: $grey-lighter;
		border-bottom: 1px solid $grey-light;
		padding: em(15px) em(15px) em(15px) 0;

		p {
			@include font-size($p-small-sizes);
			margin: 0 !important;
		}
	}
}

.block-media-caption .caption {
	border-bottom: 1px solid $grey-light;
	padding: em(15px) em(15px) em(15px) 0;

	p {
		@include font-size($p-small-sizes);
		margin: 0 !important;
	}
}



/**
 * 5.0 - Block process
 * -----------------------------------------------------------------------------
 */

.block-process {
	$font-size: 18px;

	position: relative;
	border: em(2px) solid $pink;
	padding: em(4px) em(20px) em(10px) em(20px);
	margin-bottom: $margin-standard;

	p, ul {
		font-size: em(18px);
		line-height: em(22px, $font-size);
	}

	.process-step {
		position: relative;
		padding-left: em(32px, $font-size);
		padding-bottom: em(15px, $font-size);
		border-left: 1px solid $grey-light;
		margin-left: em(8px, $font-size);

		&:last-child {
			border-color: $white;
		}
	}

	.process-header {
		display: block;
		color: $text-color;
		font-weight: 600;
		padding-bottom: em(7px, $font-size);

		&:after {
			position: absolute;
			content: " ";
			display: block;
			top: em(4px, $font-size);
			left: em(-8px, $font-size);
			width: em(16px, $font-size);
			height: em(16px, $font-size);
			border-radius: em(16px, $font-size);
			background-color: $grey;
		}

		&:before {
			position: absolute;
			content: " ";
			display: block;
			top: -1px;
			left: em(-13px, $font-size);
			width: em(26px, $font-size);
			height: em(26px, $font-size);
			border-radius: em(26px, $font-size);
			background-color: $white;
		}
	}

	.is-complete .process-header:after {
		background-color: $green;
	}

	.is-inprogress .process-header:after {
		background-color: $white;
		border: 3px solid $green;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0 0 em(7px, $font-size);

		li {
			margin-bottom: em(7px, $font-size);
		}
	}
}



/**
 * 6.0 - Block contact person
 * -----------------------------------------------------------------------------
 */

.block-contact-person {
	padding-top: em(10px);
	padding-bottom: em(10px);

	.block-list & {
		padding-top: 0;
		padding-bottom: 0;
	}

	.image img:last-child {
		margin-bottom: 0;
	}

	> a {
		display: block;
		color: $text-color;

		img {
			@include transition(transform $transition-time-short ease-in);
			max-width: 1000px;
			width: 100%;
		}

		&:hover img {
			transform: scale(1.05);
		}

		header > * {
			color: $accent-color;
		}
	}

	.text-content {
		padding: em(8px) 0 0;
		max-width: em(600px);

		header {
			margin-bottom: em(-6px);
		}
		p {
			font-size: em(18px);

			&.label {
				margin: 0;
				font-weight: 600;
			}
		}

		.contact-information {
			p {
				margin-bottom: 0;
			}
		}
	}
}


/**
 * 6.1 - Block contact person in fullwidth (and rte)
 * -----------------------------------------------------------------------------
 */

.t-rte, .layout-size1of1, .layout-size1of1 > .layout-unit {
	> .block-contact-person {
		@include clearfix();
		overflow: hidden;

		> a {
			@include clearfix();
			overflow: hidden;
		}

		.image {
			float: left;
			max-width: em(220px);
			margin-right: $margin-standard;
		}

		.text-content {
			overflow: hidden;

			header {
				margin-top: em(-8px);

				h1 {
					padding-top: 0;
				}
			}
		}
	}
}

.t-rte > .block-contact-person, .block-contactpersons {
	position: relative;
	border: em(2px) solid $pink;
	padding: em(10px) em(57px) em(10px) em(20px);
	margin-bottom: $margin-standard;

	&:before {
		@include huddingeIcons();
		display: block !important;
		font-size: 36px;
		position: absolute;
		top: em(15px, 36px);
		right: em(16px, 36px);
		@extend .icon-thin-191_user_profile_avatar;
		content: "\e916" !important;
	}
}

.block-contactpersons {
	padding-right: em(50px);
}


/**
 * 6.2 - Block contact person in fullwidth (and rte) (responsive)
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.t-rte, .layout-size1of1, .layout-size1of1 > .layout-unit {
		> .block-contact-person {
			padding-bottom: em(10px);

			.image {
				float: none;
				max-width: 100%;
				margin-right: 0;
				margin-bottom: $margin-standard / 2;
			}
		}
	}
}



/**
 * 7.0 - Block facts
 * -----------------------------------------------------------------------------
 */

.block-facts {
	position: relative;
	border: em(2px) solid $grey;
	padding: em(9px) em(25px) em(15px) em(25px);
	//margin-bottom: $margin-standard;
	margin-top: em(36px);
	margin-bottom: em(36px);
	background-color: $grey-lighter;
	//background-color: rgba($orange, 0.2);

	.t-rte {
		font-size: em(18px);
	}
}



/**
 * 8.0 - Block preview
 * -----------------------------------------------------------------------------
 */

.block-preview {
	position: fixed;
	top: 40%;
	background-color: $pink-lightest;

	.layout-size1of3 & {
		font-size: 33%;
	}
}



/**
 * 9.0 - Block social medias
 * -----------------------------------------------------------------------------
 */

@media (max-width: $device-small-max) {
	.block-facebook, .block-twitter, .block-instagram {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}