/* Feast Poster Grid
   Rows are sized from the container width so every row is exactly one
   portrait tile high (1 : 1.41421), whatever mix of single and wide tiles it
   holds. */

.fpg {
	--fpg-cols: var(--fpg-cols-m, 2);
	--fpg-ratio: 1.41421;
	--fpg-gap: 10px;
	container-type: inline-size;
	width: 100%;
}

.fpg + .fpg {
	margin-top: var(--fpg-gap);
}

/* Optional section heading set in Grid Order. Inherits the theme's heading
   styles; this only spaces it. */
.fpg-heading {
	margin: 1.5em 0 0.75em;
}

.fpg-heading:first-child {
	margin-top: 0;
}

@media (min-width: 767px) {
	.fpg {
		--fpg-cols: var(--fpg-cols-d, 3);
	}
}

.fpg__grid {
	display: grid;
	grid-template-columns: repeat(var(--fpg-cols), minmax(0, 1fr));
	grid-auto-rows: calc((100cqi - (var(--fpg-cols) - 1) * var(--fpg-gap)) / var(--fpg-cols) * var(--fpg-ratio));
	gap: var(--fpg-gap);
	margin: 0;
	padding: 0;
}

/* Browsers without container query units: size single tiles by aspect ratio instead. */
@supports not (width: 1cqi) {
	.fpg__grid {
		grid-auto-rows: auto;
	}
	.fpg-tile {
		aspect-ratio: 1 / 1.41421;
	}
	.fpg-tile--wide {
		aspect-ratio: auto;
	}
}

.fpg-tile {
	position: relative;
	min-width: 0;
	overflow: hidden;
	background: #e9e7e5;
	container-type: inline-size;
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

.fpg-tile--wide {
	grid-column: span 2;
}

.fpg-tile__link,
.fpg-tile__link:link,
.fpg-tile__link:visited,
.fpg-tile__link:hover,
.fpg-tile__link:focus,
.fpg-tile__link:active {
	position: absolute;
	inset: 0;
	display: block;
	color: #fff;
	text-decoration: none;
	outline-offset: -3px;
}

.fpg-tile__img,
.fpg-tile__video {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fpg-tile__video {
	opacity: 0;
	transition: opacity 400ms ease, transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fpg-tile.is-playing .fpg-tile__video {
	opacity: 1;
}

.fpg-tile--keyline::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid #ccc;
	pointer-events: none;
}

/* Theme guard ------------------------------------------------------------
   Themes and old page CSS often style article, a, img, video, button and
   figure directly. These resets sit one class deeper so they win over those
   element rules, without touching anything outside the grid or lightbox. */

.fpg .fpg__grid {
	list-style: none;
}

.fpg .fpg-tile {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.fpg .fpg-tile__link {
	border: 0;
	box-shadow: none;
	background: none;
}

.fpg .fpg-tile__img,
.fpg .fpg-tile__video {
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.fpg-lb .fpg-lb__stage {
	padding: 0;
	border: 0;
}

.fpg-lb .fpg-lb__caption {
	color: #fff;
}

.fpg-lb .fpg-lb__btn {
	min-width: 0;
	min-height: 0;
	margin: 0;
	box-shadow: none;
	text-shadow: none;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* Overlay ---------------------------------------------------------------- */

/* Set on the overlay and its text directly so theme link and span colours
   (e.g. Pro's a:hover colour) cannot turn it dark. */
.fpg .fpg-tile__overlay,
.fpg .fpg-tile__overlay * {
	color: #fff;
}

.fpg-tile__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.6em;
	padding: clamp(12px, 8cqi, 48px);
	background: var(--fpg-overlay, rgba(254, 67, 50, 0.5));
	opacity: 0;
	transition: opacity 300ms ease;
	font-size: clamp(12px, 6cqi, 26px);
}

.fpg-tile--wide .fpg-tile__overlay {
	font-size: clamp(12px, 3.4cqi, 26px);
	padding: clamp(12px, 4cqi, 48px);
}

.fpg-tile__title {
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

.fpg-tile__cta {
	display: flex;
	align-items: center;
	font-size: 0.7em;
}

.fpg-tile__line {
	width: 20px;
	height: 2px;
	margin-right: 10px;
	background: rgba(255, 255, 255, 0.5);
	transform-origin: left;
	transition: transform 1000ms ease;
}

.fpg-tile__cta-text {
	transition: transform 1000ms ease;
}

.fpg-tile__link:focus-visible .fpg-tile__overlay {
	opacity: 1;
}

@media (hover: hover) {
	.fpg-tile__link:hover .fpg-tile__overlay {
		opacity: 1;
	}
	.fpg-tile__link:hover .fpg-tile__img,
	.fpg-tile__link:hover .fpg-tile__video {
		transform: scale(1.05);
	}
	.fpg-tile__link:hover .fpg-tile__line {
		transform: scaleX(2);
	}
	.fpg-tile__link:hover .fpg-tile__cta-text {
		transform: translateX(15px);
	}
}

/* Lightbox ---------------------------------------------------------------- */

body.fpg-lb-open {
	overflow: hidden;
}

.fpg-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 56px 64px 48px;
	background: rgba(0, 0, 0, 0.92);
	color: #fff;
	touch-action: pan-y;
}

.fpg-lb[hidden] {
	display: none;
}

.fpg-lb__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
}

.fpg-lb__stage img,
.fpg-lb__stage video {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #000;
}

/* Lightbox media fill the stage at their own shape (scaled up if the file is
   small). The stage is a size container, so cqw/cqh are its width and height.
   --fpg-lb-ratio is width / height, set per item by the script. */
.fpg-lb__stage {
	container-type: size;
}

.fpg-lb__embed {
	width: min(100%, calc((100vh - 140px) * 16 / 9));
	aspect-ratio: 16 / 9;
	background: #000;
}

.fpg-lb__embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@supports (width: 1cqw) {
	.fpg-lb__stage .fpg-lb__media {
		width: min(100cqw, 100cqh * var(--fpg-lb-ratio, 0.707));
		height: auto;
		max-width: none;
		max-height: none;
		aspect-ratio: var(--fpg-lb-ratio, 0.707);
	}

	/* The box already matches the video's shape, so cover rather than contain:
	   rounding (and odd sizes such as 2560 x 1813) can otherwise leave a
	   hairline gap down the sides. Some exports also have a few light pixels
	   baked into the left or right edge, invisible on the white grid but
	   obvious on the dark lightbox, so trim 0.5% off each side (about 5px on
	   a desktop lightbox, around 12px of a 2560px source). */
	.fpg-lb__stage video.fpg-lb__media {
		object-fit: cover;
		background: #000;
		clip-path: inset(0 0.5%);
	}
}

.fpg-lb__caption {
	margin: 12px 0 0;
	font-size: 14px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-align: center;
}

.fpg-lb__btn {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 200ms ease, background 200ms ease;
}

.fpg-lb__btn:hover,
.fpg-lb__btn:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.12);
}

.fpg-lb__btn svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

.fpg-lb__close {
	top: 8px;
	right: 8px;
}

.fpg-lb__prev {
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
}

.fpg-lb__next {
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
}

.fpg-lb--single .fpg-lb__prev,
.fpg-lb--single .fpg-lb__next {
	display: none;
}

@media (max-width: 766px) {
	.fpg-lb {
		padding: 56px 12px 72px;
	}
	.fpg-lb__prev,
	.fpg-lb__next {
		top: auto;
		bottom: 12px;
		transform: none;
	}
	.fpg-lb__prev {
		left: calc(50% - 56px);
	}
	.fpg-lb__next {
		right: calc(50% - 56px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fpg-tile__img,
	.fpg-tile__video,
	.fpg-tile__overlay,
	.fpg-tile__line,
	.fpg-tile__cta-text {
		transition: none !important;
	}
	.fpg-tile__link:hover .fpg-tile__img,
	.fpg-tile__link:hover .fpg-tile__video {
		transform: none;
	}
}