/* المدونة (/blog/) والمقالات وقسم المقالات في خريطة الموقع — إضافة على الأصل بمكوناته وألوانه (مكتوبة يدويًا). */

/* بطاقات المقالات في /blog/ */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pcard{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;transition:border-color .2s,transform .15s}
.pcard:hover{border-color:var(--blue);transform:translateY(-2px)}
.pcard small{align-self:flex-start;background:var(--mist);color:var(--blue-d);border-radius:20px;padding:2px 11px;font-size:13px;font-weight:600}
.pcard b{font-family:var(--f-display);font-size:18px;font-weight:600;line-height:1.55;color:var(--navy)}
.pcard p{font-size:15.5px;color:var(--slate);flex:1}
.pcard .more{display:flex;align-items:center;gap:6px;color:var(--blue-d);font-weight:600;font-size:15px}
.pcard .more svg{width:16px;height:16px}
.blog-empty{max-width:820px}
#latest:has(.blog-empty){padding-bottom:16px}
#latest .sec-head{margin-bottom:34px}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.cat-block{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.cat-block h3{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:17.5px}
.cat-block h3 span{background:var(--mist);color:var(--blue-d);border-radius:20px;padding:0 10px;font-size:13px;font-family:var(--f-body)}
.cat-block ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;font-size:15px;color:var(--slate)}
.cat-block a:hover{color:var(--blue-d)}

/* رأس المقالة */
.post-hero h1{font-size:clamp(28px,3.5vw,44px)}
.post-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px;font-size:14px;font-weight:600;color:var(--slate)}
.post-meta li{background:#fff;border:1px solid var(--line);border-radius:20px;padding:3px 13px}
.post-meta li.cat{background:var(--mist);border-color:var(--sky);color:var(--blue-d)}

/* المقالة: النص وفهرس المحتويات */
.art-sec{padding-block:64px 80px}
.art{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start}
.art-side{position:sticky;top:100px}
.art-toc{background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.art-toc b{display:block;font-family:var(--f-display);font-weight:600;color:var(--navy);font-size:15px;margin-bottom:8px}
.art-toc ol{margin:0;padding-inline-start:20px;display:grid;gap:6px;font-size:14.5px;color:var(--slate)}
.art-toc a:hover{color:var(--blue-d)}
.prose{font-size:17.5px;line-height:1.95}
.prose > :first-child{margin-top:0}
.prose h2{scroll-margin-top:100px}
.prose ol{padding-inline-start:22px;margin:0 0 18px}
.prose li::marker{color:var(--blue)}
.prose a:not(.btn){color:var(--blue-d);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--navy)}
.prose .tw{margin:8px 0 24px}
.prose .tbl{font-size:15px}
.prose .callout,.prose .answer{margin:0 0 24px}
.prose .answer{border-right:4px solid var(--green);background:var(--green-bg);border-radius:12px;padding:18px 22px;font-size:17px}
.prose .answer strong{font-family:var(--f-display);font-weight:600;color:var(--navy);display:block;margin-bottom:4px}
.prose blockquote{margin:0 0 20px;border-right:4px solid var(--sky);padding:6px 18px;color:var(--slate)}
.prose .post-faq{margin:6px 0 10px}
.prose .faq details > div p{margin:0 0 10px;color:var(--slate)}
.prose .faq details > div p:last-child{margin-bottom:0}

/* خريطة الموقع: قسم مقالات المدونة */
#blog .sec-head{margin-bottom:28px}

@media (max-width:1180px){.pcards,.cat-grid{grid-template-columns:repeat(2,1fr)}.art{grid-template-columns:minmax(0,1fr);gap:28px}.art-side{position:static;order:-1}}
@media (max-width:760px){.pcards,.cat-grid{grid-template-columns:1fr}.art-sec{padding-block:40px 56px}.prose{font-size:17px}}