/**
 * Video notes block.
 *
 * Values mirror the Tilda original (bebestschool.kz/spanish-course,
 * rec548657523): a 40 px bold coral heading 886 px wide 60 px from the top,
 * 24 px #3f3f3f text 506 px wide under it; a 1000 × 500 video 80 px into the
 * grid 316 px down; an 18 px note 840 px across, 96 px above the video, its
 * arrow curling down onto the video's right corner; and under the video, on
 * the left, an arrow curling up at it and an 18 px note beside it.
 */

.bbs-vnotes {
    padding: 60px 0 32px;
    background: #ffffff;
    color: #3f3f3f;
    font-family: var(--bbs-font, 'ApercuPro', Arial, sans-serif);
}

.bbs-vnotes__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.bbs-vnotes__title {
    max-width: 886px;
    margin: 0;
    color: #f66746;
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
}

/* Line breaks typed in the heading hold on a computer only. */
@media (max-width: 1199px) {
    .bbs-vnotes__br {
        display: none;
    }
}

.bbs-vnotes__text {
    max-width: 506px;
    margin: 20px 0 0;
    font-size: 24px;
    line-height: 32px;
}

/* The video and its notes. */
.bbs-vnotes__stage {
    position: relative;
    width: 1000px;
    max-width: 100%;
    margin: 40px 0 0 80px;
    padding-bottom: 113px;
}

.bbs-vnotes__video {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 1;
    background: #000000;
}

.bbs-vnotes__video iframe,
.bbs-vnotes__play,
.bbs-vnotes__poster {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.bbs-vnotes__poster {
    object-fit: cover;
}

.bbs-vnotes__button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
}

.bbs-vnotes__button svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bbs-vnotes__button-bg {
    fill: #212121;
    fill-opacity: 0.8;
    transition: fill 0.2s ease-in-out, fill-opacity 0.2s ease-in-out;
}

.bbs-vnotes__play:hover .bbs-vnotes__button-bg,
.bbs-vnotes__play:focus-visible .bbs-vnotes__button-bg {
    fill: #ff0000;
    fill-opacity: 1;
}

.bbs-vnotes__play:focus-visible {
    outline: 3px solid #1cb65a;
    outline-offset: 3px;
}

.bbs-vnotes__note {
    position: absolute;
    margin: 0;
    font-size: 18px;
    line-height: 24px;
}

.bbs-vnotes__arrow {
    position: absolute;
    display: block;
    height: auto;
}

/* 840 px into the grid, 96 px above the video; its arrow from 970 px
   across and 61 px above, curling down onto the video. */
.bbs-vnotes__note--top {
    top: -96px;
    left: 760px;
    width: 290px;
}

.bbs-vnotes__note--top .bbs-vnotes__arrow {
    top: 35px;
    left: 210px;
    width: 80px;
}

/* 29 px under the video, 30 px left of it; its arrow 80 px left of the
   video, rising from beside the note up past the video's edge. */
.bbs-vnotes__note--bottom {
    top: 529px;
    left: -30px;
    width: 218px;
    line-height: 28px;
}

.bbs-vnotes__note--bottom .bbs-vnotes__arrow {
    top: -128px;
    left: -50px;
    width: 50px;
}

@media (prefers-reduced-motion: reduce) {
    .bbs-vnotes__button-bg {
        transition: none;
    }
}

/* ── 1199 and below: the 960 px grid ── */
@media (max-width: 1199px) {
    .bbs-vnotes__stage {
        width: 800px;
        margin-left: 60px;
    }

    .bbs-vnotes__note--top {
        left: 560px;
        width: 250px;
    }

    .bbs-vnotes__note--top .bbs-vnotes__arrow {
        left: 200px;
        width: 70px;
    }

    .bbs-vnotes__note--bottom {
        top: 429px;
    }
}

/* ── 959 and below: the notes in the flow, above and under the video ── */
@media (max-width: 959px) {
    .bbs-vnotes {
        padding: 24px 0 40px;
    }

    .bbs-vnotes__inner {
        max-width: 640px;
    }

    .bbs-vnotes__title {
        font-size: 31px;
        line-height: 39px;
    }

    .bbs-vnotes__stage {
        width: auto;
        margin: 24px 0 0;
        padding-bottom: 0;
    }

    .bbs-vnotes__video {
        aspect-ratio: 16 / 9;
    }

    .bbs-vnotes__note {
        position: relative;
        inset: auto;
        width: auto;
        max-width: 290px;
    }

    .bbs-vnotes__note--top {
        margin: 0 0 10px auto;
        padding: 0 60px 0 0;
    }

    .bbs-vnotes__note--top .bbs-vnotes__arrow {
        top: 10px;
        right: 0;
        left: auto;
        width: 50px;
    }

    .bbs-vnotes__note--bottom {
        margin: 14px 0 0;
        padding-left: 50px;
    }

    .bbs-vnotes__note--bottom .bbs-vnotes__arrow {
        top: -20px;
        left: 4px;
        width: 34px;
    }
}

@media (max-width: 639px) {
    .bbs-vnotes {
        padding-top: 38px;
    }

    .bbs-vnotes__title {
        font-size: 25px;
        line-height: 31px;
        text-align: center;
    }

    .bbs-vnotes__text {
        margin: 22px auto 0;
        font-size: 20px;
        line-height: 27px;
        text-align: center;
    }

    .bbs-vnotes__note {
        max-width: 250px;
        font-size: 16px;
        line-height: 22px;
    }
}

/* "bbs-vnotes--plain" (the block's Additional CSS class): no notes, a 64 px
   semi-bold black heading centred over a 960 × 540 video, as on
   bebestschool.kz/speaking-club (rec422427753 and rec422427754). */
.bbs-vnotes--plain {
    padding: 60px 0 94px;
}

.bbs-vnotes--plain .bbs-vnotes__title {
    max-width: 1160px;
    margin: 0 auto;
    color: #000000;
    font-size: 64px;
    line-height: 1.23;
    font-weight: 600;
    text-align: center;
}

.bbs-vnotes--plain .bbs-vnotes__stage {
    width: 960px;
    margin: 90px auto 0;
    padding-bottom: 0;
}

.bbs-vnotes--plain .bbs-vnotes__video {
    aspect-ratio: 16 / 9;
}

@media (max-width: 959px) {
    .bbs-vnotes--plain .bbs-vnotes__title {
        font-size: 48px;
    }

    .bbs-vnotes--plain .bbs-vnotes__stage {
        margin-top: 50px;
    }
}

@media (max-width: 639px) {
    .bbs-vnotes--plain {
        padding: 30px 0 45px;
    }

    .bbs-vnotes--plain .bbs-vnotes__title {
        font-size: 30px;
        line-height: 1.23;
    }

    .bbs-vnotes--plain .bbs-vnotes__stage {
        margin-top: 30px;
    }
}

/* A heading with its own line breaks may run 1025 px, as the originals' do. */
@media (min-width: 1200px) {
    .bbs-vnotes__title:has(.bbs-vnotes__br) {
        max-width: 1025px;
    }
}

/* The plain look's line under the heading: 24 px light, centred, as on
   bebestschool.kz/german/speaking-club (rec997294926). */
.bbs-vnotes--plain .bbs-vnotes__text {
    max-width: 560px;
    margin: 0 auto;
    color: #000000;
    font-size: 24px;
    line-height: 36px;
    font-weight: 300;
    text-align: center;
}

.bbs-vnotes--plain .bbs-vnotes__text + .bbs-vnotes__stage {
    margin-top: 40px;
}

/* "bbs-vnotes--small" (with the plain look): a 42 px semi-bold heading 45 px
   from the top. */
.bbs-vnotes--plain.bbs-vnotes--small {
    padding-top: 45px;
}

.bbs-vnotes--plain.bbs-vnotes--small .bbs-vnotes__title {
    font-size: 42px;
    line-height: 62px;
}

@media (max-width: 639px) {
    .bbs-vnotes--plain .bbs-vnotes__text {
        font-size: 20px;
        line-height: 28px;
    }

    .bbs-vnotes--plain.bbs-vnotes--small .bbs-vnotes__title {
        font-size: 30px;
        line-height: 38px;
    }
}