Card: With Button

@charset "UTF-8";
@use "sass:color";
@use "sass:math";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;

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

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

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

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

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

			> iframe {
				position: static;
			}
		}
	}

	@include bem.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: colors.$color-ruby;
			text-decoration: underline;

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

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

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

	@include bem.e(content) {

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

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

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

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

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

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

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

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

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

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

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

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

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

	@include bem.m(bordered) {
		border-top: func.to_rem(4px) solid colors.$color-ocean;
	}

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

	@include bem.m(wide) {
		height: auto;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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