/**
 * Home, events — one section of the design.
 *
 * The name and the two arrows down the left, and the cards running off the
 * right edge of the band. Every measurement here was read from the design file.
 */

.custom-home-event {
	--custom-home-event-near: #9d5434;
	--custom-home-event-far: #29180e;

	position: relative;
	display: flex;
	align-items: flex-start;
	width: 100%;
	/* The row is drawn wider than the band and runs off its right edge, where it
	   is cut. Cut at the window instead, it carries on past every other section
	   on the page. */
	padding-top: 96px;
	padding-bottom: 44px;
	padding-left: calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	padding-right: max( 0px, calc( ( 100% - 1440px ) / 2 ) );
	box-sizing: border-box;

	/* The band's own gradient, read from the file. */
	background-image: linear-gradient(
		200.036deg,
		var( --custom-home-event-near ) 44.557%,
		var( --custom-home-event-far ) 92.607%
	);
}

.custom-home-event__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 36px;
	flex: 0 0 287px;
	min-width: 0;
}

.custom-home-event__heading {
	margin: 0;
	padding: 0;
	color: inherit;
	text-transform: uppercase;
}

.custom-home-event__arrows {
	display: flex;
	align-items: center;
	gap: 24px;
}

.custom-home-event__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #faf6ea;
	color: inherit;
	cursor: pointer;
	transition: opacity 300ms ease-in-out;
}

/* The theme paints a bare button on every state it has; a class alone does not
   outrank that, so each state says its own ground here. */
.custom-home-event__arrow:hover,
.custom-home-event__arrow:focus,
.custom-home-event__arrow:focus-visible,
.custom-home-event__arrow:active {
	background-color: #faf6ea;
	border-color: transparent;
	box-shadow: none;
}

.custom-home-event__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.custom-home-event__arrow:hover {
	opacity: 0.7;
}

/* With nowhere to go the file takes the disc away and leaves the mark, pale
   against the band. The colours a client may set are asked for the state that
   can be pressed alone, so this one is the section's own and stays. */
.custom-home-event__arrow[disabled],
.custom-home-event__arrow[disabled]:hover {
	background-color: transparent;
	opacity: 1;
	cursor: default;
}

.custom-home-event__arrow[disabled] svg {
	fill: #e8e4db;
}

/* The file draws the mark in a box 24 across and 20 down, in the middle of
   the disc. */
.custom-home-event__arrow svg {
	display: block;
	width: 24px;
	height: 20px;
	fill: #121212;
}

/* The cards run to the right edge of the viewport, and the band's own corner
   is cut on the side they enter from. */
.custom-home-event__rail {
	flex: 1 1 auto;
	min-width: 0;
	border-top-left-radius: 48px;
	border-bottom-left-radius: 48px;
	/* The row is cut where it leaves the band, and that is a cut across, not
	   down: the last card ends level with this box, so cutting down as well
	   shaves the way in at the foot of it. The first line is for a browser
	   that does not know the second. */
	overflow: hidden;
	overflow-x: clip;
	overflow-y: visible;
}

.custom-home-event__track {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 18px 0 0 34px;
	box-sizing: border-box;
	transition: transform 500ms ease-in-out;
	will-change: transform;
}

.custom-home-event__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	flex: 0 0 486px;
	min-width: 0;
}

/* The card is a picture in an edge the file draws around it. */
.custom-home-event__card,
.custom-home-event__card:hover,
.custom-home-event__card:focus,
.custom-home-event__card:active {
	position: relative;
	display: block;
	width: 486px;
	height: 658px;
	border-radius: 24px;
	box-sizing: border-box;
	overflow: hidden;
	background-image: linear-gradient(
		216.099deg,
		rgba( 58, 33, 20, 0.7 ) 0.758%,
		rgba( 188, 164, 139, 0.7 ) 50%,
		rgba( 250, 246, 234, 0.7 ) 99.242%
	);
}

.custom-home-event__picture {
	position: absolute;
	left: 16px;
	top: 16px;
	display: block;
	width: 454px;
	height: 626px;
	border-radius: 16px;
	overflow: hidden;
}

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

/* The mark each card carries: the design's, not the client's. */
.custom-home-event__mark {
	position: absolute;
	left: 369px;
	top: 36px;
	display: block;
	width: 81px;
	height: 77px;
	background-image: url( "../img/event-badge.webp" );
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

.custom-home-event__words {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 432px;
	max-width: 100%;
}

.custom-home-event__lines {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
}

.custom-home-event__meta,
.custom-home-event__title {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-wrap: anywhere;
}

/* The file writes the line in capitals — the month with them, whatever case
   the client's own field answers in. */
.custom-home-event__meta {
	text-transform: uppercase;
}

.custom-home-event__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 24px;
	border-radius: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 300ms ease-in-out;
}

.custom-home-event__more:hover {
	opacity: 0.85;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-home-event__track,
	.custom-home-event__arrow,
	.custom-home-event__more {
		transition: none;
	}
}

/* Tablet and mobile — the words stand over the row rather than beside it, and
   the cards come down to the width the file draws them at. */
@media ( max-width: 1024px ) {
	.custom-home-event {
		flex-direction: column;
		padding: 38px 0 44px;
	}

	.custom-home-event__aside {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		padding: 0 16px;
		box-sizing: border-box;
	}

	.custom-home-event__arrows {
		gap: 8px;
	}

	.custom-home-event__arrow {
		width: 24px;
		height: 24px;
	}

	/* The mark is drawn against the disc, and the disc is 24 across here rather
	   than 56 — so the mark comes down with it. */
	.custom-home-event__arrow svg {
		width: 10px;
		height: 9px;
	}

	/* The band stands its children at the start on the wide tier, which in a
	   column makes each of them as wide as its own content — and the row's
	   content is every card at once. Told to fill the width, it becomes the
	   window the row is cut by again, and the arrows have somewhere to go. */
	.custom-home-event__rail {
		width: 100%;
	}

	.custom-home-event__track {
		gap: 24px;
		padding: 48px 0 0 16px;
	}

	.custom-home-event__item {
		flex: 0 0 250px;
		gap: 13px;
	}

	.custom-home-event__card,
	.custom-home-event__card:hover,
	.custom-home-event__card:focus,
	.custom-home-event__card:active {
		width: 250px;
		height: 338px;
	}

	.custom-home-event__words {
		width: 250px;
		gap: 8px;
	}

	.custom-home-event__more {
		padding: 8px 13px;
	}

	/* The picture and the mark are placed and sized against the card, and the
	   card is smaller here — left at the wide tier's figures they stand at more
	   than the card can hold and only a strip of the picture is on view. */
	.custom-home-event__picture {
		left: 8px;
		top: 8px;
		width: 234px;
		height: 322px;
	}

	.custom-home-event__mark {
		left: 190px;
		top: 18px;
		width: 42px;
		height: 40px;
	}
}