/*
 * Activiteiten.
 *
 * Full-width block in one of two shapes:
 * - Band (default): over the full width, by default without its own background (the Avada
 *   container decides); with a palette colour the band takes it.
 * - Panel: a rounded coloured area within the site width (default the house colour), like the
 *   tile panels on gsf.nl and the school sites.
 * --gsf-e-bg / --gsf-e-on are the colours behind the heading (unset for a band without colour);
 * heading, label and the "all activities" button follow them. Tiles are a soft tint of the
 * house colour, or white on a colour.
 *
 * Layout (block width): narrow = heading, list (shared slider), button; from 720px the button
 * sits to the right of the heading. The compact version (no activities) is heading + text +
 * button, with less vertical space.
 */
.gsf-block.gsf-events {
	--gsf-e-bg: var(--gsf-events-bg);
	--gsf-e-on: var(--gsf-events-on);
	background: var(--gsf-e-bg, transparent);
	color: var(--gsf-e-on, var(--gsf-color-text));
}

.gsf-block.gsf-events--shape-panel {
	--gsf-e-bg: var(--gsf-events-bg, var(--gsf-color-primary));
	--gsf-e-on: var(--gsf-events-on, var(--gsf-on-color-primary));
	background: transparent;
	color: var(--gsf-color-text);
}

.gsf-block.gsf-events .gsf-events__inner {
	max-width: var(--gsf-content-outer);
	margin-inline: auto;
	padding: var(--gsf-space-section) var(--gsf-space-gutter);
}

.gsf-block.gsf-events .gsf-events__box {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "head" "list" "more";
	gap: var(--gsf-space-5);
}

.gsf-block.gsf-events--shape-panel .gsf-events__box {
	padding: clamp(1.5rem, 4cqi, 3.5rem);
	border-radius: calc(var(--gsf-radius) * 1.5);
	background: var(--gsf-e-bg);
	color: var(--gsf-e-on);
}

.gsf-block.gsf-events .gsf-events__head {
	grid-area: head;
	--gsf-head-label-bg: var(--gsf-e-on, var(--gsf-color-text));
	--gsf-head-label-fg: var(--gsf-e-on-inverse, var(--gsf-e-bg, var(--gsf-on-color-text)));
}

/* Title: the site's heading colour, or the readable text colour on a colour. */
.gsf-block.gsf-block.gsf-events .gsf-head__title {
	--gsf-head-title-color: var(--gsf-e-on, var(--gsf-head-style-color));
}

.gsf-block.gsf-events .gsf-events__more {
	grid-area: more;
	margin: 0;
	/* On a colour the button is its inverse; otherwise the site's button colour. */
	--gsf-button-bg: var(--gsf-e-on, var(--gsf-color-accent));
	--gsf-button-fg: var(--gsf-e-on-inverse, var(--gsf-e-bg, var(--gsf-on-color-accent)));
}

.gsf-block.gsf-events .gsf-events__items {
	grid-area: list;
	min-width: 0;
}

.gsf-block.gsf-events .gsf-events__list {
	list-style: none;
}

.gsf-block.gsf-events .gsf-events__box--empty {
	gap: var(--gsf-space-4);
}

.gsf-block.gsf-events .gsf-events__inner:has(> .gsf-events__box--empty) {
	padding-block: var(--gsf-space-6);
}

/* Tiles: optional icon, the title, then date and time, text, and the button at the bottom. */
.gsf-block.gsf-events .gsf-events__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	padding: var(--gsf-space-4);
	border-radius: var(--gsf-radius);
	background: var(--gsf-color-tint);
	color: var(--gsf-color-text);
}

/* On a colour (band with a colour, or a panel) the tiles are white. */
.gsf-block.gsf-events .gsf-events__box--color .gsf-events__item,
.gsf-block.gsf-events--shape-panel .gsf-events__item {
	background: var(--gsf-color-surface);
}

.gsf-block.gsf-events .gsf-events__icon {
	margin-bottom: var(--gsf-space-3);
	color: var(--gsf-color-primary);
	font-size: 2rem;
	line-height: 1;
}

.gsf-block.gsf-events .gsf-events__icon:has(> .gsf-icon-img) {
	width: 3.5rem;
	height: 3.5rem;
}

.gsf-block.gsf-events .gsf-events__title {
	margin: 0;
	color: var(--gsf-color-heading-3);
	font-family: var(--gsf-font-heading);
	font-size: var(--gsf-text-h3);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--gsf-text-h3-letter-spacing);
	text-transform: none;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Date and time: one line below the title, separated by a dot that stays with the date when
   the line wraps. */
.gsf-block.gsf-events .gsf-events__when {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5em;
	margin: var(--gsf-space-2) 0 var(--gsf-space-3);
	font-size: calc(var(--gsf-text-body) * 0.9);
	font-weight: 700;
	line-height: 1.35;
}

.gsf-block.gsf-events .gsf-events__date:has(+ .gsf-events__time)::after {
	content: "·";
	margin-left: 0.5em;
}

.gsf-block.gsf-events .gsf-events__text {
	margin: 0;
	font-size: calc(var(--gsf-text-body) * 0.9);
	line-height: 1.45;
}

/* Without date and time the text follows the title directly. */
.gsf-block.gsf-events .gsf-events__title + .gsf-events__text {
	margin-top: var(--gsf-space-2);
}

.gsf-block.gsf-events .gsf-events__action {
	margin: auto 0 0;
	padding-top: var(--gsf-space-4);
}

@container (min-width: 520px) {
	.gsf-block.gsf-events .gsf-events__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gsf-space-3);
		margin: 0;
		padding: 0;
	}
}

@container (min-width: 720px) {
	.gsf-block.gsf-events .gsf-events__box {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "head more" "list list";
		align-items: end;
	}
}

@container (min-width: 880px) {
	.gsf-block.gsf-events .gsf-events__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* An inverse label or button (background = the block's text colour, white or black) gets the
   opposite of that as text colour, so it reads as white on black and black on white. Browsers
   without relative colours keep the block colour as text colour. */
@supports (color: rgb(from red r g b)) {
	.gsf-block.gsf-events {
		--gsf-e-on-inverse: rgb(from var(--gsf-e-on) calc(255 - r) calc(255 - g) calc(255 - b));
	}
}