/* =========================================================================
   JELAN CLINIC — JOURNAL (hub + article) · v1
   نفس رموز نظام التصميم — لا ألوان جديدة، ولا خطوط جديدة.
   ========================================================================= */

:root{
  --j-ink:#06283B; --j-ink-soft:#4E6B7C; --j-link:#0873A3;
  --j-deep:#0A4A6E; --j-deep-900:#06344E;
  --j-sky:#00ADEE; --j-sky-mid:#179FE0; --j-sky-deep:#378CCD;
  --j-light:#8CC7E6; --j-pale:#C9E4F2; --j-ice:#E8F6FC; --j-ice-50:#F2FAFD;
  --j-neutral:#F4F8FB; --j-white:#FFF; --j-line:#D8E7EF; --j-line-strong:#AECBDC;
  --j-warning:#8A5F00; --j-success:#1B7F4B;
  --grad-brand:linear-gradient(120deg,#00ADEE 0%,#179FE0 55%,#378CCD 100%);
  --grad-ink:linear-gradient(120deg,#075E86 0%,#0A86BC 55%,#0A7FB5 100%);
  --grad-deep:linear-gradient(135deg,#0A4A6E 0%,#06344E 100%);
  --f-display:Georgia,"Times New Roman",Times,serif;
  --f-body:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --w-max:1240px; --gutter:20px; --radius:2px;
}
@media (min-width:768px){ :root{ --gutter:32px } }
*,*::before,*::after{ box-sizing:border-box }
body{ margin:0; background:var(--j-neutral); color:var(--j-ink); font-family:var(--f-body); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased }
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0 }
ul,ol{ padding:0; list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
em{ font-family:var(--f-display); font-style:italic; font-weight:400 }
:focus-visible{ outline:2px solid var(--j-link); outline-offset:2px }
.shell{ width:100%; max-width:var(--w-max); margin-inline:auto; padding-inline:var(--gutter) }
.grad-text{ color:var(--j-link) }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-text{ background-image:var(--grad-ink); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
  .on-dark .grad-text,.j-hero .grad-text{ background-image:var(--grad-brand) }
}
.kicker{ font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--j-link) }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 22px; font-size:.9rem; font-weight:700; border:1px solid transparent; border-radius:var(--radius); transition:background .15s,color .15s,transform .15s }
.btn-primary{ background:var(--j-deep); color:#fff }
.btn-primary:hover{ background:var(--j-deep-900); transform:translateY(-2px) }
.btn-accent{ background-image:var(--grad-brand); color:#04222F }
.btn-accent:hover{ transform:translateY(-2px) }
.btn-outline{ border-color:var(--j-line-strong) }
.btn-outline:hover{ border-color:var(--j-deep); background:var(--j-ice) }
.btn-outline-light{ border-color:rgba(255,255,255,.5); color:#fff }
.btn-outline-light:hover{ border-color:var(--j-sky); color:#9FE4FF }

/* ---------- shared header ---------- */
.j-header{ position:sticky; inset-block-start:0; z-index:60; background:rgba(255,255,255,.96); backdrop-filter:saturate(150%) blur(10px); border-block-end:1px solid var(--j-line) }
.j-header .shell{ display:flex; align-items:center; gap:var(--s-5); height:76px }
.j-brand{ display:flex; flex-direction:column; align-items:center; gap:3px }
.j-brand img.mark{ height:32px; width:auto }
.j-brand img.word{ height:12px; width:auto }
@media (min-width:768px){ .j-brand img.mark{ height:36px } .j-brand img.word{ height:13px } }
.j-nav{ display:none; margin-inline-start:auto; gap:var(--s-5); font-size:.86rem; font-weight:600; color:var(--j-ink-soft) }
.j-nav a:hover{ color:var(--j-link) }
.j-header .btn{ margin-inline-start:auto }
.j-nav + .btn{ margin-inline-start:0 }
@media (min-width:900px){ .j-nav{ display:flex } }

/* ---------- hub hero ---------- */
.j-hero{ background:var(--grad-deep); color:#fff; padding-block:var(--s-8) var(--s-9) }
.j-hero h1{ font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.05; letter-spacing:-.03em; margin-block-start:var(--s-4) }
.j-hero p{ margin-block-start:var(--s-4); max-width:62ch; color:var(--j-pale) }
.j-search{ display:flex; gap:var(--s-3); margin-block-start:var(--s-7); max-width:620px }
.j-search input{ flex:1; min-height:52px; padding:0 16px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; border-radius:var(--radius); font-size:1rem }
.j-search input::placeholder{ color:rgba(255,255,255,.6) }
.j-search input:focus{ outline:2px solid var(--j-sky); background:rgba(255,255,255,.14) }
.j-search button{ white-space:nowrap }

/* ---------- hub body ---------- */
.j-main{ padding-block:var(--s-8) var(--s-9) }
.j-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-block-end:var(--s-6) }
.j-chip{ border:1px solid var(--j-line-strong); background:#fff; border-radius:999px; padding:0 16px; min-height:44px; display:inline-flex; align-items:center; font-size:.85rem; font-weight:600; color:var(--j-ink-soft) }
.j-chip:hover{ border-color:var(--j-deep); color:var(--j-ink) }
.j-chip.is-active{ background-image:var(--grad-brand); border-color:transparent; color:#04222F }
.j-count{ font-size:.86rem; color:var(--j-ink-soft); margin-block-end:var(--s-5) }
.j-grid{ display:grid; gap:var(--s-6) }
@media (min-width:640px){ .j-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1000px){ .j-grid{ grid-template-columns:repeat(3,1fr) } }
.j-card{ background:#fff; border:1px solid var(--j-line); display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s }
.j-card:hover{ transform:translateY(-4px); box-shadow:0 24px 60px -32px rgba(6,52,78,.38) }
.j-card img{ width:100%; aspect-ratio:16/10; object-fit:cover }
.j-card .body{ padding:var(--s-5); display:grid; gap:var(--s-3); align-content:start; flex:1 }
.j-card .meta{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--j-link); font-weight:700 }
.j-card h3{ font-size:1.12rem; line-height:1.3; letter-spacing:-.02em }
.j-card p{ font-size:.92rem; color:var(--j-ink-soft) }
.j-card .foot{ margin-block-start:auto; padding-block-start:var(--s-3); display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:var(--j-ink-soft) }
.j-draft{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--j-warning); border:1px dashed var(--j-warning); padding:3px 8px }
.j-featured{ background:#fff; border:1px solid var(--j-line); display:grid; margin-block-end:var(--s-8) }
@media (min-width:900px){ .j-featured{ grid-template-columns:1.15fr 1fr } }
.j-featured img{ width:100%; height:100%; min-height:260px; object-fit:cover }
.j-featured .body{ padding:var(--s-7) var(--s-6); display:grid; gap:var(--s-4); align-content:center }
.j-featured h2{ font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.1; letter-spacing:-.03em }
.j-featured p{ color:var(--j-ink-soft); max-width:52ch }
.j-section-title{ font-size:1.05rem; font-weight:700; letter-spacing:.02em; margin-block:var(--s-8) var(--s-5); display:flex; align-items:center; gap:var(--s-4) }
.j-section-title::after{ content:""; flex:1; height:1px; background:var(--j-line) }
.j-topics{ display:flex; flex-wrap:wrap; gap:8px }
.j-topics a{ border:1px solid var(--j-line-strong); background:#fff; border-radius:999px; padding:9px 16px; font-size:.84rem; color:var(--j-ink-soft); min-height:44px; display:inline-flex; align-items:center }
.j-topics a:hover{ border-color:var(--j-link); color:var(--j-link) }
.j-empty{ background:#fff; border:1px dashed var(--j-line-strong); padding:var(--s-7); text-align:center; color:var(--j-ink-soft) }

/* ---------- article ---------- */
.a-crumbs{ font-size:.8rem; color:var(--j-ink-soft); padding-block:var(--s-5) }
.a-crumbs a:hover{ color:var(--j-link) }
.a-head{ padding-block-end:var(--s-6); border-block-end:1px solid var(--j-line) }
.a-head h1{ font-size:clamp(1.8rem,4vw,3rem); line-height:1.08; letter-spacing:-.03em; margin-block-start:var(--s-4) }
.a-head .lede{ margin-block-start:var(--s-5); font-size:1.1rem; color:var(--j-ink-soft); max-width:70ch }
.a-meta{ display:flex; flex-wrap:wrap; gap:var(--s-4); margin-block-start:var(--s-5); font-size:.82rem; color:var(--j-ink-soft) }
.a-draftbar{ margin-block-start:var(--s-6); background:#FFF7E6; border:1px solid #E8C98A; border-inline-start:3px solid var(--j-warning); padding:var(--s-4) var(--s-5); font-size:.9rem; color:#6B4A00 }
.a-cover{ margin-block:var(--s-7) }
.a-cover img{ width:100%; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--j-line) }
.a-layout{ display:grid; gap:var(--s-8); padding-block:var(--s-8) }
@media (min-width:1000px){ .a-layout{ grid-template-columns:minmax(0,7fr) minmax(0,3fr); gap:var(--s-9) } }
.a-body h2{ font-size:clamp(1.25rem,2.2vw,1.6rem); letter-spacing:-.02em; margin-block:var(--s-7) var(--s-3) }
.a-body h3{ font-size:1.08rem; margin-block:var(--s-5) var(--s-2) }
.a-body p{ margin-block-end:var(--s-4); max-width:74ch }
.a-body ul{ display:grid; gap:var(--s-2); margin-block-end:var(--s-5) }
.a-body ul li{ display:grid; grid-template-columns:auto 1fr; gap:10px }
.a-body ul li::before{ content:""; width:14px; height:2px; background-image:var(--grad-brand); margin-block-start:.75em }
.a-tips{ background:var(--j-ice); border:1px solid var(--j-line); padding:var(--s-5) var(--s-6); margin-block:var(--s-6) }
.a-tips p{ font-weight:700; margin-block-end:var(--s-3) }
.a-faq{ margin-block-start:var(--s-8) }
.a-faq details{ border-block-end:1px solid var(--j-line) }
.a-faq summary{ cursor:pointer; padding:var(--s-4) 0; font-weight:600; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; gap:var(--s-4) }
.a-faq summary::-webkit-details-marker{ display:none }
.a-faq summary::after{ content:"+"; font-family:var(--f-mono); color:var(--j-link) }
.a-faq details[open] summary::after{ content:"–" }
.a-faq p{ padding-block-end:var(--s-4); color:var(--j-ink-soft); max-width:74ch }
.a-cta{ background:var(--grad-deep); color:#fff; padding:var(--s-7) var(--s-6); margin-block:var(--s-8) }
.a-cta h3{ font-size:clamp(1.3rem,2.4vw,1.8rem); letter-spacing:-.02em; margin-block-end:var(--s-3) }
.a-cta p{ color:var(--j-pale); margin-block-end:var(--s-5); max-width:60ch }
.a-cta .row{ display:flex; flex-wrap:wrap; gap:var(--s-3) }
.a-disclaimer{ font-size:.85rem; color:var(--j-ink-soft); border-block-start:1px solid var(--j-line); padding-block-start:var(--s-5); margin-block-start:var(--s-7); max-width:80ch }
.a-aside{ display:grid; gap:var(--s-6); align-content:start }
@media (min-width:1000px){ .a-aside{ position:sticky; inset-block-start:100px } }
.a-box{ background:#fff; border:1px solid var(--j-line); padding:var(--s-5) }
.a-box h3{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--j-ink-soft); margin-block-end:var(--s-4) }
.a-box a{ display:flex; align-items:center; min-height:44px; font-size:.94rem; font-weight:600; border-block-end:1px solid var(--j-line) }
.a-box a:last-child{ border-block-end:0 }
.a-box a:hover{ color:var(--j-link) }
.a-rel-grid{ display:grid; gap:var(--s-5); margin-block-start:var(--s-5) }
@media (min-width:640px){ .a-rel-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1000px){ .a-rel-grid{ grid-template-columns:repeat(3,1fr) } }

/* ---------- footer ---------- */
.j-footer{ background:var(--grad-deep); color:var(--j-pale); padding-block:var(--s-8) var(--s-6); margin-block-start:var(--s-9) }
.j-footer .shell{ display:grid; gap:var(--s-6) }
@media (min-width:900px){ .j-footer .shell{ grid-template-columns:1.6fr 1fr 1fr } }
.j-footer h3{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-block-end:var(--s-4) }
.j-footer a{ display:flex; align-items:center; min-height:44px; font-size:.92rem }
.j-footer a:hover{ color:var(--j-sky) }
.j-footer .bottom{ grid-column:1/-1; border-block-start:1px solid rgba(255,255,255,.16); padding-block-start:var(--s-5); font-size:.84rem; display:flex; flex-wrap:wrap; gap:var(--s-5); justify-content:space-between }

/* ---------- floating whatsapp (same behaviour as the homepage) ---------- */
.wa-float{ position:fixed; z-index:70; inset-block-end:24px; inset-inline-end:24px; display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--j-line); border-radius:999px; padding:10px 16px; font-size:.84rem; font-weight:700; box-shadow:0 24px 60px -32px rgba(6,52,78,.38) }
.wa-float svg{ color:var(--j-sky) }
@media (max-width:899px){ .wa-float{ inset-block-end:20px; inset-inline-end:14px; padding:13px } .wa-float span{ display:none } }

/* =========================================================================
   v2 — طبقة "Medical Insights" + الكتل المقالية الجديدة
   (خطوات · بطاقات تقنية · خانات صور المنشأة · جدول مقارنة · ملاحظة تحريرية)
   ========================================================================= */

.j-series-lede{ max-width:78ch; color:var(--j-ink-soft); margin-block:0 var(--s-6); font-size:1rem }
.j-card-insight{ position:relative }
.j-card-insight::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background-image:var(--grad-brand); z-index:2 }
.j-series{ font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:#04222F; background-image:var(--grad-brand); padding:3px 8px }

/* جدول "At a glance" */
.a-compare table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--j-line); margin-block:var(--s-4) var(--s-7) }
.a-compare td{ padding:12px 16px; border-block-end:1px solid var(--j-line); font-size:.94rem; vertical-align:top; width:50% }
.a-compare td:first-child{ color:var(--j-ink-soft) }
.a-compare tr:last-child td{ border-block-end:0 }

/* خطوات مرقّمة (Timeline) */
.a-steps ol{ display:grid; gap:0; margin-block:var(--s-4) var(--s-7) }
.a-steps li{ position:relative; display:grid; gap:4px; padding:var(--s-4) var(--s-4) var(--s-4) var(--s-7); border-inline-start:2px solid var(--j-line) }
.a-steps li:last-child{ border-inline-start-color:transparent }
.a-steps li::before{ content:""; position:absolute; inset-inline-start:-7px; inset-block-start:22px; width:12px; height:12px; border-radius:50%; background-image:var(--grad-brand) }
.st-t{ font-weight:700; font-size:1rem; letter-spacing:-.01em }
.st-d{ color:var(--j-ink-soft); font-size:.93rem }

/* بطاقات التقنية */
.tech-grid{ display:grid; gap:var(--s-4); margin-block:var(--s-4) var(--s-7) }
@media (min-width:640px){ .tech-grid{ grid-template-columns:1fr 1fr } }
.tech-card{ position:relative; background:#fff; border:1px solid var(--j-line); padding:var(--s-5); overflow:hidden }
.tech-card::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background-image:var(--grad-brand) }
.tech-card h3{ font-size:1.04rem; margin-block:6px 0 var(--s-2) }
.tech-card p{ font-size:.92rem; color:var(--j-ink-soft) }
.tech-role{ margin-block-start:var(--s-3); padding-block-start:var(--s-3); border-block-start:1px solid var(--j-line) }

/* خانات صور المنشأة */
.fac-note{ font-size:.9rem; color:var(--j-warning); margin-block-end:var(--s-5) }
.fac-grid{ display:grid; gap:var(--s-4); margin-block:var(--s-4) var(--s-6) }
@media (min-width:640px){ .fac-grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1000px){ .fac-grid{ grid-template-columns:repeat(3,1fr) } }
.fac-slot{ margin:0; aspect-ratio:3/2; display:grid; place-content:center; gap:6px; text-align:center; padding:var(--s-5); background-image:var(--grad-ice); border:1px dashed var(--j-line-strong) }
.fac-name{ font-weight:700; font-size:.95rem; color:var(--j-deep) }
.fac-slot small{ font-size:.74rem; color:var(--j-ink-soft); max-width:30ch }
.fac-slot figcaption{ font-size:.76rem; color:var(--j-link); max-width:32ch }

/* ملاحظة تحريرية (تبقى خارج النشر) */
.a-note{ margin-block-start:var(--s-7); background:#FFF7E6; border:1px solid #E8C98A; border-inline-start:3px solid var(--j-warning); padding:var(--s-5); font-size:.88rem; color:#6B4A00 }
.a-note-t{ font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.7rem; margin-block-end:var(--s-3) }
.a-note p + p{ margin-block-start:var(--s-2) }

/* =========================================================================
   v3 — مبدّل اللغة في المجلة + تنبيه لغة المقال
   ========================================================================= */
.j-lang{ display:flex; align-items:center; gap:2px }
.j-lang .lang-btn{ min-height:44px; padding:6px 8px; font-size:.82rem; font-weight:600; color:var(--j-ink-soft); cursor:pointer }
.j-lang .lang-btn:hover{ color:var(--j-link) }
.j-lang .lang-btn.is-current{ color:var(--j-link); font-weight:700; box-shadow:inset 0 -2px 0 var(--j-sky) }
.j-lang + .btn{ margin-inline-start:0 }
/* إصلاح عيب: كانت أزرار اللغة مخفية على الموبايل ولا توجد قائمة جانبية في المجلة،
   فلم يكن بالإمكان تبديل اللغة إطلاقاً على الهاتف. الآن تظهر دائماً. */
@media (max-width:899px){
  .j-lang{ display:flex }
  .j-header .shell{ gap:var(--s-3) }
  .j-header .btn{ font-size:.76rem; padding:10px 12px; min-height:40px }
  .j-lang .lang-btn{ padding:6px 5px; font-size:.78rem }
}
.a-langnotice{ margin-block-start:var(--s-5); font-size:.86rem; color:var(--j-link); border-inline-start:3px solid var(--j-sky); padding-inline-start:var(--s-3) }
.a-langnotice[hidden]{ display:none }
[dir="rtl"] .j-lang .lang-btn{ letter-spacing:0 }