/*
 * Blanky Work – Hero: Statement
 *
 * One large statement beside a tall photo, with the office figures along the
 * bottom. The photo column stays narrower than the bundled image (768px wide),
 * so the image is never stretched.
 *
 * The colours come from settings.custom.hero-statement in theme.json: light on
 * the default Cream style, a dark band on the other styles.
 *
 * @package blanky-work
 * @since 1.7
 */

.work-hero-statement {
	--work-hero-statement-bg: var(--wp--custom--hero-statement--bg, var(--work-band));
	--work-hero-statement-fg: var(--wp--custom--hero-statement--fg, var(--work-on-band));
	--work-hero-statement-accent: var(--wp--custom--hero-statement--accent, var(--work-muted-gold));
	--work-hero-statement-soft: var(--wp--custom--hero-statement--soft, rgba(255, 255, 255, 0.75));
	--work-hero-statement-btn-bg: var(--wp--custom--hero-statement--btn-bg, var(--work-muted-gold));
	--work-hero-statement-btn-fg: var(--wp--custom--hero-statement--btn-fg, var(--work-deep-navy));
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"body"
		"photo"
		"figures";
	gap: 2.5rem;
	padding: calc(var(--work-nav-height, 72px) + 3rem) 1.5rem 2rem;
	background: var(--work-hero-statement-bg, var(--work-band));
	color: var(--work-hero-statement-fg, var(--work-on-band));
	overflow: hidden;
}

/* A thin gold rule down the left edge, as on the inner page banners. */
.work-hero-statement::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 1rem;
	width: 1px;
	background: linear-gradient(to bottom, transparent, rgba(var(--work-muted-gold-rgb), 0.5), transparent);
}

.work-hero-statement-body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2.25rem;
}

.work-hero-statement-eyebrow {
	font-family: var(--work-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--work-hero-statement-accent, var(--work-muted-gold));
}

.work-hero-statement-heading {
	font-family: var(--work-font-serif);
	font-size: clamp(2.5rem, 1rem + 5.5vw, 6.5rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--work-hero-statement-fg, var(--work-on-band));
}

.work-hero-statement .work-hero-accent {
	color: var(--work-hero-statement-accent, var(--work-muted-gold));
}

.work-hero-statement .work-hero-tel {
	color: var(--work-hero-statement-fg, var(--work-on-band));
}

/* A gold frame set off from the photo, like a mount around a print. */
.work-hero-statement-photo {
	grid-area: photo;
	position: relative;
	margin: 0 0.75rem 0.75rem 0;
	aspect-ratio: 4 / 3;
	outline: 1px solid rgba(var(--work-muted-gold-rgb), 0.6);
	outline-offset: 0.75rem;
}

.work-hero-statement-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work-hero-statement-figures {
	grid-area: figures;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid rgba(var(--work-muted-gold-rgb), 0.35);
}

.work-hero-statement-figures p {
	margin: 0;
	padding: 1.25rem 0.75rem 0 0;
	font-family: var(--work-font-sans);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--work-hero-statement-soft, rgba(255, 255, 255, 0.75));
}

.work-hero-statement-figures strong {
	display: block;
	font-family: var(--work-font-serif);
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.5rem);
	font-weight: 500;
	color: var(--work-hero-statement-fg, var(--work-on-band));
	margin-bottom: 0.25rem;
}

@media (width >= 768px) {
	/* Content stays within the site's max width and is centred; the colour band still runs edge to edge. */
	.work-hero-statement {
		padding: calc(var(--work-nav-height, 93px) + 4rem) max(4rem, calc((100% - var(--work-max-w)) / 2)) 3rem;
	}

	.work-hero-statement::before {
		left: 2rem;
	}
}

@media (width >= 900px) {
	.work-hero-statement {
		grid-template-columns: 1fr clamp(16rem, 32vw, 28rem);
		grid-template-areas:
			"body photo"
			"figures figures";
		gap: 3rem 5rem;
		min-height: 100svh;
		align-content: center;
	}

	.work-hero-statement-photo {
		align-self: center;
		aspect-ratio: 3 / 4;
	}
}

/* The consultation button follows the hero colours; hovering fills it with gold. */
.work-hero-statement .work-btn-fill--gold a {
	background-color: var(--work-hero-statement-btn-bg, var(--work-muted-gold));
	background-image: linear-gradient(to right, var(--work-muted-gold) 50%, var(--work-hero-statement-btn-bg, var(--work-muted-gold)) 50%);
	color: var(--work-hero-statement-btn-fg, var(--work-deep-navy));
}

.work-hero-statement .work-btn-fill--gold a:hover {
	color: var(--work-deep-navy);
}