/* ---------------------------------------------------------------------------
   Our Founders' Story. Enqueued for t_founders_story.php only, on top of
   oxygen-concentrators.css, which supplies the tokens, .oc-inner, .oc-divider
   and "Find your Inogen". Everything here is scoped to .fs-page.

   Figma: "Our Founders Journey" 2297:3744 (desktop) and 2297:11588 (mobile) in
   the Inogen Website 2026 file.
   --------------------------------------------------------------------------- */

/* --- Hero (Figma 2753:362 / 2753:404) --------------------------------------
   A 252px blue band with the wave artwork laid over it from 23px down. The
   wave is drawn 1440px wide: it stretches on wider screens and crops from the
   left on narrower ones, as the mobile comp does. */

.fs-hero {
	min-height: 402px;
	padding: 96px 0 48px;
	background-color: #fff;
	background-image: url('../img/oxygen-concentrators/founders-hero-waves.svg'), linear-gradient(var(--oc-blue), var(--oc-blue));
	background-repeat: no-repeat;
	background-position: left 23px, left top;
	background-size: max(100%, 1440px) 378px, 100% 252px;
}

.fs-page h1.fs-hero__title {
	max-width: 700px;
	margin: 0;
	font-size: 48px;
	font-weight: 400;
	line-height: 60px;
	color: #fff;
}

@media screen and (max-width: 767px) {
	.fs-hero { min-height: 312px; padding-top: 84px; background-position: left 24px, left top; }
}

/* --- Chapters (Figma "50" / "1441"-"1443"; mobile "51", "1444"-"1446") ----- */

.fs-chapter { padding: 48px 0; }
.fs-chapter__grid { display: flex; align-items: center; gap: 48px; }

.fs-chapter__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.fs-page h2.fs-chapter__title { margin: 0; font-size: 40px; font-weight: 400; line-height: 48px; color: var(--oc-blue); }
.fs-chapter__copy p { margin: 0; font-size: 20px; line-height: 24px; color: var(--oc-navy); }

.fs-chapter__media { flex: 1 1 0; min-width: 0; }
.fs-chapter__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; }
.fs-chapter--media-first .fs-chapter__media { order: -1; }

/* Stacked, the copy always leads. */
@media screen and (max-width: 900px) {
	.fs-chapter__grid { flex-direction: column; align-items: stretch; gap: 36px; }
	.fs-chapter--media-first .fs-chapter__media { order: 0; }
}

@media screen and (max-width: 767px) {
	.fs-chapter { padding: 36px 0; }
	.fs-page h2.fs-chapter__title { font-size: 36px; line-height: 40px; }
	.fs-chapter__copy p { font-size: 16px; line-height: 20px; }
}