/* Explain: Mobile-specific styles for track metadata layout and appearance. */
/* ---------- سطر معلومات الزفة على الجوال (صفحة الفنان) ---------- */
/* صفحة الفنان: تُعرض السنة والفئة وأسماء العريس والعروس في سطر واحد متناسق،
   تفصل بين عناصره فواصل نقطية، مع إبقاء الوسوم كما هي على الحاسب.
   صفحة «زفات بالأسماء» تعرض الوسوم بنفس تنسيق الصفحة الرئيسية (التفاف كامل). */

@media (max-width: 767px) {
    /* سطر واحد متكامل لا يلتفّ */
    #artistTracksBody .zafat-box-meta {
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.4rem;
        overflow: hidden;
    }

    /* إلغاء شكل الوسم الملوّن والاكتفاء بنصّ صغير متّسق */
    #artistTracksBody .zafat-box-meta .zafat-box-year,
    #artistTracksBody .zafat-box-meta .zafat-box-tag {
        flex-shrink: 0;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        font-size: 0.74rem;
        font-weight: 700;
        line-height: 1.7;
        white-space: nowrap;
    }

    #artistTracksBody .zafat-box-meta .zafat-box-year > i,
    #artistTracksBody .zafat-box-meta .zafat-box-tag > i {
        font-size: 0.66rem;
    }

    /* فاصل نقطي بين عناصر السطر */
    #artistTracksBody .zafat-box-meta > * + *::before {
        content: "\2022";
        margin-inline-end: 0.4rem;
        color: var(--border-color);
        font-size: 0.72rem;
    }

    /* أسماء العريس والعروس تمتدّ على بقيّة السطر وتُقصّ بثلاث نقاط عند الزيادة */
    #artistTracksBody .zafat-box-meta .zafat-box-names {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--gold-soft);
    }
}