/* event card styles */
.event-card-macro {
	width: 100%;
	border-radius: 2px;
	border: 1px solid var(--neutral-4, #8D8E92);
	background: var(--neutral-2, #F3F4F6);
	transition: background-color .25s ease;
	text-decoration
}

.event-card-macro.link {
	cursor: pointer;
}

.event-card-macro.event-complete {
	position: relative;
	border: 1px solid var(--neutral-3, #DADBE1);
}

.event-card-macro:hover,
.event-card-macro:focus {
	background: var(--highlight-cyber-green, #8BE000);
	text-decoration: none;
}

.event-card-macro.event-complete:hover,
.event-card-macro.event-complete:focus {
	background: var(--highlight-cyber-green-lite, #D1F399);
}

.ec-thumbnail-container {
	position: relative;
	width: 100%;
	height: 180px;
}

.ec-thumbnail-container::before {
	position: absolute;
	content: '';
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	background: var(--core-rich-black, #010203);
	z-index: 1;
}

.ec-completed-badge {
	position: absolute;
	inset: 0 auto auto 50%;
	z-index: 3;
	color: var(--core-rich-black, #010203);
	letter-spacing: 0.1em;
	background-color: var(--neutral-2, #F3F4F6);
	transform: translateX(-50%);
	border: 1px solid var(--neutral-4, #8D8E92);
	border-top: 1px solid transparent;
	border-radius: 0 0 3px 3px;
	text-transform: uppercase;
	padding: 8px 16px;
	transition: background-color .25s ease;
	white-space: nowrap;
}

.event-complete:hover .ec-completed-badge,
.event-card-macro.event-complete:focus .ec-completed-badge {
	background: var(--highlight-cyber-green-lite, #D1F399);
}

.ec-thumbnail-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* TODO add simple dark gradient */
.ec-thumbnail-image.filter-grayscale {
	filter: grayscale(1);
}

.ec-thumbnail-decor {
	position: absolute;
	content: '';
	inset: 7.24px 12.82px auto auto;
	width: 113px;
	height: 76px;
	background-image: url('https://info.varonis.com/hubfs/2024%20Website%20Redesign/Misc%20Images/Card%20items/event-card-decor.png');
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 2;	
}

.ec-thumbnail-details {
	position: absolute;
	content: '';
	inset: auto auto 26.92px 24.12px;
	display: flex;
	flex-direction: column;
	row-gap: 7.31px;
	align-items: flex-start;
	z-index: 2;	
}

.ec-thumbnail-logo {
	width: 100%;
	max-width: 165px;
}

.ec-thumbnail-location {
	color: var(--white, #FFF);
	font-family: "Graphik Cond";
	font-size: 19.294px;
	line-height: 100%;
	text-transform: uppercase;
}

.ec-details-flex {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 20px;
	height: calc(100% - 180px);
	padding: 20px;
	text-align: left;
}

.ec-title {
	color: var(--core-rich-black, #010203);
	transition: color .25s ease;
	/* 	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical; */
}

.ec-description {
	color: var(--neutral-5, #4C4D4A);
	text-align: left;
	transition: color .25s ease;
}

.event-complete .ec-title,
.event-complete .ec-description {
	color: var(--neutral-4, #8D8E92);
}

.event-complete:hover .ec-title,
.event-card-macro.event-complete:focus .ec-title,
.event-complete:hover .ec-description,
.event-card-macro.event-complete:focus .ec-description {
	color: var(--neutral-5, #4C4D4F);
}


.ec-cta {
	display: flex;
	align-items: center;
	column-gap: 10px;
	color: var(--primary-electric-blue, #07F);
	transition: color .25s ease;
	margin-top: auto;
}

.ec-cta-arrow {
	margin-top: 3px;
}

.ec-cta-arrow path {
	transition: fill .25s ease;
}

.event-card-macro:hover .ec-cta {
	color: var(--core-rich-black, #010203);
}

.event-card-macro:hover .ec-cta-arrow path {
	fill:var(--core-rich-black, #010203);
}

@media screen and (min-width: 768px) {
	.ec-thumbnail-container {
		height: 204px;
	}

	.ec-thumbnail-decor {
		inset: 8.16px 14.46px auto auto;
		width: 127px;
		height: 86px;
	}

	.ec-thumbnail-details {
		inset: auto auto 30.16px 27.21px;
		row-gap: 8.25px;
	}

	.ec-thumbnail-logo {
		max-width: 186px;
	}

	.ec-thumbnail-location {
		font-size: 21.765px;
	}

	.ec-details-flex {
		height: calc(100% - 204px);
	}
}

@media screen and (min-width: 1200px) {
	.ec-thumbnail-container {
		height: 149px;
	}

	.ec-thumbnail-details {
		inset: auto auto 22.69px 19.85px;
		row-gap: 6.02px;
	}

	.ec-thumbnail-logo {
		max-width: 136px;
	}

	.ec-thumbnail-location {
		font-size: 15.882px;
	}

	.ec-details-flex {
		height: calc(100% - 149px);
	}
}