/* ===== team-roster.css — سجل القبيلة =====
 *
 * عرض فريق العمل كسجل رتب، لا كبطاقات متوهجة.
 * الفكرة مأخوذة من عالم اللعبة نفسها: القبيلة لها رتب، والرتبة تُقرأ من شكل
 * اللوحة نفسها (شريط الرتبة على الحافة) قبل أن تُقرأ من نصّها.
 *
 * كل المتغيرات محصورة داخل .tm-roster حتى لا تتسرب إلى بقية الموقع.
 */

/* ===== القسم في الصفحة الرئيسية ===== */

.tm-section {
    padding: 6rem 0;
    background: #0B0E13;
}

.tm-section__head {
    margin-bottom: 2.5rem;
    max-width: 46ch;
}

.tm-section__title {
    font-family: 'Reem Kufi', 'Segoe UI', sans-serif;
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    font-weight: 600;
    color: #EDE7DA;
    margin: 0 0 .6rem;
    letter-spacing: 0;
}

.tm-section__lede {
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #8A94A6;
    margin: 0;
}

.tm-roster {
    /* اللوحة */
    --vault: #0B0E13;
    --plate: #161B24;
    --plate-lift: #1B2230;
    --etch: #232B37;

    /* النص */
    --bone: #EDE7DA;
    --ash: #8A94A6;

    /* الإشارات */
    --ember: #E2673C;

    /* الشكل */
    --notch: 18px;
    --rank-w: 3px;

    --font-display: 'Reem Kufi', 'Segoe UI', sans-serif;
    --font-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --font-data: 'IBM Plex Mono', ui-monospace, monospace;

    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* ===== المستوى (القيادة / الإشراف / الأقسام / الطاقم) ===== */

.tm-tier {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tm-tier__head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tm-tier__label {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--bone);
    letter-spacing: 0;
    margin: 0;
    white-space: nowrap;
}

[dir="ltr"] .tm-tier__label {
    letter-spacing: .04em;
}

/* الخط الفاصل يحمل معنى: يمتد ليملأ ما تبقى، فيقرأ المستوى كسطر في سجل */
.tm-tier__rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--etch) 15%);
}

[dir="ltr"] .tm-tier__rule {
    background: linear-gradient(to right, transparent, var(--etch) 15%);
}

.tm-tier__count {
    font-family: var(--font-data);
    font-size: .75rem;
    color: var(--ash);
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
}

.tm-tier__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

/* القيادة تأخذ لوحات أعرض — الهرمية تُقرأ من الحجم قبل النص */
.tm-tier[data-tier="command"] .tm-tier__grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    max-width: 780px;
}

/* ===== اللوحة ===== */

.tm-plate {
    --accent: var(--ember);

    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.5rem 1.15rem 1.15rem;
    padding-inline-start: 1.5rem;

    background: var(--plate);
    border: 1px solid var(--etch);
    isolation: isolate;
    overflow: hidden;

    /* الحافة المقطوعة — صفيحة هوية، لا بطاقة */
    clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));

    transition: background-color .25s ease, transform .25s ease, border-color .25s ease;
}

[dir="ltr"] .tm-plate {
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}

/* شريط الرتبة — التوقيع. عدد الشرائح = المستوى. */
.tm-plate__rank {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--rank-w);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-block: 14px;
    z-index: 2;
}

.tm-plate__rank span {
    flex: 1;
    background: var(--accent);
    opacity: .55;
    transition: opacity .25s ease;
}

.tm-plate:hover {
    background: var(--plate-lift);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--etch));
    transform: translateY(-2px);
}

.tm-plate:hover .tm-plate__rank span {
    opacity: 1;
}

/* الخلفية المتحركة للرتب العليا — خافتة، تحت المحتوى */
.tm-plate__overlay {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .14;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}

/* ===== الصورة ===== */

.tm-plate__avatar {
    position: relative;
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    z-index: 1;
}

.tm-tier[data-tier="command"] .tm-plate__avatar {
    width: 72px;
    height: 72px;
}

/* حلقة بلون الرتبة — بديل الأطر الخارجية الميتة، تُرسم محلياً ولا تتعطل */
.tm-plate__photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--vault);

    border: 2px solid var(--accent);
    box-shadow: 0 0 0 4px var(--plate), 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* إطار الرتبة (اختياري، يُضبط من config/team.js) */
.tm-plate__frame {
    position: absolute;
    inset: -18%;
    width: 136%;
    height: 136%;
    pointer-events: none;
    object-fit: contain;
}

/* ===== النص ===== */

.tm-plate__body {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.tm-plate__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--bone);
    margin: 0;
    letter-spacing: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-tier[data-tier="command"] .tm-plate__name {
    font-size: 1.25rem;
}

/* الرتبة: نص صغير بلون الرتبة — لا شارة ولا إيموجي.
 *
 * العربية تُكتب بخط عربي وبلا تباعد حروف: الخط الأحادي (Plex Mono) بلا محارف
 * عربية، والتباعد يقطع اتصال الحروف. المظهر الأحادي المتباعد يبقى للاتينية فقط. */
.tm-plate__title {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0;
    margin: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[dir="ltr"] .tm-plate__title {
    font-family: var(--font-data);
    font-size: .7rem;
    letter-spacing: .08em;
}

.tm-plate__bio {
    font-size: .8rem;
    line-height: 1.5;
    color: var(--ash);
    margin: .3rem 0 0;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== الحالات ===== */

.tm-skeleton {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}

.tm-skeleton__plate {
    height: 92px;
    background: linear-gradient(100deg, var(--plate) 30%, var(--plate-lift) 50%, var(--plate) 70%);
    background-size: 220% 100%;
    animation: tm-shimmer 1.4s ease-in-out infinite;
    clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
}

@keyframes tm-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: -100% 0; }
}

.tm-state {
    padding: 3rem 0;
    text-align: center;
    color: var(--ash);
    font-size: .9rem;
}

.tm-state--error {
    color: var(--ember);
}

/* زر إعادة المحاولة — الخطأ يقول ما حدث وكيف يُصلَح، لا يعتذر */
.tm-retry {
    margin-top: .75rem;
    padding: .45rem 1.2rem;
    font-family: var(--font-data);
    font-size: .75rem;
    color: var(--bone);
    background: transparent;
    border: 1px solid var(--etch);
    cursor: pointer;
    transition: border-color .2s ease;
}

.tm-retry:hover {
    border-color: var(--ember);
}

/* ===== الوصول ===== */

.tm-plate:focus-visible,
.tm-retry:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .tm-plate,
    .tm-plate__rank span {
        transition: none;
    }

    .tm-plate:hover {
        transform: none;
    }

    .tm-skeleton__plate {
        animation: none;
    }
}

/* ===== الجوال ===== */

@media (max-width: 640px) {
    .tm-roster {
        gap: 2.5rem;
    }

    .tm-tier__grid,
    .tm-tier[data-tier="command"] .tm-tier__grid {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .tm-plate {
        padding-inline-start: 1.25rem;
    }
}