/* =====================================================================
   tpl2.css — قوالب العملاء الاحترافية (الإصدار 5)
   بطاقة أعمال · مجلة · شركة · أحادي · ستوري
   كل قالب يتبع لون العميل (--accent) والوضع الليلي/النهاري
   ===================================================================== */

/* ===================== بطاقة أعمال (card) ===================== */
.t-card{background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),var(--bg);font-family:'IBM Plex Sans Arabic','Noto Sans Arabic',system-ui,sans-serif}
.cd{max-width:27rem;margin:0 auto;padding:4.6rem 1rem 4rem}
.cd-card{position:relative;overflow:hidden;border-radius:28px;background:var(--card);box-shadow:0 1px 0 var(--gb),0 24px 60px -24px rgba(0,0,0,.35);padding:0 1.2rem 1.2rem}
.cd-band{height:7.5rem;margin:0 -1.2rem;background:linear-gradient(120deg,var(--accent),color-mix(in srgb,var(--accent) 45%,#000)) center/cover}
.cd-band::after{content:"";display:block;height:100%;background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px)}
.cd-id{display:flex;align-items:flex-end;gap:.9rem;margin-top:-2.6rem;position:relative}
.cd-av{width:88px;height:88px;border-radius:24px;object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center;background:var(--f1);color:var(--fg);font-size:2.2rem;border:4px solid var(--card);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.cd-nm{min-width:0;padding-bottom:.2rem}
.cd-nm .h1{font-size:1.3rem}
.cd-role{margin:.2rem 0 0;font-size:.8rem;font-weight:700;color:var(--fg)}
.cd-bio{margin:.9rem 0 0;font-size:.9rem;line-height:1.75;color:var(--l2)}
.cd-qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.5rem;margin-top:1.1rem}
.cd-q{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;min-height:64px;border-radius:16px;background:color-mix(in srgb,var(--accent) 10%,var(--f2));color:var(--fg);text-decoration:none;font-size:.74rem;font-weight:700}
.cd-q i{font-size:1.15rem}
.cd-save{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:50px;margin-top:.6rem;border:0;border-radius:16px;background:var(--accent);color:var(--on);font:inherit;font-weight:800;font-size:.92rem}
.cd-list{margin-top:1rem;border-radius:22px;background:var(--card);overflow:hidden;box-shadow:0 1px 0 var(--gb)}
.cd-row{display:flex;align-items:center;gap:.85rem;min-height:60px;padding:.7rem 1rem;color:var(--l1);text-decoration:none}
.cd-row+.cd-row{border-top:.5px solid var(--sep)}
.cd-t{flex:1;min-width:0}
.cd-chev{font-size:.7rem;color:var(--l3)}

/* ===================== مجلة (editorial) ===================== */
.t-editorial{font-family:'Noto Naskh Arabic','Noto Sans Arabic',serif;background:var(--bg)}
html:not(.dark) .t-editorial{--bg:#FAF8F4;--card:#fff}
.ed-cover{height:15rem;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 70%,#000),color-mix(in srgb,var(--accent) 25%,#000)) center/cover;position:relative}
.ed-mast{position:absolute;top:calc(1rem + env(safe-area-inset-top));inset-inline:7.6rem 1.1rem;display:flex;justify-content:space-between;align-items:center;color:#fff;font:700 .72rem 'Noto Kufi Arabic',sans-serif;letter-spacing:.08em;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.ed-mast span:first-child{padding:.25rem .7rem;border:1px solid rgba(255,255,255,.6);border-radius:99px}
.ed{max-width:34rem;margin:-4.5rem auto 0;padding:0 1.3rem 4rem;position:relative}
.ed-head{text-align:center}
.ed-av{width:96px;height:96px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;background:var(--card);color:var(--fg);font-size:2.4rem;border:4px solid var(--bg)}
.ed-name{margin:0;font:700 clamp(2rem,9vw,2.7rem)/1.25 'Noto Serif Arabic','Amiri',serif;color:var(--l1);letter-spacing:-.01em}
.ed-name i{font-size:.5em;color:var(--fg);vertical-align:middle}
.ed-dek{margin:.8rem auto 0;max-width:28rem;font-size:1.05rem;line-height:1.9;color:var(--l2)}
.ed-tags{margin:.6rem 0 0;font:600 .78rem 'Noto Kufi Arabic',sans-serif;color:var(--fg)}
.ed-sec{display:flex;align-items:center;gap:.8rem;margin:2.2rem 0 .4rem;font:800 .74rem 'Noto Kufi Arabic',sans-serif;letter-spacing:.12em;color:var(--l2)}
.ed-sec::after{content:"";flex:1;height:2px;background:var(--l1)}
.ed-toc{list-style:none;margin:0;padding:0}
.ed-toc li+li{border-top:1px solid var(--sep)}
.ed-item{display:flex;align-items:center;gap:1rem;min-height:72px;padding:1rem .2rem;color:var(--l1);text-decoration:none;transition:padding .3s}
.ed-item:hover{padding-inline-start:.7rem}
.ed-n{flex:none;width:2.4rem;font:700 1.6rem/1 'Noto Serif Arabic',serif;color:var(--fg);font-variant-numeric:tabular-nums}
.ed-tx{flex:1;min-width:0}
.ed-t{display:block;font:700 1.12rem/1.5 'Noto Serif Arabic',serif}
.ed-s{display:block;margin-top:.15rem;font-size:.85rem;color:var(--l2)}
.ed-ic{width:34px;height:34px;border-radius:50%;font-size:.95rem}

/* ===================== شركة (corporate) ===================== */
.t-corporate{font-family:'IBM Plex Sans Arabic','Noto Sans Arabic',system-ui,sans-serif;background:var(--bg)}
.co-bar{position:sticky;top:0;z-index:30;background:var(--glass);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border-bottom:.5px solid var(--gb)}
.co-bar-in{max-width:46rem;margin:0 auto;display:flex;align-items:center;gap:.7rem;padding:calc(.55rem + env(safe-area-inset-top)) 1rem .55rem}
.co-logo{width:40px;height:40px;border-radius:12px;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--accent);color:var(--on);font-weight:800}
.co-logo img{width:100%;height:100%;object-fit:cover}
.co-bn{flex:1;min-width:0;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-ctl{display:flex;gap:.35rem}
.co{max-width:46rem;margin:0 auto;padding:1rem 1rem 4rem}
.co-hero{position:relative;overflow:hidden;border-radius:26px;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 88%,#000),color-mix(in srgb,var(--accent) 40%,#000))}
.co-hero::before{content:"";position:absolute;inset:0;background:var(--cv,none) center/cover;opacity:.35}
.co-hero::after{content:"";position:absolute;inset-inline-end:-4rem;top:-4rem;width:16rem;height:16rem;border-radius:50%;border:2px solid rgba(255,255,255,.18);box-shadow:0 0 0 2.5rem rgba(255,255,255,.05)}
.co-hero-in{position:relative;z-index:1;padding:clamp(1.6rem,6vw,2.6rem)}
.co-kick{margin:0 0 .5rem;font-size:.78rem;font-weight:700;opacity:.85}
.co-h{margin:0;font-size:clamp(1.6rem,6vw,2.2rem);font-weight:800;line-height:1.3}
.co-h i{font-size:.6em;opacity:.9}
.co-lead{margin:.7rem 0 0;max-width:30rem;font-size:.98rem;line-height:1.8;opacity:.92}
.co-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.co-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.2rem;border-radius:14px;background:#fff;color:#111;font-weight:800;font-size:.92rem;text-decoration:none}
.co-btn.alt{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35)}
.co-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 0;padding:0}
.co-tags li{padding:.35rem .8rem;border-radius:99px;font-size:.78rem;font-weight:700;color:var(--fg);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.co-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:1rem}
.co-tile{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;min-height:118px;padding:1rem;border-radius:20px;background:var(--card);color:var(--l1);text-decoration:none;box-shadow:0 1px 0 var(--gb);transition:box-shadow .3s}
.co-tile:hover{box-shadow:0 0 0 2px var(--accent)}
.co-tile .ic{margin-bottom:.4rem}
.co-tile .s{font-size:.76rem}
@media(min-width:620px){.co-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===================== أحادي (mono) ===================== */
.t-mono{--bg:#fff;--card:#fff;--l1:#0A0A0A;--l2:#4A4A4A;--l3:#8A8A8A;--sep:#0A0A0A;font-family:'Readex Pro','Noto Sans Arabic',system-ui,sans-serif;background:var(--bg);color:var(--l1)}
html.dark .t-mono{--bg:#0A0A0A;--card:#0A0A0A;--l1:#F5F5F5;--l2:#B3B3B3;--l3:#777;--sep:#F5F5F5}
.t-mono .fl .ib{background:transparent;border:1.5px solid var(--l1);color:var(--l1)}
.t-mono .fl i{color:var(--l1)!important}
.mo{max-width:36rem;margin:0 auto;padding:5rem 1.3rem 4rem}
.mo-av{width:72px;height:72px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--l1);color:var(--bg);font-size:1.8rem;filter:grayscale(1);margin-bottom:1.4rem}
.mo-name{margin:0;font-size:clamp(2.4rem,12vw,3.6rem);font-weight:700;line-height:1.1;letter-spacing:-.03em}
.mo-name i{font-size:.32em;vertical-align:super;margin-inline-start:.3rem;color:var(--accent)}
.mo-bio{margin:1rem 0 0;font-size:1.05rem;line-height:1.75;color:var(--l2);max-width:30rem}
.mo-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 0}
.mo-tags span{padding:.2rem .7rem;border:1.5px solid var(--l1);border-radius:99px;font-size:.75rem;font-weight:600}
.mo-list{margin-top:2.4rem;border-top:2px solid var(--sep)}
.mo-row{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:1rem;min-height:68px;padding:1rem .2rem;border-bottom:1px solid var(--sep);color:var(--l1);text-decoration:none;isolation:isolate}
.mo-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--l1);transform:scaleY(0);transform-origin:bottom;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.mo-row:hover,.mo-row:focus-visible{color:var(--bg)}
.mo-row:hover::before,.mo-row:focus-visible::before{transform:scaleY(1)}
.mo-t{font-size:1.2rem;font-weight:600}
.mo-s{grid-column:1;font-size:.82rem;color:inherit;opacity:.65}
.mo-ar{grid-row:1/span 2;grid-column:2;font-size:.95rem;transition:transform .35s}
.mo-row:hover .mo-ar{transform:translateX(-6px);color:var(--accent)}
.t-mono .foot,.t-mono .pw{color:var(--l2)}

/* ===================== ستوري (story) ===================== */
.t-story{--l1:#fff;--l2:rgba(255,255,255,.82);--l3:rgba(255,255,255,.6);--card:rgba(255,255,255,.12);--sep:rgba(255,255,255,.2);background:#000;color:#fff;font-family:'Noto Sans Arabic',system-ui,sans-serif;min-height:100dvh}
.st-bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 30% 20%,var(--accent),transparent 55%),radial-gradient(circle at 80% 90%,color-mix(in srgb,var(--accent) 50%,#ff2d55),transparent 55%),#111 center/cover;transform:scale(1.04)}
.st-bg::after{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.12) 30%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.85) 100%)}
.st-bars{position:fixed;top:calc(.6rem + env(safe-area-inset-top));inset-inline:.8rem;z-index:31;display:flex;gap:4px}
.st-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.st-bars i.on{background:#fff}
.st-bars i.run::before{content:"";display:block;height:100%;width:100%;background:#fff;transform-origin:right;animation:stRun 6s linear infinite}
html[dir=ltr] .st-bars i.run::before{transform-origin:left}
@keyframes stRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.st-top{position:fixed;top:calc(1.2rem + env(safe-area-inset-top));inset-inline:.8rem;z-index:30;display:flex;align-items:center;gap:.6rem}
.st-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--accent);box-shadow:0 0 0 2px #fff}
.st-av img{width:100%;height:100%;object-fit:cover}.st-av b{font-size:1rem}
.st-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.st-who b{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-who small{font-size:.72rem;opacity:.8}
.st-ctl{display:flex;gap:.35rem}
.st-ctl .ib{background:rgba(0,0,0,.35);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.st-ctl i{color:#fff!important}
.st{max-width:28rem;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:6rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom))}
.st-mid{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:1.4rem;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.st-name{margin:0;font-size:clamp(2rem,10vw,2.8rem);font-weight:800;line-height:1.15}
.st-bio{margin:.6rem 0 0;font-size:1rem;line-height:1.7;color:var(--l2)}
.st-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem;font-weight:700;font-size:.85rem}
.st-links{display:flex;flex-direction:column;gap:.55rem}
.st-btn{display:flex;align-items:center;gap:.75rem;min-height:56px;padding:.45rem .55rem;border-radius:18px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);color:#fff;text-decoration:none;font-weight:700}
.st-btn .t{flex:1;text-align:center;padding-inline-end:40px}
.st-ic{width:40px;height:40px;border-radius:13px;background:#fff!important;color:var(--c,#111)!important}
.st-btn:hover{background:rgba(255,255,255,.22)}
.st-more{margin-top:.6rem}
.t-story .foot,.t-story .pw{color:rgba(255,255,255,.75)}
.t-story .xs{--xs-card:rgba(255,255,255,.12);--xs-line:rgba(255,255,255,.2)}
.t-story .glass{background:rgba(255,255,255,.12)}

/* ---------- تخفيف وإتاحة ---------- */
html.lite .st-btn,html.lite .st-ctl .ib,html.lite .co-bar{-webkit-backdrop-filter:none;backdrop-filter:none}
html.lite .st-btn{background:rgba(20,20,20,.72)}
@media (prefers-reduced-motion:reduce){.st-bars i.run::before{animation:none;transform:scaleX(.5)}.mo-row::before,.ed-item{transition:none}}
@media (prefers-reduced-transparency:reduce){.st-btn{background:rgba(20,20,20,.9)}.co-bar{background:var(--bg)}}
.t-card :focus-visible,.t-editorial :focus-visible,.t-corporate :focus-visible,.t-story :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.t-mono :focus-visible{outline:3px solid var(--l1);outline-offset:3px}