/*
 * UTurn 2.0 — About page modern layout.
 * Loaded ONLY on template-about.php; builds on tokens/base/components.
 */

/* ---------- Hero ---------- */
.about-hero { padding: 3.5rem 0 2.5rem; }
.about-hero .about-hero-h1 {
	font-size: clamp(2.1rem, 4.5vw, var(--fs-4xl));
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0.6rem 0 1rem;
	max-width: 21ch;
}
.about-hero .about-hero-h1 .grad { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.about-hero .about-hero-sub { font-size: var(--fs-md); color: var(--text-secondary); max-width: 62ch; line-height: 1.75; margin: 0; }

/* ---------- Stats band ---------- */
.about-stats-band {
	background: linear-gradient(180deg, var(--bg-muted) 0%, var(--bg) 100%);
	border-block: 1px solid var(--border);
	padding: 2.75rem 0;
}
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.about-stat { text-align: center; position: relative; }
.about-stat + .about-stat::before {
	content: ""; position: absolute; inset-inline-start: -0.75rem; top: 12%; height: 76%;
	width: 1px; background: var(--border);
}
.about-stat strong {
	display: block; font-size: var(--fs-3xl); font-weight: 800; line-height: 1.05;
	background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-stat span { font-size: var(--fs-sm); color: var(--text-secondary); }

/* ---------- Story ---------- */
.about-story { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; }
.about-story-copy h2 { font-size: var(--fs-2xl); letter-spacing: -0.015em; margin: 0.5rem 0 1rem; max-width: 22ch; }
.about-story-copy p { color: var(--text-secondary); line-height: 1.8; margin-bottom: 1rem; }
.about-founder-card { position: relative; max-width: 380px; margin-inline: auto; }
.about-founder-card .founder-photo { margin: 0; }
.about-founder-card .founder-chip { position: absolute; inset-inline-start: -14px; bottom: 22px; }

/* ---------- Timeline ---------- */
.about-timeline { list-style: none; margin: 2rem auto 0; padding: 0 0 0 8px; max-width: 760px; position: relative; }
.about-timeline::before {
	content: ""; position: absolute; inset-inline-start: 8px; top: 6px; bottom: 6px; width: 2px;
	background: linear-gradient(180deg, var(--brand-blue), var(--brand-cyan)); opacity: 0.35; border-radius: 2px;
}
.about-tl-item { position: relative; padding: 0 0 1.9rem 2.1rem; }
.about-tl-item:last-child { padding-bottom: 0; }
.about-tl-dot {
	position: absolute; inset-inline-start: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--bg); border: 3px solid var(--brand-blue); box-shadow: 0 0 0 5px rgba(27, 122, 248, 0.14);
}
.about-tl-item:nth-child(2n) .about-tl-dot { border-color: var(--brand-cyan); box-shadow: 0 0 0 5px rgba(0, 196, 224, 0.14); }
.about-tl-year {
	display: inline-block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: 0.06em;
	color: var(--brand-blue); background: var(--brand-blue-soft); border-radius: 999px; padding: 2px 12px; margin-bottom: 0.45rem;
}
.about-tl-item h3 { font-size: var(--fs-md); margin: 0 0 0.3rem; }
.about-tl-item p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin: 0; max-width: 58ch; }

/* ---------- Mission / Vision dark band ---------- */
.about-mv {
	background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
	padding: 4rem 0;
}
.about-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.about-mv-card {
	background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 18px; padding: 2rem 1.9rem; backdrop-filter: blur(4px);
	transition: transform var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.about-mv-card:hover { transform: translateY(-4px); border-color: rgba(0, 196, 224, 0.45); }
.about-mv-kicker {
	display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-xs); font-weight: 800;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-cyan); margin-bottom: 0.9rem;
}
.about-mv-kicker::before { content: ""; width: 26px; height: 2px; background: var(--brand-cyan); border-radius: 2px; }
.about-mv-card p { color: rgba(255, 255, 255, 0.86); font-size: var(--fs-md); line-height: 1.75; margin: 0; }

/* ---------- Core values ---------- */
.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.about-value {
	background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; padding: 1.6rem 1.5rem;
	transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}
.about-value:hover { transform: translateY(-5px); border-color: var(--brand-blue); box-shadow: 0 18px 40px -22px rgba(27, 122, 248, 0.45); }
.about-value-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.about-value-num {
	font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.08em;
	background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-value-icon { color: var(--brand-blue); display: inline-flex; }
.about-value h3 { font-size: var(--fs-md); margin: 0 0 0.4rem; }
.about-value p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin: 0; }

/* ---------- Founder quote ---------- */
.about-quote-band { padding: 4.25rem 0; }
.about-quote { max-width: 780px; margin: 0 auto; text-align: center; position: relative; }
.about-quote-mark {
	display: block; font-size: 5rem; line-height: 0.6; font-weight: 800; margin-bottom: 1.2rem;
	background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-quote > p { font-size: clamp(1.15rem, 2.2vw, var(--fs-xl)); line-height: 1.6; font-weight: 600; margin: 0 0 1.4rem; }
.about-quote-by strong { display: block; font-size: var(--fs-md); }
.about-quote-by span { font-size: var(--fs-sm); color: var(--text-secondary); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.about-story { grid-template-columns: 1fr; gap: 2.25rem; }
	.about-stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
	.about-stat:nth-child(3)::before { display: none; }
	.about-mv-grid { grid-template-columns: 1fr; }
	.about-values { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.about-values { grid-template-columns: 1fr; }
	.about-stat + .about-stat::before { display: none; }
}