/**
 * FAQ block.
 *
 * Values mirror the Tilda originals (bebestschool.kz): the heading record
 * rec799959178 — 40 px at the top of a 140 px band — and the t585 accordion
 * rec799960713: 24 px questions with 27 px of air above and below, a 24 px
 * plus on the right that gains a 40 px #eee circle on hover and turns into a
 * cross when open, 16 px answers, and a 1 px #eee rule above every row and
 * below the last. Tilda's own type steps are kept: 22 / 20 px questions and
 * 14 px answers on smaller screens.
 */

.bbs-faq {
    --bbs-faq-font: 'ApercuPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    /* The accordion sits in Tilda's t-container: the 1200 px grid less 20 px a side. */
    --bbs-faq-container: 1160px;
    --bbs-faq-gutter: 20px;
    --bbs-faq-line: #eeeeee;
    --bbs-faq-icon: #222222;

    padding: 48px 0 60px;
    background: #ffffff;
    color: #000000;
    font-family: var(--bbs-faq-font);
}

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

.bbs-faq__inner {
    max-width: calc(var(--bbs-faq-container) + var(--bbs-faq-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--bbs-faq-gutter);
}

.bbs-faq__title {
    margin: 0 0 45px;
    font-size: 40px;
    line-height: 1.55;
    font-weight: 700;
    text-align: center;
}

/* ── Rows ── */
.bbs-faq__list {
    border-bottom: 1px solid var(--bbs-faq-line);
}

.bbs-faq__item {
    border-top: 1px solid var(--bbs-faq-line);
}

.bbs-faq__question {
    position: relative;
    display: block;
    padding: 27px 50px 27px 0;
    cursor: pointer;
    list-style: none;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 700;
}

/* No browser marker: the plus on the right is the marker. */
.bbs-faq__question::-webkit-details-marker {
    display: none;
}

.bbs-faq__question::marker {
    content: '';
}

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

/* The plus, with a grey circle under it on hover. */
.bbs-faq__question::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    background: var(--bbs-faq-line);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.bbs-faq__question:hover::after,
.bbs-faq__question:focus-visible::after {
    opacity: 1;
}

.bbs-faq__icon {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 1;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    fill: none;
    stroke: var(--bbs-faq-icon);
    stroke-width: 1;
    transition: transform 0.3s ease-in-out;
}

.bbs-faq__item[open] .bbs-faq__icon {
    transform: rotate(-45deg);
}

/* ── Answers ── */
.bbs-faq__answer {
    overflow: hidden;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
}

/* Paragraphs and lists sit close, as in the original, where they are one
   block of text with line breaks. */
.bbs-faq__answer > * {
    margin: 0;
}

.bbs-faq__answer > * + * {
    margin-top: 6px;
}

.bbs-faq__answer > :last-child {
    margin-bottom: 20px;
}

/* The space under an answer, as an element rather than padding, so it slides
   shut with the rest of the answer. */
.bbs-faq__answer::after {
    content: '';
    display: block;
    height: var(--bbs-faq-answer-space, 20px);
}

.bbs-faq__answer ul,
.bbs-faq__answer ol {
    padding-left: 26px;
}

.bbs-faq__answer li + li {
    margin-top: 2px;
}

.bbs-faq__answer strong,
.bbs-faq__answer b {
    font-weight: 700;
}

.bbs-faq__answer a {
    color: #1cb65a;
    overflow-wrap: anywhere;
}

/* ── Picture above the heading ── */
/* 660 px whatever the column under it — wider than the questions on tablets,
   as on the original — but never wider than the screen. */
.bbs-faq__image {
    position: relative;
    left: 50%;
    width: min(660px, 100vw - 40px);
    margin: 0 0 20px;
    transform: translateX(-50%);
}

.bbs-faq__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── FAQ page look ──
   bebestschool.kz/faq: the lettering (rec422427459, 660 × 205) with a green
   40 px regular heading 20 px under it, then the t585 accordion rec422427461
   in eight columns of twelve — 760 px — 45 px lower, answers 20 px light,
   90 px of space under the last row. */
.bbs-faq--page {
    --bbs-faq-container: 760px;

    padding: 0 0 90px;
}

.bbs-faq--page .bbs-faq__title {
    color: #1db65b;
    font-weight: 400;
}

.bbs-faq--page .bbs-faq__question {
    font-weight: 600;
}

.bbs-faq--page .bbs-faq__answer,
.bbs-faq--large .bbs-faq__answer {
    font-size: 20px;
    font-weight: 300;
}

/* Paragraphs a blank line apart, as the original's <br><br>. */
.bbs-faq--page .bbs-faq__answer > * + *,
.bbs-faq--large .bbs-faq__answer > * + * {
    margin-top: 1.55em;
}

.bbs-faq--page .bbs-faq__answer strong,
.bbs-faq--large .bbs-faq__answer strong,
.bbs-faq--page .bbs-faq__answer b,
.bbs-faq--large .bbs-faq__answer b {
    font-weight: 700;
}

/* "bbs-faq--wide-title" (the block's Additional CSS class), with the page
   look: a bold heading up to 880 px, wider than the questions, as on
   bebestschool.kz/speaking-club (rec473245559). */
.bbs-faq--page.bbs-faq--wide-title .bbs-faq__title {
    position: relative;
    left: 50%;
    width: min(880px, 100vw - 40px);
    font-weight: 700;
    line-height: 48px;
    transform: translateX(-50%);
}

@media (max-width: 639px) {
    .bbs-faq--page.bbs-faq--wide-title .bbs-faq__title {
        width: min(880px, 100vw - 32px);
        font-size: 28px;
        line-height: 34px;
    }
}

/* Heading colour, when picked over the look's own. */
.bbs-faq.bbs-faq--title-black .bbs-faq__title {
    color: #000000;
}

.bbs-faq.bbs-faq--title-green .bbs-faq__title {
    color: #1cb65a;
}

@media (prefers-reduced-motion: reduce) {
    .bbs-faq__question::after,
    .bbs-faq__icon {
        transition: none;
    }
}

/* ── 1199 and below ── */
@media (max-width: 1199px) {
    .bbs-faq__question {
        font-size: 22px;
    }

    .bbs-faq__answer {
        font-size: 14px;
    }

    .bbs-faq--page {
        --bbs-faq-container: 620px;
    }

    .bbs-faq--page .bbs-faq__answer,
    .bbs-faq--large .bbs-faq__answer {
        font-size: 20px;
    }
}

@media (max-width: 959px) {
    .bbs-faq--page {
        --bbs-faq-container: 600px;
    }
}

/* ── 639 and below ── */
@media (max-width: 639px) {
    .bbs-faq {
        --bbs-faq-gutter: 16px;

        padding: 38px 0 50px;
    }

    .bbs-faq__title {
        margin-bottom: 28px;
        font-size: 30px;
        line-height: 1.3;
    }

    .bbs-faq__question {
        padding: 15px 50px 14px 0;
        font-size: 20px;
    }

    .bbs-faq__answer {
        --bbs-faq-answer-space: 10px;
    }

    .bbs-faq__answer > :last-child {
        margin-bottom: 15px;
    }

    .bbs-faq--page {
        padding-bottom: 60px;
    }

    .bbs-faq--page .bbs-faq__title {
        margin-bottom: 45px;
        line-height: 1.55;
    }

    .bbs-faq--page .bbs-faq__answer,
    .bbs-faq--large .bbs-faq__answer {
        line-height: 1.45;
    }
}

@media (max-width: 479px) {
    .bbs-faq__image {
        width: min(330px, 100vw - 32px);
        margin-bottom: 10px;
    }

    .bbs-faq--page {
        padding-top: 20px;
    }
}

/* "bbs-faq--answers" (the block's Additional CSS class), with the FAQ page
   look: the exercises' "Ответы" — a black 42 px semibold heading 79 px over
   the first row, as on bebestschool.kz/exercises/* (t585). */
.bbs-faq--answers .bbs-faq__title {
    margin-bottom: 79px;
    color: #000000;
    font-size: 42px;
    line-height: 51.66px;
    font-weight: 600;
}

@media (max-width: 639px) {
    .bbs-faq--answers .bbs-faq__title {
        margin-bottom: 40px;
        font-size: 30px;
        line-height: 38px;
    }
}