/* Article content blocks — يُستخدم في المحرر والمعاينة والقالب العام */
.article-content{--c-info:#0d6efd;--c-tip:#198754;--c-warning:#f59f00;--c-danger:#dc3545;--c-note:#6c757d;--c-success:#20c997;--c-code-bg:#0f172a;--c-code-fg:#e2e8f0;--c-border:rgba(128,128,128,.3);font-size:1.05rem;line-height:1.85;overflow-wrap:anywhere}
.article-content h2{font-size:1.65rem;margin:2.2rem 0 1rem;padding-bottom:.4rem;border-bottom:1px solid var(--c-border);scroll-margin-top:90px}
.article-content h3{font-size:1.3rem;margin:1.8rem 0 .8rem;scroll-margin-top:90px}
.article-content h4{font-size:1.1rem;margin:1.4rem 0 .6rem;scroll-margin-top:90px}
.article-content p{margin:0 0 1.1rem}
.article-content img,.article-content video{max-width:100%;height:auto;border-radius:.6rem}
.article-content a{text-decoration:underline;text-underline-offset:3px}
.article-content blockquote{margin:1.4rem 0;padding:.8rem 1.1rem;border-inline-start:4px solid var(--c-info);background:rgba(13,110,253,.06);border-radius:.4rem}
.article-content :not(pre)>code{background:rgba(128,128,128,.18);padding:.12em .38em;border-radius:.3rem;font-size:.9em;direction:ltr;unicode-bidi:embed}
.article-content pre{position:relative;direction:ltr;text-align:left;background:var(--c-code-bg);color:var(--c-code-fg);border-radius:.6rem;padding:2.4rem 1rem 1rem;margin:1.4rem 0;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:.9rem;line-height:1.6;white-space:pre}
.article-content pre::before{content:attr(data-lang);position:absolute;top:0;left:0;padding:.3rem .8rem;font:600 .72rem/1.4 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;background:rgba(255,255,255,.06);border-radius:.6rem 0 .6rem 0}
.article-content pre code{background:none;padding:0;color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:inherit;display:block}
.article-content pre.terminal::before{content:"terminal"}
.article-content pre.terminal code::before{content:"$ ";color:#22c55e}
.copy-btn{position:absolute;top:.35rem;right:.5rem;border:0;border-radius:.4rem;padding:.2rem .6rem;font-size:.75rem;background:rgba(255,255,255,.12);color:#e2e8f0;cursor:pointer}
.copy-btn:hover{background:rgba(255,255,255,.25)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4rem 0}
.article-content table{width:100%;border-collapse:collapse;min-width:420px}
.article-content th,.article-content td{border:1px solid var(--c-border);padding:.55rem .8rem;text-align:start;vertical-align:top}
.article-content th{background:rgba(128,128,128,.12)}
.callout{margin:1.4rem 0;padding:.9rem 1.1rem;border-radius:.6rem;border-inline-start:5px solid var(--c-note);background:rgba(108,117,125,.1)}
.callout>strong{display:block;margin-bottom:.25rem;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.callout>p:last-child{margin-bottom:0}
.callout-info{border-color:var(--c-info);background:rgba(13,110,253,.08)}.callout-info>strong{color:var(--c-info)}
.callout-tip{border-color:var(--c-tip);background:rgba(25,135,84,.09)}.callout-tip>strong{color:var(--c-tip)}
.callout-warning{border-color:var(--c-warning);background:rgba(245,159,0,.11)}.callout-warning>strong{color:#b77700}
.callout-danger{border-color:var(--c-danger);background:rgba(220,53,69,.09)}.callout-danger>strong{color:var(--c-danger)}
.callout-success{border-color:var(--c-success);background:rgba(32,201,151,.1)}.callout-success>strong{color:#0f9d77}
.accordion-block{border:1px solid var(--c-border);border-radius:.6rem;margin:1rem 0;padding:.2rem 1rem}
.accordion-block summary{cursor:pointer;font-weight:600;padding:.6rem 0}
.video-embed{position:relative;aspect-ratio:16/9;margin:1.4rem 0;border-radius:.6rem;overflow:hidden;background:#000}
.video-embed iframe,.video-embed video{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem;margin:1.4rem 0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.content-btn{display:inline-block;padding:.55rem 1.2rem;border-radius:.5rem;background:var(--c-info);color:#fff!important;text-decoration:none!important;font-weight:600}
.content-btn.download::before{content:"\2B07\00a0"}
.article-content hr{margin:2rem 0;border:0;border-top:1px solid var(--c-border)}
[data-bs-theme=dark] .article-content,[data-theme=dark] .article-content{--c-border:rgba(255,255,255,.18)}
[data-bs-theme=dark] .article-content .callout-warning>strong,[data-theme=dark] .article-content .callout-warning>strong{color:#ffc107}
