/** Compact homepage variation of the shared Event card component. */
.ifj-event-preview {
	--ifj-preview-gap: clamp(1rem, 2.5vw, 2.5rem);
}

.ifj-event-preview__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ifj-space-md);
	margin-block: var(--ifj-space-xs) var(--ifj-space-lg);
}

.ifj-event-preview__heading h2 {
	margin: 0;
	color: var(--ifj-bleu);
}

.ifj-event-preview__heading a,
.ifj-event-preview .ifj-event-card__cta a {
	color: var(--ifj-bleu);
	font-weight: 700;
	text-underline-offset: 0.25em;
}

.ifj-event-preview__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--ifj-preview-gap);
}

.ifj-event-preview__grid[data-items="2"] {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-inline-size: calc((100% - (2 * var(--ifj-preview-gap))) * 0.6667 + var(--ifj-preview-gap));
}

.ifj-event-preview__grid[data-items="1"] {
	grid-template-columns: minmax(0, 1fr);
	max-inline-size: calc((100% - (2 * var(--ifj-preview-gap))) / 3);
}

.ifj-event-card--preview .ifj-event-card__fallback {
	background: var(--ifj-bleu);
}

.ifj-event-card--preview .ifj-event-card__content {
	padding: clamp(1.25rem, 2vw, 1.75rem);
}

.ifj-event-preview__empty {
	max-inline-size: var(--ifj-container-narrow);
}

.ifj-event-preview :where(a):focus-visible {
	outline: 3px solid var(--ifj-tournesol);
	outline-offset: 3px;
}

@media (max-width: 64rem) {
	.ifj-event-preview__grid,
	.ifj-event-preview__grid[data-items="2"],
	.ifj-event-preview__grid[data-items="1"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-inline-size: none;
	}

	.ifj-event-preview__grid[data-items="1"] {
		max-inline-size: calc((100% - var(--ifj-preview-gap)) / 2);
	}
}

@media (max-width: 47.99rem) {
	.ifj-event-preview__heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.ifj-event-preview__grid,
	.ifj-event-preview__grid[data-items="2"],
	.ifj-event-preview__grid[data-items="1"] {
		grid-template-columns: minmax(0, 1fr);
		max-inline-size: none;
	}
}