/* =========================================================
   YupClone — About Page
   Built entirely from existing --yc-* tokens in main.css
   ========================================================= */

.about-page { overflow-x: hidden; }

/* ---------- Hero ---------- */
.about-hero {
	position: relative;
	padding: 96px 0 72px;
	text-align: center;
	overflow: hidden;
	background:
		radial-gradient( 55% 100% at 50% -10%, rgba(47,107,255,.22), transparent 60% ),
		radial-gradient( 35% 70% at 85% 15%, rgba(34,211,238,.14), transparent 60% );
	border-bottom: 1px solid var(--yc-border);
}

.about-hero__inner {
	max-width: 720px;
	margin: 0 auto;
}

.about-hero__eyebrow {
	display: inline-block;
	font-family: var(--yc-font-head);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--yc-accent);
	background: rgba(34,211,238,.1);
	border: 1px solid rgba(34,211,238,.25);
	padding: 6px 16px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.about-hero__title {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
	margin: 0 0 18px;
	text-wrap: balance;
}

.about-hero__sub {
	color: var(--yc-muted);
	font-size: clamp(1rem, 2vw, 1.15rem);
	max-width: 56ch;
	margin: 0 auto 32px;
	text-wrap: pretty;
}

/* ---------- Stat strip ---------- */
.about-stats {
	padding: 40px 0;
	border-bottom: 1px solid var(--yc-border);
	background: var(--yc-surface);
}

.about-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

@media (min-width: 700px) {
	.about-stats__grid { grid-template-columns: repeat(5, 1fr); }
}

.about-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.about-stat__icon { font-size: 28px; margin-bottom: 4px; }

.about-stat__num {
	font-family: var(--yc-font-head);
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--yc-text);
}

.about-stat__label {
	font-size: 13px;
	color: var(--yc-muted);
    text-transform: capitalize;
}

/* ---------- Mission ---------- */
.about-mission {
	padding: 80px 0;
}

.about-mission__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

@media (min-width: 900px) {
	.about-mission__grid { grid-template-columns: 1.1fr .9fr; }
}

.about-mission__eyebrow {
	display: inline-block;
	font-family: var(--yc-font-head);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--yc-accent);
	margin-bottom: 10px;
}

.about-mission__title {
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
	font-weight: 800;
	margin: 0 0 16px;
}

.about-mission__text p {
	color: var(--yc-muted);
	margin: 0 0 16px;
	line-height: 1.75;
}

/* Decorative gradient orbs + floating card — replaces YupGames' cloud
   illustration with something native to this dark electric-blue theme */
.about-mission__visual {
	position: relative;
	min-height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.about-mission__orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(50px);
	opacity: .35;
}

.about-mission__orb--1 {
	width: 220px;
	height: 220px;
	background: var(--yc-primary);
	top: 0;
	left: 10%;
}

.about-mission__orb--2 {
	width: 180px;
	height: 180px;
	background: var(--yc-accent);
	bottom: 0;
	right: 10%;
}

.about-mission__card {
	position: relative;
	z-index: 1;
	background: var(--yc-surface);
	border: 1px solid var(--yc-border);
	border-radius: var(--yc-radius);
	box-shadow: var(--yc-shadow);
	padding: 28px;
	max-width: 280px;
	text-align: center;
}

.about-mission__card-icon {
	font-size: 36px;
	display: block;
	margin-bottom: 12px;
}

.about-mission__card p {
	color: var(--yc-text);
	font-size: 15px;
	font-weight: 500;
	margin: 0;
	line-height: 1.6;
}

/* ---------- Audience ---------- */
.about-audience {
	padding: 80px 0;
	background: var(--yc-surface);
	border-top: 1px solid var(--yc-border);
	border-bottom: 1px solid var(--yc-border);
}

.about-audience__head {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 48px;
}

.about-audience__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

@media (min-width: 900px) {
	.about-audience__grid { grid-template-columns: repeat(4, 1fr); }
}

.about-audience__card {
	background: var(--yc-surface-2);
	border: 1px solid var(--yc-border);
	border-radius: var(--yc-radius);
	padding: 28px 20px;
	text-align: center;
	transition: transform .18s ease, border-color .18s ease;
}

.about-audience__card:hover {
	transform: translateY(-4px);
	border-color: var(--yc-primary);
}

.about-audience__emoji {
	font-size: 36px;
	display: block;
	margin-bottom: 14px;
}

.about-audience__card h3 {
	font-size: 1.05rem;
	margin: 0 0 8px;
}

.about-audience__card p {
	color: var(--yc-muted);
	font-size: 14px;
	margin: 0;
	line-height: 1.6;
}

/* ---------- Closing CTA ---------- */
.about-cta {
	padding: 80px 0;
	text-align: center;
	background:
		radial-gradient( 50% 100% at 50% 110%, rgba(47,107,255,.2), transparent 60% );
}

.about-cta__inner { max-width: 560px; margin: 0 auto; }

.about-cta h2 {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	margin: 0 0 12px;
}

.about-cta p {
	color: var(--yc-muted);
	margin: 0 0 28px;
}

.about-cta__actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ---------- Custom Fields (admin-added) ----------
   Append this block to about-page.css */

.about-custom-fields {
	padding: 60px 0;
}

.about-custom-fields__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 700px) {
	.about-custom-fields__grid { grid-template-columns: repeat(2, 1fr); }
}

.about-custom-field {
	background: var(--yc-surface);
	border: 1px solid var(--yc-border);
	border-radius: var(--yc-radius);
	padding: 24px;
}

.about-custom-field__label {
	font-size: 1.05rem;
	margin: 0 0 10px;
}

.about-custom-field__text,
.about-custom-field__editor {
	color: var(--yc-muted);
	line-height: 1.7;
	margin: 0;
}

.about-custom-field__editor p:last-child { margin-bottom: 0; }

.about-custom-field__image {
	width: 100%;
	border-radius: var(--yc-radius);
	display: block;
}

.about-custom-field__link {
	color: var(--yc-accent);
	font-weight: 600;
	word-break: break-all;
}