/* ==========================================================================
   Shared editorial page furniture
   The hero, section rhythm, eyebrow, heading, figure, pill button and the
   full-width brand band are used by more than one page (About, Contact, and
   the pages that follow), so they live here rather than in one page's file.
   Values measured from the Lovable preview, not guessed: hero py 80/112px,
   h1 60/60 ls -1.5px max-width 768px, section py 64/96px, h2 36/40 ls -0.9px,
   radius 16px, pill button 12px 28px. Colours come from the theme tokens: the
   preview's oklch(0.32 .05 165) is the same green as --naa-brand, and its
   border oklch(0.92 .005 165) lands where --naa-border does over white.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   Photo at 25% under a left-to-right brand gradient, so the copy keeps its
   contrast on the left while the picture stays readable on the right.
   -------------------------------------------------------------------------- */
.naa-page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--naa-brand);
	color: var(--naa-brand-fg);
}

.naa-page-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.25;
}

.naa-page-hero__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		var(--naa-brand) 0%,
		color-mix(in srgb, var(--naa-brand) 90%, transparent) 50%,
		color-mix(in srgb, var(--naa-brand) 50%, transparent) 100%
	);
}

.naa-page-hero__inner {
	position: relative;
	padding: 80px 0;
}

@media (min-width: 768px) {
	.naa-page-hero__inner {
		padding: 112px 0;
	}
}

.naa-page-hero .naa-lean-label {
	font-size: 12px;
	letter-spacing: 0.22em;
	color: color-mix(in srgb, var(--naa-brand-fg) 70%, transparent);
}

.naa-page-hero .naa-lean-label::before {
	background: color-mix(in srgb, var(--naa-brand-fg) 30%, transparent);
}

/*
 * naa-chrome-heading-override: lean-chrome.css sets `.naa-lean-chrome h1`
 * (0,1,1) to brand green, which would paint this heading green on green.
 * Two classes take it back without !important.
 */
.naa-lean-chrome .naa-page-hero__title,
.naa-page-hero .naa-page-hero__title {
	margin: 24px 0 0;
	max-width: 768px;
	color: var(--naa-brand-fg);
	font-size: clamp(36px, 5.2vw, 60px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.025em;
}

.naa-page-hero__lead {
	margin: 24px 0 0;
	max-width: 576px;
	color: color-mix(in srgb, var(--naa-brand-fg) 75%, transparent);
	font-size: 16px;
	line-height: 1.625;
}

/* --------------------------------------------------------------------------
   Section rhythm, eyebrow, heading
   -------------------------------------------------------------------------- */
.naa-page-section {
	padding: 64px 0;
}

@media (min-width: 768px) {
	.naa-page-section {
		padding: 96px 0;
	}
}

.naa-page-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--naa-fg) 45%, transparent);
}

.naa-page-eyebrow--ruled::before,
.naa-page-eyebrow--ruled::after {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--naa-border);
}

.naa-lean-chrome .naa-page-h2,
.naa-page-section .naa-page-h2 {
	margin: 16px 0 0;
	color: var(--naa-fg);
	font-size: clamp(28px, 3.6vw, 36px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   Figure and pill button
   -------------------------------------------------------------------------- */
.naa-page-figure {
	overflow: hidden;
	border: 1px solid var(--naa-border);
	border-radius: var(--naa-radius);
}

.naa-page-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s;
}

.naa-page-figure:hover img {
	transform: scale(1.03);
}

.naa-page-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 999px;
	background: var(--naa-brand);
	color: var(--naa-brand-fg) !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none !important;
	transition: transform 0.2s, box-shadow 0.2s;
}

.naa-page-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(22, 59, 44, 0.2);
}

/* On a brand-green band the filled button inverts. */
.naa-page-band .naa-page-btn {
	background: var(--naa-brand-fg);
	color: var(--naa-brand) !important;
}

.naa-page-band .naa-page-btn:hover {
	box-shadow: 0 12px 24px rgba(9, 20, 15, 0.35);
}

/* --------------------------------------------------------------------------
   Full-width brand band
   Used for the closing sections. The next-step cards inside it already have
   their styling from .naa-lean-next-card in lean-redesign.css.
   -------------------------------------------------------------------------- */
.naa-page-band {
	position: relative;
	overflow: hidden;
	padding: 64px 0;
	background: var(--naa-brand);
	color: var(--naa-brand-fg);
}

@media (min-width: 768px) {
	.naa-page-band {
		padding: 96px 0;
	}
}

.naa-page-band__head {
	position: relative;
	max-width: 672px;
	margin: 0 auto 48px;
	text-align: center;
}

.naa-page-band__head--tight {
	margin-bottom: 0;
}

.naa-page-band .naa-page-eyebrow {
	color: color-mix(in srgb, var(--naa-brand-fg) 70%, transparent);
}

.naa-page-band .naa-page-eyebrow--ruled::before,
.naa-page-band .naa-page-eyebrow--ruled::after {
	background: color-mix(in srgb, var(--naa-brand-fg) 30%, transparent);
}

.naa-lean-chrome .naa-page-band__title,
.naa-page-band .naa-page-band__title {
	margin: 24px 0 0;
	color: var(--naa-brand-fg);
	font-size: clamp(28px, 4.2vw, 48px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.naa-page-band__title span {
	color: color-mix(in srgb, var(--naa-brand-fg) 70%, transparent);
}

.naa-page-band__lead {
	margin: 16px auto 0;
	max-width: 512px;
	color: color-mix(in srgb, var(--naa-brand-fg) 70%, transparent);
	font-size: 14px;
	line-height: 1.625;
}

.naa-page-band__cta {
	margin-top: 32px;
}

.naa-page-band .naa-lean-next__grid {
	position: relative;
	margin-top: 0;
}

/*
 * naa-band-h4: lean-chrome.css sets `.naa-lean-chrome h4` (0,1,1) to brand
 * green. On the outlined cards that is green on green, so their titles were
 * invisible; the filled card was fine only because it is white. Three classes
 * take the colour back to the card's own, without !important.
 */
.naa-lean-chrome .naa-page-band .naa-lean-next-card h4,
.naa-page-band .naa-lean-next-card h4 {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Hero button modifiers
   Shared by every editorial hero, so they live with the rest of the hero.
   -------------------------------------------------------------------------- */
.naa-page-hero .naa-page-btn--invert {
	background: var(--naa-brand-fg);
	color: var(--naa-brand) !important;
}

.naa-page-hero .naa-page-btn--ghost {
	background: transparent;
	color: var(--naa-brand-fg) !important;
	border: 1px solid color-mix(in srgb, var(--naa-brand-fg) 35%, transparent);
}

.naa-page-hero .naa-page-btn--ghost:hover {
	border-color: var(--naa-brand-fg);
	box-shadow: none;
}