/* Webia Jämsä Events: filter bar, selected calendar days, card extras.
   Uses the theme's tokens (--border, --surface, --text-muted) and its
   .blog-archive__filter pills; the colours below fall back to the theme's
   purple if a token is missing. */

.jamsa-filters {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;
	margin: 0 0 4rem;
}

.jamsa-filters__search {
	width: 100%;
	max-width: 48rem;
	box-sizing: border-box;
	padding: 1.1rem 1.4rem;
	font: inherit;
	font-size: 1.5rem;
	color: inherit;
	background: var(--surface, rgba(255, 255, 255, .04));
	border: .1rem solid var(--border, rgba(255, 255, 255, .08));
	border-radius: 0;
}

.jamsa-filters__search:focus {
	outline: .2rem solid #983a79;
	outline-offset: .1rem;
}

.jamsa-filters__audiences {
	margin-bottom: 0;
}

.jamsa-filters__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	min-height: 3.6rem;
}

.jamsa-filters__date {
	font-size: 1.5rem;
	font-weight: 700;
}

.jamsa-filters [hidden] {
	display: none !important;
}

.jamsa-filters__empty {
	margin: 0;
}

.tapahtumat__grid .tapahtumat__month[hidden] {
	display: none;
}

/* Calendar: selected day and range (days get these classes from frontend.js). */
.event-calendar__day.is-selected {
	background-color: #983a79 !important;
	color: #fff !important;
	border-color: #983a79 !important;
}

.event-calendar__day.is-in-range {
	background-color: rgba(152, 58, 121, .3);
}

.event-calendar__day.has-events:focus-visible {
	outline: .2rem solid #fff;
	outline-offset: .2rem;
}

/* API event images are real posters/photos of unpredictable brightness and
   often already carry their own baked-in text — the theme's standard
   bottom-only gradient (_post-card.scss) isn't dark enough to keep our own
   overlaid title/excerpt readable on top of them. Dim the whole image more
   evenly by default so text always has contrast, then lighten the dim on
   hover so the real photo becomes clearly visible (the bottom stays darker
   than the rest even on hover, since the text/button live there). Scoped to
   .tapahtumat__grid only — the shared .post-card look elsewhere (blog
   archive, recent posts) uses curated, predictable images and is unaffected. */
.tapahtumat__grid .post-card__image {
	filter: brightness(.55) saturate(.9);
	/* The theme's own bottom gradient (_post-card.scss's .post-card:after)
	   turns out to paint behind this image in this stacking context no matter
	   what z-index it's given, so the extra darkening behind the text zone
	   lives here instead, via an inset shadow painted directly on the image's
	   own box — guaranteed on top of its pixels, no stacking ambiguity. */
	box-shadow: inset 0 -14rem 8rem -6rem rgba(0, 0, 0, .9);
	transition: transform .6s cubic-bezier(.4, 0, .2, 1), filter .35s ease;
}

.tapahtumat__grid .post-card:hover .post-card__image {
	filter: brightness(.85) saturate(1);
}

/* Card extras: place/time line, excerpt, "Lue lisää" over the card image. */
.tapahtumat__grid .post-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 3rem 1.8rem 1.8rem;
	color: #fff;
}

.tapahtumat__grid .post-card .post-card__body .post-card__title {
	position: static;
	padding: 0;
	margin: 0 0 .6rem;
}

.post-card__meta {
	margin: 0 0 .6rem;
	font-size: 1.3rem;
	line-height: 1.3;
	opacity: .9;
}

.post-card__excerpt {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.4;
	opacity: .9;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-card__more {
	display: inline-block;
	margin-top: 1rem;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-bottom: .1rem solid currentColor;
}

@media (max-width: 600px) {
	.jamsa-filters {
		margin-bottom: 3rem;
	}
}