/* ============================================================
   مجلة عالم المجوهرات — magazine.css
   المرحلة ٧: نظام الصور الموحّد والبنية التحريرية.

   تُحمَّل هذه الورقة بعد main.css وeditorial.css وsections.css،
   فهي آخر كلمة في التعارض. وهذا مقصود: قسمها الأخير يُلغي القواعد
   التي كانت تفرض على الصورة الواحدة ستّ نسب مختلفة.

   لا لون جديد هنا ولا خط جديد. كل ما دونه يستعمل رموز الهوية
   الموجودة في main.css — الأبيض الدافئ والعاجي والحبري والذهبي
   الوردي — لأن المطلوب إصلاح نظام العرض لا تغيير الهوية.
   ============================================================ */

:root {
  /* عمود القراءة: 680–760 بكسل كما تقتضي الراحة البصرية للعربية. */
  --w-read:    clamp(20rem, 92vw, 46rem);   /* ≈ 736px */
  --w-wide:    1100px;
  --w-page:    var(--container, 1280px);
  --w-embed:   620px;

  /* خلفية أسطح المنتجات: عاجيّ الهوية نفسه، لا رمادي غريب. */
  --c-product-bg: var(--c-ivory, #F4EFE6);

  --sp-block:  clamp(3.5rem, 2.6rem + 3.4vw, 6.5rem);
  --sp-tight:  clamp(2rem, 1.6rem + 1.8vw, 3.5rem);
}

/* ============================================================
   ١. نظام الصور الموحّد
   ------------------------------------------------------------
   أربعة استخدامات لا خامس لها. من احتاج نسبةً غيرها فقد أخطأ
   في اختيار الاستخدام، لا في اختيار النسبة.
   ============================================================ */

.wm {
  display: block;
  position: relative;
  inline-size: 100%;
}

/* --- طبيعي: النسبة الأصلية، بلا إطار وبلا قص. --- */
.wm--natural > img,
.wm--natural-wide > img {
  inline-size: 100%;
  block-size: auto;          /* الصورة تحدّد ارتفاعها بنفسها. */
  display: block;
  object-fit: fill;          /* لا قص إطلاقاً — الأبعاد أصلية. */
  border-radius: var(--radius-sm, 3px);
}

/* --- المقصوصة: إطار بنسبة ثابتة، والصورة تملؤه من نقطة تركيزها. --- */
.wm__frame {
  position: relative;
  inline-size: 100%;
  overflow: hidden;
  background: var(--c-stone);
  border-radius: var(--radius-sm, 3px);
}

.wm__frame > img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  object-fit: cover;

  /*
   * نقطة التركيز. الوسط افتراضاً، ويكتبها القالب كمتغيّرين على .wm
   * حين تختلف — فصورة وجه تُحفَظ بـ 50% 20% وصورة ساعة بـ 50% 55%،
   * وتبقى محفوظة في كل مواضع الصورة لا في موضع واحد.
   */
  object-position: var(--wm-x, 50%) var(--wm-y, 50%);
}

.wm--card  .wm__frame,
.wm--card-lead .wm__frame { aspect-ratio: 3 / 2; }

/*
 * `frame` وحده بلا نسبة هنا: نسبته تأتي من صنف الارتفاع الذي اختاره
 * المحرر في بلوك الصورة، ولا افتراض له من عندنا.
 */
.wm--thumb .wm__frame     { aspect-ratio: 1 / 1; }
.wm--hero  .wm__frame     { aspect-ratio: 16 / 9; }

.wm--empty .wm__frame {
  background: linear-gradient(135deg, var(--c-stone), var(--c-linen));
}

.wm-link { display: block; }

/* --- صورة منتج: تُعرض كاملة، لا تُقصّ. --- */
.wm-product {
  aspect-ratio: 1 / 1;
  inline-size: 100%;
  background: var(--c-product-bg);
  border-radius: var(--radius-sm, 3px);
  display: grid;
  place-items: center;
  padding: 8%;
  overflow: hidden;
}

.wm-product__img {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;       /* خاتم صغير على خلفية بيضاء يبقى خاتماً. */
}

.wm-product--empty { background: var(--c-stone); }

/* ============================================================
   ٢. أغلفة وأسطح عامة
   ============================================================ */

.wrap {
  inline-size: min(100% - 2.5rem, var(--w-page));
  margin-inline: auto;
}

.wrap--read   { inline-size: min(100% - 2.5rem, var(--w-read)); }
.wrap--narrow { inline-size: min(100% - 2.5rem, 900px); }

.wsec { padding-block: var(--sp-block); }
.wsec--tight { padding-block: var(--sp-tight); }

.wsec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-block-end: clamp(1.75rem, 3vw, 2.75rem);
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--c-border);
}

.wsec__title {
  /*
   * عنوان القسم اسمٌ لا وسم. كان clamp(1.35→2rem) فبدا شارةً صغيرة فوق
   * شبكة، وضاعت معه هوية المجلة — القارئة لا ترى أقساماً بل بطاقات.
   */
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
}

.wsec__lead {
  color: var(--c-muted);
  font-size: var(--fs-small);
  margin-block-start: 0.5rem;
  max-inline-size: 56ch;
}

.wsec__more {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  color: var(--c-charcoal);
  white-space: nowrap;
  padding-block-end: 2px;
  border-block-end: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.wsec__more:hover {
  color: var(--c-accent);
  border-block-end-color: var(--c-accent-line);
}

.wgrid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .wgrid--2, .wgrid--3, .wgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .wgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.wbtn {
  display: inline-block;
  padding: 0.85rem 2rem;
  border: 1px solid var(--c-border);
  font-size: var(--fs-small);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.wbtn:hover { border-color: var(--c-accent-line); color: var(--c-accent); }

.wempty {
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}

.wempty h2 { font-size: var(--fs-h3); margin-block-end: 0.75rem; }
.wempty p  { color: var(--c-muted); margin-block-end: 1.75rem; }

/* ============================================================
   ٢.١ الهيدر فوق سطح فاتح
   ------------------------------------------------------------
   لا سطر واحد هنا يغيّر بنية الهيدر أو شعاره أو ألوانه. كل ما نفعله
   أن نمنحه — على الأسطح الفاتحة وحدها — الهيئة التي يرتديها أصلاً
   بعد التمرير: نفس اللون، نفس التمويه، نفس الشعار الأبيض. الفرق
   الوحيد أنه يرتديها من أول بكسل لا بعد 24 بكسل من التمرير، لأن ما
   تحته لم يعد بطلاً داكناً يملأ الشاشة.

   ثم نُفسح للمحتوى مقدارَ ارتفاع الشريط المثبّت، فلا يمرّ تحته.
   ============================================================ */

.woj-surface-light .header {
  background: rgba(20, 16, 13, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.woj-surface-light .site-main { padding-block-start: 84px; }

@media (max-width: 767px) {
  .woj-surface-light .site-main { padding-block-start: 72px; }
}

/* ============================================================
   ٣. بطاقة المقالة
   ============================================================ */

.wcard { position: relative; }

.wcard__link {
  display: block;
  block-size: 100%;
}

.wcard__media { margin-block-end: 1.1rem; }

.wcard__media .wm__frame > img {
  transition: transform var(--t-med, .7s) var(--ease);
}

/*
 * التكبير الخفيف مسموح هنا وحده: بطاقة، على سطح المكتب، بمؤشّر فأرة.
 * لا على الغلاف، ولا داخل المقالة، ولا على معرض، ولا على منتج، ولا على
 * الجوال — القص هناك خسارة صافية بلا مقابل.
 */
@media (hover: hover) and (min-width: 768px) {
  .wcard__link:hover .wcard__media .wm__frame > img { transform: scale(1.03); }
}

.wcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.wcard__cat {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.wcard__title {
  font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.35rem);
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
  transition: color var(--t-fast) var(--ease);
}

.wcard__link:hover .wcard__title { color: var(--c-accent); }

.wcard__dek {
  color: var(--c-charcoal);
  font-size: var(--fs-small);
  line-height: 1.85;
  margin: 0;
}

.wcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--c-muted);
  margin-block-start: 0.25rem;
}

.wcard__meta span + span::before {
  content: "·";
  margin-inline-end: 0.75rem;
  color: var(--c-accent-line);
}

/* بطاقة رئيسية داخل قسم: أكبر حجماً، والنسبة نفسها. */
.wcard--lead .wcard__title {
  font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.5rem);
  font-weight: 300;
  line-height: 1.3;
}

.wcard--lead .wcard__dek { font-size: 1rem; }

@media (min-width: 1024px) {
  .wcard--lead .wcard__link {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    align-items: center;
    gap: clamp(2rem, 3vw, 3.5rem);
  }

  .wcard--lead .wcard__media { margin-block-end: 0; }
}

/* ============================================================
   ٤. الهيـرو
   ------------------------------------------------------------
   ثلاثة أنواع بسطحٍ واحد. والنص دائماً بجانب الصورة أو أسفلها،
   لا فوقها — صور المجوهرات فاتحة غالباً، والنص عليها يحتاج طبقة
   تعتيم تُفسد الصورة التي وُضعت لتُرى.
   ============================================================ */

.whero {
  padding-block: clamp(1.5rem, 1.2rem + 1.6vw, 3rem) clamp(2.5rem, 2rem + 2.4vw, 4.5rem);
  border-block-end: 1px solid var(--c-border);
}

.whero__media {
  display: block;
  position: relative;
}

.whero__media .wm__frame {
  aspect-ratio: 16 / 9;

  /*
   * سقفٌ لا أرضية: الهيـرو يبلغ 70vh على الشاشات العريضة ولا يتجاوزها.
   * البطل بارتفاع الشاشة الكامل يُخفي أن للصفحة بقيّة، وهو ما جعل
   * الرئيسية السابقة تبدو صفحة هبوط لا مجلة.
   */
  max-block-size: 70vh;
  min-block-size: 0;
}

@media (min-width: 1024px) {
  .whero__media .wm__frame { min-block-size: 55vh; }
}

.whero__body { padding-block-start: clamp(1.5rem, 2.5vw, 2.5rem); }

.whero__cat {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: 1rem;
}

.whero__title {
  font-size: clamp(2rem, 1.35rem + 2.8vw, 3.75rem);
  font-weight: 300;
  line-height: 1.18;
  margin: 0;
  max-inline-size: 20ch;
}

.whero__title a { transition: color var(--t-fast) var(--ease); }
.whero__title a:hover { color: var(--c-accent); }

.whero__dek {
  color: var(--c-charcoal);
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.2rem);
  margin-block-start: 1.1rem;
  max-inline-size: 56ch;
  line-height: 1.9;
}

.whero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--c-muted);
  margin-block-start: 1.25rem;
}

.whero__meta span + time::before,
.whero__meta > * + *::before {
  content: "·";
  margin-inline-end: 1rem;
  color: var(--c-accent-line);
}

.whero__cta {
  display: inline-block;
  margin-block-start: 1.6rem;
  padding: 0.85rem 2rem;
  border: 1px solid var(--c-border);
  font-size: var(--fs-small);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.whero__cta:hover { border-color: var(--c-accent-line); color: var(--c-accent); }

@media (min-width: 1024px) {
  .whero__link,
  .whero--image .wrap,
  .whero--video .wrap {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: center;
  }

  .whero--image .whero__body,
  .whero--video .whero__body { padding-block-start: 0; }
}

/* --- الهيـرو النصّي: بلا صورة، على سطح من ألوان الهوية. --- */
.whero--text .whero__body {
  background: var(--c-ivory);
  padding: clamp(2.5rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 1.2rem + 3vw, 4rem);
  border-inline-start: 3px solid var(--c-accent-line);
}

.whero--text .whero__title { max-inline-size: 24ch; }

/* --- واجهة الفيديو --- */
.wvideo { position: relative; }

.wvideo__play {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: grid;
  place-items: center;
  background: rgba(23, 19, 16, 0.18);
  border: 0;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.wvideo__play:hover { background: rgba(23, 19, 16, 0.3); }

.wvideo__icon {
  inline-size: clamp(56px, 8vw, 78px);
  block-size: clamp(56px, 8vw, 78px);
  border-radius: 50%;
  background: rgba(250, 247, 241, 0.92);
  display: block;
  position: relative;
}

.wvideo__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  border-block: 11px solid transparent;

  /* المثلث يشير يساراً في RTL كما يشير يميناً في LTR — اتجاه التشغيل لا اتجاه القراءة. */
  border-inline-start: 18px solid var(--c-ink);
  border-inline-end: 0;
}

html[dir="rtl"] .wvideo__icon::after { transform: translate(-50%, -50%) rotate(180deg); }

.wvideo.is-playing { aspect-ratio: 16 / 9; background: var(--c-dark); }

.wvideo__el {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* ============================================================
   ٤.١ القصة البارزة
   ------------------------------------------------------------
   تخطيط مختلف، ونسبة صورة واحدة. الجهة تتبدّل بين قسم وآخر —
   وهذا وحده يكفي كي لا تبدو صفحتان متطابقتين.
   ============================================================ */

.wfeature {
  background: var(--c-ivory);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.wfeature__link { display: grid; }

.wfeature__body { padding: clamp(1.5rem, 1.2rem + 2.4vw, 3rem); }

.wfeature__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: 0.75rem;
}

.wfeature__cat { font-size: 0.8rem; color: var(--c-muted); }

.wfeature__title {
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2.25rem);
  font-weight: 300;
  line-height: 1.32;
  margin: 0.45rem 0 0;
  transition: color var(--t-fast) var(--ease);
}

.wfeature__link:hover .wfeature__title { color: var(--c-accent); }

.wfeature__dek {
  color: var(--c-charcoal);
  margin-block-start: 0.9rem;
  line-height: 1.9;
  max-inline-size: 52ch;
}

.wfeature__cta {
  display: inline-block;
  margin-block-start: 1.4rem;
  font-size: var(--fs-small);
  color: var(--c-accent);
  border-block-end: 1px solid var(--c-accent-line);
  padding-block-end: 3px;
}

@media (min-width: 768px) {
  .wfeature__link { grid-template-columns: 1fr 1fr; align-items: center; }
  .wfeature--flip .wfeature__media { order: 2; }
}

/* ============================================================
   ٤.٢ عرض المزيد
   ============================================================ */

.wmore {
  display: flex;
  justify-content: center;
  margin-block-start: clamp(2rem, 3vw, 3rem);
}

.wmore__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2.5rem;
  min-block-size: 44px;
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.wmore__btn:hover:not(:disabled) { border-color: var(--c-accent-line); color: var(--c-accent); }
.wmore__btn:disabled { cursor: default; color: var(--c-muted); }
.wmore__btn.is-done { border-style: dashed; }

.wmore__spin {
  inline-size: 14px;
  block-size: 14px;
  border: 2px solid var(--c-accent-line);
  border-block-start-color: transparent;
  border-radius: 50%;
  display: none;
}

.wmore__btn.is-busy .wmore__spin { display: block; animation: woj-spin 0.7s linear infinite; }

@keyframes woj-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .wmore__btn.is-busy .wmore__spin { animation-duration: 2s; }
}

.wmore__fallback {
  font-size: var(--fs-small);
  color: var(--c-accent);
  border-block-end: 1px solid var(--c-accent-line);
}

/* ============================================================
   ٥. مختارات التحرير
   ============================================================ */

.wpicks__grid {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}

.wpicks__side {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
}

@media (min-width: 900px) {
  .wpicks__grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .wpicks__side { grid-template-columns: 1fr; }

  /* البطاقة الكبرى هنا عمودية لا أفقية — العمود المجاور ضيّق. */
  .wpicks__main .wcard__link { display: block; }
  .wpicks__main .wcard__media { margin-block-end: 1.25rem; }
}

/* ============================================================
   ٦. كتلة قسم على الرئيسية
   ============================================================ */

.wsection__lead { margin-block-end: clamp(2rem, 3vw, 3.25rem); }
.wsection__star { margin-block-start: clamp(2.5rem, 4vw, 4rem); }

/* الإيقاع الثاني: البطاقات أولاً، فالقصة البارزة تُغلق الكتلة. */
.wsection--grid .wmore { margin-block-start: clamp(1.5rem, 2.5vw, 2.25rem); }

/*
 * قسم واحد فقط يخالف الإيقاع: سطح عاجيّ ورؤوس بطاقات أوسع قليلاً.
 * لا نسبة صورة جديدة ولا شبكة مختلفة — الاختلاف في المسافة واللون
 * فقط، وهذا يكفي لكسر الرتابة بلا تفكيك النظام.
 */
.wsection--alt {
  background: var(--c-ivory);
}

/* ============================================================
   ٧. حديث المجلة (أخبار سريعة)
   ============================================================ */

.wnews__grid {
  display: grid;
  gap: 0 clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
}

/*
 * عمودان متوازيان على سطح المكتب، في كل عمود خبران أو ثلاثة. القائمة
 * العمودية الطويلة كانت تجعل الكتلة تبدو أرشيفاً؛ العمودان يجعلانها
 * تُقرأ في نظرة واحدة بلا تمرير.
 */
@media (min-width: 900px) {
  .wnews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wnews__item { border-block-end: 1px solid var(--c-border); }

/* آخر خبر في كل عمود بلا خط — لا آخر خبر في الكتلة وحده. */
@media (min-width: 900px) {
  .wnews__grid > .wnews__item:nth-last-child(-n+2):nth-child(odd),
  .wnews__grid > .wnews__item:last-child { border-block-end: 0; }
}

@media (max-width: 899px) {
  .wnews__item:last-child { border-block-end: 0; }
}

.wnews__link {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.25rem;
  align-items: center;
  padding-block: 1.25rem;
}

.wnews__media { inline-size: 96px; }

.wnews__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-inline-size: 0;
}

.wnews__cat {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.wnews__title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  margin: 0;
  transition: color var(--t-fast) var(--ease);
}

.wnews__link:hover .wnews__title { color: var(--c-accent); }

.wnews__date { font-size: 0.78rem; color: var(--c-muted); }

@media (min-width: 768px) {
  .wnews__link { grid-template-columns: 112px 1fr; }
  .wnews__media { inline-size: 112px; }
}

/* ============================================================
   ٨. المنتجات
   ============================================================ */

.wshop__title {
  font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 400;
  margin: 0 0 0.5rem;
}

.wshop__note {
  color: var(--c-muted);
  font-size: var(--fs-small);
  margin: 0 0 1.75rem;
  max-inline-size: 60ch;
}

.wshop__grid {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .wshop__grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wshop__grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.wproduct {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.wproduct__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
}

.wproduct__brand {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.wproduct__name {
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

.wproduct__price {
  font-size: var(--fs-small);
  color: var(--c-charcoal);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wproduct__store { color: var(--c-muted); }

/*
 * الوسم صغير ومحايد عمداً. القارئ يجب أن يعرف أن أمامه رابط عمولة،
 * لكن المجلة لا تصرخ به ولا تُخفيه — كلاهما إخلال.
 */
.wproduct__tag {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--c-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.7rem;
  margin-block-start: 0.35rem;
}

.wproduct__cta {
  margin-block-start: 0.6rem;
  font-size: var(--fs-small);
  color: var(--c-ink);
  border-block-end: 1px solid var(--c-border);
  padding-block-end: 3px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.wproduct__cta:hover { color: var(--c-accent); border-block-end-color: var(--c-accent-line); }

.wshop__disclosure {
  margin-block-start: 1.5rem;
  font-size: 0.78rem;
  color: var(--c-muted);
}

/* كتلة داخل المقالة: تخرج قليلاً عن عمود القراءة لتتنفّس، ولا تُبهر. */
.wshop--inline {
  margin-block: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-block: 1px solid var(--c-border);
}

.wshop-sec { background: var(--c-ivory); }
.wshop-page .wshop__grid { row-gap: clamp(2rem, 3vw, 3rem); }

/* ============================================================
   ٩. صفحة القسم
   ============================================================ */

.wcat__head {
  padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem) clamp(1.5rem, 2vw, 2.5rem);
  border-block-end: 1px solid var(--c-border);
}

.wcat__title {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  font-weight: 300;
  margin: 0.75rem 0 0;
}

.wcat__desc {
  color: var(--c-charcoal);
  margin-block-start: 0.9rem;
  max-inline-size: 62ch;
  line-height: 1.9;
}

.wcat__subs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-block-start: 1.75rem;
  font-size: var(--fs-small);
}

.wcat__subs a {
  color: var(--c-muted);
  padding-block-end: 3px;
  border-block-end: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.wcat__subs a:hover,
.wcat__subs a.is-current {
  color: var(--c-ink);
  border-block-end-color: var(--c-accent-line);
}

.wcat__lead { padding-block-end: 0; }

/* دليل التحرير */
.wguide__card {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: center;
  background: var(--c-ivory);
  padding: clamp(1.25rem, 2.5vw, 2.25rem);
  border-radius: var(--radius-card);
}

.wguide__label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.wguide__title {
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 400;
  line-height: 1.45;
  margin: 0.4rem 0 0;
}

.wguide__dek { color: var(--c-charcoal); margin-block-start: 0.75rem; font-size: var(--fs-small); }

.wguide__cta {
  display: inline-block;
  margin-block-start: 1.1rem;
  font-size: var(--fs-small);
  color: var(--c-accent);
}

@media (min-width: 768px) {
  .wguide__card { grid-template-columns: 1fr 1.2fr; }
}

/* ============================================================
   ١٠. عمود القراءة والكتل داخل المقالة
   ============================================================ */

.wart__head { padding-block: clamp(1.75rem, 1.4rem + 1.6vw, 3rem) 0; }

.wart__cat {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-start: 1.5rem;
}

.wart__title {
  font-size: clamp(1.7rem, 1.25rem + 2vw, 2.75rem);
  font-weight: 300;
  line-height: 1.3;
  margin: 0.85rem 0 0;
}

.wart__dek {
  color: var(--c-charcoal);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.18rem);
  line-height: 1.9;
  margin-block-start: 1.1rem;
}

.wart__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  font-size: 0.82rem;
  color: var(--c-muted);
  margin-block-start: 1.6rem;
  padding-block-end: 1.5rem;
  border-block-end: 1px solid var(--c-border);
}

.wart__meta strong { font-weight: 400; color: var(--c-charcoal); }

.wart__cover { margin-block: clamp(1.75rem, 3vw, 2.75rem) 0; }

/*
 * عمود القراءة: 680–760 بكسل. أضيق منه يقطّع الجملة العربية، وأوسع
 * منه يُتعب العين في العودة إلى بداية السطر التالي.
 */
.entry-body,
.woj-prose {
  max-inline-size: min(100%, var(--w-read));
  margin-inline: auto;
}

.entry-body > * + * { margin-block-start: 1.4em; }

.entry-body p { line-height: 2; }

/* --- صورة داخل المقال --- */
.wfig { margin-block: clamp(2.25rem, 4vw, 3.25rem); }

/*
 * الخروج من عمود القراءة.
 *
 * `margin-inline: auto` لا يُوسّط عنصراً أعرضَ من أبيه — يدفعه إلى جهة
 * واحدة فيخرج نصفه خارج الشاشة. والحساب هنا يفعل ما يُتوقّع: نصف عرض
 * الأب ناقصَ نصف عرض الابن على كل جهة، فيتمدّد الابن متساوياً حول مركز
 * العمود مهما كان عرض الشاشة.
 *
 * ويتم بالعرض وحده — لا نسبة جديدة تُفرض على الصورة.
 */
.wfig--wide,
.wfig--full,
.wgal--grid,
.wstick {
  --wbreak: min(92vw, var(--w-wide));
  inline-size: var(--wbreak);
  max-inline-size: none;
  margin-inline: calc(50% - var(--wbreak) / 2);
}

.wfig--full { --wbreak: min(96vw, var(--container, 1280px)); }

.wfig--a-start { margin-inline-start: 0; }
.wfig--a-end   { margin-inline-end: 0; }

.wfig__cap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-block-start: 0.85rem;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--c-muted);
}

.wfig__credit { color: var(--c-muted); opacity: 0.8; }
.wfig__credit::before { content: "— "; }

/* --- معرض --- */
.wgal { margin-block: clamp(2.25rem, 4vw, 3.25rem); }

.wgal__items { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); }

.wgal--grid .wgal__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wgal--pair .wgal__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wgal--natural .wgal__items { grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }

@media (min-width: 768px) {
  .wgal--grid .wgal__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- اقتباس --- */
.wquote {
  margin-block: clamp(2.5rem, 4.5vw, 3.5rem);
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--c-accent-line);
}

.wquote__text {
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.75;
  font-weight: 300;
  color: var(--c-ink);
  margin: 0;
}

.wquote__cite {
  display: block;
  margin-block-start: 0.9rem;
  font-size: var(--fs-small);
  font-style: normal;
  color: var(--c-muted);
}

/* --- بطاقة مصدر خارجي --- */
.wsource {
  margin-block: clamp(2.25rem, 4vw, 3rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-ivory);
}

.wsource__label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.wsource__title {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.55;
  margin: 0.6rem 0 0;
}

.wsource__desc {
  color: var(--c-charcoal);
  font-size: var(--fs-small);
  line-height: 1.85;
  margin-block-start: 0.6rem;
}

.wsource__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--c-border);
  font-size: var(--fs-small);
}

.wsource__name { color: var(--c-muted); }
.wsource__link { color: var(--c-accent); }

/* --- تضمين اجتماعي --- */
.wembed {
  margin-block: clamp(2.25rem, 4vw, 3rem);
  margin-inline: auto;
  max-inline-size: var(--w-embed);
}

.wembed__title {
  font-size: 1.05rem;
  font-weight: 400;
  margin: 0 0 0.5rem;
}

.wembed__intro {
  color: var(--c-charcoal);
  font-size: var(--fs-small);
  line-height: 1.85;
  margin-block-end: 1.25rem;
}

.wembed__frame { display: flex; justify-content: center; }

.wembed__frame > blockquote,
.wembed__frame > iframe,
.wembed__responsive { inline-size: 100%; margin-inline: auto !important; }

.wembed__responsive iframe {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  block-size: auto;
}

.wembed__fallback {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  inline-size: 100%;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-ivory);
  text-align: center;
}

.wembed__platform { font-size: var(--fs-small); color: var(--c-muted); }
.wembed__cta { color: var(--c-accent); font-size: var(--fs-small); }

/* ============================================================
   ١١. النشرة
   ============================================================ */

.wnl {
  background: var(--c-dark);
  color: var(--c-on-dark);
  padding-block: var(--sp-block);
}

.wnl__inner {
  inline-size: min(100% - 2.5rem, 620px);
  margin-inline: auto;
  text-align: center;
}

.wnl__title {
  color: var(--c-on-dark);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  font-weight: 300;
  margin: 0;
}

.wnl__text {
  color: var(--c-on-dark-muted);
  margin-block-start: 0.9rem;
  font-size: var(--fs-small);
  line-height: 1.9;
}

.wnl__form {
  display: flex;
  gap: 0.75rem;
  margin-block-start: 1.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.wnl__form input {
  flex: 1 1 240px;
  padding: 0.9rem 1.1rem;
  background: transparent;
  border: 1px solid var(--c-border-dark);
  color: var(--c-on-dark);
  font: inherit;
  font-size: var(--fs-small);
}

.wnl__form input::placeholder { color: var(--c-on-dark-muted); }

.wnl__form button {
  padding: 0.9rem 2rem;
  background: var(--c-on-dark);
  color: var(--c-dark);
  border: 0;
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease);
}

.wnl__form button:hover { opacity: 0.85; }

.wnl__hint { color: var(--c-on-dark-muted); font-size: 0.8rem; margin-block-start: 1.25rem; }

.wrelated-sec { border-block-start: 1px solid var(--c-border); }

/* ============================================================
   ١١.١ ارتفاع ثابت للصورة داخل المقال
   ------------------------------------------------------------
   `cover` مسموح هنا وحده داخل المقال، ولا يقع إلا إن اختار المحرر
   ارتفاعاً صراحةً. و«تلقائي» — وهو الافتراضي — لا يقصّ أبداً.
   ============================================================ */

.wm--frame .wm__frame            { aspect-ratio: 16 / 9; }
.wm--frame.is-h-short  .wm__frame { aspect-ratio: 3 / 1; }
.wm--frame.is-h-medium .wm__frame { aspect-ratio: 16 / 9; }
.wm--frame.is-h-tall   .wm__frame { aspect-ratio: 4 / 5; }

.wfig__notice {
  margin-block-start: 0.75rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--c-charcoal);
  background: var(--c-ivory);
  border-inline-start: 3px solid var(--c-accent-line);
}

/* ============================================================
   ١١.٢ الصورة الجانبية الثابتة
   ------------------------------------------------------------
   حدودها صريحة: تتوقّف عند حافة الكتلة (لأن `sticky` داخل الشبكة
   لا يتجاوز أباه)، وارتفاعها لا يتخطى الشاشة ناقصَ الهيدر، ولا
   التصاق على الجوال حيث لا عمود ثانٍ أصلاً.
   ============================================================ */

.wstick {
  margin-block: clamp(2.5rem, 4.5vw, 4rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.wstick__text > *:first-child { margin-block-start: 0; }
.wstick__text > * + * { margin-block-start: 1.4em; }
.wstick__text p { line-height: 2; }

@media (min-width: 900px) {
  .wstick { grid-template-columns: 40% minmax(0, 1fr); align-items: start; }
  .wstick--end { grid-template-columns: minmax(0, 1fr) 40%; }
  .wstick--end .wstick__media { order: 2; }

  .wstick__media {
    position: sticky;

    /* الهيدر المثبّت 84 بكسل، ثم 32 بكسل تنفّس. */
    inset-block-start: calc(84px + 32px);
    max-block-size: calc(100dvh - 84px - 32px);
    margin: 0;
    overflow: hidden;
  }

  .wstick__media .wm--natural > img {
    max-block-size: calc(100dvh - 84px - 96px);
    inline-size: auto;
    max-inline-size: 100%;
    object-fit: contain;
  }

  .wstick--portrait .wstick__frame .wm__frame { aspect-ratio: 4 / 5; }
}

/* ============================================================
   ١١.٣ الفيديو داخل المقال
   ============================================================ */

.wvideo--inline { position: relative; }
.wfig .wvideo { border-radius: var(--radius-sm, 3px); overflow: hidden; }

/* ============================================================
   ١١.٤ المكوّنات التعليمية
   ------------------------------------------------------------
   سطح واحد يجمعها كي تُقرأ كعائلة: عاجيّ الهوية، حدّ رفيع، وعنوان
   بلون النصّ لا بلون التمييز — فهي مساعدة للقراءة لا مقاطعة لها.
   ============================================================ */

.wlearn {
  margin-block: clamp(2.25rem, 4vw, 3.25rem);
  padding: clamp(1.25rem, 1rem + 1.8vw, 2rem);
  background: var(--c-ivory);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
}

.wlearn__title {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.wlearn__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: 0.6rem;
}

/* --- حقائق سريعة --- */
.wfacts__grid {
  display: grid;
  gap: 1rem clamp(1rem, 2vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

@media (min-width: 768px) {
  .wfacts__grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wfacts__grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.wfacts__item { min-inline-size: 0; }

.wfacts__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  margin-block-end: 0.3rem;
}

.wfacts__value {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--c-ink);
}

.wfacts__note {
  display: block;
  font-size: 0.78rem;
  color: var(--c-muted);
  margin-block-start: 0.2rem;
}

/* --- الرسم البياني المعرفي --- */
.wgraph__kind { font-size: 0.8rem; color: var(--c-muted); }

.wgraph__name {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 300;
  margin: 0.35rem 0 0;
}

.wgraph__desc { color: var(--c-charcoal); margin-block-start: 0.7rem; line-height: 1.9; }

.wgraph__link {
  display: inline-block;
  margin-block-start: 1.1rem;
  font-size: var(--fs-small);
  color: var(--c-accent);
  border-block-end: 1px solid var(--c-accent-line);
  padding-block-end: 3px;
}

.wgraph__count { color: var(--c-muted); }

/* --- تعلّمت / تابعي --- */
.wlearned__list { display: grid; gap: 0.7rem; }

.wlearned__list li {
  position: relative;
  padding-inline-start: 1.5rem;
  line-height: 1.85;
}

.wlearned__list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-start: 0;
  inline-size: 8px;
  block-size: 1px;
  background: var(--c-accent);
}

.wnext__desc { color: var(--c-charcoal); line-height: 1.9; }

.wnext__cta {
  display: inline-block;
  margin-block-start: 1.1rem;
  padding: 0.8rem 1.75rem;
  border: 1px solid var(--c-border);
  font-size: var(--fs-small);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.wnext__cta:hover { border-color: var(--c-accent-line); color: var(--c-accent); }

/* --- مقارنة --- */
.wcompare__table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-small); }

.wcompare__table th,
.wcompare__table td {
  text-align: start;
  padding: 0.75rem 0.5rem;
  border-block-end: 1px solid var(--c-border);
  vertical-align: top;
}

.wcompare__table thead th { color: var(--c-accent); font-weight: 400; letter-spacing: 0.06em; }
.wcompare__table tbody th { color: var(--c-muted); font-weight: 400; }
.wcompare__table tr:last-child th,
.wcompare__table tr:last-child td { border-block-end: 0; }

@media (max-width: 599px) {
  .wcompare__table thead { display: none; }
  .wcompare__table tr { display: block; padding-block: 0.5rem; border-block-end: 1px solid var(--c-border); }
  .wcompare__table tr:last-child { border-block-end: 0; }
  .wcompare__table th,
  .wcompare__table td { display: block; border: 0; padding-inline: 0; }
  .wcompare__table td::before {
    content: attr(data-label) " — ";
    color: var(--c-muted);
    font-size: 0.78rem;
  }
}

/* --- تعريف سريع --- */
.wdefine {
  background: transparent;
  border: 0;
  border-inline-start: 2px solid var(--c-accent-line);
  border-radius: 0;
  padding-block: 0.25rem;
  padding-inline: 1.25rem 0;
  margin-block: clamp(1.75rem, 3vw, 2.5rem);
}

.wdefine__term { font-size: 1.02rem; font-weight: 400; margin: 0 0 0.4rem; }
.wdefine__text { color: var(--c-charcoal); line-height: 1.9; margin: 0; }

/* --- خط زمني --- */
.wtimeline__list { display: grid; gap: 0; }

.wtimeline__item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1rem;
  border-block-end: 1px solid var(--c-border);
}

.wtimeline__item:last-child { border-block-end: 0; }

.wtimeline__when {
  font-size: 0.88rem;
  color: var(--c-accent);
  letter-spacing: 0.04em;
  padding-block-start: 0.15rem;
}

.wtimeline__what { font-size: 1rem; font-weight: 400; line-height: 1.6; margin: 0; }
.wtimeline__desc { color: var(--c-charcoal); font-size: var(--fs-small); margin-block-start: 0.35rem; line-height: 1.85; }

@media (max-width: 599px) {
  .wtimeline__item { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* --- إفصاح بطاقة المصدر --- */
.wsource__names { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.wsource__tag {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--c-muted);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.7rem;
}

.wsource__disclosure {
  margin-block-start: 0.9rem;
  font-size: 0.78rem;
  color: var(--c-muted);
}

/* --- تلميح المحرر داخل لوحة التحرير --- */
.woj-inner-edit__hint {
  font-size: 0.8rem;
  color: #757575;
  margin-block-end: 0.75rem;
  padding-inline-start: 0.75rem;
  border-inline-start: 3px solid #c29a72;
}

/* ============================================================
   ١٢. الجوال
   ------------------------------------------------------------
   الجوال ليس نسخة مصغّرة من سطح المكتب. لا ارتفاع شاشة، ولا 21:9،
   ولا منظور، ولا تكبير مستمر، والصور داخل المقالة بنسبها الأصلية.
   ============================================================ */

@media (max-width: 767px) {

  .wgrid, .wpicks__grid, .wpicks__side { grid-template-columns: 1fr; }

  /* شبكة المنتجات وحدها تبقى عمودين — صورة المنتج مربّعة وواضحة. */
  .wshop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .whero__media .wm__frame { max-block-size: none; min-block-size: 0; }
  .whero--text .whero__body { padding-inline: 1.25rem; }
  .wfeature__link { grid-template-columns: 1fr; }
  .wfeature--flip .wfeature__media { order: 0; }

  /*
   * الصور غير المؤطَّرة داخل المقالة تحتفظ بنسبتها الأصلية على الجوال.
   * والاستثناء مقصود: ما كان داخل .wm__frame اختار المحرر له نسبةً
   * صراحةً (بطاقة أو معرض)، فتقييده بـcontain يترك حواف فارغة حول
   * الصورة بلا فائدة.
   */
  .wart__cover .wm--natural > img,
  .entry-body .wm--natural > img,
  .entry-body .wm--natural-wide > img,
  .entry-body :not(.wm__frame) > img:not(.wm__img) {
    inline-size: 100%;
    block-size: auto;
    object-fit: contain;
  }

  .wm__frame > img { object-fit: cover; }

  .wfig--wide,
  .wfig--full,
  .wgal--grid,
  .wstick {
    --wbreak: 100%;
    inline-size: 100%;
    margin-inline: 0;
  }

  .wembed { max-inline-size: 100%; }

  /* لا التصاق على الجوال: عمود واحد، فالصورة فوق النص وانتهى. */
  .wstick { grid-template-columns: 1fr; }
  .wstick__media { position: static; max-block-size: none; }
  .wstick--end .wstick__media { order: 0; }

  /* لا تكبير عند اللمس: المسّة تُترجم إلى hover فتقفز الصورة بلا سبب. */
  .wcard__media .wm__frame > img { transform: none !important; transition: none; }

  .wsec__head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

/* ============================================================
   ١٣. إلغاء ما يعارض النظام
   ------------------------------------------------------------
   هذا القسم لا يضيف شكلاً جديداً — يوقف القواعد القديمة التي كانت
   تفرض على الصورة نسباً متعدّدة وتقصّها بلا داعٍ. أُبقيت المحدِّدات
   كما هي في الأوراق الأصلية كي يظل واضحاً ما الذي أُلغي ولماذا.
   ============================================================ */

/* --- ١٣.١ لا 21:9 لصورة مقال أو معرض عادي. --- */
.woj-media.is-ratio-21-9 .woj-media__frame,
.woj-media--magazine .woj-media__frame,
.woj-gallery.is-magazine .woj-gallery__item:first-child .woj-gallery__img,
.woj-gallery.is-stack .woj-gallery__item:first-child .woj-gallery__img {
  aspect-ratio: 3 / 2 !important;
}

/* --- ١٣.٢ أغلفة المقالات: لا نسبة لكل تخطيط، ولا 92vh. --- */
.entry-hero__media {
  aspect-ratio: 16 / 9 !important;
  block-size: auto !important;
  max-block-size: 70vh !important;
}

.layout-quick_read .entry-hero__media,
.layout-editorial_story .entry-hero__media,
.layout-knowledge_guide .entry-hero__media,
.layout-collector_guide .entry-hero__media,
.layout-historical_story .entry-hero__media,
.layout-signature_story .entry-hero__media {
  aspect-ratio: 16 / 9 !important;
  block-size: auto !important;
  max-block-size: 70vh !important;
}

.entry-hero__media img {
  object-position: var(--wm-x, 50%) var(--wm-y, 50%) !important;
}

/* البطل السينمائي القديم: من 96vh إلى نطاق مقروء. */
.scene-hero,
.entry-hero .scene-hero { min-block-size: min(70vh, 720px) !important; }

.woj-hero.is-h-full  { min-block-size: 70vh !important; }
.woj-hero.is-h-tall  { min-block-size: 64vh !important; }
.woj-hero.is-h-short { min-block-size: 52vh !important; }

/* --- ١٣.٣ لا 4:5 ولا 3:4 ولا 2:3 لصورة مقالة عادية. --- */
.woj-media.is-ratio-4-5 .woj-media__frame,
.woj-media.is-ratio-2-3 .woj-media__frame,
.woj-media--portrait .woj-media__frame,
.split-editorial__media,
.discover__card .card__media {
  aspect-ratio: 3 / 2 !important;
}

@media (min-width: 1024px) {
  .split-editorial__media { aspect-ratio: 3 / 2 !important; }
}

.woj-gallery.is-ratio-4-5 .woj-gallery__img { aspect-ratio: 3 / 2 !important; }

/* --- ١٣.٤ لا منظور ولا تكبير مستمر على الصور التحريرية. --- */
.entry-body .woj-sec,
.entry-body [class*="wx-d-"],
.wart__cover,
.wfig,
.wgal,
.wm-product {
  --wx-par: 0px;
  --sec-parallax: 0px;
}

.entry-body .woj-sec__bg,
.entry-body .wx-scene__frame img,
.wart__cover img,
.wfig img,
.wgal img,
.wm-product__img {
  transform: none !important;
}

.reveal-zoom,
.reveal-zoom.is-inview { transform: none !important; transition: none !important; }

@media (max-width: 900px) {
  /* الجوال بلا منظور إطلاقاً — القص هناك أغلى والفائدة أقل. */
  .woj-sec__bg,
  .wx-scene__frame img,
  .woj-hero__bg img { transform: none !important; }
}

/* --- ١٣.٤/١ البطاقة القديمة: صارت تمرّ بنظام الصور نفسه. --- */

/*
 * `.card__media` صار هو عنصر `.wm` نفسه، والإطار الداخلي هو من يحمل
 * النسبة. فنُلغي نسبة الغلاف الخارجي كي لا يتراكب قيدان على ارتفاع
 * واحد — النتيجة نفسها، لكن بمصدر واحد للحقيقة.
 */
.card__media.wm { aspect-ratio: auto !important; }

.card__media img {
  object-position: var(--wm-x, 50%) var(--wm-y, 50%) !important;
}

.result__media.wm,
.woj-gallery__item.wm { aspect-ratio: auto !important; }

.card:hover .card__media img { transform: scale(1.03) !important; }

@media (max-width: 767px), (hover: none) {
  .card:hover .card__media img,
  .card .card__media img { transform: none !important; }
}

/* --- ١٣.٥ صور المنتجات لا تُقصّ أبداً. --- */
.wproduct img,
.wm-product img { object-fit: contain !important; }

/* --- ١٣.٦ احترام تفضيل تقليل الحركة. --- */
@media (prefers-reduced-motion: reduce) {
  .wcard__media .wm__frame > img,
  .wm__frame > img { transform: none !important; transition: none !important; }
}