/**
 * The front page.
 *
 * Built to read like gcn.live's home page: the name, the standfirst, the
 * fishing-boat photograph with Matthew 4:19 set over it, the sentence of
 * purpose, and one button through to About.
 */

.gcn-front {
	padding-block: var(--gcn-space-12) var(--gcn-space-16);
	background: var(--gcn-surface);
}

#brx-content .gcn-front .gcn-front__column {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gcn-space-6);
	text-align: center;
}

/* ==========================================================================
   Name and standfirst
   ========================================================================== */

.gcn-front__title {
	margin: 0;
	font-size: clamp(2rem, 3.6vw, 3.1rem);
	font-weight: var(--gcn-weight-bold);
	line-height: var(--gcn-leading-tight);
	letter-spacing: var(--gcn-tracking-tight);
	color: var(--gcn-text);
}

.gcn-front__standfirst,
.gcn-front__standfirst p {
	margin: 0;
	font-size: var(--gcn-text-lg);
	font-weight: var(--gcn-weight-semibold);
	line-height: var(--gcn-leading-snug);
	color: var(--gcn-text-soft);
}

/* ==========================================================================
   The photograph, with the verse over it
   ========================================================================== */

.gcn-front__hero {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--gcn-radius-lg);
	box-shadow: var(--gcn-shadow-lg);
}

.gcn-front__photo img,
img.gcn-front__photo {
	display: block;
	width: 100%;
	height: auto;
	/* Tall enough to read the verse against on a wide screen, without letting
	   the picture take the whole first screen on a short one. */
	max-height: 620px;
	object-fit: cover;
}

/*
 * The verse sits on the picture. The scrim is on the wrapper rather than the
 * text so the words keep their own shape — a panel behind them would read as a
 * caption pasted on, which is not how the live page looks.
 */
.gcn-front__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		hsl(24 30% 12% / 0.05) 0%,
		hsl(24 30% 12% / 0.42) 45%,
		hsl(24 30% 12% / 0.55) 100%
	);
	pointer-events: none;
}

.gcn-front__verse {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: var(--gcn-space-8) var(--gcn-space-6) var(--gcn-space-10);
}

.gcn-front__verse,
.gcn-front__verse p {
	margin: 0;
	font-size: clamp(1.05rem, 1.9vw, 1.6rem);
	font-weight: var(--gcn-weight-semibold);
	line-height: var(--gcn-leading-relaxed);
	color: #fff;
	text-shadow: 0 2px 12px hsl(24 30% 10% / 0.55);
}

/* ==========================================================================
   Purpose and the way on
   ========================================================================== */

.gcn-front__purpose,
.gcn-front__purpose p {
	max-width: 62rem;
	margin: 0 auto;
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-medium);
	line-height: var(--gcn-leading-relaxed);
	color: var(--gcn-text-soft);
}

.gcn-front__cta {
	margin-top: var(--gcn-space-2);
	padding: 0.85em 2em !important;
	font-size: var(--gcn-text-md);
	font-weight: var(--gcn-weight-semibold);
	color: var(--gcn-brand-contrast) !important;
	text-decoration: none;
	background: var(--gcn-brand) !important;
	border: 0 !important;
	border-radius: var(--gcn-radius-md) !important;
	box-shadow: var(--gcn-shadow-sm);
	transition:
		background var(--gcn-duration) var(--gcn-ease),
		box-shadow var(--gcn-duration) var(--gcn-ease);
}

.gcn-front__cta:hover,
.gcn-front__cta:focus-visible {
	background: var(--gcn-brand-strong) !important;
	box-shadow: var(--gcn-shadow-md);
}

@media (max-width: 640px) {

	.gcn-front {
		padding-block: var(--gcn-space-8) var(--gcn-space-12);
	}

	.gcn-front__verse {
		padding: var(--gcn-space-5) var(--gcn-space-4) var(--gcn-space-6);
	}

	/*
	 * A minimum height, not just a maximum.
	 *
	 * At 414px the photograph's own proportions leave it 255px tall and the
	 * verse takes 160 of that — the boat all but disappears behind the words.
	 * The picture is cropped to keep its subject instead.
	 */
	.gcn-front__photo img,
	img.gcn-front__photo {
		min-height: 380px;
		max-height: 460px;
		object-fit: cover;
		object-position: 60% center;
	}

	.gcn-front__cta {
		width: 100%;
		text-align: center;
	}
}