/**
 * Jan Albicker | Core – Eventkalender Styles
 * Version: 1.2.0
 */

.jac-events,
.jac-events * {
	box-sizing: border-box !important;
}

.jac-events {
	display: flex !important;
	flex-direction: column !important;
	gap: 34px !important;
	width: 100% !important;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	color: #374151 !important;
}

/* Filter-Buttons */
.jac-events__filters {
	display: flex !important;
	gap: 15px !important;
	align-items: center !important;
	flex-wrap: wrap !important;
}

.jac-events__filter {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 180px !important;
	padding: 10px !important;
	margin: 0 !important;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 28px !important;
	text-align: center !important;
	background: #ffffff !important;
	color: #374151 !important;
	border: 1px solid #374151 !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.jac-events__filter:hover,
.jac-events__filter:focus {
	background: #f3f4f6 !important;
	outline: none !important;
}

.jac-events__filter.is-active {
	background: #10b981 !important;
	color: #ffffff !important;
	border-color: #10b981 !important;
}

.jac-events__filter.is-active:hover,
.jac-events__filter.is-active:focus {
	background: #0ea271 !important;
	border-color: #0ea271 !important;
}

/* Event-Liste */
.jac-events__list {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 34px 53px !important;
	align-items: flex-start !important;
	width: 100% !important;
}

.jac-events__empty {
	margin: 0 !important;
	font-size: 18px !important;
	color: #6b7280 !important;
}

/* Einzelnes Event */
.jac-events__item {
	display: none !important;
	flex-direction: column !important;
	gap: 15px !important;
	flex: 0 0 auto !important;
	width: 360px !important;
	max-width: 100% !important;
}

.jac-events__item.is-visible {
	display: flex !important;
}

/* Datum-Zeile mit Underline */
.jac-events__date-row {
	display: flex !important;
	align-items: baseline !important;
	gap: 8px !important;
	width: 100% !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid #374151 !important;
	white-space: nowrap !important;
}

.jac-events__date-day {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: 400 !important;
	font-size: 65px !important;
	line-height: 60px !important;
	letter-spacing: -3px !important;
	color: #374151 !important;
}

.jac-events__date-month {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: 400 !important;
	font-size: 22px !important;
	line-height: 28px !important;
	color: #374151 !important;
}

/* Beschreibung */
.jac-events__description {
	margin: 0 !important;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: 300 !important;
	font-size: 18px !important;
	line-height: 30px !important;
	color: #1d1d1d !important;
}

/* Zeit-Zeile */
.jac-events__time {
	display: inline-flex !important;
	align-items: center !important;
	gap: 11px !important;
}

.jac-events__time-icon {
	display: block !important;
	width: 16px !important;
	height: 16px !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}

.jac-events__time-text {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	font-weight: 300 !important;
	font-size: 16px !important;
	line-height: 28px !important;
	color: #374151 !important;
	white-space: nowrap !important;
}

/* Responsive */
@media (max-width: 1199px) {
	.jac-events__list {
		gap: 34px 40px !important;
	}
}

@media (max-width: 767px) {
	.jac-events__item {
		width: 100% !important;
	}
	.jac-events__filter {
		width: 100% !important;
	}
	.jac-events__filters {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.jac-events__date-day {
		font-size: 52px !important;
	}
}