/* =========================================================
   تصميم النعوة نفسها
   كل المقاسات بوحدة cqw (نسبة من عرض النعوة)، لذلك تبدو النعوة
   متطابقة في المعاينة الصغيرة وعلى ورقة A3 وفي الصورة المصدّرة.
   --k  : معامل الحجم العام (يضبطه obit.js ليملأ النص الصفحة دون أن يخرج عنها)
   --nk : معامل حجم الاسم ليبقى في سطر واحد
   --fs : معامل خاص بكل قالب
   ========================================================= */

.obit {
  --k: 1; --nk: 1; --fs: 1;
  --z: calc(var(--k) * var(--fs));
  --ink: #111;
  --rule: #111;
  --accent: #111;
  --name: #111;
  --label: #111;
  --mosque: #111;
  /* خط ووزن ومقياس كل قسم — القيم هنا هي خطوط القالب الافتراضية،
     وما يختاره المستخدم يُكتب على النعوة نفسها فيتقدّم عليها */
  --f-title: 'Aref Ruqaa'; --w-title: 700;
  --f-mourners: 'Cairo';   --w-mourners: 900;
  --f-announce: 'Cairo';   --w-announce: 700;
  --f-name: 'Lalezar';     --w-name: 400;
  --f-rels: 'Cairo';       --w-rels: 800;
  --f-prayer: 'Cairo';     --w-prayer: 800;
  --f-mosque: 'Lalezar';   --w-mosque: 400;
  --f-cond: 'Cairo';       --w-cond: 800;
  --f-dua: 'Cairo';        --w-dua: 800;
  --sz-title: 1; --sz-mourners: 1; --sz-announce: 1; --sz-name: 1; --sz-rels: 1;
  --sz-prayer: 1; --sz-mosque: 1; --sz-cond: 1; --sz-dua: 1;
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / var(--ratio, 1.4142);
  background: #fff;
  color: var(--ink);
  overflow: hidden;
  direction: rtl;
  text-align: center;
  font-family: "Cairo", Tahoma, sans-serif;
  font-weight: 800;
  line-height: 1.45;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  break-inside: avoid;
  page-break-inside: avoid;
  user-select: text;
}
.obit * { box-sizing: border-box; }

.ob-frame { position: absolute; inset: 0; pointer-events: none; }

.ob-in {
  position: absolute;
  inset: 3.4cqw 3.8cqw 3cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(0.7cqw * var(--z));
}
.ob-in > * { flex: none; margin: 0; }
.ob-pray-block { display: contents; }

/* الجملة الأولى */
.ob-head { display: flex; align-items: center; justify-content: center; gap: 3cqw; color: var(--accent); }
.ob-orn { width: calc(7.5cqw * var(--z) * var(--sz-title)); height: calc(7.5cqw * var(--z) * var(--sz-title)); flex: none; }
.ob-phrase {
  font-family: var(--f-title), "Amiri", serif; font-weight: var(--w-title);
  font-size: calc(5.2cqw * var(--z) * var(--sz-title)); line-height: 1.35; min-width: 0;
}

/* الناعون */
.ob-mourners {
  font-family: var(--f-mourners), "Cairo", sans-serif; font-weight: var(--w-mourners);
  font-size: calc(4.9cqw * var(--z) * var(--sz-mourners)); line-height: 1.38;
}

.ob-announce {
  font-family: var(--f-announce), "Cairo", sans-serif; font-weight: var(--w-announce);
  font-size: calc(2.55cqw * var(--z) * var(--sz-announce)); line-height: 1.5;
  border-bottom: 0.32cqw solid var(--rule); padding-bottom: 0.5cqw; margin-inline: 2cqw;
}

/* الاسم */
.ob-name {
  font-family: var(--f-name), "Cairo", sans-serif; font-weight: var(--w-name);
  font-size: calc(11.5cqw * var(--z) * var(--nk) * var(--sz-name)); line-height: 1.22;
  color: var(--name); white-space: nowrap; overflow: visible;
}
.ob-name > span { display: inline-block; }
.ob-extra {
  font-family: var(--f-announce), "Cairo", sans-serif; font-weight: var(--w-announce);
  font-size: calc(3cqw * var(--z) * var(--sz-announce));
}
.ob-ph { color: #C2C7C9; }

/* الأقارب والصورة */
.ob-body { display: flex; gap: 2.6cqw; align-items: flex-start; text-align: start; }
.ob-rels {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: max-content max-content minmax(0, 1fr);
  column-gap: 0.9cqw; row-gap: calc(0.45cqw * var(--z));
  font-family: var(--f-rels), "Cairo", sans-serif; font-weight: var(--w-rels);
  font-size: calc(3.2cqw * var(--z) * var(--sz-rels)); line-height: 1.42;
}
.ob-rel { display: contents; }
.ob-lb { white-space: nowrap; color: var(--label); }
.ob-cl { color: var(--label); }
.ob-nm { min-width: 0; overflow-wrap: anywhere; }
.ob-photo { flex: none; width: 27cqw; order: 2; }
.ob-photo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; background: #eee; }

/* الصلاة والدفن */
.ob-prayer, .ob-burial { font-family: var(--f-prayer), "Cairo", sans-serif; font-weight: var(--w-prayer); }
.ob-prayer {
  font-size: calc(3.25cqw * var(--z) * var(--sz-prayer)); line-height: 1.5;
  border-top: 0.32cqw solid var(--rule); padding-top: 0.7cqw; margin-inline: 2cqw;
}
.ob-mosque {
  font-family: var(--f-mosque), "Cairo", sans-serif; font-weight: var(--w-mosque);
  font-size: calc(7.2cqw * var(--z) * var(--sz-mosque)); line-height: 1.2; color: var(--mosque);
}
.ob-burial { font-size: calc(3.2cqw * var(--z) * var(--sz-prayer)); }

/* التعزية */
.ob-cond {
  font-family: var(--f-cond), "Cairo", sans-serif; font-weight: var(--w-cond);
  font-size: calc(3.15cqw * var(--z) * var(--sz-cond)); line-height: 1.5;
  border-top: 0.32cqw solid var(--rule); padding-top: 0.7cqw; margin-inline: 2cqw;
}

/* الجملة الأخيرة والجهة */
.ob-dua {
  font-family: var(--f-dua), "Cairo", sans-serif; font-weight: var(--w-dua);
  font-size: calc(2.85cqw * var(--z) * var(--sz-dua)); line-height: 1.5;
  border-top: 0.9cqw double var(--rule); border-bottom: 0.9cqw double var(--rule);
  padding: 0.5cqw 1cqw; color: var(--accent);
}
.ob-org { font-weight: 700; font-size: calc(2cqw * var(--z)); color: #444; line-height: 1.4; }

/* عند تعذّر احتواء النص */
.obit.ob-overflow::after {
  content: "النص أطول من مساحة الصفحة"; position: absolute; inset-inline: 0; bottom: 0;
  background: #B3261E; color: #fff; font: 600 2.6cqw/1.8 "IBM Plex Sans Arabic", Tahoma, sans-serif;
}
.obit.ob-exporting::after { display: none; }

/* =========================================================
   قالب: كلاسيكي بلا صورة — عناوين القرابة مسطّرة
   ========================================================= */
.tpl-classic .ob-lb { text-decoration: underline; text-decoration-thickness: 0.22cqw; text-underline-offset: 0.8cqw; }
.tpl-classic .ob-rels { row-gap: calc(0.9cqw * var(--z)); }

/* =========================================================
   قالب: إطار هادئ — ألوان مستوحاة من التدرّج الأزرق الأخضر
   ========================================================= */
.tpl-framed {
  --ink: #18272E; --rule: #2E7B8B; --accent: #2E7B8B; --name: #1F4E78; --label: #2E7B8B; --mosque: #2F7A4C;
  background: #FCFDFD;
}
.tpl-framed .ob-frame {
  inset: 1.8cqw;
  border: 1cqw double #2E7B8B;
  border-radius: 0.8cqw;
}
.tpl-framed .ob-frame::before, .tpl-framed .ob-frame::after {
  content: ""; position: absolute; width: 3.2cqw; height: 3.2cqw; background: #3C915C; transform: rotate(45deg);
  top: -2.1cqw; left: calc(50% - 1.6cqw); border: 0.6cqw solid #FCFDFD;
}
.tpl-framed .ob-frame::after { top: auto; bottom: -2.1cqw; }
.tpl-framed .ob-in { inset: 5.6cqw 6cqw 5cqw; }
.tpl-framed .ob-announce, .tpl-framed .ob-prayer, .tpl-framed .ob-cond { border-width: 0.22cqw; }
.tpl-framed .ob-dua { background: #EDF5F6; border: 0; border-radius: 1cqw; padding: 0.9cqw 1.4cqw; color: #23626F; }
.tpl-framed .ob-photo img { border-radius: 1cqw; box-shadow: 0 0 0 0.5cqw #fff, 0 0 0 0.8cqw #2E7B8B; }

/* =========================================================
   قالب: منشور للمشاركة 4:5
   ========================================================= */
.tpl-post {
  --ink: #18272E; --rule: #CFDCDF; --accent: #2E7B8B; --name: #17262D; --label: #2E7B8B; --mosque: #23598C;
  --fs: 1.04;
}
.tpl-post .ob-frame::before, .tpl-post .ob-frame::after {
  content: ""; position: absolute; inset-inline: 0; height: 1.6cqw;
  background: linear-gradient(90deg, #3C915C, #2E7B8B 50%, #2867A4);
}
.tpl-post .ob-frame::before { top: 0; }
.tpl-post .ob-frame::after { bottom: 0; }
.tpl-post .ob-in { inset: 5cqw 4.6cqw 4.4cqw; }
.tpl-post .ob-orn { display: none; }
.tpl-post .ob-photo { width: 25cqw; }
.tpl-post .ob-photo img { border-radius: 1.6cqw; }
.tpl-post .ob-dua { border: 0; background: #F1F6F7; border-radius: 1.4cqw; padding: 0.9cqw 1.4cqw; color: #23626F; }

/* =========================================================
   قالب: حالة واتساب 9:16 — الصورة دائرية في الأعلى
   ========================================================= */
.tpl-story {
  --ink: #18272E; --rule: #CFDCDF; --accent: #2E7B8B; --name: #17262D; --label: #2E7B8B; --mosque: #23598C;
  --fs: 1.3;
  background: linear-gradient(180deg, #EDF5F6 0%, #FFFFFF 26%, #FFFFFF 80%, #EEF6F1 100%);
}
.tpl-story .ob-frame::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2cqw;
  background: linear-gradient(90deg, #3C915C, #2E7B8B 50%, #2867A4);
}
.tpl-story .ob-in { inset: 7cqw 5.5cqw 6cqw; }
.tpl-story .ob-orn { display: none; }
.tpl-story .ob-photo-top { align-self: center; width: 38cqw; }
.tpl-story .ob-photo-top img { aspect-ratio: 1; border-radius: 50%; border: 1.4cqw solid #fff; box-shadow: 0 0 0 0.6cqw #2E7B8B; }
.tpl-story .ob-rels { grid-template-columns: max-content max-content minmax(0, 1fr); }
.tpl-story .ob-dua { border: 0; color: #23626F; }

/* =========================================================
   قالب: شريط رمادي — عبارة النعي والصلاة داخل شريطين رماديين،
   والجملة الأولى والأخيرة بخط الخطّ العربي
   ========================================================= */
.tpl-band {
  --band: #8C8C8C;
  --f-dua: 'Aref Ruqaa'; --w-dua: 700;
}
.tpl-band .ob-in { inset: 4cqw 4.4cqw 3.4cqw; }
.tpl-band .ob-orn { display: none; }
.tpl-band .ob-phrase { font-size: calc(7.6cqw * var(--z) * var(--sz-title)); line-height: 1.25; }
.tpl-band .ob-mourners { font-size: calc(5.6cqw * var(--z) * var(--sz-mourners)); }
.tpl-band .ob-announce {
  background: var(--band); color: #fff; border: 0; margin-inline: 0;
  padding: calc(1.3cqw * var(--z)) 2cqw;
}
.tpl-band .ob-rels { row-gap: calc(1.1cqw * var(--z)); font-size: calc(3.35cqw * var(--z) * var(--sz-rels)); }
.tpl-band .ob-lb {
  text-decoration: underline; text-decoration-thickness: 0.3cqw; text-underline-offset: 1cqw;
  min-width: 15cqw; display: inline-block;
}
.tpl-band .ob-pray-block {
  display: block; background: var(--band); color: #fff; margin-inline: -4.4cqw;
  padding: calc(1.2cqw * var(--z)) 4.4cqw;
}
.tpl-band .ob-prayer { border: 0; padding: 0; margin: 0; font-size: calc(2.9cqw * var(--z) * var(--sz-prayer)); }
.tpl-band .ob-mosque {
  color: #fff; font-family: var(--f-mosque), "Cairo", sans-serif;
  font-size: calc(4.6cqw * var(--z) * var(--sz-mosque)); margin-top: 0.4cqw;
}
.tpl-band .ob-burial { margin-top: 0.3cqw; }
.tpl-band .ob-cond { border: 0; padding-top: 0; }
.tpl-band .ob-dua { border: 0; padding: 0; font-size: calc(4.4cqw * var(--z) * var(--sz-dua)); }