/**
 * Inner-page sections. Loaded only when a page has visible sections.
 * The homepage keeps its own stylesheet.
 */

.humera-page-sections {
	display: grid;
}

/* A leading hero is full-bleed. The shared sections margin would leave a white band under the header. */
.humera-page-sections:has(> .humera-section-hero:first-child) {
	margin-block-start: 0;
}

.humera-section {
	padding-block: var(--humera-space-7);
}

.humera-section :is(h1, h2, h3, p) {
	overflow-wrap: break-word;
}

.humera-section-hero {
	background: var(--humera-bg-mint);
	padding-block: clamp(1.25rem, 2vw, 2rem) var(--humera-space-7);
}

.humera-section-hero-grid,
.humera-section-intro-grid,
.humera-section-moment-inner {
	display: grid;
	gap: var(--humera-space-5);
	min-inline-size: 0;
}

.humera-section-hero-copy {
	display: grid;
	justify-items: start;
	gap: var(--humera-space-4);
	max-inline-size: 38rem;
	min-inline-size: 0;
	padding-inline-start: var(--humera-space-4);
	border-inline-start: 2px solid var(--humera-accent);
}

.humera-section-hero h1 {
	max-inline-size: min(16ch, 100%);
	margin: 0;
	font-size: var(--humera-size-hero);
	line-height: var(--humera-leading-heading);
	color: var(--humera-heading);
}

.humera-section-hero .humera-section-prose {
	max-inline-size: 34rem;
	color: var(--humera-muted);
	font-size: clamp(1rem, 0.4vw + 0.95rem, 1.125rem);
	line-height: 1.7;
}

.humera-section-hero-figure,
.humera-section-moment-figure,
.humera-section-text-figure {
	margin: 0;
	min-inline-size: 0;
}

.humera-section-image {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
	object-position: var(--section-focal, 50% 50%);
}

/* Grow with the photo's own ratio so a larger frame reveals more of the picture, not a stretched crop. */
.humera-section-hero-figure .humera-section-image,
.humera-section-moment-figure .humera-section-image {
	aspect-ratio: auto;
	inline-size: 100%;
	block-size: auto;
	max-block-size: none;
	object-fit: contain;
	object-position: var(--section-focal, 50% 50%);
	border-radius: var(--humera-radius-2xl);
}

.humera-section-text-figure .humera-section-image {
	aspect-ratio: 16 / 9;
	border-radius: var(--humera-radius);
	object-position: var(--section-focal, 50% 50%);
}

.humera-section-intro {
	background: var(--humera-white);
}

.humera-section-intro h2,
.humera-section-head h2,
.humera-section-text h2 {
	font-size: var(--humera-size-section);
}

.humera-section-intro h2 {
	max-inline-size: 8ch;
}

.humera-section-intro-copy {
	max-inline-size: var(--humera-measure);
	min-inline-size: 0;
}

.humera-section-intro .humera-section-prose p:first-child {
	max-inline-size: 38rem;
	font-size: clamp(1.15rem, 1.2vw + 0.9rem, 1.5rem);
	line-height: 1.75;
	color: var(--humera-heading);
}

.humera-section-prose p {
	margin: 0;
	color: var(--humera-muted);
	line-height: 1.7;
}

.humera-section-prose p + p {
	margin-block-start: var(--humera-space-4);
}

.humera-section-prose :is(ul, ol),
.humera-point-copy :is(ul, ol) {
	margin: 0.6em 0;
	padding-inline-start: 1.25em;
}

.humera-section-prose blockquote,
.humera-point-copy blockquote {
	margin: 0.8em 0;
	padding-inline-start: 1em;
	border-inline-start: 3px solid var(--humera-line);
}

.humera-point-copy p {
	margin: 0;
}

.humera-section-values {
	background: var(--humera-bg-mint);
}

.humera-section-head {
	display: grid;
	gap: var(--humera-space-3);
	max-inline-size: 40rem;
	margin-block-end: var(--humera-space-6);
}

.humera-section-head .humera-section-prose {
	font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
	line-height: 1.7;
}

.humera-values,
.humera-steps {
	display: grid;
	gap: var(--humera-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.humera-values li,
.humera-steps li {
	display: grid;
	gap: 0.65rem;
	min-inline-size: 0;
	align-content: start;
}

.humera-section-index {
	justify-self: start;
	inline-size: fit-content;
	color: var(--humera-green-dark);
	font-family: var(--humera-font-display);
	font-size: var(--humera-size-card);
	font-weight: 700;
	line-height: 1;
}

.humera-values h3,
.humera-steps h3 {
	margin: 0;
	font-size: var(--humera-size-card);
	color: var(--humera-heading);
}

.humera-values p,
.humera-steps p {
	margin: 0;
	color: var(--humera-muted);
	line-height: 1.7;
}

.humera-section-steps {
	background: var(--humera-white);
}

.humera-steps {
	gap: 0;
}

.humera-steps li {
	border-inline-start: 1px solid var(--humera-line);
	padding-block: var(--humera-space-4);
	padding-inline-start: var(--humera-space-4);
}

.humera-section-moment {
	background: var(--humera-bg-mint);
	padding-block: calc(var(--humera-space-7) + var(--humera-space-5));
}

.humera-section-moment-copy {
	display: grid;
	gap: var(--humera-space-4);
	align-content: center;
	min-inline-size: 0;
}

.humera-section-moment h2 {
	max-inline-size: 16ch;
	margin: 0;
	font-size: clamp(2rem, 2vw + 0.85rem, 3.35rem);
	line-height: var(--humera-leading-heading);
}

.humera-section-moment .humera-section-prose {
	max-inline-size: 36rem;
}

.humera-section-text-inner {
	display: grid;
	gap: var(--humera-space-4);
	max-inline-size: var(--humera-measure);
}

/* Full-bleed CTA background: CSS focal on narrow screens; centre from lg (no server crop). */
.humera-section-cta.humera-cta--bg {
	position: relative;
	isolation: isolate;
	background-color: var(--humera-green-dark);
	background-image: var(--cta-bg);
	background-size: cover;
	background-position: var(--cta-focal, 50% 50%);
}

.humera-section-cta.humera-cta--bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(15, 40, 36, 0.72), rgba(15, 40, 36, 0.88));
}

@media (min-width: 64rem) {
	.humera-section-cta.humera-cta--bg {
		background-position: 50% 50%;
	}
}

.humera-section-cta h2 {
	max-inline-size: 14ch;
	margin: 0 0 var(--humera-space-3);
	color: var(--humera-text-on-dark);
	font-size: var(--humera-size-section);
}

.humera-section-cta .humera-section-prose {
	max-inline-size: 36rem;
}

.humera-section-cta .humera-section-prose p {
	color: var(--humera-muted-on-dark);
}

.humera-section-cta .humera-button {
	text-align: center;
	white-space: normal;
}

.humera-section-cta :focus-visible {
	outline-color: var(--humera-focus-on-dark);
}

@media (min-width: 48rem) {
	.humera-values {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--humera-space-6) var(--humera-space-7);
	}
}

@media (min-width: 64rem) {
	.humera-section-hero-grid.has-media {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		align-items: center;
		gap: clamp(1.5rem, 3vw, 3.5rem);
	}

	.humera-section-hero-figure {
		justify-self: stretch;
		inline-size: 100%;
	}

	.humera-section-intro-grid {
		grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
		align-items: start;
		gap: var(--humera-space-7);
	}

	.humera-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--humera-space-5);
	}

	.humera-steps li {
		border-inline-start: 0;
		border-block-start: 1px solid var(--humera-line);
		padding-block: var(--humera-space-4) 0;
		padding-inline-start: 0;
	}

	.humera-section-moment.has-media .humera-section-moment-inner {
		grid-template-columns: minmax(0, 1fr) minmax(22rem, 42rem);
		align-items: center;
		gap: var(--humera-space-5) var(--humera-space-6);
	}

	/* Column 2 is the visual left in RTL. */
	.humera-section-moment.has-media .humera-section-moment-figure {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
		justify-self: stretch;
		inline-size: 100%;
	}

	.humera-section-moment.has-media .humera-section-moment-copy {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.humera-section-image {
		animation: humera-section-settle 950ms ease both;
	}
}

@keyframes humera-section-settle {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}