/**
 * Event, the list of what is coming — one section of the design.
 *
 * The newest item across the width, then the rest three to a row, then the
 * button that brings more on screen. The strip of picture beneath closes the
 * band; it is the design's own and the build carries it.
 */

.custom-event-list__band {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 54px;
	width: 100%;
	/* The band runs the full width and carries its own ground; what stands in
	   it is held to 1440 and centred, so the file's 48 and 49 are measured from
	   the band rather than from the window. */
	padding-top: 90px;
	padding-bottom: 90px;
	padding-left: calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	padding-right: calc( 49px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;

	background-image: radial-gradient(
		1598px 1788px at 100% 100%,
		#9d5434 0%,
		#6c3b24 34.6%,
		#532e1c 51.8%,
		#3a2114 69.1%
	);
}

/* The newest item, across the width, with its words standing on the picture. */
.custom-event-list__lead {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	aspect-ratio: 1343 / 455;
	padding: 48px;
	border-radius: 16px;
	overflow: hidden;
	box-sizing: border-box;
}

.custom-event-list__lead-picture,
.custom-event-list__lead-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.custom-event-list__lead-picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.custom-event-list__lead-veil {
	background-image: linear-gradient(
		to top,
		rgba( 0, 0, 0, 0.7 ) 13.407%,
		rgba( 102, 102, 102, 0 ) 66.813%
	);
}

.custom-event-list__lead .custom-event-card__words {
	position: relative;
	width: 367px;
}

/* The rest, three to a row. */
.custom-event-list__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	column-gap: 48px;
	row-gap: 54px;
	width: 100%;
}

.custom-event-list__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* The strip the band ends on: the client's picture, 1440 by 198 in the file,
   under a brown veil. */
.custom-event-list__strip {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1440 / 198;
	overflow: hidden;
}

.custom-event-list__strip img,
.custom-event-list__strip video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.custom-event-list__strip::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba( 58, 33, 20, 0.5 );
}

/* Tablet and mobile — the file draws one of them (11174:11073). The client
   has said every item is to stand the same size here, the newest with the
   rest: one to a row on a phone, two on a tablet, which the file does not
   draw. The band itself becomes the grid, so the newest item and the rest
   share its rows. */
@media ( max-width: 1024px ) {
	.custom-event-list__band {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
		gap: 38px 24px;
		padding: 38px 20px;
	}

	.custom-event-list__grid {
		display: contents;
	}

	.custom-event-list__actions {
		grid-column: 1 / -1;
	}

	/* The newest item is a card like the others: the picture above, the words
	   beneath it rather than on it. */
	.custom-event-list__lead {
		aspect-ratio: auto;
		justify-content: flex-start;
		gap: 8px;
		padding: 0;
		border-radius: 0;
		overflow: visible;
	}

	.custom-event-list__lead-picture {
		position: relative;
		inset: auto;
		display: block;
		width: 100%;
		border-radius: 16px;
		overflow: hidden;
		pointer-events: auto;
	}

	.custom-event-list__lead-veil {
		display: none;
	}

	.custom-event-list__lead .custom-event-card__words {
		width: 100%;
	}

	/* Before the script has read which screen this is, no more stand than the
	   phone shows: the newest and two more. */
	.custom-event-list__grid > .custom-event-card:nth-child( n + 3 ):not( .is-shown ) {
		display: none;
	}

	.custom-event-list__strip {
		aspect-ratio: auto;
		height: 80px;
	}
}

/* Tablet — not drawn. Two to a row; the newest and three more stand at first. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-event-list__band {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.custom-event-list__grid > .custom-event-card:nth-child( 3 ):not( .is-shown ) {
		display: flex;
	}
}

/* The mark on the newest item's picture is the narrow tiers' only. */
.custom-event-list__lead .custom-event-card__badge {
	display: none;
}

@media ( max-width: 1024px ) {
	.custom-event-list__lead .custom-event-card__badge {
		display: block;
	}
}