/* -------------------------------------------------------------------------------------------------
 * Competition hero - the competition-hero template part.
 *
 * One grid, so the mobile order ( title, prize, button, countdown ) can differ from the desktop columns
 * without duplicating blocks.  The competition's background is a band behind the top; the stats and leaderboard
 * sit below it on the page colour.  The band is in the grid, so it grows with a long title and the stats
 * always keep their distance from it.  The banner footer is the next row, a strip the full width of the page.
 *
 * --glp-hero-band, --glp-hero-max, --glp-hero-pad and --glp-hero-pad-top size it; a theme can set them.
 * ------------------------------------------------------------------------------------------------- */

.glp-competition-hero {
	--glp-hero-band: 620px;
	--glp-hero-max: 1440px;
	--glp-hero-pad: 152px;
	--glp-hero-pad-top: 64px;
	position: relative;
	overflow-x: clip;
	padding: 0;
	background: var(--wp--custom--color--secondary--50);
}

/* Rows heading to the spacer, bled out to the full width over the grid's padding, and at least the band tall.
 * Doubled up to outrank the block's own absolute layer, editor selector included. */
.glp-competition-hero .glp-competition-hero__inner > .glp-competition-background.glp-competition-background {
	position: relative;
	inset: auto;
	z-index: -1;
	grid-column: 1 / -1;
	grid-row: 1 / 5;
	align-self: stretch;
	justify-self: start;
	width: 100vw;
	min-height: var(--glp-hero-band);
	margin-block: calc(-1 * var(--glp-hero-pad-top)) 0;
	margin-inline-start: calc(-1 * var(--glp-hero-pad) - max(0px, (100vw - var(--glp-hero-max)) / 2));
}

/* A competition with no background of its own.  A theme can give it a backdrop image. */
.glp-competition-background--none {
	background-color: var(--wp--custom--color--secondary--100);
}

.glp-competition-hero__inner {
	position: relative;
	display: grid;
	isolation: isolate;
	grid-template-columns: 500px 384px;
	/* The empty 1fr row takes up whatever a short title leaves of the band, so the stats never rise into it. */
	grid-template-rows: auto auto auto minmax(75px, 1fr) auto auto;
	grid-template-areas:
		"heading prize"
		"timing  prize"
		"cta     prize"
		".       prize"
		"footer  footer"
		"details details";
	column-gap: 176px;
	align-items: start;
	box-sizing: border-box;
	max-width: var(--glp-hero-max);
	margin-inline: auto;
	padding: var(--glp-hero-pad-top) var(--glp-hero-pad);
}

.glp-competition-hero .glp-competition-hero__inner > * {
	margin: 0;
}

/* Flow layout's own block gap ( loaded after this sheet in the editor ) outranks a single class, so these are doubled up. */
.glp-competition-hero .glp-competition-hero__inner > .glp-competition-hero__timing {
	margin-block-start: var(--wp--preset--spacing--large);
}

.glp-competition-hero .glp-competition-hero__inner > .glp-competition-hero__cta {
	margin-block-start: 48px;
}

.glp-competition-hero .glp-competition-hero__inner > .glp-competition-hero__details {
	margin-block-start: 152px;
}

/* The banner footer takes 75px of that gap's worth of room, so the stats keep their place under it. */
.glp-competition-hero .glp-competition-hero__inner:has(> .glp-competition-banner-footer) > .glp-competition-hero__details {
	margin-block-start: 77px;
}

/* The strip under the banner: its background bled to the page's edges like the banner's, its text on the page's margins. */
.glp-competition-hero .glp-competition-hero__inner > .glp-competition-banner-footer {
	grid-area: footer;
	position: relative;
	z-index: -1;
	box-sizing: border-box;
	justify-self: start;
	width: 100vw;
	margin: 0;
	margin-inline-start: calc(-1 * var(--glp-hero-pad) - max(0px, (100vw - var(--glp-hero-max)) / 2));
	padding: var(--wp--preset--spacing--small) calc(var(--glp-hero-pad) + max(0px, (100vw - var(--glp-hero-max)) / 2));
	background: var(--wp--custom--color--secondary--100);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}


.glp-competition-hero__heading {
	grid-area: heading;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--small);
}

.glp-competition-hero .glp-competition-hero__heading > * {
	margin: 0;
}

.glp-competition-hero__title {
	font-size: var(--wp--preset--font-size--display);
	font-style: italic;
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	line-height: 1.1;
	color: var(--wp--preset--color--contrast);
}

.glp-competition-hero__prize {
	grid-area: prize;
	align-self: stretch;
	position: relative;
}

/* The prize is 510 x 492 and overhangs its column, without pushing the rows apart. */
.glp-competition-hero__prize .wp-block-glp-competition-image {
	position: absolute;
	top: 0;
	left: 50%;
	width: 510px;
	max-width: none;
	height: 492px;
	margin: 0;
	transform: translateX(-50%);
}

.glp-competition-hero__prize .wp-block-glp-competition-image a {
	display: block;
	height: 100%;
}

.glp-competition-hero__prize .glp-competition-image__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* On the platform ( common.css ): the prize lifts a little off the backdrop.  A drop shadow follows its outline, not its box. */
.glp-competition-hero__prize .glp-on-platform .glp-competition-image__img {
	filter: drop-shadow(0 -4px 12px rgb(0 0 0 / 0.1));
}

.glp-competition-hero__timing {
	grid-area: timing;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--large);
}

.glp-competition-hero .glp-competition-hero__timing > *,
.glp-competition-hero .glp-competition-hero__progress > * {
	margin: 0;
}

.glp-competition-hero .glp-competition-countdown {
	gap: 0;
	padding-inline: var(--wp--preset--spacing--x-small);
}

.glp-competition-hero .glp-competition-countdown__unit {
	gap: 0;
	min-width: 0;
}

.glp-competition-hero .glp-competition-countdown__value {
	line-height: normal;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--contrast);
}

.glp-competition-hero__progress {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--x-small);
}

.glp-competition-hero__cta {
	grid-area: cta;
}

.glp-competition-hero .glp-competition-cta__link {
	padding: var(--wp--preset--spacing--small) 22px var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	line-height: 1.1;
	background: var(--wp--preset--gradient--cta);
	color: var(--wp--custom--color--secondary--50);
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: var(--wp--custom--letter-spacing--wider);
}

/* With a Live Competition URL, "Watch Live" goes under the button.  Without one the link renders nothing.  The
 * button's block steps aside so its member price note can follow both buttons instead of coming between them. */
.glp-competition-hero__cta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--x-small);
}

/* The second button, at the foot of the hero, is for phones. */
.glp-competition-hero__cta--end {
	display: none;
}

.glp-competition-hero .glp-competition-hero__cta > * {
	margin: 0;
}

.glp-competition-hero .glp-competition-hero__cta > .glp-competition-cta {
	display: contents;
}

.glp-competition-hero .glp-competition-hero__cta .glp-competition-cta__member {
	order: 1;
	margin: 0;
}

.glp-competition-hero__live .glp-competition-link__anchor {
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: var(--wp--preset--spacing--small) 22px var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	border-radius: var(--wp--custom--radius--small, 4px);
	background: var(--wp--preset--color--secondary);
	line-height: 1.1;
	color: var(--wp--custom--color--secondary--50);
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	transition: filter 150ms ease-out;
}

.glp-competition-hero__live .glp-competition-link__anchor:hover,
.glp-competition-hero__live .glp-competition-link__anchor:focus-visible {
	filter: brightness(1.15);
	color: var(--wp--custom--color--secondary--50);
}

/* The logo is a little larger than the button's arrow, but overhangs the padding so the two buttons stay one height. */
.glp-competition-hero__live .glp-competition-link__icon {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	margin-block: -0.125rem;
}

.glp-competition-hero__details {
	grid-area: details;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.glp-competition-hero .glp-competition-hero__details > * {
	margin: 0;
}

.glp-competition-hero .glp-competition-stats {
	flex-wrap: nowrap;
	gap: 0;
}

.glp-competition-hero .glp-competition-stats__label {
	line-height: 1.1;
}

.glp-competition-hero .glp-competition-stats__value {
	line-height: normal;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
}

.glp-competition-hero .glp-competition-leaderboard__heading {
	margin: 0 0 var(--wp--preset--spacing--small);
	line-height: normal;
}

.glp-competition-hero .glp-competition-leaderboard__entry {
	align-items: flex-end;
	line-height: 1.1;
}

/* ---- Light theme: light text for a dark background.  The competition chooses it; Competition Context carries the class.
 * Dark needs no rules of its own. */
.glp-competition-theme-light .glp-competition-hero__title {
	color: var(--wp--custom--color--accent--50);
}

.glp-competition-theme-light .glp-competition-tag {
	background: color-mix(in srgb, var(--wp--custom--color--accent--400) 15%, transparent);
	color: var(--wp--custom--color--accent--300);
}

.glp-competition-theme-light .glp-competition-cta__link {
	background: var(--wp--custom--color--accent--400);
	color: var(--wp--preset--color--secondary);
}

/* ---- Alt theme: charcoal text and buttons for a warm background. */
.glp-competition-theme-alt .glp-competition-hero__title {
	color: var(--wp--preset--color--secondary);
}

.glp-competition-theme-alt .glp-competition-tag {
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 8%, transparent);
	color: var(--wp--preset--color--secondary);
}

.glp-competition-theme-alt .glp-competition-cta__link {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--custom--color--secondary--200);
}

/* The alt theme's own button is charcoal already, so Watch Live is outlined under it. */
.glp-competition-theme-alt .glp-competition-hero__live .glp-competition-link__anchor {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--secondary);
	background: transparent;
	color: var(--wp--preset--color--secondary);
}

/* On desktop the stats fill the space beside the leaderboard, which keeps the first column's width. */
@media (min-width: 782px) {
	.glp-competition-hero .glp-competition-hero__details {
		flex-direction: row;
		align-items: flex-start;
		gap: 0 var(--wp--preset--spacing--xxx-large);
	}

	.glp-competition-hero .glp-competition-hero__details > .glp-competition-leaderboard {
		order: -1;
		flex: 0 1 500px;
		min-width: 0;
	}

	.glp-competition-hero .glp-competition-hero__details > .glp-competition-stats {
		flex: 1 1 0;
		min-width: 0;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--large) var(--wp--preset--spacing--x-large);
	}
}

/* On desktop the countdown and progress sit on the photograph too, so they follow the theme. */
@media (min-width: 782px) {
	.glp-competition-theme-light .glp-competition-hero__timing .glp-competition-countdown__value {
		color: var(--wp--custom--color--accent--300);
	}

	.glp-competition-theme-light .glp-competition-hero__timing .glp-competition-countdown__label,
	.glp-competition-theme-light .glp-competition-hero__timing .glp-competition-progress-label,
	.glp-competition-theme-light .glp-competition-hero__cta .glp-competition-cta__member {
		color: var(--wp--custom--color--secondary--100);
	}

	.glp-competition-theme-alt .glp-competition-hero__timing .glp-competition-countdown__value {
		color: var(--wp--preset--color--secondary);
	}

	.glp-competition-theme-alt .glp-competition-hero__timing .glp-competition-countdown__label,
	.glp-competition-theme-alt .glp-competition-hero__timing .glp-competition-progress-label,
	.glp-competition-theme-alt .glp-competition-hero__cta .glp-competition-cta__member {
		color: var(--wp--custom--color--secondary--600);
	}
}

/* Between desktop and the full 1440 design the fixed columns would overflow, so they share the width. */
@media (min-width: 782px) and (max-width: 1279px) {
	.glp-competition-hero {
		--glp-hero-pad: var(--wp--preset--spacing--xx-large);
	}

	.glp-competition-hero__inner {
		grid-template-columns: minmax(0, 500px) minmax(0, 384px);
		column-gap: var(--wp--preset--spacing--xxx-large);
		justify-content: space-between;
	}
}

@media (max-width: 781px) {
	/* Title over the prize, the button across the foot of the backdrop, then the numbers. */
	.glp-competition-hero {
		--glp-hero-max: 480px;
		--glp-hero-pad: 20px;
		--glp-hero-pad-top: var(--wp--preset--spacing--large);
	}

	.glp-competition-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"heading"
			"prize"
			"cta"
			"footer"
			"timing"
			"details"
			"end";
		column-gap: 0;
		padding: var(--glp-hero-pad-top) var(--glp-hero-pad) var(--wp--preset--spacing--x-large);
	}

	/* Title, prize and button; the band stops halfway down the button. */
	.glp-competition-hero .glp-competition-hero__inner > .glp-competition-background.glp-competition-background {
		grid-row: 1 / 4;
		min-height: 0;
		margin-block: calc(-1 * var(--glp-hero-pad-top)) 40px;
	}

	/* The footer starts where the backdrop stops, halfway down the buttons, so its text waits until they are clear. */
	.glp-competition-hero .glp-competition-hero__inner > .glp-competition-banner-footer {
		margin-block-start: -40px;
		padding-block: calc(40px + var(--wp--preset--spacing--medium)) var(--wp--preset--spacing--x-small);
		font-size: var(--wp--preset--font-size--x-small);
	}

	.glp-competition-hero .glp-competition-hero__inner:has(> .glp-competition-banner-footer) > .glp-competition-hero__timing {
		margin-block-start: var(--wp--preset--spacing--medium);
	}

	.glp-competition-hero__heading {
		align-items: center;
		gap: 12px;
		text-align: center;
	}

	.glp-competition-hero__title {
		font-size: 3rem;
	}

	/* The prize rises into the title and runs down to the button. */
	.glp-competition-hero .glp-competition-hero__inner > .glp-competition-hero__prize {
		align-self: stretch;
		align-items: center;
		height: 436px;
		margin-block-start: -14px;
	}

	.glp-competition-hero__prize .wp-block-glp-competition-image {
		width: 436px;
		height: 100%;
	}

	/* On the platform the prize stands below the title rather than rising into it. */
	.glp-competition-hero .glp-competition-hero__inner > .glp-competition-hero__prize:has(.glp-on-platform) {
		margin-block-start: var(--wp--preset--spacing--medium);
	}

	/* The platform keeps clear of the screen's edges, while the prize overhangs them. */
	.glp-competition-hero__prize .glp-on-platform {
		--glp-platform-width: min(80%, 100vw - 40px);
	}

	.glp-competition-hero .glp-competition-hero__inner > .glp-competition-hero__cta {
		margin-block-start: 0;
	}

	.glp-competition-hero .glp-competition-cta__link,
	.glp-competition-hero__live .glp-competition-link__anchor {
		padding: var(--wp--preset--spacing--small) 20px;
		font-size: 1.25rem;
		letter-spacing: var(--wp--custom--letter-spacing--button);
	}

	.glp-competition-hero .glp-competition-hero__inner > .glp-competition-hero__timing {
		gap: var(--wp--preset--spacing--medium);
		margin-block-start: var(--wp--preset--spacing--small);
	}

	.glp-competition-hero .glp-competition-countdown__unit {
		gap: 4px;
	}

	.glp-competition-hero__progress {
		gap: 12px;
	}

	.glp-competition-hero .glp-competition-progress-label {
		font-weight: 400;
	}

	.glp-competition-hero .glp-competition-hero__inner > .glp-competition-hero__details {
		gap: var(--wp--preset--spacing--large);
		margin-block-start: var(--wp--preset--spacing--large);
	}

	.glp-competition-hero .glp-competition-stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--medium) 48px;
		padding: var(--wp--preset--spacing--medium) 28px;
		border: 1px solid var(--wp--custom--color--secondary--200);
		border-radius: var(--wp--custom--radius--large);
		background: color-mix(in srgb, var(--wp--custom--color--secondary--100) 50%, transparent);
	}

	.glp-competition-hero .glp-competition-stats__value {
		font-size: 1.5rem;
	}

	.glp-competition-hero .glp-competition-hero__inner > .glp-competition-hero__cta--end {
		display: flex;
		grid-area: end;
		margin-block-start: var(--wp--preset--spacing--large);
	}
}