/**
 * Events Feed block — front + editor styles.
 * Bound to the filnation-sites theme tokens (theme.json palette / fonts /
 * spacing) with safe fallbacks so it still reads if the theme changes.
 */

.fnkit-events {
	--fnkit-gap: var(--wp--preset--spacing--40, 1.25rem);
}

.fnkit-events__heading {
	font-family: var(--wp--preset--font-family--heading, inherit);
	margin: 0 0 var(--wp--preset--spacing--40, 1.25rem);
	font-weight: var(--fnkit-heading-weight);
	text-transform: var(--fnkit-heading-case);
	letter-spacing: var(--fnkit-heading-tracking);
	font-size: var(--fnkit-heading-size);
}

.fnkit-events__grid {
	display: grid;
	gap: var(--fnkit-gap);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.fnkit-events--cols-2 .fnkit-events__grid,
	.fnkit-events--cols-3 .fnkit-events__grid,
	.fnkit-events--cols-4 .fnkit-events__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.fnkit-events--cols-3 .fnkit-events__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.fnkit-events--cols-4 .fnkit-events__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fnkit-event {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--40, 1.25rem);
	border: 1px solid var(--wp--preset--color--border, #d9dadb);
	border-radius: 6px;
	background: var(--wp--preset--color--bg, transparent);
	overflow: hidden;
}

/* Featured image: full-bleed across the top of the card (breaks out of the card
 * padding), cropped to a consistent shape per [[image-standardization-rule]]. */
.fnkit-event__media {
	margin: calc(-1 * var(--wp--preset--spacing--40, 1.25rem));
	margin-bottom: var(--wp--preset--spacing--40, 1.25rem);
	overflow: hidden;
	background: var(--wp--preset--color--surface, #f3f3f4);
}
.fnkit-event__img,
.fnkit-event__ph {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}
.fnkit-event__img { transition: transform 0.3s ease; }
.fnkit-event--has-media:hover .fnkit-event__img { transform: scale(1.03); }
/* Branded placeholder for events without a featured photo — keeps the grid even. */
.fnkit-event__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient( 135deg,
			color-mix( in srgb, var(--wp--preset--color--accent, #c8102e) 16%, var(--wp--preset--color--surface, #f3f3f4) ),
			var(--wp--preset--color--surface, #f3f3f4) 72% );
	color: color-mix( in srgb, var(--wp--preset--color--accent, #c8102e) 55%, var(--wp--preset--color--text, #14181f) );
}
.fnkit-event__ph svg { width: 34px; height: 34px; opacity: 0.7; }
.fnkit-event__body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.fnkit-event__date {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fnkit-accent-text, var(--wp--preset--color--accent, #c8102e));
}

.fnkit-event__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	line-height: 1.15;
}

.fnkit-event__title a {
	color: var(--wp--preset--color--text, inherit);
	text-decoration: none;
}

.fnkit-event__title a:hover,
.fnkit-event__title a:focus {
	color: var(--fnkit-accent-text, var(--wp--preset--color--accent, #c8102e));
	text-decoration: underline;
}

.fnkit-event__loc {
	margin: 0;
	color: var(--wp--preset--color--muted, #696b70);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.fnkit-events__empty {
	color: var(--wp--preset--color--muted, #696b70);
	font-style: italic;
}

/* Multi-select term groups (editor inspector only). */
.fnkit-termgroup { margin-bottom: 0.9rem; }
.fnkit-termgroup__label { font-weight: 600; margin: 0 0 0.3rem; }

/* Hand-picked events picker (editor inspector only). */
.fnkit-pick__label { font-weight: 600; margin: 0 0 0.4rem; }
.fnkit-pick__empty { opacity: 0.7; font-style: italic; margin: 0 0 0.6rem; }
.fnkit-pick__list { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.fnkit-pick__row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.3rem 0.4rem; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; margin-bottom: 0.3rem; }
.fnkit-pick__title { font-size: 0.82rem; line-height: 1.2; }
.fnkit-pick__actions { display: inline-flex; flex: none; }
.fnkit-pick__results { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.4rem; max-height: 220px; overflow: auto; }
.fnkit-pick__add { justify-content: flex-start; text-align: left; height: auto; white-space: normal; }

/* "See more" CTA below the grid. The button itself is styled by the kit's shared
 * button rules (blocks/appearance.css → .fnkit-events__more) so it matches every
 * other Fil-Nation CTA; this just positions it. */
.fnkit-events__cta {
	margin-top: var(--wp--preset--spacing--50, 2rem);
	text-align: center;
}

/* Layout: list — one column, wider rows; image as a fixed thumbnail on the left. */
.fnkit-events--list .fnkit-events__grid { grid-template-columns: 1fr !important; }
.fnkit-events--list .fnkit-event { flex-direction: row; gap: 1.25rem; align-items: stretch; }
.fnkit-events--list .fnkit-event__media { margin: 0; flex: none; width: min(200px, 38%); border-radius: 6px; }
.fnkit-events--list .fnkit-event__img,
.fnkit-events--list .fnkit-event__ph { aspect-ratio: 4 / 3; height: 100%; }
.fnkit-events--list .fnkit-event__body { justify-content: center; }

/* Layout: spotlight — a single, large featured event; image beside the details.
 * The card is capped and centered so a short body (date · title · location ·
 * button) doesn't leave a wide empty column in a full-width section. */
.fnkit-events--spotlight .fnkit-events__grid { grid-template-columns: 1fr !important; }
.fnkit-events--spotlight .fnkit-event {
	max-width: 960px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50, 2rem);
	border-width: 2px;
	border-color: var(--wp--preset--color--accent, #c8102e);
}
.fnkit-events--spotlight .fnkit-event__title { font-size: var(--wp--preset--font-size--x-large, 2rem); }
.fnkit-events--spotlight .fnkit-event__img,
.fnkit-events--spotlight .fnkit-event__ph { aspect-ratio: 21 / 9; }
/* Spotlight body: a "View event" button anchors the otherwise-short details. */
.fnkit-events--spotlight .fnkit-event__action { margin: 1.25rem 0 0; }
@media (min-width: 700px) {
	/* Media-led split: the image carries the section, the details sit tight
	 * beside it (no oversized empty column). */
	.fnkit-events--spotlight .fnkit-event--has-media { flex-direction: row; align-items: stretch; gap: var(--wp--preset--spacing--50, 2rem); }
	.fnkit-events--spotlight .fnkit-event__media { margin: 0; flex: 1 1 58%; border-radius: 6px; }
	.fnkit-events--spotlight .fnkit-event__img,
	.fnkit-events--spotlight .fnkit-event__ph { height: 100%; aspect-ratio: 4 / 3; }
	.fnkit-events--spotlight .fnkit-event__body { flex: 1 1 42%; justify-content: center; }
}