/**
 * Review slider block.
 *
 * Values mirror the Tilda original (bebestschool.kz/speaking-club,
 * rec1240150441, a t728 slider): on #eeeeee, one white 860 px card at a
 * time, 30 px from the top — a 20 px light headline, 16 px semi-bold text at
 * 1.35, then 12 px lines with the name, programme, stars and date; white
 * 30 px round arrows 30 px in from the band's edges, and 6 px dots, the
 * current one dark, 30 px under the card. On phones the card is 305 px,
 * the headline 16 px and the text 12 px.
 */

.bbs-rslider {
    position: relative;
    padding: 60px 0 45px;
    background: #eeeeee;
    color: #000000;
    font-family: var(--bbs-font, 'ApercuPro', Arial, sans-serif);
}

.bbs-rslider *,
.bbs-rslider *::before,
.bbs-rslider *::after {
    box-sizing: border-box;
}

.bbs-rslider__track {
    display: flex;
    max-width: 860px;
    margin: 0 auto;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.bbs-rslider__track::-webkit-scrollbar {
    display: none;
}

.bbs-rslider__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.bbs-rslider__card {
    min-height: 390px;
    margin: 0;
    padding: 25px 45px 40px;
    background: #ffffff;
}

.bbs-rslider__headline {
    margin: 0;
    font-size: 20px;
    line-height: 31px;
    font-weight: 300;
}

.bbs-rslider__text {
    margin: 20px 0 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
}

.bbs-rslider__text p {
    margin: 0;
}

.bbs-rslider__meta {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.6;
}

.bbs-rslider__stars {
    color: #ffd62c;
    font-size: 16px;
    letter-spacing: 1px;
    -webkit-text-stroke: 0.6px #e8a900;
}

/* ── Arrows and dots ── */
.bbs-rslider__arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: -20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
    cursor: pointer;
}

.bbs-rslider__arrow[hidden],
.bbs-rslider__dots[hidden] {
    display: none;
}

.bbs-rslider__arrow svg {
    width: 7px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.bbs-rslider__arrow--prev { left: 30px; }
.bbs-rslider__arrow--next { right: 30px; }

.bbs-rslider__arrow:focus-visible,
.bbs-rslider__dot:focus-visible {
    outline: 2px solid #1cb65a;
    outline-offset: 2px;
}

.bbs-rslider__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.bbs-rslider__dot {
    position: relative;
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #adadad;
    cursor: pointer;
}

.bbs-rslider__dot::after {
    content: '';
    position: absolute;
    inset: -6px;
}

.bbs-rslider__dot.is-active {
    background: #222222;
}

@media (prefers-reduced-motion: reduce) {
    .bbs-rslider__track {
        scroll-behavior: auto;
    }
}

@media (max-width: 959px) {
    .bbs-rslider__track {
        max-width: calc(100% - 140px);
    }
}

@media (max-width: 639px) {
    .bbs-rslider {
        padding-bottom: 45px;
    }

    .bbs-rslider__track {
        max-width: 305px;
    }

    .bbs-rslider__card {
        min-height: 450px;
        padding: 40px 30px 30px;
    }

    .bbs-rslider__headline {
        font-size: 16px;
        line-height: 23px;
    }

    .bbs-rslider__text {
        font-size: 12px;
    }

    .bbs-rslider__arrow {
        width: 24px;
        height: 24px;
    }

    .bbs-rslider__arrow--prev { left: 5px; }
    .bbs-rslider__arrow--next { right: 5px; }
}

/* The arrows centre on the cards, below any heading. */
.bbs-rslider__stage {
    position: relative;
}

.bbs-rslider__title {
    margin: 0 auto 30px;
    padding: 0 20px;
    color: #000000;
    font-size: 45px;
    line-height: 70px;
    font-weight: 700;
    text-align: center;
}

/* A round photo on the left of the card, the text beside it. */
.bbs-rslider__card.has-photo {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    column-gap: 30px;
}

.bbs-rslider__photo {
    grid-row: 1 / span 3;
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

/* "bbs-rslider--quote" (the block's Additional CSS class): no card, on the
   yellow band — as bebestschool.kz/german/speaking-club (rec895679725 and
   rec895679728): 20 px light text first, then the headline in 16 px
   semi-bold and the name in 14 px light, 760 px across with the photo;
   42 px arrows near the edges. */
.bbs-rslider--quote {
    padding: 36px 0 60px;
    background: #ffd72e;
}

.bbs-rslider--quote .bbs-rslider__track {
    max-width: 760px;
}

.bbs-rslider--quote .bbs-rslider__card {
    min-height: 0;
    padding: 20px 0;
    background: none;
}

.bbs-rslider--quote .bbs-rslider__card > .bbs-rslider__headline {
    order: 2;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
}

.bbs-rslider--quote .bbs-rslider__text {
    order: 1;
    margin: 0;
    font-size: 20px;
    line-height: 31px;
    font-weight: 300;
}

.bbs-rslider--quote .bbs-rslider__meta {
    order: 3;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 300;
}

.bbs-rslider--quote .bbs-rslider__card.has-photo {
    display: grid;
    grid-template-areas: "photo text" "photo head" "photo meta";
    grid-template-rows: auto auto 1fr;
}

.bbs-rslider--quote .bbs-rslider__photo { grid-area: photo; }
.bbs-rslider--quote .bbs-rslider__text { grid-area: text; }
.bbs-rslider--quote .bbs-rslider__card > .bbs-rslider__headline { grid-area: head; }
.bbs-rslider--quote .bbs-rslider__meta { grid-area: meta; }

.bbs-rslider--quote .bbs-rslider__arrow {
    width: 42px;
    height: 42px;
    margin-top: -21px;
    border: 1px solid #000000;
    background: #ffffff;
}

.bbs-rslider--quote .bbs-rslider__arrow svg {
    width: 9px;
    height: 16px;
}

.bbs-rslider--quote .bbs-rslider__dots {
    margin-top: 20px;
}

.bbs-rslider--quote .bbs-rslider__dot {
    background: rgba(0, 0, 0, 0.3);
}

.bbs-rslider--quote .bbs-rslider__dot.is-active {
    background: #000000;
}

@media (max-width: 959px) {
    .bbs-rslider--quote .bbs-rslider__title {
        font-size: 36px;
        line-height: 44px;
    }
}

@media (max-width: 639px) {
    .bbs-rslider--quote .bbs-rslider__title {
        font-size: 28px;
        line-height: 34px;
    }

    .bbs-rslider--quote .bbs-rslider__card.has-photo {
        grid-template-areas: "photo" "text" "head" "meta";
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        row-gap: 0;
    }

    .bbs-rslider--quote .bbs-rslider__photo {
        margin-bottom: 20px;
    }

    .bbs-rslider--quote .bbs-rslider__text {
        font-size: 16px;
        line-height: 24px;
    }

    .bbs-rslider--quote .bbs-rslider__track {
        max-width: calc(100% - 90px);
    }

    .bbs-rslider--quote .bbs-rslider__arrow {
        width: 30px;
        height: 30px;
        margin-top: -15px;
    }
}