/* Stage 6: duets, video replies and their credit lines. */

/* ---- Credit line on a feed card ---- */
.mtv-post__duet {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: baseline;
    margin: 2px 0 8px;
    font-size: 12.5px;
    color: var(--mtv-navy);
}

.mtv-post__duetlabel {
    font-weight: 700;
}

.mtv-post__duet a {
    color: var(--mtv-magenta);
    font-weight: 600;
    text-decoration: none;
}

/* ---- Doors on the post page ---- */
.mtv-duetdoors {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 14px 0 0;
}

.mtv-duetdoors__off {
    margin: 0;
}

/* ---- Video replies strip ---- */
.mtv-veplies {
    margin-top: 22px;
}

.mtv-veplies__row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 0 10px;
    scrollbar-width: none;
}

.mtv-veplies__row::-webkit-scrollbar {
    display: none;
}

.mtv-veplies__item {
    flex: none;
    display: grid;
    gap: 4px;
    width: 88px;
    text-decoration: none;
}

.mtv-veplies__item img,
.mtv-veplies__fallback {
    width: 88px;
    height: 112px;
    border-radius: 10px;
    object-fit: cover;
    background: linear-gradient(150deg, #1b3350, #0b1c2c);
}

.mtv-veplies__fallback {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.mtv-veplies__who {
    overflow: hidden;
    color: var(--mtv-navy-ink);
    font-size: 11.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtv-veplies__mode {
    color: var(--mtv-magenta);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ---- Duet split inside the full-screen player ---- */
.mtv-reel.is-duet {
    display: block;
}

.mtv-reel.is-duet .mtv-reel__video {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 1;
}

.mtv-reel__duetmate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 0;
    object-fit: cover;
    background: #000;
}

.mtv-reel.is-duet .mtv-reel__glyph {
    top: 75%;
}

.mtv-reel.is-duet .mtv-reel__shade {
    height: 42%;
    z-index: 2;
}

.mtv-reel.is-duet .mtv-reel__meta,
.mtv-reel.is-duet .mtv-reel__rail {
    z-index: 3;
}

.mtv-reel__duetlabel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 6px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(8, 27, 44, .6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.mtv-reel__duetlabel a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mtv-reel__duetdoors {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
}

.mtv-reel__duetdoors .mtv-reel__nope {
    margin-top: 0;
}