/**
 * About — page-specific styles.
 *
 * Reuses global primitives from global.css wherever possible:
 *   - Hero: .ba-section--hero + .ba-hero (home)
 *   - Section 3 outer: .ba-section--softer (tokenised bg / padding / radius)
 *   - Section 4 outer: .ba-section--soft (tokenised bg / padding / radius)
 *   - Journey: .ba-section--journey + .ba-steps (home)
 *   - Banner: .ba-banner (global §21)
 *   - Note pill: .ba-concerns__note + .ba-concerns__note-icon (concerns.css)
 *
 * All numeric values below use design tokens from global.css §2.
 */

/* ---------------------------------------------------------------------------
 * Eyebrows above section titles (see global.css §22c .ba-eyebrow).
 * -------------------------------------------------------------------------*/
.ba-about-hero__eyebrow    { display: inline-block; margin-bottom: var(--ba-space-4); }
.ba-about-journey__eyebrow { display: inline-block; margin-bottom: var(--ba-space-3); }

/* ---------------------------------------------------------------------------
 * Section 2 — Intro: two cards
 * -------------------------------------------------------------------------*/
.ba-about-intro {
	display: grid;
	grid-template-columns: 553fr 704fr;
	gap: var(--ba-gap-lg);
	align-items: stretch;
}
.ba-about-intro__card {
	padding: var(--ba-section-pad);
	border-radius: var(--ba-radius-md);
}
.ba-about-intro__card--left  { background: var(--ba-section-bg-1); }
.ba-about-intro__card--right { background: var(--ba-section-bg-2); }
.ba-about-intro__title {
	font-family: var(--ba-font-heading);
	font-size: var(--ba-fs-h2);
	line-height: var(--ba-lh-heading);
	letter-spacing: -0.015em;
	color: var(--ba-text-primary);
	margin: 0;
	max-width: 14ch;
}
.ba-about-intro__body {
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-secondary);
	margin: var(--ba-space-8) 0 0;
}
.ba-about-intro__body--stack {
	display: flex;
	flex-direction: column;
	gap: var(--ba-space-7);
}
.ba-about-intro__body--stack p { margin: 0; }

/* ---------------------------------------------------------------------------
 * Section 3 — Doctor-led, evidence-based (inside .ba-section--softer)
 * Inner card (bg-1) + right image; mirrors Home .ba-why layout.
 * -------------------------------------------------------------------------*/
.ba-about-dle {
	display: grid;
	grid-template-columns: 523fr 640fr;
	gap: var(--ba-gap-xl);
	align-items: stretch;
}
.ba-about-dle__card {
	background: var(--ba-section-bg-1);
	border-radius: var(--ba-radius-md);
	padding: var(--ba-section-pad);
	display: flex;
	flex-direction: column;
}
.ba-about-dle__title  { max-width: 12ch; }
.ba-about-dle__body {
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
	margin: var(--ba-space-6) 0 0;
	max-width: 44ch;
}
.ba-about-dle__list {
	list-style: none;
	margin: var(--ba-space-8) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ba-gap-lg);
}
.ba-about-dle__item { display: flex; align-items: center; gap: var(--ba-gap-md); }
.ba-about-dle__icon {
	flex: 0 0 auto;
	width: var(--ba-space-9);
	height: var(--ba-space-9);
	border-radius: var(--ba-radius-sm);
	background: var(--ba-section-bg-2);
	color: var(--ba-text-secondary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ba-about-dle__icon svg { width: 20px; height: 20px; display: block; }
.ba-about-dle__text {
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-secondary);
}
.ba-about-dle__note { margin-top: var(--ba-space-8); }

/* Right image — unified with Home .ba-why__media (global.css §14) */
.ba-about-dle__media {
	position: relative;
	height: 768px;
	border-radius: var(--ba-radius-image);
	overflow: hidden;
	background: linear-gradient(180deg, #EDE1D5, #D8CBBE);
}
.ba-about-dle__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
@media ( min-width: 1101px ) {
	.ba-about .ba-hero__media img { object-position: 25% 100%; }
	.ba-about .ba-about-dle__media img { object-position: 20% 100%; }
}
.ba-about-dle__media::after {
	content: "";
	position: absolute;
	inset: 22px;
	border: 1px solid rgba(251, 247, 242, 0.28);
	border-radius: var(--ba-radius-image-inner);
	pointer-events: none;
}

/* Concerns note primitive re-declared locally (see concerns.css) so
 * concerns.css need not be enqueued on About. */
.ba-concerns__note {
	display: flex;
	align-items: center;
	gap: var(--ba-gap-sm);
	margin: var(--ba-space-6) 0 0;
	padding: var(--ba-space-1) 0;
	font-size: var(--ba-fs-small);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
}
.ba-concerns__note-icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--ba-text-muted);
}

/* ---------------------------------------------------------------------------
 * Section 4 — Values: 4 cards (inside .ba-section--soft)
 * -------------------------------------------------------------------------*/
.ba-about-values__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ba-gap-lg);
	margin-top: var(--ba-space-7);
}
.ba-about-value {
	background: var(--ba-section-bg-2);
	border-radius: var(--ba-radius-md);
	padding: var(--ba-section-pad);
	display: flex;
	flex-direction: column;
}
.ba-about-value__icon {
	flex: 0 0 auto;
	width: var(--ba-space-9);
	height: var(--ba-space-9);
	border-radius: var(--ba-radius-sm);
	background: var(--ba-section-bg-1);
	color: var(--ba-text-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ba-about-value__icon svg { width: 20px; height: 20px; display: block; }
.ba-about-value__title {
	font-family: var(--ba-font-heading);
	font-size: var(--ba-fs-h3);
	line-height: var(--ba-lh-heading);
	color: var(--ba-text-primary);
	margin: var(--ba-space-5) 0 0;
}
.ba-about-value__text {
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-muted);
	margin: var(--ba-space-6) 0 0;
}

/* ---------------------------------------------------------------------------
 * Section 6 — Spotlight: image left + content right.
 * Unified with Home .ba-spotlight (global.css §16).
 * -------------------------------------------------------------------------*/
.ba-about-spot {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ba-space-8);
	align-items: flex-start;
}
.ba-about-spot__media {
	position: relative;
	height: 783px;
	border-radius: var(--ba-radius-image);
	overflow: hidden;
	background: linear-gradient(180deg, #EDE1D5, #D8CBBE);
}
.ba-about-spot__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ba-about-spot__media::after {
	content: "";
	position: absolute;
	inset: 22px;
	border: 1px solid rgba(251, 247, 242, 0.28);
	border-radius: var(--ba-radius-image-inner);
	pointer-events: none;
}

.ba-about-spot__body {
	padding-top: var(--ba-space-9);
	display: flex;
	flex-direction: column;
}
.ba-about-spot__title {
	font-family: var(--ba-font-heading);
	font-size: var(--ba-fs-h2);
	line-height: var(--ba-lh-heading);
	letter-spacing: -0.015em;
	color: var(--ba-text-primary);
	margin: 0;
	max-width: 14ch;
}
.ba-about-spot__text {
	margin-top: var(--ba-space-7);
	display: flex;
	flex-direction: column;
	gap: var(--ba-space-4);
}
.ba-about-spot__text p {
	font-size: var(--ba-fs-body);
	line-height: var(--ba-lh-body);
	color: var(--ba-text-secondary);
	margin: 0;
}
.ba-about-spot__products {
	margin-top: var(--ba-space-7);
	background: rgba(252, 248, 243, 0.4);
	border-radius: var(--ba-radius-sm);
	padding: var(--ba-space-4);
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--ba-space-6);
	max-width: 100%;
	width: auto;
	align-self: flex-start;
}
.ba-about-spot__product {
	margin: 0;
	border-radius: var(--ba-radius-sm);
	overflow: hidden;
	background: transparent;
	height: 70px;
	flex: 0 0 auto;
}
.ba-about-spot__product img {
	display: block; width: auto; height: 100%; object-fit: contain;
}
.ba-about-spot__cta {
	margin-top: var(--ba-space-7);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ba-gap-sm);
}

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * -------------------------------------------------------------------------*/
@media ( max-width: 1100px ) {
	.ba-about-intro { grid-template-columns: 1fr; gap: var(--ba-gap-md); }

	.ba-about-dle { grid-template-columns: 1fr; gap: var(--ba-gap-lg); }
	.ba-about-dle__media { height: 420px; min-height: 420px; }

	.ba-about-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.ba-about-spot { grid-template-columns: 1fr; gap: var(--ba-space-6); }
	.ba-about-spot__media { height: 420px; min-height: 420px; }
	.ba-about-spot__body { padding-top: 0; }
}

@media ( max-width: 720px ) {
	.ba-about-dle__media,
	.ba-about-spot__media { height: 320px; }
	.ba-about-dle__media::after,
	.ba-about-spot__media::after { inset: 10px; border-radius: calc(var(--ba-radius-image) - 10px); }

	.ba-about-values__grid { grid-template-columns: 1fr; }
}