/* ─── فيد الريلز — فيديوهات عمودية قصيرة، سكرول عمودي مع قفل على كل فيديو ─── */

/*
   يملأ الشاشة كاملة تحت الهيدر مباشرة — بلا page-head ولا .shell، عشان
   الفيديو ياخد أقصى مساحة ممكنة زي أي تجربة ريلز/شورتس حقيقية. الخلفية
   السودة ممتدة لحواف الشاشة عمدًا، لا بطاقة صغيرة وسط صفحة بيضاء.
*/
.reels-feed {
    height: calc(100dvh - var(--header-h));
    width: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    background: #000;
}

.reel {
    position: relative;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.reel__media {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    border: 0;
}

.reel__overlay {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: var(--s-5) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgb(0 0 0 / 0.65), transparent);
    pointer-events: none;
}

.reel__title {
    color: #fff;
    font-weight: var(--fw-semibold);
    margin: 0;
}

.reel__mute-toggle {
    position: absolute;
    inset-inline-end: var(--s-4);
    inset-block-start: calc(var(--s-4) + env(safe-area-inset-top, 0px));
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 0;
    background: rgb(0 0 0 / 0.45);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.reel__mute-toggle:hover,
.reel__mute-toggle:focus-visible { background: rgb(0 0 0 / 0.65); }