/**
 * Language levels block.
 *
 * Values mirror the Tilda original (bebestschool.kz/spanish-course, the
 * lower half of rec548657523): a 40 px bold coral heading; six 193 px
 * columns across the 1160 px grid, each a 180 px square rounded 5 px — the
 * level 56 px, its name 20 px, in white — standing 8 px above a grey step
 * 48 px higher than the last (#dedede, #bdbdbd, #999999 under green, yellow and coral squares), and the
 * group names, 20 px, under their steps. Below 960 px the squares run down
 * the page in a diagonal, the group names on the left.
 */

.bbs-levels {
    padding: 0 0 43px;
    background: #ffffff;
    color: #000000;
    font-family: var(--bbs-font, 'ApercuPro', Arial, sans-serif);
}

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

.bbs-levels__title {
    margin: 0 0 6px;
    color: #f66746;
    font-size: 40px;
    line-height: 62px;
    font-weight: 700;
    text-align: center;
}

.bbs-levels__stairs {
    display: grid;
    grid-template-columns: repeat(var(--bbs-levels-count), minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-items: end;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A column: the square, then its step. The group name goes in a second row. */
.bbs-levels__step {
    display: contents;
}

/* Each square and its step share a cell (their columns are set inline). */
.bbs-levels__card,
.bbs-levels__riser {
    grid-row: 1;
}

.bbs-levels__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: end;
    width: 180px;
    max-width: calc(100% - 12px);
    aspect-ratio: 1;
    margin: 0 0 calc((var(--i) + 1) * 48px + 8px) 6px;
    padding-top: 47px;
    border-radius: 5px;
    background: #1cb65a;
    color: #ffffff;
    text-align: center;
}

.bbs-levels__card--yellow { background: #ffd62c; }
.bbs-levels__card--coral  { background: #f66746; }

.bbs-levels__code {
    font-size: 56px;
    line-height: 1;
    font-weight: 400;
}

.bbs-levels__name {
    margin-top: 16px;
    font-size: 20px;
    line-height: 31px;
}

.bbs-levels__riser {
    align-self: end;
    height: calc((var(--i) + 1) * 48px);
    background: #dedede;
}

.bbs-levels__step--yellow .bbs-levels__riser { background: #bdbdbd; }
.bbs-levels__step--coral .bbs-levels__riser  { background: #999999; }

.bbs-levels__group {
    grid-row: 2;
    font-size: 20px;
    line-height: 31px;
    text-align: center;
}

/* ── 1199 and below ── */
@media (max-width: 1199px) {
    .bbs-levels__card {
        padding-top: 30px;
    }

    .bbs-levels__code {
        font-size: 46px;
    }

    .bbs-levels__name {
        margin-top: 10px;
        font-size: 16px;
    }
}

/* ── 959 and below: a diagonal down the page ── */
@media (max-width: 959px) {
    .bbs-levels__inner {
        max-width: 640px;
    }

    .bbs-levels__title {
        margin-bottom: 30px;
        line-height: 50px;
    }

    .bbs-levels__stairs {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .bbs-levels__step {
        position: relative;
        display: block;
        min-height: 110px;
        padding-left: 140px;
    }

    .bbs-levels__card {
        align-self: auto;
        justify-self: start;
        width: 110px;
        max-width: none;
        margin: 0 auto 0 calc(var(--i) * 60px);
        padding-top: 18px;
    }

    .bbs-levels__code {
        font-size: 50px;
    }

    .bbs-levels__name {
        margin-top: 8px;
        font-size: 14px;
        line-height: 22px;
    }

    .bbs-levels__riser {
        display: none;
    }

    .bbs-levels__group {
        position: absolute;
        top: 40px;
        left: 0;
        width: 130px;
    }
}

@media (max-width: 639px) {
    .bbs-levels__title {
        font-size: 26px;
        line-height: 33px;
    }

    .bbs-levels__step {
        min-height: 100px;
        padding-left: 110px;
    }

    .bbs-levels__card {
        width: 100px;
        margin-left: calc(var(--i) * 22px);
        padding-top: 16px;
    }

    .bbs-levels__code {
        font-size: 38px;
    }

    .bbs-levels__group {
        width: 105px;
        font-size: 17px;
        text-align: left;
    }
}

/* The narrowest phones: a shallower diagonal, so the last level still fits. */
@media (max-width: 379px) {
    .bbs-levels__step {
        padding-left: 96px;
    }

    .bbs-levels__card {
        margin-left: calc(var(--i) * 14px);
    }

    .bbs-levels__group {
        width: 92px;
        font-size: 15px;
    }
}

/* ── Curve look ──
   bebestschool.kz/anglijskij-dlya-nachinayushchih (rec514561021): a black
   line fading to grey at its ends, rising across a 1200 × 620 box; on it a
   dot per level, under the dot an 80 px rounded badge with the level's
   letter in white on a purple shadow, and under that the level; the group
   names written along the line above their levels. Below 960 px: a list. */
.bbs-levels--curve {
    padding-bottom: 60px;
}

.bbs-levels--curve .bbs-levels__title {
    max-width: 946px;
    margin: 0 auto;
}

.bbs-levels__board {
    position: relative;
    aspect-ratio: 1200 / 620;
    margin-top: 10px;
}

.bbs-levels__line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.bbs-levels__path {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bbs-levels__node {
    --bbs-levels-tint: #1cb65a;
    --bbs-levels-tint-2: #8ad9a7;

    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 170px;
    margin: -14px 0 0 -85px;
    text-align: center;
}

.bbs-levels__node--blue   { --bbs-levels-tint: #2224e4; --bbs-levels-tint-2: #7b7cf3; }
.bbs-levels__node--yellow { --bbs-levels-tint: #ffc933; --bbs-levels-tint-2: #ffe07f; }
.bbs-levels__node--coral  { --bbs-levels-tint: #f66746; --bbs-levels-tint-2: #fbab98; }

.bbs-levels__dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bbs-levels-tint);
}

.bbs-levels__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-top: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--bbs-levels-tint) 30%, var(--bbs-levels-tint-2));
    color: #ffffff;
    font-size: 54px;
    line-height: 1;
    font-weight: 700;
    text-shadow: 4px 3px 0 #4b23da;
}

.bbs-levels__caption {
    margin-top: 20px;
    font-size: 18px;
    line-height: 28px;
}

.bbs-levels__caption strong {
    font-weight: 700;
}

.bbs-levels__node-group {
    display: none;
}

.bbs-levels__arc {
    position: absolute;
    color: #1cb65a;
    font-size: 27px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 1px 1px 0 rgba(75, 35, 218, 0.35);
    transform: translate(-50%, -50%) rotate(var(--turn));
}

.bbs-levels__arc--blue   { color: #3435e6; }
.bbs-levels__arc--yellow { color: #ffd23f; }
.bbs-levels__arc--coral  { color: #f66746; }

@media (max-width: 1199px) {
    .bbs-levels__badge {
        width: 64px;
        height: 64px;
        margin-top: 14px;
        font-size: 44px;
    }

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

    .bbs-levels__node {
        width: 140px;
        margin: -11px 0 0 -70px;
    }

    .bbs-levels__caption {
        margin-top: 12px;
        font-size: 15px;
        line-height: 22px;
    }

    .bbs-levels__arc {
        font-size: 22px;
    }
}

/* ── 959 and below: a list ── */
@media (max-width: 959px) {
    .bbs-levels--curve .bbs-levels__title {
        margin-bottom: 20px;
    }

    .bbs-levels__board {
        aspect-ratio: auto;
    }

    .bbs-levels__line,
    .bbs-levels__arc,
    .bbs-levels__dot {
        display: none;
    }

    .bbs-levels__path {
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-width: 420px;
        margin: 0 auto;
    }

    .bbs-levels__node {
        position: static;
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: center;
        column-gap: 16px;
        width: auto;
        margin: 0;
        text-align: left;
    }

    .bbs-levels__node-group {
        display: block;
        grid-column: 1 / -1;
        margin: 14px 0 4px;
        color: var(--bbs-levels-tint);
        font-size: 22px;
        line-height: 1.3;
        font-weight: 700;
    }

    .bbs-levels__node--yellow .bbs-levels__node-group {
        color: #e8b000;
    }

    .bbs-levels__badge {
        margin: 0;
    }

    .bbs-levels__caption {
        margin: 0;
        font-size: 16px;
    }
}

/* The last caption may reach past a narrow screen's edge; never scroll for it. */
.bbs-levels--curve {
    overflow-x: clip;
}

/* ── Bars look ──
   bebestschool.kz/german-real-talk (the lower half of rec535312898): over a
   10 px black line across the 1160 px grid, the levels of each group side by
   side in a third of it, 100 px bars 21 px apart, each about 78 px taller
   than the last (156 px for the first) — green, yellow or coral, the level
   56 px and its hours 27 px in white at the foot; over each bar a 20 px
   note, its first line bold, ending at the bar's right edge; the group
   names, 20 px, under the line. Below 960 px the line runs down the left
   with the group names turned along it, and the bars grow to the right,
   95 px thick (65 px on phones), the note beside them (over them on phones). */
.bbs-levels--bars {
    padding-bottom: 50px;
}

.bbs-levels--bars .bbs-levels__title {
    margin-bottom: 30px;
}

.bbs-levels__chart {
    display: grid;
    grid-template-columns: repeat(var(--bbs-levels-groups, 3), minmax(0, 1fr));
    padding-top: 100px;
}

.bbs-levels__bgroup {
    display: flex;
    flex-direction: column;
}

.bbs-levels__bars {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: center;
    gap: 21px;
    margin: 0;
    padding: 0;
    border-bottom: 10px solid #000000;
    list-style: none;
}

.bbs-levels__bar-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.bbs-levels__note {
    position: absolute;
    right: 0;
    bottom: 100%;
    width: max-content;
    max-width: 306px;
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 31px;
    text-align: right;
}

.bbs-levels__note strong {
    font-weight: 700;
}

.bbs-levels__bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100px;
    height: calc(156px + var(--i) * 78px);
    padding-bottom: 20px;
    color: #ffffff;
    box-sizing: border-box;
}

.bbs-levels__bar--green  { background: #1cb65a; }
.bbs-levels__bar--yellow { background: #ffd62c; }
.bbs-levels__bar--coral  { background: #f66746; }
.bbs-levels__bar--blue   { background: #4b23db; }

.bbs-levels__bar-code {
    font-size: 56px;
    line-height: 70px;
}

.bbs-levels__bar-hours {
    font-size: 27px;
    line-height: 42px;
}

.bbs-levels__bgroup-name {
    margin: 0;
    padding-top: 10px;
    font-size: 20px;
    line-height: 31px;
    text-align: center;
}

@media (max-width: 1199px) {
    .bbs-levels__bars {
        gap: 12px;
    }

    .bbs-levels__bar {
        width: 84px;
        height: calc(140px + var(--i) * 66px);
    }

    .bbs-levels__bar-code {
        font-size: 46px;
        line-height: 60px;
    }

    .bbs-levels__note {
        max-width: 250px;
        font-size: 17px;
        line-height: 26px;
    }
}

/* ── 959 and below: on its side ── */
@media (max-width: 959px) {
    .bbs-levels--bars .bbs-levels__title {
        max-width: 560px;
        margin: 0 auto 40px;
        line-height: 50px;
    }

    .bbs-levels__chart {
        grid-template-columns: minmax(0, 1fr);
        max-width: 640px;
        margin: 0 auto;
        padding: 10px 0 10px 50px;
    }

    .bbs-levels__bgroup {
        position: relative;
        flex-direction: row;
    }

    .bbs-levels__bars {
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 10px 0;
        border-bottom: 0;
        border-left: 7px solid #000000;
    }

    .bbs-levels__bar-item {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
    }

    .bbs-levels__note {
        position: static;
        flex: 1 1 0;
        width: auto;
        margin: 0;
        text-align: left;
    }

    .bbs-levels__bar {
        flex: none;
        align-items: flex-start;
        justify-content: center;
        width: calc(153px + var(--i) * 68px);
        max-width: 60%;
        height: 95px;
        padding: 0 0 0 11px;
    }

    .bbs-levels__bar-code {
        font-size: 50px;
        line-height: 52px;
    }

    .bbs-levels__bar-hours {
        font-size: 27px;
        line-height: 32px;
    }

    /* The group's name turned along the line, beside its bars. */
    .bbs-levels__bgroup-name {
        position: absolute;
        top: 50%;
        left: -32px;
        padding: 0;
        white-space: nowrap;
        transform: translate(-50%, -50%) rotate(-90deg);
    }
}

@media (max-width: 639px) {
    .bbs-levels__chart {
        padding-left: 36px;
    }

    .bbs-levels__bars {
        gap: 14px;
        border-left-width: 6px;
    }

    /* The note over its bar. */
    .bbs-levels__bar-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .bbs-levels__note {
        flex: none;
        padding-left: 10px;
        font-size: 16px;
        line-height: 20px;
    }

    .bbs-levels__bar {
        width: calc(84px + var(--i) * 37px);
        max-width: 100%;
        height: 65px;
        padding-left: 10px;
    }

    .bbs-levels__bar-code {
        font-size: 30px;
        line-height: 34px;
    }

    .bbs-levels__bar-hours {
        font-size: 18px;
        line-height: 24px;
    }

    .bbs-levels__bgroup-name {
        left: -22px;
        font-size: 18px;
    }
}