/* ============================================================
   spot.css - بطاقة الإعلان الترويجي (تحت الشريط وفوق بطاقة البحث)
   ------------------------------------------------------------
   * ملف مستقل يُحمَّل فقط حين يوجد إعلان يُعرض، فلا يكلّف الصفحات
     الأخرى أي طلب إضافي. تستخدمه أيضاً معاينة لوحة التحكم، فالمعاينة
     هي الشكل الفعلي نفسه (مصدر واحد للتصميم).
   * كل القيم تأتي من متغيرات الموقع (--primary وغيرها) مع قيم احتياطية
     تعمل خارج الموقع (معاينة لوحة التحكم)، فيتبع الوضع الفاتح والداكن.
   * الإعلان النصي بارتفاع ثابت (--spot-h)؛ إعلان الصورة يتبع مقاس صورته تلقائياً بحدود قصوى (--spot-img-w/h): الصور
     لا تُكبَّر ولا تُمطّ، والنص يُقتطع.
   * أسماء الأصناف محايدة عمداً (spot) لتفادي الإخفاء بالخطأ من قوائم
     حجب الإعلانات الشائعة.
   ============================================================ */

.spot {
    /* مرفوعة لتناسب تنسيق الموقع العام أكثر (كانت 112px، أقصر مما توحي به بطاقة البحث المجاورة)،
       ورُفعت مرة أخرى إلى 175/205 لأن أول رفع (150/180) بقي صغيراً بوضوح على شاشات الحاسوب تحديداً.
       صورة الحاسوب المقترح رفعها فعلياً (مقاس "الأفضل" في صفحة إضافة إعلان) عُدِّلت لتطابق 205 هنا تماماً */
    --spot-h: 175px;
    /* أقصى مقاس ظاهر لصورة البانر: العرض والارتفاع يتبعان الصورة تلقائياً
       (بلا تكبير)، وتُصغَّر بنسبتها إن زادت عن هذين الحدّين */
    --spot-img-w: 728px;
    --spot-img-h: 205px;
    position: relative;
    margin-bottom: 0.75rem;
    max-width: 100%;
}

.spot-link {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: var(--spot-h);
    min-height: 0;
    max-height: var(--spot-h);
    overflow: hidden;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border, #e2e8f0);
    box-shadow: var(--shadow, 0 4px 24px rgba(79, 70, 229, 0.08));
    color: #fff;
    text-decoration: none;
    transition: var(--transition, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
}

.spot-link:hover {
    box-shadow: var(--shadow-lg, 0 8px 40px rgba(79, 70, 229, 0.12));
    transform: translateY(-2px);
}

.spot-link:focus-visible {
    outline: 3px solid var(--primary, #4f46e5);
    outline-offset: 3px;
}

/* الوسم الصريح "إعلان" - يبقى دائماً ظاهراً للشفافية أمام الزائر */
.spot-tag {
    display: inline-block;
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.6;
    padding: 0 0.65rem;
    border-radius: var(--radius-full, 9999px);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-weight: 600;
}

/* ---------------- صورة كاملة ---------------- */
/* الإعلان بصورة كاملة: بلا إطار ولا خلفية ولا ظل، وتتقلّص الخانة إلى مقاس الصورة نفسه
   (لا مساحة زائدة يميناً ويساراً) وتتوسط الصفحة. */
.spot--wide .spot-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin-inline: auto;
    background: none;
    border: 0;
    box-shadow: none;
}

.spot--wide .spot-tag {
    position: absolute;
    top: 8px;
    inset-inline-start: 10px;
    z-index: 2;
}

/* الصورة تُعرض بحجمها الأصلي إن كانت أصغر من مساحة الإعلان (لا تُكبَّر ولا تتمدد)،
   وتُصغَّر بنسبتها فقط إن كانت أكبر حتى تناسب العرض والارتفاع الثابت، وتتوسط المساحة. */
.spot--wide picture {
    display: block;
}

/* الصور تُرفع بدقة أعلى (مثلاً 1400×394 للحاسوب وحتى 640×160 للهاتف) لتبقى نقية على الشاشات عالية
   الكثافة، وتُعرض بحجمها الطبيعي إن كانت أصغر من الحد الأقصى الظاهر (لا تُكبَّر)، وتُصغَّر
   بنسبتها إن كانت أكبر: العرض حتى --spot-img-w والارتفاع حتى --spot-img-h. */
.spot--wide img {
    display: block;
    width: auto;
    height: auto;
    /* بلا نسب مئوية عمداً: النسبة داخل حاوية تتقلّص إلى مقاس محتواها (fit-content) تجعل الحاوية
       أعرض من الصورة، فتنزاح الصورة عن المنتصف ولا يلتفّ التدوير حول حافتها. المقاس المطلق يجعل
       الرابط بمقاس الصورة تماماً فتتوسط الصفحة وتستدير كل زواياها. */
    max-width: var(--spot-img-w);
    max-width: min(var(--spot-img-w), calc(100vw - 2rem));
    max-height: var(--spot-img-h);
}

/* ---------------- نص / صورة + نص ---------------- */
.spot--text .spot-link {
    padding-inline: 1.5rem;
}

.spot-thumb {
    flex: none;
    height: calc(var(--spot-h) - 24px);
    aspect-ratio: 1;
    margin-inline-start: -0.5rem;
    border-radius: var(--radius, 12px);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
}

.spot-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spot-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.spot--text .spot-tag {
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.68rem;
    padding: 0 0.55rem;
}

.spot-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: 800;
    line-height: 1.3;
}

.spot-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    font-size: var(--font-size-sm, 0.875rem);
    opacity: 0.92;
    line-height: 1.5;
}

.spot-cta {
    flex: none;
    margin-inline-start: auto;
    padding: 0.55rem 1.3rem;
    border-radius: var(--radius-full, 9999px);
    background: #fff;
    color: var(--primary-dark, #4338ca);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 700;
    white-space: nowrap;
}

/* ---------------- الألوان (من ألوان الموقع نفسه) ---------------- */
.spot--primary .spot-link {
    background: var(--primary-gradient, linear-gradient(135deg, #4f46e5, #7c3aed));
    border-color: transparent;
}

.spot--success .spot-link {
    background: linear-gradient(135deg, #059669, #047857);
    border-color: transparent;
}

.spot--success .spot-cta {
    color: #047857;
}

.spot--dark .spot-link {
    background: linear-gradient(135deg, #1e293b, #0f172a);
}

.spot--dark .spot-cta {
    color: #0f172a;
}

.spot--light .spot-link {
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #0f172a);
}

.spot--light .spot-tag {
    background: var(--bg-input, #f1f5f9);
    color: var(--text-muted, #64748b);
}

.spot--light .spot-thumb {
    background: var(--bg-input, #f1f5f9);
}

.spot--light .spot-desc {
    color: var(--text-secondary, #334155);
    opacity: 1;
}

.spot--light .spot-cta {
    background: var(--primary, #4f46e5);
    color: #fff;
}

/* ---------------- الشاشات الأصغر: نفس الفكرة بارتفاع أقل ---------------- */
@media (max-width: 900px) {
    .spot {
        --spot-h: 130px;
    }
}

@media (max-width: 640px) {
    .spot {
        --spot-h: 108px;
        /* القيمتان ضُبطتا بالمعاينة الحية المباشرة (حقن في المتصفح) وموافقة صريحة على النتيجة -
           أقل من الحد الأقصى لعرض الشاشة (~327px) ولحد الاشتقاق في الخادم (640×160 في
           promoDeriveMobileImage()، promo-lib.php) عمداً: يبقى للصورة المخزَّنة هامش دقة إضافي
           فوق ما يُعرض هنا فعلياً، فتظهر حادة على شاشات الهاتف عالية الكثافة (retina) */
        --spot-img-w: 340px;
        --spot-img-h: 120px;
        /* كانت 1.25rem - أكبر حتى من المسافة نفسها على الحاسوب (0.75rem)، رغم أن شاشة
           الهاتف أضيق وتحتاج مساحة أقل لا أكثر */
        margin-bottom: 0.5rem;
    }


    /* موافقة صريحة من المستخدم على هذا التنازل: عرض شاشة الهاتف لا يسمح بزيادة --spot-img-w
       أكثر (المساحة المتاحة بعد هوامش الصفحة ~327px بالفعل)، والقصّ مرفوض، فتمديد طفيف للارتفاع
       (width/height ثابتان بدل auto+max) هو الخيار المتبقي الوحيد لإعلان أوضح على الهاتف - يُفقِد
       هذا نسبة الصورة الأصلية بدرجة طفيفة عادةً (الصور المرفوعة أعرض من 320×160 دائماً عملياً
       حسب الحد الأدنى المفروض عند الرفع، فهذا تصغير مع تمديد خفيف لا تكبير) */
    .spot--wide img {
        width: var(--spot-img-w);
        height: var(--spot-img-h);
        max-width: min(var(--spot-img-w), calc(100vw - 2rem));
    }

    .spot--text .spot-link {
        padding-inline: 1rem;
        gap: 0.75rem;
    }

    .spot-desc {
        display: none;
    }

    .spot-title {
        font-size: var(--font-size-base, 1rem);
    }

    .spot-cta {
        padding: 0.45rem 0.95rem;
        font-size: var(--font-size-xs, 0.75rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spot-link {
        transition: none;
    }

    .spot-link:hover {
        transform: none;
    }
}