/* Each card spans five rows of the track's grid and inherits them via
   subgrid, so image, title, time, text and link line up across a row of
   cards regardless of how long each one's text is.
   --per-view is how many cards fit across; it drops at smaller widths.
   More than three cards become a slider (components/sliders.css), and
   two or more do on phones, one card at a time. The arrows sit level with
   the middle of the images: a card's width x 3/8, since they're 4:3. */
.whats-on-block {
	--gap: 30px;
	--per-view: 3;
	--rows: 5;
	--arrow-top: calc((100cqi - (var(--per-view) - 1) * var(--gap)) / var(--per-view) * 3 / 8);
}

/* .wp-block-group too, to beat the theme's flex layout for groups */
.wp-block-group.whats-on-block {
	container-type: inline-size;
	display: block;
	margin-bottom: 0 !important;
	margin-top: var(--padding-y) !important;
}

/* Normal grid whenever the slider isn't running */
.whats-on-slider:not(.is-active) .whats-on-track {
	column-gap: var(--gap);
	display: grid;
	grid-template-columns: repeat(var(--per-view), 1fr);
	row-gap: 60px;
}

.whats-on-block .whats-on-item {
	display: grid;
	grid-row: span var(--rows);
	grid-template-rows: subgrid;
	row-gap: 0;

	/* The scroll reveal (assets/js/80-gsap.js) moves cards with the
	   `translate` property, leaving `transform` free for Embla's loop */
	translate: 0 var(--reveal-y, 0px);

	> * {
		margin: 0;
	}
	/* Keep empty parts in place (for row alignment) but collapse them */
	> *:empty {
		aspect-ratio: auto;
		margin-top: 0;
	}
}


/* Image */
.whats-on-block .image {
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	overflow: hidden;

	img {
		display: block;
		height: 100%;
		object-fit: cover;
		object-position: center;
		width: 100%;
	}
}


/* Text */
.whats-on-block .title {
	color: var(--wp--preset--color--green);
	font-weight: 900;
	margin-top: 40px;
	text-transform: uppercase;
}

.whats-on-block .when {
	color: var(--wp--preset--color--orange);
	margin-top: 25px;
	text-transform: uppercase;
}

.whats-on-block .content {
	margin-top: 70px;

	p {
		margin: 0;
	}
	p + p {
		margin-top: 1em;
	}
}


/* Link */
.whats-on-block .link {
	margin-top: 50px;

	a {
		color: var(--wp--preset--color--green);
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-transform: uppercase;
		text-underline-offset: 6px;

		&:hover {
			color: var(--wp--preset--color--orange);
		}
	}
}


/* Smaller screens: no subgrid — each card lays itself out as a simple
   column, sized to its own content, with tighter spacing. --rows: 1 keeps
   each card to one cell of the grid or slider track. */
@media screen and (max-width: 992px) {
	.whats-on-block {
		--per-view: 2;
		--rows: 1;
	}

	.whats-on-block .whats-on-item {
		display: flex;
		flex-direction: column;
	}

	.whats-on-block .title {
		margin-top: 24px;
	}

	.whats-on-block .when {
		display: flex;
		flex-direction: column;
		margin-bottom: 0;
		margin-top: 30px;
		row-gap: 15px;
	}

	.whats-on-block .content {
		margin-top: 30px;
	}

	.whats-on-block .link {
		margin-top: 30px;
	}
}

@media screen and (max-width: 662px) {
	.whats-on-block {
		--per-view: 1;
	}

	.wp-block-group.whats-on-block {
		margin-top: calc(var(--padding-y) / 2) !important;
	}

}