/* =====================================================================
   PAEDZ V2 0.16.0 — standard articles & tutorials (Module C + E body)
   Loaded on single posts that use template-parts/single-article.php.
   ===================================================================== */

/* ---------- headline: the full header width; the body keeps its reading column ---------- */
.single-article .art-head .art-shell > .art-title { max-width: none; }
.single-article.is-long .art-title { font-size: clamp(1.9rem, 1.15rem + 2vw, 3rem); line-height: 1.38; letter-spacing: 0; text-wrap: balance; }
.single-article.is-long.title-long .art-title { font-size: clamp(1.8rem, 1.15rem + 1.7vw, 2.65rem); line-height: 1.42; }
.single-article.is-long.title-xl .art-title { font-size: clamp(1.6rem, 1.1rem + 1.35vw, 2.3rem); line-height: 1.45; }
.single-article .art-title bdi, .single-article .art-title [dir="ltr"] { unicode-bidi: isolate; }
.single-article .art-head .dek { max-width: 62ch; }
@media (max-width: 640px) {
  .single-article.is-long .art-title { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 1.8rem); line-height: 1.45; }
  .single-article.is-long.title-long .art-title, .single-article.is-long.title-xl .art-title { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.6rem); line-height: 1.5; }
}

/* ---------- cover: image-aware, capped in height (system.css .ed-media) ---------- */
.art-cover--v16 { margin: 0 0 28px; }
.art-cover--v16 .ed-media { display: block; margin-inline: 0 auto; border: 1px solid var(--fr-line); }
.art-cover--v16 figcaption { max-width: 62ch; }

/* ---------- long-form frame: the same family as the news frame, a step quieter ---------- */
.is-long .art-main > .prose { background: var(--fr-bg); border: 1px solid var(--fr-line); border-radius: var(--fr-radius); padding: var(--fr-pad) clamp(18px, 3.6vw, 44px); }
.is-long .art-main > .prose > :first-child { margin-top: 0; }
.is-long .art-main > .prose > :last-child { margin-bottom: 0; }
.is-long .art-summary { border-inline-start: 3px solid var(--red); padding-inline-start: 14px; }
@media (max-width: 640px) {
  .is-long .art-main > .prose { padding: 18px 14px; border-radius: 4px; margin-inline: calc(var(--gutter) * -0.5); }
}

/* ---------- reading rhythm (long-form and tutorials) ---------- */
.is-long .prose :is(h2) { margin-top: 2.2em; padding-top: .9em; border-top: 1px solid var(--fr-line); }
.is-long .prose > h2:first-child { border-top: 0; padding-top: 0; }
.is-long .prose :is(h3) { margin-top: 1.7em; }
.is-long .prose figure { margin-block: 1.8em; }
.is-long .prose figure img { border-radius: 4px; }
.is-long .prose figcaption, .is-long .prose .wp-element-caption { font-size: .875rem; color: var(--fg-3); line-height: 1.7; margin-top: 8px; }
.is-long .prose blockquote:not(.twitter-tweet):not(.paedz-x-embed) { margin: 1.8em 0; padding: .2em 1.1em; border-inline-start: 3px solid var(--red); color: var(--fg); font-size: 1.06em; }
.is-long .prose blockquote cite { display: block; margin-top: .5em; font-size: .85em; font-style: normal; color: var(--fg-3); }
.is-long .prose :is(p, li) :is([dir="ltr"], bdi) { unicode-bidi: isolate; }

/* ---------- tutorials ---------- */
:root { --tut: #3fb6a8; }
.cat.cat-tut { color: var(--tut); }
.is-tut .art-kicker .cat::before { background: var(--tut); }
.tut-upd { color: var(--fg-2); }
.tut-upd time { color: var(--fg); }
.is-tut .art-main > .prose { border-top: 3px solid var(--tut); }
/* numbered steps: an ordered list the writer made */
.is-tut .prose > ol { counter-reset: tstep; list-style: none; padding: 0; margin: 1.6em 0; }
.is-tut .prose > ol > li { counter-increment: tstep; position: relative; padding: 0 3.1em 1.1em 0; margin: 0 0 1.1em; border-bottom: 1px solid var(--fr-line); }
.is-tut .prose > ol > li:last-child { border-bottom: 0; margin-bottom: 0; }
.is-tut .prose > ol > li::before { content: counter(tstep); position: absolute; inset-inline-start: 0; top: .15em; display: grid; place-items: center; width: 2.1em; height: 2.1em; border: 1px solid var(--tut); border-radius: 3px; color: var(--tut); font-family: var(--f-num); font-size: 1.05em; line-height: 1; }
html[dir="ltr"] .is-tut .prose > ol > li { padding: 0 0 1.1em 3.1em; }
/* code */
.is-tut .prose pre, .is-long .prose pre { direction: ltr; text-align: left; overflow-x: auto; margin: 1.4em 0; padding: 14px 16px; background: #050607; border: 1px solid var(--fr-line); border-radius: 4px; font: .9rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #e7e9e3; white-space: pre; }
.is-long .prose :not(pre) > code { direction: ltr; unicode-bidi: isolate; padding: .1em .35em; background: #15181a; border-radius: 3px; font: .9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* notes and warnings the writer marked with a bold label */
.prose .tut-callout { margin: 1.4em 0; padding: 12px 16px; border: 1px solid var(--fr-line); border-inline-start: 3px solid var(--tut); background: rgba(63, 182, 168, .06); border-radius: 3px; }
.prose .tut-warn { border-inline-start-color: var(--amber); background: rgba(226, 160, 58, .07); }
/* requirements list after a «المتطلبات» heading */
.prose .tut-rq { border-top: 0 !important; padding-top: 0 !important; }
.prose .tut-rq + :is(ul, ol) { list-style: none; margin: .8em 0 1.6em; padding: 12px 16px; background: #0f1214; border: 1px solid var(--fr-line); border-radius: 4px; }
.prose .tut-rq + :is(ul, ol) > li { position: relative; padding-inline-start: 1.6em; margin: .35em 0; }
.prose .tut-rq + :is(ul, ol) > li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--tut); font-weight: 800; }
@media (max-width: 640px) {
  .is-tut .prose > ol > li { padding-inline-start: 2.7em; }
}

/* =====================================================================
   0.17.0 — PAEDZ Editorial Hero (inc/editorial-hero.php)
   The figure spans the whole article shell (the same edges as the headline row and the text + side columns).
   fill: controlled crop, 2:1 frame on desktop / 16:9 on phones, focal point = object-position.
   fit:  the complete image centred, height-capped, never wider than its own pixels; the frame behind it is a dark
         panel with a strongly darkened copy of the picture (no glow, no animation).
   ===================================================================== */
.single-article .art-head { padding-bottom: 18px; }
.art-cover.eh { margin: 0 0 30px; }
.eh .eh-frame { position: relative; display: block; overflow: hidden; border-radius: var(--fr-radius, 6px); border: 1px solid var(--fr-line, rgba(255,255,255,.08)); background: #0a0b0d; isolation: isolate; }
.eh--fill .eh-frame { aspect-ratio: 2 / 1; }
.eh--fill .eh-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.eh--fit .eh-frame { display: flex; align-items: center; justify-content: center; min-height: 220px; max-height: 560px; }
.eh--fit .eh-img { position: relative; z-index: 1; display: block; width: auto; height: auto; max-width: min(100%, var(--eh-w, 100%)); max-height: 560px; object-fit: contain; }
.eh .eh-back { position: absolute; inset: -24px; z-index: 0; background-size: cover; background-position: center; filter: blur(26px) brightness(.32) saturate(.85); transform: translateZ(0); }
.eh figcaption { max-width: 72ch; }
@media (max-width: 759px) {
  .art-cover.eh { margin-bottom: 20px; }
  .eh .eh-frame { border-radius: 4px; }
  .eh--fill .eh-frame { aspect-ratio: 16 / 9; }
  .eh--fit .eh-frame { min-height: 0; max-height: 72vh; }
  .eh--fit .eh-img { max-height: min(72vh, 520px); }
}
@media (prefers-reduced-transparency: reduce) { .eh .eh-back { display: none; } }