/* المدونة (/blog/) والمقالات — إضافة على تصميم الأصل بمكوناته وألوانه (متغيرات site.css). مكتوب يدويًا.
   المقالة نفسها بمكونات صفحات الأصل: page-hero وdef-box وarticle/toc/content وtable-wrap/data وsteps-v وblocks وscenario وcallout وfaq-list وlinks-grid وcta-band. */

/* رأس المقالة: التاريخ ومدة القراءة */
.post-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:14.5px;font-weight:600;color:var(--text-2)}
.post-meta span::before{content:"·";margin-inline-end:18px;color:var(--line)}

/* نص المقالة: القوائم دون صنف، والتمهيد، ووسم المثال */
.content .post-intro{padding-bottom:40px}
.content ul:not([class]),.content ol:not([class]){margin:14px 0 0;padding-inline-start:22px;color:var(--text-2);font-size:16.5px;display:grid;gap:6px;max-width:74ch}
.content li::marker{color:var(--blue)}
.content ul:not([class]) + p,.content ol:not([class]) + p,.content .table-wrap + p,.content .steps-v + p,.content .blocks + p,.content .callout + p,.content .scenario + p,.content .ticks + p{margin-top:18px}
.content h3 + ul,.content h3 + ol{margin-top:6px}
.content .table-wrap caption{caption-side:top;text-align:right;padding:12px 16px 4px;font-family:var(--display);font-weight:600;color:var(--ink);font-size:15px}
.content .scenario + h3,.content .table-wrap + h3,.content .callout + h3{margin-top:30px}
.content p a:not(.btn),.content li a:not(.btn),.content td a:not(.btn),.content .callout a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.content .mid-cta{margin:28px 0 0}
.ex-tag{display:inline-block;background:var(--yellow-soft);color:#6B4E00;border:1px solid var(--yellow);border-radius:6px;padding:0 8px;font-size:13px;font-weight:700;vertical-align:middle;margin-inline-end:6px}
.scenario .ex-tag{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* /blog/ */
.blog-sec{padding-block:64px}
.blog-sec.alt{background:var(--paper);border-top:1px solid var(--line)}
.blog-sec h2{font-size:clamp(24px,2.5vw,32px);font-weight:800;margin-bottom:22px}
.blog-empty{max-width:880px;margin-top:0}
.post-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.post-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff;transition:border-color .2s}
.post-card:hover{border-color:var(--blue)}
.post-card .cat{align-self:flex-start;background:var(--blue-soft);color:var(--blue);border-radius:20px;padding:2px 11px;font-size:13px;font-weight:700}
.post-card b{font-family:var(--display);color:var(--ink);font-size:17.5px;line-height:1.5}
.post-card p{font-size:15px;color:var(--text-2);flex:1}
.post-card .more{font-size:14px;font-weight:700;color:var(--blue)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.cat-block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.cat-block h3{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:17px}
.cat-block h3 span{background:var(--blue-soft);color:var(--blue);border-radius:20px;padding:0 10px;font-size:13px}
.cat-block ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;font-size:15px}
.cat-block a{text-decoration:none;color:var(--text)}
.cat-block a:hover{color:var(--blue)}

@media (max-width:1080px){.post-cards,.cat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.post-cards,.cat-grid{grid-template-columns:1fr}.blog-sec{padding-block:48px}.content ul:not([class]),.content ol:not([class]){font-size:16px}}

/* قائمة ticks في الأصل display:flex، فيصير أي <strong> أو <a> داخل البند عنصرًا مرنًا مستقلًا ويتجاوز العرض على الجوال.
   في المقالات فقط: البند كتلة نصية عادية والعلامة الخضراء موضعها مطلق. */
.content .ticks li{display:block;position:relative;padding-inline-start:30px}
.content .ticks li::before{position:absolute;inset-inline-start:0;top:6px}