Card: With Map And Contact

@charset 'UTF-8';

@include molecule(card) {
	display: flex;
	position: relative;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: $border-radius;

	@include e(image) {
		display: block;
		width: 100%;
		border-radius: $border-radius;
	}

	@include e(map) {
		display: block;
		position: relative;
		padding-top: 56.25%;
		overflow: hidden;
		border-radius: $border-radius;

		> iframe {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		@include bp-up(lg) {
			min-height: rhythm(44);
			padding-top: 0;

			> iframe {
				position: static;
			}
		}
	}

	@include e(link) {
		color: var(---cyberspace-color);
		text-decoration: none;

		&::after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			cursor: pointer;
		}

		&:hover,
		&:focus {
			color: $color-ruby;
			text-decoration: underline;

			> h1,
			> h2 {
				> span[class*='color'] {
					color: $color-ruby !important;
					text-decoration: underline !important;
				}
			}
		}
	}

	@include e(headline) {
		@include e(icon) {
			position: relative;
			width: $icon-size-medium;
			height: $icon-size-medium;
			transform: translateY(rem(1px));
			fill: currentColor;
		}
	}

	@include e(meta) {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: rhythm(1);
	}

	@include e(content) {

		&:first-child {
			padding: rhythm(3) 0;
		}

		&:not(:first-child) {
			margin-top: rhythm(2);
			padding-bottom: rhythm(3);
		}

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

	@include e(text) {
		margin-top: rhythm(1);
	}

	@include m(shadow) {
		@include card-shadow($color-cyberspace, 0.2);
	}

	@include m(padded) {
		background-color: var(--snow-color);

		@include e(media) {
			flex: 0 0 auto;
			width: 100%;
			max-width: 100%;
			border-bottom-right-radius: 0;
			border-bottom-left-radius: 0;
		}

		@include e(content) {
			padding-right: rhythm(2);
			padding-left: rhythm(2);

			p {
				margin-top: rhythm(1);
			}

			@include bp-up(md) {
				padding-right: rhythm(4);
				padding-left: rhythm(4);
			}
		}

		&.wp-block-iis-visualization {
			background-color: transparent;

			@include e(content) {
				p {
					margin-top: 0;
				}
			}

			&--no-padding > {
				@include e(content) {
					padding: 0;
				}
			}
		}
	}

	@include m(bordered) {
		border-top: rem(4px) solid $color-ocean;
	}

	@include e(bottom) {
		margin-top: rhythm(2);
	}

	@include m(wide) {
		height: auto;

		@include bp-up(md) {
			flex-direction: row;
			height: auto;

			h1,
			h2 {
				font-size: rem(32px);
				line-height: 1.2;
			}

			@include e(content) {
				display: flex;
				flex-basis: 50%;
				flex-direction: column;
				padding-top: rhythm(2);
			}

			@include e(image) {
				display: block;
				object-fit: cover;
				object-position: 50% center;
			}

			@include e(media) {
				max-width: 50%;
				margin-bottom: 0;
				border-top-left-radius: $border-radius;
				border-top-right-radius: 0;
				border-bottom-left-radius: $border-radius;
			}

			picture {
				display: flex;
				width: 100%;
				max-width: 50%;

				@include e(media) {
					max-width: 100%;
				}
			}

			@include e(bottom) {
				margin-top: 0;
			}

			@include m(flipped) {
				flex-direction: row-reverse;

				@include e(media) {
					border-top-right-radius: $border-radius;
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
					border-bottom-right-radius: $border-radius;
				}
			}

			@include m(stretch) {
				height: 100%;
			}
		}
	}

	@include m(teaser) {
		display: block;
		overflow: hidden;

		&:hover,
		&:focus {
			img {
				opacity: 0.8;
			}
		}

		&::after {
			content: '';
			position: absolute;
			z-index: z_index(background);
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			transition: opacity 0.75s ease-out;
			border-radius: $border-radius;
			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-cyberspace, 0) 35%, rgba($color-cyberspace, 1) 100%);
		}

		@include e(image) {
			width: 100%;
			max-width: none;
			height: 100%;
			transition: opacity 0.25s ease-out;
			border-radius: 0;
			object-fit: cover;
		}

		@include e(content) {
			display: flex;
			position: absolute;
			z-index: z_index(middleground);
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			flex-direction: column;
			align-content: stretch;
			justify-content: flex-end;
			padding: rhythm(4);
			color: var(--snow-color);
			text-shadow: $text-shadow;
		}

		@include e(link) {
			color: var(--snow-color);
		}

		@include e(text) {
			margin-top: 0;
			color: var(--snow-color);
		}

		@include e(bottom) {
			margin-top: 0;
		}

		@include e(meta) {
			* {
				color: var(--snow-color);
			}

			svg {
				fill: var(--snow-color);
			}
		}
	}

	@include m(mini) {
		padding: rhythm(1) rhythm(2);
		background-color: $color-snow;

		@include bp-up(md) {
			padding: rhythm(2) rhythm(3);
		}
	}
}