/* ==========================================================================
   PrepSora — About page
   Loaded only on the About page (conditional enqueue in functions.php).
   Reuses shared components from prepsora-design-system.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO (centered)
   -------------------------------------------------------------------------- */
.ps-about-hero {
	background: linear-gradient(180deg, var(--ps-white) 0%, var(--ps-offwhite) 100%);
	padding-block: var(--ps-space-9) var(--ps-space-8);
}
.ps-about-hero__inner { text-align: center; }
.ps-about-hero h1 { margin-bottom: var(--ps-space-4); }
.ps-about-hero__sub {
	font-size: var(--ps-text-lg);
	color: var(--ps-text);
	margin: 0 auto var(--ps-space-5);
	max-width: 60ch;
}

/* --------------------------------------------------------------------------
   PRINCIPLES
   -------------------------------------------------------------------------- */
.ps-principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ps-space-5); }
.ps-principle h3 { font-size: var(--ps-text-lg); margin: 0 0 var(--ps-space-2); }
.ps-principle p { font-size: var(--ps-text-sm); color: var(--ps-text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   INTEGRITY (dark pull-quote)
   -------------------------------------------------------------------------- */
.ps-integrity { text-align: center; }
.ps-integrity__quote {
	font-family: var(--ps-font-display);
	font-weight: 600;
	font-size: var(--ps-text-2xl);
	line-height: 1.4;
	color: #fff;
	margin: var(--ps-space-3) auto 0;
	max-width: 40ch;
}

/* --------------------------------------------------------------------------
   GLOBAL
   -------------------------------------------------------------------------- */
.ps-about-global { text-align: center; }
.ps-about-global__text {
	font-size: var(--ps-text-lg);
	color: var(--ps-text);
	max-width: 60ch;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.ps-about-hero h1 { font-size: var(--ps-text-4xl); }
	.ps-principles { grid-template-columns: 1fr; }
	.ps-integrity__quote { font-size: var(--ps-text-xl); }
}