/**
 * Nexza Page Hero widget.
 */

.nx-phero {
	display: grid;
	grid-template-columns: 58% 1fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

.nx-phero > * {
	min-width: 0;
}

.nx-phero--text {
	grid-template-columns: 1fr;
}

.nx-phero--text .nx-phero-text {
	max-width: 1100px;
}

.nx-phero h1 {
	margin: 28px 0 0;
	font-size: clamp(46px, 6.6vw, 124px);
	line-height: .95;
	overflow-wrap: break-word;
}

.nx-phero--huge .nx-phero-text {
	max-width: none;
}

.nx-phero--huge h1 {
	font-size: clamp(72px, 17vw, 300px);
	line-height: .82;
}

/* Title left, text right, wide image below. */
.nx-phero--below {
	align-items: end;
	grid-template-columns: 1fr 1fr;
}

.nx-phero--below .nx-phero-img {
	grid-column: 1 / -1;
	margin-top: clamp(24px, 3vw, 40px);
}

.nx-phero--below .nx-phero-side .nx-phero-intro {
	margin-top: 24px;
}

.nx-phero-intro {
	max-width: 52ch;
	margin: clamp(32px, 4vw, 56px) 0 0;
	font-size: clamp(17px, 1.3vw, 20px);
	color: var(--nx-muted-dark);
}

/* Intro in a labelled row: "01. About us" | larger text */
.nx-phero-row {
	display: grid;
	grid-template-columns: 27% 1fr;
	gap: 4vw;
	align-items: start;
	margin-top: clamp(40px, 5vw, 80px);
	padding-top: 36px;
	border-top: 1px solid var(--nx-line-2);
}

.nx-phero-row > * {
	min-width: 0;
}

.nx-phero-row p {
	max-width: 30ch;
	margin: 0;
	color: var(--nx-muted-dark);
}

.nx-phero .nx-btn {
	margin-top: 28px;
}

.nx-phero-img {
	width: 100%;
}

@media (max-width: 860px) {
	.nx-phero {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.nx-phero h1 {
		margin-top: 20px;
	}

	.nx-phero-row {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.nx-phero--below {
		grid-template-columns: 1fr;
	}

	.nx-phero--below .nx-phero-img.nx-ratio-21-8 {
		aspect-ratio: 16 / 9;
	}

	/* A square image would fill the whole phone screen; keep it shorter. */
	.nx-phero-img.nx-ratio-1-1,
	.nx-phero-img.nx-ratio-4-5 {
		aspect-ratio: 4 / 3;
	}
}