/* ==========================================================
   NERDIUM ARTICLE BUILDER - YOUTUBE V6.6
========================================================== */


/* ==========================
   ADMIN
========================== */

.ab-youtube-admin,
.ab-youtube-admin-empty {
    width:
        100%;

    box-sizing:
        border-box;
}


.ab-youtube-admin {
    margin:
        0;
}


.ab-youtube-admin-frame {
    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    aspect-ratio:
        16 / 9;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        10px;

    background:
        #07090b;
}


.ab-youtube-admin-frame iframe {
    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;

    pointer-events:
        none;
}


.ab-youtube-admin-cover {
    position:
        absolute;

    inset:
        0;

    z-index:
        2;
}


.ab-youtube-admin figcaption {
    margin-top:
        8px;

    color:
        rgba(255,255,255,.55);

    font-size:
        .76rem;

    line-height:
        1.45;
}


.ab-youtube-admin-empty {
    display:
        flex;

    min-height:
        180px;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        24px;

    border:
        1px dashed
        rgba(255,255,255,.14);

    border-radius:
        10px;

    color:
        rgba(255,255,255,.58);

    text-align:
        center;

    background:
        rgba(255,255,255,.025);
}


.ab-youtube-admin-empty strong {
    color:
        rgba(255,255,255,.84);
}


.ab-youtube-admin-empty span {
    max-width:
        360px;

    font-size:
        .75rem;

    line-height:
        1.5;
}


.ab-youtube-admin-icon {
    display:
        grid;

    width:
        48px;

    height:
        34px;

    place-items:
        center;

    border-radius:
        8px;

    color:
        #fff;

    background:
        #b83333;

    font-size:
        16px;
}


.ab-v6-youtube-status {
    display:
        block;

    min-height:
        1.25em;

    margin-top:
        6px;

    color:
        rgba(255,255,255,.45);

    font-size:
        .7rem;
}


.ab-v6-youtube-status[data-state="ok"] {
    color:
        #78b786;
}


.ab-v6-youtube-status[data-state="error"] {
    color:
        #d77d7d;
}


/* ==========================
   PUBLIC
========================== */

.nerdium-builder-public
.nbp-youtube {
    width:
        100%;

    margin:
        1.5rem 0;
}


.nerdium-builder-public
.nbp-youtube-frame {
    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    aspect-ratio:
        16 / 9;

    border-radius:
        12px;

    background:
        #050607;
}


.nerdium-builder-public
.nbp-youtube-frame iframe {
    display:
        block;

    width:
        100%;

    height:
        100%;

    border:
        0;
}


.nerdium-builder-public
.nbp-youtube figcaption {
    margin-top:
        .7rem;

    color:
        rgba(255,255,255,.58);

    font-size:
        .86rem;

    line-height:
        1.5;

    text-align:
        center;
}


@media (max-width: 700px) {

    .nerdium-builder-public
    .nbp-youtube {
        margin:
            1.1rem 0;
    }


    .nerdium-builder-public
    .nbp-youtube-frame {
        border-radius:
            8px;
    }

}


/* ==========================================================
   NERDIUM_YOUTUBE_PUBLIC_SIZE_V662

   Asztalon a videó szándékosan keskenyebb
   a teljes Builder blokknál.

   Mobilon ismét 100%.
========================================================== */

.nerdium-builder-public
.nbp-youtube {
    width:
        min(
            86%,
            860px
        );

    max-width:
        860px;

    margin:
        1.5rem auto;
}


/*
 * Wide blokkban valamivel nagyobb lehet,
 * de továbbra sem tölti ki az egész sort.
 */
.nerdium-builder-public
.nbp-block[data-width="wide"]
.nbp-youtube {
    width:
        min(
            90%,
            960px
        );

    max-width:
        960px;
}


/*
 * Full beállítás esetén is tartunk egy
 * ésszerű felső korlátot.
 */
.nerdium-builder-public
.nbp-block[data-width="full"]
.nbp-youtube {
    width:
        min(
            92%,
            1080px
        );

    max-width:
        1080px;
}


@media (max-width: 720px) {

    .nerdium-builder-public
    .nbp-youtube,

    .nerdium-builder-public
    .nbp-block[data-width="wide"]
    .nbp-youtube,

    .nerdium-builder-public
    .nbp-block[data-width="full"]
    .nbp-youtube {
        width:
            100%;

        max-width:
            none;

        margin:
            1.1rem 0;
    }

}