/* ============================================================
   الطبقة التحريرية — فوق نظام تصميم سرماس
   لا هوية جديدة: كل قيمة هنا مشتقّة من رموز main.css
   ============================================================ */

/* ---------- مشهد: إيقاع بصري مستقل لكل قسم ---------- */
.scene { position: relative; }
.scene--tight { padding-block: clamp(3rem, 2.4rem + 3vw, 5.5rem); }
.scene__label {
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-accent); margin-block-end: 2rem;
}
html[lang="ar"] .scene__label { letter-spacing: 0.05em; }
.scene__label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to left, transparent, var(--c-accent-line));
}
.section--dark .scene__label::after { background: linear-gradient(to left, transparent, var(--c-border-dark)); }

/* ---------- مشهد 1: البطل ---------- */
.scene-hero {
  position: relative; min-height: 100dvh;
  display: flex; align-items: flex-end;
  color: var(--c-on-dark); overflow: hidden;
}
.scene-hero__bg { position: absolute; inset: 0; }
.scene-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,8,6,.82) 0%, rgba(10,8,6,.25) 45%, transparent 70%);
}
.scene-hero__content {
  position: relative; z-index: 2;
  padding-block-end: clamp(4rem, 9vh, 8rem);
  max-width: 900px;
}
.scene-hero h1 {
  color: var(--c-on-dark);
  font-size: clamp(2.75rem, 1.5rem + 4.6vw, 5.5rem);
  line-height: 1.14;
}
.scene-hero .lead { color: var(--c-on-dark-muted); margin-block: 1.75rem 2.5rem; max-width: 60ch; }
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  font-size: 0.8125rem; color: var(--c-on-dark-muted);
  margin-block-start: 2rem; padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--c-border-dark);
}

/* ---------- مشهد 2: اكتشف — شريط أفقي ---------- */
.rail {
  display: flex; gap: var(--sp-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block-end: 1rem; margin-inline: calc(50% - 50vw); padding-inline: max(1.5rem, calc(50vw - var(--container)/2));
  scrollbar-width: thin;
}
.rail::-webkit-scrollbar { height: 2px; }
.rail::-webkit-scrollbar-thumb { background: var(--c-accent-line); }
.rail > * { scroll-snap-align: start; flex: 0 0 clamp(260px, 30vw, 380px); }

.discover-card { display: flex; flex-direction: column; gap: 1rem; }
.discover-card__media {
  aspect-ratio: 4/5; border-radius: var(--radius-card);
  overflow: hidden; position: relative;
}
.discover-card__media > div { width: 100%; height: 100%; transition: transform 1.2s var(--ease); }
.discover-card:hover .discover-card__media > div { transform: scale(1.04); }
.discover-card__idx {
  position: absolute; top: 1rem; inset-inline-start: 1rem; z-index: 2;
  font-family: var(--font-en-display); font-size: 1.5rem;
  color: rgba(245,241,234,.7);
}
.discover-card h3 { font-size: 1.125rem; line-height: 1.6; font-weight: 300; }

/* ---------- مشهد 3: المميزة — انقسام غير متماثل ---------- */
.split-editorial { display: grid; gap: var(--sp-gap); align-items: center; }
@media (min-width: 1024px) {
  .split-editorial { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 5vw, 6rem); }
}
.split-editorial__media { aspect-ratio: 4/5; border-radius: var(--radius-card); overflow: hidden; }
@media (min-width: 1024px) { .split-editorial__media { aspect-ratio: 3/4; } }
.split-editorial h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); margin-block: 1rem 1.5rem; }

/* ---------- مشهد 4: رحلة معرفية — شريط ---------- */
.journey { display: grid; gap: 0; counter-reset: step; }
@media (min-width: 900px) { .journey { grid-template-columns: repeat(4, 1fr); } }
.journey__step {
  position: relative; padding: 2rem 1.5rem;
  border-block-start: 1px solid var(--c-border);
}
@media (min-width: 900px) {
  .journey__step { border-block-start: 1px solid var(--c-border); border-inline-start: 1px solid var(--c-border); }
  .journey__step:first-child { border-inline-start: 0; }
}
.journey__step::before {
  counter-increment: step; content: counter( step, decimal-leading-zero );
  display: block; font-family: var(--font-en-display); font-size: 1.75rem;
  color: var(--c-accent-line); margin-block-end: 1rem;
}
.journey__step h4 { font-size: 1.0625rem; font-weight: 400; margin-block-end: 0.5rem; }
.journey__step p { font-size: 0.875rem; color: var(--c-muted); line-height: 1.9; }
.journey__step.is-current { background: var(--c-ivory); }
.journey__step.is-current::before { color: var(--c-accent); }

/* ---------- مشهد 5: المجموعات — معرض بأحجام مختلطة ---------- */
.mosaic { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; }
  .mosaic > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .mosaic > :nth-child(4) { grid-column: span 2; }
}
.mosaic__item {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  min-height: 200px; display: flex; align-items: flex-end;
}
.mosaic__item > .bg { position: absolute; inset: 0; transition: transform 1.2s var(--ease); }
.mosaic__item:hover > .bg { transform: scale(1.05); }
.mosaic__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,8,6,.75), transparent 60%);
}
.mosaic__label {
  position: relative; z-index: 2; padding: 1.5rem;
  color: var(--c-on-dark);
}
.mosaic__label strong { display: block; font-size: 1.25rem; font-weight: 300; }
.mosaic__label span { font-size: 0.8125rem; color: var(--c-on-dark-muted); }

/* ---------- مشهد 6: المقارنة ---------- */
.compare { display: grid; gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--radius-card); overflow: hidden; }
@media (min-width: 720px) { .compare { grid-template-columns: 1.2fr 1fr 1fr; } }
.compare__cell { background: var(--c-bg); padding: 1.25rem 1.5rem; }
.compare__head {
  background: var(--c-ivory); padding: 1rem 1.5rem;
  font-family: var(--f-display); font-size: 1.06rem; color: var(--c-ink);
}
.compare__head strong { font-weight: 400; font-size: 1.125rem; }
.compare__row-label {
  background: var(--c-ivory); padding: 1.25rem 1.5rem;
  color: var(--c-charcoal); font-size: 0.86rem; letter-spacing: 0.02em;
  display: flex; align-items: center;
}
.compare__val { font-size: 1.0625rem; }
.compare__media { aspect-ratio: 16/9; border-radius: var(--radius-card); overflow: hidden; margin-block-end: 1rem; }

/* ---------- مشهد: الرائجة — أحجام مختلطة ---------- */
.mixed { display: grid; gap: var(--sp-gap); }
@media (min-width: 900px) { .mixed { grid-template-columns: 2fr 1fr 1fr; align-items: start; } }
.mixed__lead .card__media { aspect-ratio: 16/10; }
.mixed__lead .card__title { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); }
.mixed__stack { display: flex; flex-direction: column; gap: 1.5rem; }

/* ---------- قصة التوقيع: مشاهد لاصقة ---------- */
.signature { background: var(--c-bg); }
.sticky-scene { display: grid; gap: 0; }
@media (min-width: 1024px) { .sticky-scene { grid-template-columns: 1fr 1fr; } }

.sticky-scene__media {
  position: relative; min-height: 60vh;
}
@media (min-width: 1024px) {
  .sticky-scene__media { position: sticky; top: 0; height: 100dvh; }
}
.sticky-scene__media > div { position: absolute; inset: 0; }

.sticky-scene__text {
  padding: clamp(3rem, 8vh, 8rem) clamp(1.5rem, 5vw, 5rem);
  display: flex; flex-direction: column; justify-content: center;
  gap: 1.75rem;
}
.sticky-scene__text > * { max-width: 56ch; }
.sticky-scene__text h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); }
.sticky-scene__text p { color: var(--c-charcoal); line-height: 2.05; }
.sticky-scene--reverse .sticky-scene__media { order: 2; }

/* ---------- كتلة معرفة ---------- */
.knowledge-block {
  border: 1px solid var(--c-accent-line);
  border-radius: var(--radius-card);
  background: var(--c-ivory);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  margin-block: 2.5rem;
}
.knowledge-block__label {
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-accent); margin-block-end: 1rem; display: block;
}
html[lang="ar"] .knowledge-block__label { letter-spacing: 0.04em; }
.knowledge-block p { color: var(--c-charcoal); line-height: 2; font-size: var(--fs-small); }
.knowledge-block dl { display: grid; gap: 0.75rem; margin-block-start: 1rem; }
@media (min-width: 640px) { .knowledge-block dl { grid-template-columns: repeat(3, 1fr); } }
.knowledge-block dt { font-size: 0.75rem; color: var(--c-muted); margin-block-end: 0.2rem; }
.knowledge-block dd { font-size: 1.0625rem; color: var(--c-ink); }

/* ---------- حقائق سريعة / هل تعلم ---------- */
.quick-facts { display: grid; gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--radius-card); overflow: hidden; margin-block: 2.5rem; }
@media (min-width: 640px) { .quick-facts { grid-template-columns: repeat(4, 1fr); } }
.quick-facts div { background: var(--c-bg); padding: 1.25rem; text-align: center; }
.quick-facts dt { font-size: 0.75rem; color: var(--c-muted); margin-block-end: 0.4rem; }
.quick-facts dd { font-size: 1.375rem; font-weight: 300; color: var(--c-ink); }

.did-you-know {
  display: flex; gap: 1.25rem; align-items: flex-start;
  border-inline-start: 2px solid var(--c-accent);
  padding: 1.25rem 1.5rem; margin-block: 2.5rem;
  background: var(--c-accent-soft);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.did-you-know strong { color: var(--c-accent); font-weight: 400; white-space: nowrap; }
.did-you-know p { color: var(--c-charcoal); line-height: 1.95; font-size: var(--fs-small); }

/* ---------- الخط الزمني ---------- */
.tl { position: relative; padding-inline-start: 2rem; margin-block: 2.5rem; }
.tl::before { content: ""; position: absolute; inset-inline-start: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--c-accent-line); }
.tl__item { position: relative; padding-block-end: 2rem; }
.tl__item::before {
  content: ""; position: absolute; inset-inline-start: -2rem; top: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-bg); border: 1px solid var(--c-accent);
  transform: translateX(50%);
}
html[dir="rtl"] .tl__item::before { transform: translateX(-50%); }
.tl__year { font-family: var(--font-en-display); font-size: 1.25rem; color: var(--c-accent); }
.tl__item p { color: var(--c-charcoal); font-size: var(--fs-small); line-height: 1.95; margin-block-start: 0.35rem; }

/* ---------- بطاقة كيان مدمجة في النص ---------- */
.entity-inline {
  display: grid; gap: 1.25rem; align-items: center;
  border: 1px solid var(--c-border); border-radius: var(--radius-card);
  overflow: hidden; margin-block: 2.5rem; background: var(--c-ivory);
}
@media (min-width: 640px) { .entity-inline { grid-template-columns: 140px 1fr; } }
.entity-inline__media { aspect-ratio: 1; }
.entity-inline__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.entity-inline__body span.eyebrow { margin: 0; }
.entity-inline__body h4 { font-size: 1.25rem; }
.entity-inline__body p { font-size: 0.875rem; color: var(--c-charcoal); line-height: 1.9; }

/* ---------- رؤية ذكية (لوحة جانبية لا روبوت) ---------- */
.ai-insight {
  border: 1px solid var(--c-border); border-radius: var(--radius-card);
  background: var(--c-bg); margin-block: 2.5rem; overflow: hidden;
}
.ai-insight__head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.5rem; border-block-end: 1px solid var(--c-border);
  background: var(--c-ivory);
}
.ai-insight__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.ai-insight__head span { font-size: 0.75rem; letter-spacing: 0.12em; color: var(--c-muted); }
html[lang="ar"] .ai-insight__head span { letter-spacing: 0.03em; }
.ai-insight__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 1.25rem 1.5rem; }
.ai-chip {
  background: transparent; border: 1px solid var(--c-border);
  border-radius: var(--radius-pill); min-height: 40px; padding-inline: 1.1rem;
  font-family: inherit; font-size: 0.8125rem; color: var(--c-charcoal); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.ai-chip:hover, .ai-chip.is-active { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft); }
.ai-insight__body { padding: 0 1.5rem 1.5rem; }
.ai-answer { display: none; }
.ai-answer.is-shown { display: block; }
.ai-answer p { font-size: var(--fs-small); line-height: 2; color: var(--c-charcoal); }
.ai-source {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.6875rem; letter-spacing: 0.06em;
  padding: 0.25rem 0.7rem; border-radius: var(--radius-pill);
  margin-block-end: 0.75rem;
}
.ai-source--graph { background: rgba(143,191,159,.16); color: #4E7A5E; }
.ai-source--model { background: var(--c-accent-soft); color: #8A6440; }

/* ---------- متابعة التعلّم ---------- */
.continue {
  border-block-start: 1px solid var(--c-border);
  padding-block-start: var(--sp-gap); margin-block-start: var(--sp-gap);
}
.continue__learned { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block: 1rem 2rem; }
.learned-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--c-muted);
  border: 1px solid var(--c-border); border-radius: var(--radius-pill);
  padding: 0.4rem 1rem;
}
.learned-chip::before { content: "✓"; color: #6E9A7C; font-size: 0.75rem; }
.continue__next {
  display: grid; gap: 1.5rem; align-items: center;
  border: 1px solid var(--c-accent-line); border-radius: var(--radius-card);
  overflow: hidden; background: var(--c-ivory);
}
@media (min-width: 720px) { .continue__next { grid-template-columns: 200px 1fr auto; } }
.continue__next .m { aspect-ratio: 16/10; }
.continue__next .b { padding: 1.5rem; }
.continue__next .b span { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--c-accent); }
.continue__next .b h3 { font-size: 1.375rem; font-weight: 300; margin-block-start: 0.5rem; line-height: 1.5; }
.continue__next .a { padding: 1.5rem; }

/* ---------- تدرّجات احتياطية حين لا توجد صورة بارزة ---------- */
.ph-a { background: radial-gradient(120% 90% at 78% 12%, rgba(216,178,138,.34) 0, transparent 52%), linear-gradient(160deg,#2A2219 0%,#171310 55%,#0F0C0A 100%); }
.ph-b { background: radial-gradient(110% 85% at 25% 15%, rgba(226,195,158,.5) 0, transparent 55%), linear-gradient(150deg,#CDBBA2 0%,#A8927A 50%,#6E5A48 100%); }
.ph-c { background: radial-gradient(100% 80% at 70% 20%, rgba(255,250,240,.75) 0, transparent 60%), linear-gradient(155deg,#EFE6D6 0%,#D9CBB4 55%,#B8A588 100%); }
.ph-d { background: radial-gradient(90% 80% at 30% 80%, rgba(194,154,114,.4) 0, transparent 60%), linear-gradient(200deg,#3B3128 0%,#241D17 60%,#14100D 100%); }
.ph-e { background: radial-gradient(120% 100% at 50% 0%, rgba(210,190,220,.35) 0, transparent 55%), linear-gradient(165deg,#8E8FA8 0%,#5C5D78 50%,#33344A 100%); }
.ph-f { background: radial-gradient(110% 90% at 20% 20%, rgba(160,210,190,.4) 0, transparent 55%), linear-gradient(150deg,#7FA894 0%,#4E7A66 55%,#2A4438 100%); }


/* ============================================================
   الطبقة التحريرية — الإنتاج
   ما فوق هذا السطر جاء من النموذج البصري المعتمد.
   ما تحته أُضيف للمكوّنات الكاملة والذكاء المدمج والجوال.
   ============================================================ */

/* ---------- التخطيطات الستة: عرض النص حسب نوع القراءة ---------- */
.layout-quick_read      { --measure: 62ch; }
.layout-editorial_story { --measure: 66ch; }
.layout-knowledge_guide { --measure: 68ch; }
.layout-collector_guide { --measure: 64ch; }
.layout-historical_story{ --measure: 66ch; }
.layout-signature_story { --measure: 60ch; }

.entry-body {
  max-inline-size: var(--measure, 66ch);
  margin-inline: auto;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
  line-height: 1.95;
}
.entry-body > * + * { margin-block-start: 1.35em; }
.entry-body h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.3; margin-block-start: 2.4em;
}
.entry-body h3 { font-size: 1.22rem; margin-block-start: 2em; }
.entry-body blockquote {
  border: 0; padding: 0; margin-block: 2.4em;
  font-family: var(--f-display); font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  line-height: 1.5; color: var(--c-ink); text-align: center;
}
.entry-body figure { margin-block: 2.6em; }
.entry-body figure img { inline-size: 100%; block-size: auto; border-radius: var(--radius-md, 4px); }
.entry-body figcaption {
  margin-block-start: 0.7rem; font-size: 0.82rem; color: var(--c-muted); text-align: center;
}

/* صورة تتجاوز عرض النص — «الصور تروي القصة لا تزيّنها» */
.entry-body .is-wide {
  max-inline-size: min(1100px, 92vw);
  margin-inline: calc(50% - min(550px, 46vw));
}

/* ---------- الغلاف حسب التخطيط ---------- */
.entry-hero { position: relative; }
.entry-hero__media { position: relative; overflow: hidden; background: var(--c-ivory); }
.entry-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.layout-quick_read .entry-hero__media { aspect-ratio: 21/9; border-radius: var(--radius-md, 4px); }
.layout-editorial_story .entry-hero__media { aspect-ratio: 16/9; }
.layout-signature_story .entry-hero__media { block-size: 92vh; }
.layout-knowledge_guide .entry-hero__media,
.layout-collector_guide .entry-hero__media { aspect-ratio: 2/1; }
.layout-historical_story .entry-hero__media { aspect-ratio: 3/2; filter: sepia(0.12) contrast(1.02); }

.entry-hero__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.8vw, 4.2rem);
  line-height: 1.14; letter-spacing: -0.01em;
}
.layout-quick_read .entry-hero__title { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.8rem); }

.entry-meta {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  font-size: 0.78rem; letter-spacing: 0.06em; color: var(--c-muted);
}
.entry-meta__layout {
  border: 1px solid var(--c-linen); border-radius: var(--radius-pill, 99px);
  padding: 0.2rem 0.8rem;
}

/* ---------- شبكة المقالة: نص + هامش معرفي ---------- */
.entry-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); }

@media (min-width: 1100px) {
  .layout-knowledge_guide .entry-grid,
  .layout-collector_guide .entry-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
  }
  .entry-aside { position: sticky; inset-block-start: 6rem; }
  .layout-knowledge_guide .entry-body,
  .layout-collector_guide .entry-body { margin-inline: 0; }
}

.entry-aside > * + * { margin-block-start: 1.6rem; }

/* ---------- المكوّنات المعرفية ---------- */
.kc {
  border: 1px solid var(--c-linen);
  border-radius: var(--radius-md, 4px);
  padding: clamp(1.1rem, 2.4vw, 1.8rem);
  background: var(--c-bg);
}
.kc + .kc { margin-block-start: 1.4rem; }
.kc__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-block-end: 1rem;
}
.kc__title {
  font-family: var(--f-display); font-size: 1.12rem; font-weight: 500;
  color: var(--c-ink); margin: 0;
}
.kc__label {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-accent);
}
.kc--inline { margin-block: 2.6em; }
.kc--wide { max-inline-size: min(1100px, 92vw); margin-inline: calc(50% - min(550px, 46vw)); }

/* بطاقة كيان */
.kc-entity { display: grid; gap: 1.2rem; }
.kc-entity__media {
  aspect-ratio: 4/3; border-radius: var(--radius-sm, 3px); overflow: hidden; background: var(--c-stone);
}
.kc-entity__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.kc-entity__type { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--c-accent); }
.kc-entity__name { font-family: var(--f-display); font-size: 1.4rem; margin: 0.3rem 0 0.6rem; }
.kc-entity__desc { font-size: 0.92rem; line-height: 1.8; color: var(--c-charcoal); }
@media (min-width: 620px) {
  .kc-entity { grid-template-columns: 160px minmax(0, 1fr); align-items: start; }
}

/* أزواج قيمة/تسمية */
.kc-pairs { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.kc-pair__label { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--c-muted); }
.kc-pair__value { font-size: 0.98rem; color: var(--c-ink); margin-block-start: 0.2rem; }

/* شبكة عناصر مصغّرة */
.kc-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.kc-chip {
  border: 1px solid var(--c-linen); border-radius: var(--radius-pill, 99px);
  padding: 0.4rem 0.95rem; font-size: 0.83rem; color: var(--c-charcoal);
  text-decoration: none; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.kc-chip:hover { border-color: var(--c-accent); color: var(--c-ink); }
.kc-chip__note { color: var(--c-muted); font-size: 0.74rem; margin-inline-start: 0.4rem; }

/* قائمة كيانات ببطاقات */
.kc-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kc-list__item {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--c-linen); border-radius: var(--radius-sm, 3px);
  padding: 1rem; transition: border-color var(--t-fast) var(--ease);
}
.kc-list__item:hover { border-color: var(--c-accent); }
.kc-list__name { font-family: var(--f-display); font-size: 1.05rem; }
.kc-list__excerpt { font-size: 0.85rem; color: var(--c-muted); line-height: 1.7; margin-block-start: 0.4rem; }

/* خريطة المنشأ */
.kc-origins { display: grid; gap: 0.8rem; }
.kc-origin {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding-block-end: 0.8rem; border-block-end: 1px solid var(--c-linen);
}
.kc-origin:last-child { border-block-end: 0; padding-block-end: 0; }
.kc-origin__dot {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--c-accent); flex: 0 0 auto; transform: translateY(-2px);
}
.kc-origin__name { font-size: 0.98rem; color: var(--c-ink); }
.kc-origin__note { font-size: 0.8rem; color: var(--c-muted); }

/* أسئلة متكررة */
.kc-faq__item { border-block-end: 1px solid var(--c-linen); }
.kc-faq__item:last-child { border-block-end: 0; }
.kc-faq__q {
  cursor: pointer; list-style: none; padding-block: 0.95rem;
  font-size: 0.98rem; color: var(--c-ink); display: flex; gap: 0.8rem; align-items: baseline;
}
.kc-faq__q::-webkit-details-marker { display: none; }
.kc-faq__q::before {
  content: '+'; color: var(--c-accent); font-size: 1rem;
  transition: transform var(--t-fast) var(--ease);
}
.kc-faq__item[open] .kc-faq__q::before { content: '−'; }
.kc-faq__a { padding-block-end: 1rem; font-size: 0.9rem; line-height: 1.85; color: var(--c-charcoal); }

/* قائمة تحقق */
.kc-check { display: grid; gap: 0.75rem; }
.kc-check__item { display: flex; gap: 0.8rem; align-items: baseline; font-size: 0.94rem; line-height: 1.75; }
.kc-check__box {
  inline-size: 14px; block-size: 14px; flex: 0 0 auto;
  border: 1px solid var(--c-accent); border-radius: 2px; transform: translateY(2px);
}

/* خريطة المعرفة */
.kc-graph { position: relative; }
.kc-graph__list { display: none; flex-wrap: wrap; gap: 0.55rem; }
.kc-chip--root { border-color: var(--c-accent); color: var(--c-ink); }
.kc-graph svg { inline-size: 100%; block-size: auto; overflow: visible; }
.kc-graph__edge { stroke: var(--c-linen); }
.kc-graph__node circle { fill: var(--c-ivory); stroke: var(--c-linen); transition: stroke var(--t-fast) var(--ease); }
.kc-graph__node--root circle { fill: var(--c-accent); stroke: var(--c-accent); }
.kc-graph__node:hover circle { stroke: var(--c-accent); }
.kc-graph__node text { font-size: 11px; fill: var(--c-charcoal); }

/* ---------- الذكاء المدمج ---------- */
.ai-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1.1rem; }

.ai-act {
  border: 1px solid var(--c-linen); background: transparent;
  border-radius: var(--radius-pill, 99px); padding: 0.34rem 0.9rem;
  font: inherit; font-size: 0.76rem; color: var(--c-charcoal);
  cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ai-act:hover { border-color: var(--c-accent); color: var(--c-ink); }
.ai-act[aria-expanded="true"] { border-color: var(--c-accent); color: var(--c-ink); background: var(--c-ivory); }
.ai-act[disabled] { opacity: 0.45; cursor: default; }

.ai-panel {
  margin-block-start: 1rem; padding: 1.1rem 1.2rem;
  background: var(--c-ivory); border-radius: var(--radius-sm, 3px);
  font-size: 0.92rem; line-height: 1.85; color: var(--c-charcoal);
}
.ai-panel[hidden] { display: none; }
.ai-panel__body > * + * { margin-block-start: 0.9rem; }

/* شارة المصدر — القارئ يعرف دائماً ما يقرأ */
.ai-source {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.68rem; letter-spacing: 0.06em;
  border-radius: var(--radius-pill, 99px); padding: 0.18rem 0.62rem;
}
.ai-source::before { content: ''; inline-size: 5px; block-size: 5px; border-radius: 50%; }
.ai-source.is-graph      { color: #2E6B4F; background: rgba(46,107,79,.08); }
.ai-source.is-graph::before { background: #2E6B4F; }
.ai-source.is-hybrid     { color: #8A6A3B; background: rgba(194,154,114,.14); }
.ai-source.is-hybrid::before { background: var(--c-accent); }
.ai-source.is-generated  { color: #8A6A3B; background: rgba(194,154,114,.14); }
.ai-source.is-generated::before { background: var(--c-accent); }

.ai-status { font-size: 0.8rem; color: var(--c-muted); }
.ai-status[hidden] { display: none; }

/* مؤشر انتظار هادئ — لا دوران ولا وميض */
.ai-wait { display: inline-flex; gap: 4px; }
.ai-wait span {
  inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--c-muted);
  animation: ai-breathe 1.5s var(--ease) infinite;
}
.ai-wait span:nth-child(2) { animation-delay: 0.2s; }
.ai-wait span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ai-breathe { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }

/* كيان قابل للاستكشاف داخل النص نفسه */
.ai-term {
  border-block-end: 1px dotted var(--c-accent);
  cursor: help; background: none; border-inline: 0; border-block-start: 0;
  font: inherit; color: inherit; padding: 0;
}
.ai-pop {
  position: absolute; z-index: 60; max-inline-size: 340px;
  background: var(--c-bg); border: 1px solid var(--c-linen);
  border-radius: var(--radius-sm, 3px); padding: 1rem 1.1rem;
  box-shadow: 0 18px 44px rgba(23,19,16,.12);
  font-size: 0.88rem; line-height: 1.8;
}
.ai-pop[hidden] { display: none; }
.ai-pop__title { font-family: var(--f-display); font-size: 1.02rem; margin-block-end: 0.4rem; }
.ai-pop__foot { margin-block-start: 0.7rem; display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }

/* ---------- الحركة: كشف عند الظهور ----------
   الكشف يستعمل .is-inview الموجود في main.css — لا نعرّف صنفاً ثانياً.
   والإخفاء الأولي مشروط بـ .js على عنصر html: بلا جافاسكربت لا يُخفى شيء،
   فالصفحة تُقرأ كاملة. هذا يصحّح سلوكاً كان يُخفي المحتوى حين يتعطّل
   السكربت أو يُحجب. */
html:not(.js) .reveal { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-inview { opacity: 1; transform: none; transition: none; }
  .ai-wait span { animation: none; opacity: 0.6; }
  .sticky-scene__media { position: static !important; block-size: auto !important; }
}

/* ---------- الجوال: إعادة تصميم لا طيّ ---------- */
@media (max-width: 780px) {

  /* البطل: الصورة تملأ الشاشة والنص فوقها — لا عمودان منهاران */
  .scene-hero { min-block-size: 88vh; }
  .scene-hero__content { padding-inline: 1.25rem; }

  /* الشريط الأفقي يبقى أفقياً — التمرير الجانبي أصدق من كومة عمودية */
  .rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
    gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-inline: 1.25rem; margin-inline: -1.25rem;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: center; }

  /* الانقسام غير المتماثل يصير صورة ثم نص، لا نصفين مضغوطين */
  .split-editorial { display: block; }
  .split-editorial__media { aspect-ratio: 4/5; margin-block-end: 1.6rem; }

  /* المشاهد اللاصقة: الصورة تلتصق أعلى الشاشة والنص يمرّ تحتها */
  .sticky-scene { display: block; }
  .sticky-scene__media {
    position: sticky; inset-block-start: 0; block-size: 56vh; margin-inline: -1.25rem;
  }
  .sticky-scene__text {
    position: relative; background: var(--c-bg);
    padding: 2rem 1.25rem 3rem; margin-block-start: -2rem;
    border-start-start-radius: 14px; border-start-end-radius: 14px;
  }

  /* الفسيفساء تصير بطاقتين في الصف — لا ست بطاقات مجهرية */
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic__item:first-child { grid-column: span 2; }

  /* المقارنة: جدول لا يُقرأ على الجوال → بطاقات متتابعة */
  .compare { display: block; }
  .compare__row-label {
    display: block; font-size: 0.72rem; letter-spacing: 0.1em;
    color: var(--c-accent); margin-block-start: 1.2rem;
  }
  .compare__cell { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.5rem; }

  /* الرحلة المعرفية: خطوات متتابعة عمودياً بترقيم واضح */
  .journey { grid-template-columns: 1fr; }
  .journey__step { border-inline-start: 2px solid var(--c-linen); padding-inline-start: 1rem; }

  /* الهامش المعرفي ينزل داخل النص بدل أن يُلصق جانباً */
  .entry-aside { position: static; }
  .kc--wide { max-inline-size: none; margin-inline: 0; }
  .entry-body .is-wide { max-inline-size: none; margin-inline: -1.25rem; }

  /* خريطة المعرفة: رسم على سطح المكتب، وقائمة مقروءة على الجوال */
  .kc-graph svg { display: none; }
  .kc-graph__list { display: flex; }

  .ai-actions { gap: 0.4rem; }
  .ai-act { padding: 0.42rem 0.85rem; font-size: 0.78rem; } /* هدف لمس أكبر */
}

/* ---------- طباعة: المعرفة تبقى، الزينة تذهب ---------- */
@media print {
  .ai-actions, .ai-panel, .continue, .rail { display: none; }
  .entry-body { max-inline-size: none; }
  .kc { border-color: #ccc; break-inside: avoid; }
}

/* ============================================================
   عناصر مشاهد الرئيسية المكمّلة
   ============================================================ */

.section-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.8rem);
  line-height: 1.24; margin-block: 0.6rem 1.2rem;
}
.section-title a { color: inherit; text-decoration: none; }
.section-title a:hover { color: var(--c-accent); }

.btn--light {
  background: var(--c-bg); color: var(--c-dark); border-color: var(--c-bg);
}
.btn--light:hover { background: transparent; color: var(--c-on-dark, #F4EFE6); }

/* الانقسام غير المتماثل */
.split-editorial__body { align-self: center; }
.split-editorial__body > * + * { margin-block-start: 1.1rem; }

/* الرحلة المعرفية */
.journey__num {
  font-family: var(--f-display); font-size: 1.6rem; color: var(--c-accent);
  line-height: 1;
}
.journey__title { font-family: var(--f-display); font-size: 1.12rem; margin-block: 0.6rem 0.4rem; }
.journey__text { font-size: 0.88rem; color: var(--c-muted); line-height: 1.75; }

/* أحجام مختلطة */
.mixed__media { aspect-ratio: 4/3; overflow: hidden; background: var(--c-stone); border-radius: var(--radius-sm, 3px); }
.mixed__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mixed__lead { display: block; text-decoration: none; color: inherit; }
.mixed__lead > * + * { margin-block-start: 0.7rem; }

.mixed__item {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 1rem;
  align-items: center; text-decoration: none; color: inherit;
  padding-block: 0.9rem; border-block-end: 1px solid var(--c-linen);
}
.mixed__item:last-child { border-block-end: 0; }
.mixed__thumb { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm, 3px); background: var(--c-stone); }
.mixed__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* سوق الذهب */
.gold-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-block-start: 1.6rem;
}
.gold-card {
  border: 1px solid var(--c-border-dark, rgba(244,239,230,.14));
  border-radius: var(--radius-sm, 3px); padding: 1.2rem;
}
.gold-card__karat { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--c-accent); }
.gold-card__price { font-family: var(--f-display); font-size: 1.9rem; margin-block: 0.4rem 0.2rem; }
.gold-card__change { font-size: 0.82rem; }
.gold-card__change.is-up { color: #7FA894; }
.gold-card__change.is-down { color: #C08A7A; }

/* حكم المقارنة */
.kc-verdict {
  margin-block-start: 1.2rem; font-size: 0.94rem; line-height: 1.8;
  color: var(--c-charcoal); border-inline-start: 2px solid var(--c-accent);
  padding-inline-start: 1rem;
}

/* شريط تقدّم القراءة — خط رفيع بلا أرقام */
.reading-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 90;
  block-size: 2px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: right center;
  will-change: transform;
}
[dir="ltr"] .reading-progress { transform-origin: left center; }

/* ذيل المقالة */
.entry-foot { margin-block-start: clamp(3rem, 7vw, 6rem); }

/* مكوّنات لم تجد موضعاً في التخطيط — تُعرض ولا تُرمى. */
.kc-leftovers { display: grid; gap: var(--sp-gap, 2rem); }