/* =====================================================================
   الإرسال — what the CMS brings that the static design never drew.
   Additive only: site.css stays the design's own file. Every value leans
   on site.css's tokens.
   ===================================================================== */

/* A quote the desk writes in the editor is a plain <blockquote> (the editor
   keeps no classes): the design's .st-q, word for word. */
.prose blockquote { margin: 6px 0 30px; }
.prose blockquote p { margin: 0 0 6px; font-family: var(--devlo-font, var(--f-display)); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); font-weight: 700; line-height: 1.6; color: var(--ink); text-wrap: balance; }
.prose blockquote footer, .prose blockquote cite { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-style: normal; color: var(--muted); }
.prose blockquote footer::before, .prose blockquote cite::before { content: ""; width: 3px; height: 1em; background: var(--red); transform: skewX(calc(var(--cut) * -1)); }

/* Lists, links and pictures in a story's words, at the text's own measure
   (a list the design styles itself, ul.roads, keeps its own). */
.prose ul:not([class]), .prose ol:not([class]) { margin: 0 0 1.15em; padding-inline-start: 1.4em; font-size: var(--fs-read); line-height: 2.05; color: var(--text); }
.prose ul:not([class]) { list-style: square; }
.prose ol:not([class]) { list-style: decimal; }
/* Only the words an editor wrote (a story's body, a «محتوى الصفحات» text):
   the design's own links inside .prose (the places bars, a.inline) keep theirs. */
.st-body .prose a:not([class]), .st-main .prose a:not([class]), .pc-prose a:not([class]) { color: var(--blue); text-decoration: underline; text-underline-offset: .2em; }
.prose img, .prose video, .prose iframe { max-width: 100%; height: auto; margin: 0 0 1.15em; }
.prose figure { margin: 0 0 1.15em; }
.prose figcaption { margin-top: 8px; font-size: var(--fs-meta); color: var(--muted); }

/* The player: Vidstack's <media-player> fills the design's frame, and the
   <video> inside it is the design's own (.vp-frame video, site.css). */
.vp-frame media-player, .vp-frame media-provider { position: absolute; inset: 0; display: block; }