/* =========================================================
   vcard1-enhance.css
   تحسينات بصرية على القالب الأول: تنعيم الخلفية خلف الشعار،
   تكبير الشعار، وهالة ضوئية رفيعة حوله.

   الملف مستقل تماماً عن vcard1.css المُجمَّع، فلا يُمحى
   عند إعادة بناء الأصول.
   ---------------------------------------------------------
   كل القيم متغيرات في الأعلى — عدّلها وحدها.
   ========================================================= */

.vcard-one {
  /* -------------------------------------------------------
     ★ حجم الشعار — فعّل سطراً واحداً فقط
     ------------------------------------------------------- */

  /* الحجم الأصلي للقالب */
  /* --v1-avatar-size: 95px; */

  /* أكبر قليلاً */
  /* --v1-avatar-size: 115px; */

  /* متوازن — مفعّل */
  --v1-avatar-size: 150px;

  /* بارز */
  /* --v1-avatar-size: 155px; */

  /* ضخم */
  /* --v1-avatar-size: 180px; */

  /* -------------------------------------------------------
     ★ توليفات الخلفية — فعّل سطراً واحداً فقط
     ---------------------------------------------------------
     blur = شدة الضبابية بالبكسل (0 = بلا ضبابية)
     dim  = السطوع كنسبة من الأصلي (1 = بلا تعتيم)

     لتغيير التوليفة: ضع علامة تعليق على السطرين المفعّلين
     وأزلها عن التوليفة التي تريدها.
     ------------------------------------------------------- */

  /* بلا أي تأثير */
  /* --v1-banner-blur: 0px;   --v1-banner-dim: 1; */

  /* لمسة خفيفة */
  --v1-banner-blur: 2px;   --v1-banner-dim: 0.92; 

  /* ضبابية واضحة بتعتيم خفيف — مفعّل */
 /* --v1-banner-blur: 6px;*/
 /* --v1-banner-dim: 0.95;*/

  /* متوازن */
  /* --v1-banner-blur: 6px;   --v1-banner-dim: 0.75; */

  /* الشعار هو البطل */
  /* --v1-banner-blur: 12px;  --v1-banner-dim: 0.6; */

  /* خلفية لونية مجردة */
  /* --v1-banner-blur: 20px;  --v1-banner-dim: 0.55; */

  /* سماكة الحلقة حول الشعار — أبقها رفيعة */
  --v1-ring-width: 2px;
  --v1-ring-color: rgba(255, 255, 255, 0.95);

  /* -------------------------------------------------------
     ★ الهالة حول الشعار — فعّل مجموعة واحدة فقط
     ------------------------------------------------------- */

  /* بلا هالة */
  /* --v1-glow-color: rgba(255, 255, 255, 0);    --v1-glow-spread: 0px; */

  /* هادئة */
  /* --v1-glow-color: rgba(255, 255, 255, 0.35); --v1-glow-spread: 14px; */

  /* متوازنة — مفعّلة */
  --v1-glow-color: rgba(255, 255, 255, 0.55);
  --v1-glow-spread: 22px;

  /* قوية */
  /* --v1-glow-color: rgba(255, 255, 255, 0.8);  --v1-glow-spread: 34px; */

  /* ذهبية */
  /* --v1-glow-color: rgba(255, 199, 89, 0.7);   --v1-glow-spread: 28px; */

  /* سماوية */
  /* --v1-glow-color: rgba(120, 210, 255, 0.7);  --v1-glow-spread: 28px; */
}

/* =========================================================
   ١) الخلفية: تنعيم وتعتيم خفيفان
   ========================================================= */

body .vcard-one .vcard-one__banner {
  position: relative;
  overflow: hidden;
}

body .vcard-one .vcard-one__banner img {
  filter: blur(var(--v1-banner-blur)) brightness(var(--v1-banner-dim)) !important;
  /* التكبير الطفيف يخفي الحواف الشفافة الناتجة عن التنعيم */
  /* التكبير يخفي الحواف الشفافة الناتجة عن الضبابية.
     إن رفعت blur فوق 15px زد هذه القيمة إلى 1.12 */
  transform: scale(1.08) !important;
  transition: filter .3s ease;
}

/* تدرّج داكن يتركّز أسفل الغلاف حيث يقع الشعار،
   فيزيد التباين دون أن يطمس الصورة */
body .vcard-one .vcard-one__banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 100%,
      rgba(0, 0, 0, .38) 0%,
      rgba(0, 0, 0, .16) 38%,
      rgba(0, 0, 0, 0) 68%);
}

/* =========================================================
   ٢) الشعار: أكبر، بحلقة رفيعة وهالة ناعمة
   ========================================================= */

body .vcard-one .vcard-one__profile .avatar {
  width: var(--v1-avatar-size) !important;
  height: var(--v1-avatar-size) !important;
  z-index: 3;
}

body .vcard-one .vcard-one__profile .avatar img {
  width: var(--v1-avatar-size) !important;
  height: var(--v1-avatar-size) !important;
  max-width: none !important;
  object-fit: cover;
  background: #fff;

  /* حلقة رفيعة + هالة متدرجة بثلاث طبقات
     لتبدو ضوئية لا كإطار سميك */
  box-shadow:
    0 0 0 var(--v1-ring-width) var(--v1-ring-color),
    0 0 calc(var(--v1-glow-spread) * 0.5) rgba(255, 255, 255, .45),
    0 0 var(--v1-glow-spread) var(--v1-glow-color),
    0 10px 26px rgba(0, 0, 0, .28);

  border: 0 !important;
}

/* المسافة تحت الغلاف تتبع حجم الشعار الجديد */
body .vcard-one .vcard-one__profile {
  min-height: calc(var(--v1-avatar-size) / 2);
}

/* =========================================================
   ٣) شاشات صغيرة
   ========================================================= */

@media (max-width: 575.98px) {
  .vcard-one {
    --v1-avatar-size: 116px;
    --v1-banner-blur: 2px;
    --v1-glow-spread: 16px;
  }
}

/* =========================================================
   ٤) احترام تفضيل تقليل الحركة
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  body .vcard-one .vcard-one__banner img {
    transition: none;
  }
}