/* -------------------------------------------------------------------------------------------------
 * One winner's story: /winners/{slug}
 *
 * The design is a single phone-width column.  Below the core columns breakpoint ( 782px ) that is what
 * this is; above it the photo sits beside the story and stays in view while the story scrolls.
 * ------------------------------------------------------------------------------------------------- */

.glp-winner-story-page {
	background: var(--wp--custom--color--secondary--50);
}

.glp-winner-story {
	padding: 0 var(--wp--preset--spacing--small) var(--wp--preset--spacing--xx-large);
}

/* Back ----------------------------------------------------------------------------------------- */

.glp-winner-story__back {
	margin: 0;
	padding: var(--wp--preset--spacing--small) 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	line-height: 1.1;
	text-transform: uppercase;
}

.glp-winner-story__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-inline-start: -0.25rem;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

/* The design's arrow_left_alt, drawn in the link's colour. */
.glp-winner-story__back a::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	background: currentColor;
	-webkit-mask: url(../assets/icons/arrow-left-alt.svg) center / contain no-repeat;
	mask: url(../assets/icons/arrow-left-alt.svg) center / contain no-repeat;
}

.glp-winner-story__back a:hover,
.glp-winner-story__back a:focus-visible {
	color: var(--wp--preset--color--primary);
}

/* Watch and competition ------------------------------------------------------------------------ */

.glp-winner-story__head {
	align-items: center;
	margin-block: var(--wp--preset--spacing--small) 1.25rem;
	text-align: center;
}

.glp-winner-story__watch {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.glp-winner-story__meta .glp-competition-winner-headline__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.glp-winner-story__meta .glp-competition-winner-headline__part {
	white-space: nowrap;
}

.glp-winner-story__meta .glp-competition-winner-headline__separator {
	margin-inline: 0.25rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--wp--custom--color--secondary--500);
}

/* Photo and story ------------------------------------------------------------------------------ */

.glp-winner-story__columns {
	gap: 1rem var(--wp--preset--spacing--xx-large);
	margin: 0;
}

/* A competition with no photo leaves its column empty; let the story have the row. */
.glp-winner-story__media:not(:has(.glp-competition-winner-image)) {
	display: none;
}

.glp-winner-story__photo {
	border-radius: var(--wp--custom--radius--small);
	overflow: hidden;
}

.glp-winner-story__photo .glp-competition-winner-image__img {
	aspect-ratio: 380 / 480;
}

.glp-winner-story__text > * + * {
	margin-block-start: 1.25rem;
}

.glp-winner-story__name {
	gap: 0.75rem;
	padding-inline: 0.25rem;
	padding-block-end: 0.5rem;
}

.glp-winner-story__name .glp-competition-winner-headline__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--primary);
}

.glp-winner-story__name .glp-competition-winner-headline__country {
	letter-spacing: var(--wp--custom--letter-spacing--label);
	color: var(--wp--custom--color--secondary--700);
}

.glp-winner-story__story {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	line-height: 1.5;
	color: var(--wp--preset--color--secondary);
}

.glp-winner-story .glp-winner-story__story > * {
	margin-block: 0;
}

.glp-winner-story .glp-winner-story__story > * + * {
	margin-block-start: 1.25rem;
}

.glp-winner-story .glp-winner-story__story blockquote {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--medium);
	border-inline-start: 4px solid color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
}

/* Won on, and the certificate ------------------------------------------------------------------ */

.glp-winner-story__text > .glp-winner-story__footer {
	margin-block-start: 2.25rem;
}

.glp-winner-story__summary .glp-competition-winner-headline__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-transform: none;
	color: var(--wp--preset--color--secondary);
}

.glp-winner-story__certificate .glp-competition-link__anchor {
	justify-content: space-between;
	gap: var(--wp--preset--spacing--x-small);
	padding: var(--wp--preset--spacing--small) 1.25rem;
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--primary);
	color: var(--wp--custom--color--secondary--50);
	font-size: 1.25rem;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

.glp-winner-story__certificate .glp-competition-link__anchor:hover,
.glp-winner-story__certificate .glp-competition-link__anchor:focus-visible {
	background: var(--wp--custom--color--primary--700);
}

.glp-winner-story__certificate .glp-competition-link__icon {
	width: 1.5rem;
	height: 1.5rem;
}

/* Wider screens: the photo beside the story ---------------------------------------------------- */

@media (min-width: 782px) {
	.glp-winner-story__head {
		margin-block-end: var(--wp--preset--spacing--x-large);
	}

	.glp-winner-story__watch {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.glp-winner-story__media {
		position: sticky;
		top: var(--wp--preset--spacing--large);
		align-self: flex-start;
	}

	.glp-winner-story__name .glp-competition-winner-headline__title {
		font-size: var(--wp--preset--font-size--xxxx-large);
	}
}