/* ============================================================
   VianWidgets - ودجات "فيان" الجانبية الثلاث
   ============================================================
   نفس فلسفة الألوان الحيّة المستخدمة في كل مكان بالمشروع: الألوان تُحسب من
   الألوان الفعلية المعروضة في القالب (عبر vian-widgets.js)، وليست ألوان GameSpot
   الثابتة - فقط الهيكل البصري (الشريط الثلاثي + الصندوق المؤطَّر + قائمة العناصر)
   مستوحى من تصميمهم، بهوية ألوان خاصة بالموقع نفسه تتكيّف تلقائياً مع الوضع الليلي.
   ============================================================ */

:root {
    --vian-widget-bg: #ffffff;
    --vian-widget-text: #1a1a1a;
    --vian-widget-muted: rgba(0, 0, 0, 0.55);
    --vian-widget-border: rgba(0, 0, 0, 0.12);
    --vian-widget-accent: #734f96;
    --vian-widget-item-bg: rgba(0, 0, 0, 0.02);
    --vian-widget-ring-color: #e32636;
    --vian-widget-track-color: rgba(0, 0, 0, 0.12);
    /* استدارة متوسطة مقصودة - لا حادة (0) ولا دائرية بالكامل (نصف الارتفاع) */
    --vian-widget-radius: 3px;
    --vian-widget-shadow-radius: 3px;
}

.vian-widget {
    position: relative;
    margin: 0 0 34px;
    margin-inline-end: 12px;
    /* حشو داخلي مخصص فقط لاحتواء الظل بالكامل ضمن حدود هذا العنصر نفسه (8px أسفل
       و8px يسار) - وليس بروزاً خارج حدوده. هذا مقصود ومهم: التصميم السابق كان
       يعتمد على بروز الظل خارج حدود هذا العنصر (إزاحة سالبة)، وهو ما يتطلّب سماح كل
       عنصر أب على الصفحة بذلك البروز (overflow غير مقطوع) - أمر لا يمكن ضمانه دائماً
       على أي موقع حقيقي بصرف النظر عن صحة الكود نفسه. الآن الظل بالكامل "منحوت" من
       داخل مساحة هذا العنصر نفسه، فلا يعتمد إطلاقاً على أي عنصر آخر في الصفحة. */
    padding-bottom: 8px;
    padding-left: 8px;
    font-family: inherit;
    overflow: visible;
}

/* ------------------------------------------------------------
   الظل - شكل حرف L صلب (بلا تمويه) خلف الصندوق: يظهر فقط أسفل الصندوق ويسـاره
   (وليس أعلاه أو يمينه إطلاقاً)، بعرض 8px، يبدأ بفجوة 10px قبل الوصول لكل زاوية
   بعيدة (أسفل يمين الودجة، وأعلى يسارها)، بأطراف حرّة حادة نسبياً، وزاوية داخلية
   (حيث يلتقي ضلعا الأسفل واليسار) بنفس الحدّة لتبدو متصلة ومرتّبة - وليست مجرد
   التقاء حاد بين قطعتين منفصلتين. لون الظل مطابق تماماً للون حد الصندوق (كلاهما
   يقرأ من نفس متغيّر --vian-widget-accent مباشرة، فيستحيل أن يختلفا).
   ------------------------------------------------------------
   الهندسة: عنصر واحد فقط، أبعاده منسوبة لحواف .vian-widget نفسها (التي تحتوي الآن
   على الحشو أعلاه) - فتبقى بالكامل "محفورة" داخل مساحته، لا بارزة خارجها:
   - top:10px  → يتوقف الجزء العلوي (نهاية ضلع اليسار) قبل الزاوية العلوية اليسرى بـ10px
   - right:10px → يتوقف الجزء الأيمن (بداية ضلع الأسفل) قبل الزاوية السفلية اليمنى بـ10px
   - bottom:0 / left:0 → يلامس بالضبط الحافة الخارجية السفلية واليسرى لـ.vian-widget
     نفسها (وليس تجاوزها) - السماكة الفعلية للظل (8px) توفّرها مساحة الحشو أعلاه.
   الزاوية العلوية اليمنى لهذا العنصر مخفية بالكامل خلف الصندوق نفسه (لا تأثير بصري)،
   لذلك تبقى حادة دون أي داعٍ لاستدارتها.
   ------------------------------------------------------------ */
.vian-widget::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 0;
    left: 0;
    background: var(--vian-widget-accent);
    border-top-left-radius: var(--vian-widget-shadow-radius);
    border-bottom-right-radius: var(--vian-widget-shadow-radius);
    border-bottom-left-radius: var(--vian-widget-shadow-radius);
    border-top-right-radius: 0;
    z-index: 0;
}

/* ------------------------------------------------------------
   الصندوق - إطار واحد متّسق تماماً يحتضن المحتوى كوحدة بصرية واحدة. خط 2px واحد
   متّسق على الجهات الأربع كلها، بنفس لون الظل تماماً (--vian-widget-accent مباشرة،
   بلا أي تخفيف/تفتيح منفصل). استدارة واحدة متوسطة على كل الزوايا الأربع.
   ------------------------------------------------------------ */
.vian-widget-box {
    position: relative;
    z-index: 1;
    background: var(--vian-widget-bg) !important;
    border: 2px solid var(--vian-widget-accent);
    border-radius: var(--vian-widget-radius);
    overflow: hidden;
}

.vian-widget-content {
    padding: 18px;
    box-sizing: border-box;
}


.vian-widget-heading {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--vian-widget-text);
    margin: 0 0 16px;
    text-align: start;
}

/* ------------------------------------------------------------
   قائمة العناصر
   ------------------------------------------------------------ */
.vian-widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vian-widget-item {
    margin: 0;
    padding: 0;
}

.vian-widget-item + .vian-widget-item {
    border-block-start: 1px solid var(--vian-widget-border);
    margin-block-start: 12px;
    padding-block-start: 12px;
}

.vian-widget-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
    color: inherit;
}

.vian-widget-thumb {
    flex-shrink: 0;
    display: block;
    width: 112px;
    aspect-ratio: 16 / 9;
    border-radius: 5px;
    overflow: hidden;
    background: var(--vian-widget-item-bg);
}

.vian-widget-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0 !important;
}

.vian-widget-body {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.vian-widget-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--vian-widget-text);
    margin: 0 0 6px;
}

.vian-widget-link:hover .vian-widget-title {
    color: var(--vian-widget-accent);
}

.vian-widget-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--vian-widget-muted);
}

.vian-widget-meta .meta-item {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: inherit;
    color: inherit;
}

.vian-widget-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------------------
   شارة التقييم المصغّرة (نفس رياضيات حلقة VianLayout، بحجم أصغر يناسب الودجة)
   ------------------------------------------------------------ */
.vian-widget-score {
    flex-shrink: 0;
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vian-widget-score-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(-1) rotate(-90deg);
    transform-origin: 50% 50%;
}

.vian-widget-score-ring-track {
    fill: none;
    stroke: var(--vian-widget-track-color);
    stroke-width: 4;
    opacity: 0.7;
}

.vian-widget-score-ring-progress {
    fill: none;
    stroke: var(--vian-widget-ring-color);
    stroke-width: 4;
    stroke-linecap: round;
}

.vian-widget-score-number {
    position: relative;
    font-size: 13px;
    font-weight: 800;
    color: var(--vian-widget-text);
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   مساحة الإعلان - بلا أي قياس ثابت، تتكيّف تلقائياً مع أبعاد الإعلان نفسه
   ------------------------------------------------------------ */
.vian-widget-ad-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.vian-widget-ad-slot > * {
    max-width: 100%;
    height: auto;
}

@media (max-width: 480px) {
    .vian-widget-thumb {
        width: 90px;
    }

    .vian-widget-title {
        font-size: 13.5px;
    }

    .vian-widget-score {
        width: 36px;
        height: 36px;
    }

    .vian-widget-score-number {
        font-size: 12px;
    }
}