/* ==========================================================================
   editorial.css — صفحهٔ «درباره» (about.php)
   هم‌جنس و هم‌زبانِ بصری با صفحهٔ مربیان (mentors.php):
   هیروِ navy با شبکه و درخششِ teal، کارت‌های آمارِ شیشه‌ای، کارت‌های mz-style،
   باندِ «ارزش‌ها» و باندِ CTA. فقط روی توکن‌های Design System تکیه می‌کند.
   ========================================================================== */

/* ── لِی‌اوتِ تمام‌عرض (هم‌سان با mentors) ── */
.ab-bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ab-inner{max-width:var(--stage-max);margin:0 auto;padding:0 18px}
html{overflow-x:clip}

/* ── Hero (هم‌جنس با .mz-hero) ── */
.ab-hero{background:var(--grad-navy);padding:78px 0 64px;position:relative;overflow:hidden;text-align:center}
.ab-hero::before{content:'';position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:820px;height:820px;border-radius:50%;background:radial-gradient(circle,rgba(26,188,173,.20) 0%,transparent 66%);pointer-events:none}
.ab-hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 50% 26%,#000,transparent 72%);mask-image:radial-gradient(circle at 50% 26%,#000,transparent 72%);pointer-events:none}
.ab-hero .ab-inner{position:relative}
.ab-kicker{display:inline-flex;align-items:center;gap:7px;color:var(--teal);background:rgba(26,188,173,.12);border:1px solid rgba(26,188,173,.30);padding:7px 16px;border-radius:999px;font-size:12.5px;font-weight:800;margin-bottom:18px}
.ab-hero h1{color:#fff;font-size:clamp(27px,4.6vw,48px);font-weight:900;line-height:1.18;letter-spacing:-.5px;margin:0 auto 14px;max-width:18ch}
.ab-hero p{color:rgba(255,255,255,.74);font-size:clamp(14px,1.6vw,16px);line-height:1.95;max-width:580px;margin:0 auto}
.ab-hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}

/* کارت‌های آمارِ شیشه‌ای (هم‌سان با .mz-stat) */
.ab-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.ab-stat{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:11px 16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ab-stat .n{color:#fff;font-size:18px;font-weight:900;line-height:1}
.ab-stat .l{color:rgba(255,255,255,.62);font-size:11.5px;font-weight:600}
.ab-stat .ic{width:30px;height:30px;border-radius:9px;background:rgba(26,188,173,.18);color:var(--teal);display:grid;place-items:center;flex:none}

/* ── کارتِ چارچوبِ علمی (شناور روی مرزِ هیرو) ── */
.ab-science{margin-top:-44px;position:relative;z-index:2}
.ab-sci-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 28px;box-shadow:var(--shadow-md);display:flex;gap:18px;align-items:flex-start}
.ab-sci-ic{width:50px;height:50px;border-radius:14px;flex:none;background:linear-gradient(135deg,var(--teal),var(--purple));color:#fff;display:grid;place-items:center}
.ab-sci-ic svg{width:26px;height:26px}
.ab-sci-card h3{font-size:17px;font-weight:900;color:var(--navy);margin:2px 0 7px}
.ab-sci-card p{color:var(--muted);font-size:13.8px;line-height:2;margin:0}
@media(max-width:560px){.ab-sci-card{flex-direction:column;gap:12px;padding:22px}}

/* ── کارت‌های ماموریت/داستان (هم‌جنس با .mz-card) ── */
.ab-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.ab-two{grid-template-columns:1fr}}
.ab-block{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px 24px;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.ab-block::after{content:'';position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--teal),var(--purple));opacity:0;transition:opacity .2s}
.ab-block:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--teal)}
.ab-block:hover::after{opacity:1}
.ab-block .bk-kick{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--teal-600);margin-bottom:8px}
.ab-block h3{font-size:18px;font-weight:900;color:var(--navy);margin:0 0 10px}
.ab-block p{color:var(--muted);font-size:14px;line-height:2.05;margin:0}

/* ── گریدِ کارت‌ها (هم‌سان با .mz-grid) ── */
.ab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1024px){.ab-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.ab-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:480px){.ab-grid{grid-template-columns:1fr}}
.ab-grid.cols3{grid-template-columns:repeat(3,1fr)}
@media(max-width:880px){.ab-grid.cols3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ab-grid.cols3{grid-template-columns:1fr}}

/* ── کارتِ شخص (تیم/مربی) — آینهٔ .mz-card ── */
.ab-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 18px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);overflow:hidden}
.ab-card::after{content:'';position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--teal),var(--purple));opacity:0;transition:opacity .2s}
.ab-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-teal);border-color:var(--teal)}
.ab-card:hover::after{opacity:1}
.ab-ava-wrap{position:relative;width:80px;height:80px;margin:4px auto 12px}
.ab-ava{width:80px;height:80px;border-radius:22px;object-fit:cover;display:grid;place-items:center;font-size:30px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--navy),var(--navy-700))}
.ab-ava-ring{position:absolute;inset:-4px;border-radius:26px;border:2px solid var(--teal-50)}
.ab-name{font-weight:900;font-size:15px;color:var(--navy);line-height:1.4;display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap}
.ab-role{font-size:12px;color:var(--muted);margin-top:3px;min-height:17px}
.ab-bio{font-size:12px;color:var(--muted);line-height:1.85;margin-top:9px}
.ab-specs{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:12px;min-height:22px}
.ab-spec{font-size:10.5px;font-weight:700;background:var(--teal-50);color:var(--teal-600);border-radius:999px;padding:3px 9px}
.ab-mini{font-size:10px;font-weight:800;background:var(--gold-50);color:var(--gold-700);border-radius:999px;padding:2px 8px;border:1px solid rgba(225,177,44,.35)}
.ab-socs{display:flex;gap:10px;justify-content:center;margin-top:11px;flex-wrap:wrap}
.ab-socs a{font-size:11.5px;color:var(--muted);font-weight:700}
.ab-socs a:hover{color:var(--teal-600)}
.ab-foot{margin-top:auto;padding-top:13px;width:100%;border-top:1px dashed var(--line);display:flex;justify-content:center}
.ab-go{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:var(--on-teal);background:var(--teal);border-radius:10px;padding:7px 14px;transition:.16s}
.ab-card:hover .ab-go{background:#16a99b}

/* ── باندِ ارزش‌ها (هم‌جنس با .mz-how) ── */
.ab-how{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:64px;padding:56px 0}
.ab-how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
@media(max-width:860px){.ab-how-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.ab-how-grid{grid-template-columns:1fr}}
.ab-step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 18px;text-align:center}
.ab-step .ring{width:58px;height:58px;border-radius:50%;background:var(--teal-50);display:grid;place-items:center;margin:0 auto 13px}

/* ── باندِ CTA (هم‌جنس با .mz-cta) ── */
.ab-cta{background:var(--grad-navy);padding:54px 0;text-align:center;position:relative;overflow:hidden}
.ab-cta::before{content:'';position:absolute;bottom:-160px;inset-inline-start:50%;transform:translateX(-50%);width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(26,188,173,.16) 0%,transparent 68%);pointer-events:none}
.ab-cta h2{color:#fff;font-size:clamp(20px,2.6vw,28px);font-weight:900;margin:0 0 10px;position:relative}
.ab-cta p{color:rgba(255,255,255,.72);font-size:14px;max-width:480px;margin:0 auto 20px;position:relative}
.ab-cta .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative}

@media(max-width:480px){
  .ab-hero{padding:54px 0 44px}
  .ab-how{padding:44px 0}
}