/*
 * Page hero (inner pages: the services index and each service page).
 *
 * The home hero's dark scene in a compact form: breadcrumbs, eyebrow, the
 * stretched title, one line, actions; an optional picture on the reading-end
 * side. Shorter than the home hero on purpose: the visitor came for the
 * content below.
 */

/* Inner pages start with their dark hero right under the header (services, works). */
.gb-main--services,
.gb-main--works,
.gb-main--about,
.gb-main--sectors,
.gb-main--articles,
.gb-main--contact,
.gb-main--decision,
.gb-main--screens,
.gb-main--screens-display,
.gb-main--nomo,
.gb-main--clients {
	padding-block: 0;
}

.gb-page-hero {
	/* Dark scene: light focus ring and light section text. */
	--gb-focus: var(--gb-focus-inverse);
	--gb-section-text: var(--gb-scene-text);
	--gb-section-muted: var(--gb-scene-text-muted);
	--gb-section-eyebrow: var(--gb-primary);

	position: relative;
	overflow: hidden;
	padding-block: var(--gb-space-2xl);
	background-color: var(--gb-scene-bg);
	/* Static glows, centred so they need no RTL/LTR variant. */
	background-image:
		radial-gradient(55% 60% at 50% 40%, var(--gb-scene-glow), transparent 70%),
		linear-gradient(to bottom, transparent 70%, rgb(0 0 0 / 0.12));
	color: var(--gb-scene-text);
}

.gb-page-hero__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	align-items: center;
	gap: var(--gb-space-l);
}

.gb-page-hero__text {
	display: grid;
	justify-items: start;
	gap: var(--gb-space-xs);
}

.gb-page-hero .gb-breadcrumbs {
	margin-block-end: var(--gb-space-xs);
}

.gb-page-hero__title {
	font-family: var(--gb-font-display);
	font-size: var(--gb-step-6);
	line-height: 1.15;
	color: var(--gb-scene-text);
}

.gb-page-hero__lead {
	max-inline-size: 38ch;
	font-size: var(--gb-step-1);
	color: var(--gb-scene-text-muted);
}

.gb-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gb-space-xs);
	margin-block-start: var(--gb-space-xs);
}

/* On the dark scene the outline button is light. */
.gb-page-hero .gb-button--outline {
	border-color: var(--gb-color-turquoise-a35);
	color: var(--gb-scene-text);
}

.gb-page-hero .gb-button--outline:hover {
	border-color: var(--gb-primary);
	background-color: var(--gb-color-turquoise-a10);
}

/* Centred variant (services index): text only, the wheel below is the picture. */
.gb-page-hero--center {
	padding-block: var(--gb-space-2xl) var(--gb-space-xl);
	text-align: center;
}

.gb-page-hero--center .gb-page-hero__inner {
	grid-template-columns: minmax(0, 1fr);
}

.gb-page-hero--center .gb-page-hero__text {
	justify-items: center;
}

.gb-page-hero--center .gb-page-hero__lead {
	max-inline-size: 44ch;
}