@layer components.event-item {
	[data-c-event-item] {
		background-color: var(--color-white);
		height: 100%;

		&:hover a,
		&:focus a {
			text-decoration: none;
		}

		.wrapper {
			position: relative;

			.event-date {
				position: absolute;
				top: 0;
				right: 0;
				background-color: var(--color-white);
				color: var(--color-red);
				padding: 7px 10px;
				font-size: var(--font-size-base);
				font-weight: var(--font-weight-extra-bold);
				z-index: 1;
				line-height: 120%;
				margin: 0;

				@media screen and (max-width: 1399px) {
					font-size: var(--font-size-sm);
				}
			}

			img {
				width: 100%;
				height: auto;
				object-fit: cover;
			}
		}

		.content {
			padding: 15px 10px 35px;
			color: var(--color-dark-blue);

			@media screen and (max-width: 991px) {
				padding: 15px 10px 16px;
			}

			h3 {
				font-weight: var(--font-weight-extra-bold);
				font-size: var(--font-size-2xl);
				line-height: 120%;
				margin-bottom: 10px;

				@media screen and (max-width: 991px) {
					font-size: var(--font-size-base);
				}
			}

			.event-excerpt {
				line-clamp: 3;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				margin: 0 0 15px;
				font-size: var(--font-size-base);
				padding-right: 20px;

				@media screen and (max-width: 991px) {
					font-size: var(--font-size-sm);
				}
			}

			.more-info {
				--gap: 10px;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				gap: calc(var(--gap) / 2);
				border: none;
				text-decoration: none;
				font-family: var(--font-family-sans-serif);
				font-weight: var(--font-weight-medium);
				font-size: var(--font-size-base);
				line-height: 130%;
				color: var(--color-dark-blue);
				transition: color 0.3s ease, background-color 0.3s ease,
					border-color 0.3s ease, gap 0.3s ease;
				cursor: pointer;

				@media screen and (max-width: 991px) {
					font-size: var(--font-size-sm);
				}

				svg {
					transition: width 0.3s ease;

					.line {
						d: path("M0 8h25");
						transition: d 0.3s ease;
					}

					.chevron {
						d: path("m18 15 7-7-7-7");
						transition: d 0.3s ease;
					}
				}
			}
		}

		&:hover .more-info,
		&:focus .more-info {
			outline: none;
			color: var(--color-red);
			gap: var(--gap);

			svg {
				.line {
					d: path("M0 8h30");
				}

				.chevron {
					d: path("m23 15 7-7-7-7");
				}
			}
		}
	}
}