$c-card-bp-small:           720;
$c-card-transition-speed:   300ms;
$c-card-border-t:           map-get($border-radius, s);
$c-card-border-bl:          map-get($border-radius, xs);
$c-card-border-br:          map-get($border-radius, xl);
$c-card-border-br--small:   map-get($border-radius, l);


.c-card {
	@include border-radius(s);
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 360px;
	text-decoration: none;

	// box-shadow behind whole card
	&:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0 20px 48px 0 rgba(0,0,0,0.08);
		border-radius: $c-card-border-t $c-card-border-t $c-card-border-br $c-card-border-bl;
		transition: all $c-card-transition-speed linear;

		@include mq($max: $c-card-bp-small) {
			border-bottom-right-radius: $c-card-border-br--small;
		}
	}

	&[href]:hover:before {
		box-shadow: 0 16px 32px 0 rgba(0,0,0,0.20);
	}
}


.c-card__frame {
	position: relative;
	border-top-left-radius: $c-card-border-t;
	border-top-right-radius: $c-card-border-t;
	overflow: hidden;

	&:before {
		opacity: 0;
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-image: linear-gradient(palette(primary, 300), palette(primary, 500));
		transition: opacity $c-card-transition-speed linear;

		.c-card[href]:hover &  {
			opacity: 0.3;
		}
	}
}


.c-card__img {
	width: 100%;
	object-fit: cover;
}


.c-card__label {
	@include font-weight(extraBold);
	position: absolute;
	left: 0;
	bottom: 0;
	padding: space(1) space(6) space(1) space(3);
	background-color: palette(primary, 500);
	color: palette(neutral, 0);
	border-top-right-radius: map-get($border-radius, l);
}


.c-card__body {
	position: relative;
	z-index: 0;
	overflow: hidden;
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: space(4) space(3) space(5);
	border-bottom-left-radius: $c-card-border-bl;
	border-bottom-right-radius: $c-card-border-br;

	@include mq($max: $c-card-bp-small) {
		border-bottom-right-radius: $c-card-border-br--small;
	}
}


.c-card__title {
	@include font-size(l);
	@include font-weight(extraBold);
	color: palette(primary, 500);
}


.c-card__title--small {
	@include font-size(m);
	color: palette(neutral, 700);
}


.c-card__date {
	@include font-size(s);
	@include font-weight(medium);
	color: palette(secondary, 500);
}


.c-card__description {
	margin-top: space(2);
	margin-bottom: space(3);
	color: palette(neutral, 700);
}


.c-card__action {
	margin-top: auto;
}


.c-card__contact {
	margin-top: space(3);

	a {
		color: palette(secondary, 500);
		text-decoration: none;
		transition: color 150ms;
	}
}


.c-card__timetable {
	dt {
		float: left;
		clear: left;
		width: 113px;
	}
	dd {
		margin: 0 0 0 113px;
	}
}


.c-card__subtitle {
	@include font-size(base);
	@include font-weight(extraBold);
}