/* ==========================================================
   CodeCaps — صفحة الريلز (Facebook Reels 9:16)
   ========================================================== */

/* ---------- رأس القناة (البانر) ---------- */
.reels-channel { padding-top: 100px; background: var(--color-bg-primary); }
.reels-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 1;          /* نسبة بانر القنوات */
    min-height: 120px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--color-bg-secondary);
}
.reels-banner.is-default {
    background: radial-gradient(circle at 80% 20%, rgba(1, 225, 107, .35), transparent 45%),
                linear-gradient(135deg, #021d3c 0%, #03305f 60%, #06492f 100%);
}
.reels-banner-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 44px 44px;
}
.reels-banner-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-family-en); font-weight: 800;
    font-size: clamp(2rem, 7vw, 5rem); letter-spacing: -.03em;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}

.reels-channel-info {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem 0 2rem;
    border-bottom: 1px solid var(--color-border);
}
.reels-avatar {
    width: 120px; height: 120px; flex-shrink: 0;
    border-radius: 50%;
    object-fit: contain;
    background: var(--color-card-bg);
    border: 4px solid var(--color-bg-primary);
    box-shadow: 0 6px 20px var(--color-shadow);
    padding: 14px;
    margin-top: -60px;            /* تداخل بسيط مع البانر مثل يوتيوب */
    position: relative;
}
.reels-channel-text { flex: 1; min-width: 0; }
.reels-channel-text h1 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 900; margin-bottom: .25rem; line-height: 1.3; }
.reels-meta { color: var(--color-text-muted); font-size: .92rem; font-weight: 600; display: flex; gap: .5rem; flex-wrap: wrap; }
.reels-desc { color: var(--color-text-secondary); margin: .6rem 0 1.1rem; max-width: 720px; }
.reels-actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ---------- الشبكة ---------- */
.reels-section { padding: 2.5rem 0 5rem; }
.reels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.75rem 1.25rem;
}

.reel-card { display: flex; flex-direction: column; min-width: 0; }

/* الإطار الطولي 9:16 — الفيديو والغلاف يملآنه بدون تشويه */
.reel-player {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    background: #0b1424;
    box-shadow: 0 8px 24px var(--color-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}
.reel-player:hover { transform: translateY(-4px); box-shadow: 0 16px 34px var(--color-shadow); }
.reel-player:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.reel-player img,
.reel-player iframe,
.reel-placeholder {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}
.reel-player img { object-fit: cover; transition: transform .5s ease; }
.reel-player:hover img { transform: scale(1.04); }
.reel-placeholder {
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: rgba(255, 255, 255, .35);
    background: linear-gradient(160deg, #03254c, #06492f);
}
.reel-player::after {               /* تظليل خفيف لإبراز زر التشغيل */
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent 45%);
    pointer-events: none;
}
.reel-play {
    position: absolute; top: 50%; left: 50%; z-index: 1;
    width: 64px; height: 64px; border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .92); color: #021d3c;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
    transition: transform .25s ease, background-color .25s ease;
}
.reel-play svg { margin-inline-start: 4px; }
[dir="rtl"] .reel-play svg { margin-inline-start: 0; margin-inline-end: 4px; transform: none; }
.reel-player:hover .reel-play { transform: translate(-50%, -50%) scale(1.1); background: var(--color-primary); }
.reel-badge {
    position: absolute; z-index: 1; bottom: .75rem; inset-inline-start: .75rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .6rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; color: #fff;
    background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px);
}

/* بعد التشغيل: يختفي الغلاف ويظهر مشغل فيسبوك */
.reel-player.is-playing { cursor: default; transform: none; background: #000; }
.reel-player.is-playing::after, .reel-player.is-playing .reel-play, .reel-player.is-playing .reel-badge { display: none; }
.reel-player.is-loading::before {   /* مؤشر تحميل حتى يجهز مشغل فيسبوك */
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 38px; height: 38px; margin: -19px 0 0 -19px;
    border-radius: 50%; border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--color-primary);
    animation: reelSpin .9s linear infinite;
}
@keyframes reelSpin { to { transform: rotate(360deg); } }

.reel-body { padding: .85rem .15rem 0; display: flex; flex-direction: column; gap: .6rem; }
.reel-title {
    font-size: 1rem; font-weight: 700; line-height: 1.5; margin: 0;
    color: var(--color-text-primary);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel-cta { width: 100%; padding: .65rem 1rem; font-size: .9rem; }
.reel-fb-link { font-size: .82rem; font-weight: 600; color: var(--color-text-muted); }
.reel-fb-link:hover { color: var(--color-primary); }
.reel-fb-link i { font-size: .7em; }

.reels-empty { text-align: center; padding: 4rem 1rem; color: var(--color-text-muted); }
.reels-empty i { font-size: 2.5rem; margin-bottom: .75rem; opacity: .6; }

/* ---------- الشاشات ---------- */
@media (min-width: 1200px) {
    .reels-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .reels-channel-info { flex-direction: column; align-items: center; text-align: center; }
    .reels-avatar { width: 96px; height: 96px; margin-top: -48px; padding: 10px; }
    .reels-meta, .reels-actions { justify-content: center; }
    .reels-desc { margin-inline: auto; }
    .reels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .9rem; }
}
@media (max-width: 520px) {
    /* عمود واحد متناسق على الهاتف، بعرض محدود حتى لا يصبح الفيديو أطول من الشاشة */
    .reels-grid { grid-template-columns: minmax(0, 1fr); max-width: 380px; margin: 0 auto; }
    .reels-banner { aspect-ratio: 3 / 1; border-radius: var(--radius-md); }
}
@media (prefers-reduced-motion: reduce) {
    .reel-player, .reel-player img, .reel-play { transition: none; }
    .reel-player:hover, .reel-player:hover img { transform: none; }
}