/**
 * About the school block.
 *
 * Values mirror the Tilda original (bebestschool.com, record rec508095593):
 * a 40 px green heading, a 20 px paragraph, 331 px cards 84 px apart on the
 * 1200 px grid, a 50 px radius, 61 px big words in white with a purple copy
 * 5 px to the right, 18 px copy, and a 260 × 45 green button.
 *
 * Three columns of their own heights on a wide screen; two, then one card to
 * a row in reading order below 960 px and 640 px.
 */

.bbs-about {
    --bbs-about-font: 'ApercuPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --bbs-about-container: 1200px;
    --bbs-about-gutter: 20px;

    --bbs-about-gap-x: 84px;
    --bbs-about-gap-y: 37px;
    --bbs-about-radius: 50px;

    --bbs-about-grey: #d7d7d7;
    --bbs-about-coral: #f66746;
    --bbs-about-green: #1cb65a;
    --bbs-about-green-hover: #169c4c;
    --bbs-about-purple: #4b23db;

    padding: 41px 0 55px;
    background: #ffffff;
    color: #000000;
    font-family: var(--bbs-about-font);
}

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

.bbs-about__inner {
    max-width: var(--bbs-about-container);
    margin: 0 auto;
    padding: 0 var(--bbs-about-gutter);
}

.bbs-about__heading {
    margin: 0 0 59px;
    color: var(--bbs-about-green);
    font-size: 40px;
    line-height: 1.25;
    font-weight: 900;
    text-align: center;
}

.bbs-about__heading:has(+ .bbs-about__intro) {
    margin-bottom: 21px;
}

.bbs-about__intro {
    margin: 0 0 59px;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 400;
}

/* ── Wall ── */
.bbs-about__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--bbs-about-gap-x);
    align-items: start;
}

.bbs-about__col {
    display: flex;
    flex-direction: column;
    gap: var(--bbs-about-gap-y);
}

/* ── Card ── */
.bbs-about__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 14px 40px;
    border-radius: var(--bbs-about-radius);
    text-align: center;
    color: #ffffff;
}

/* A picture leads instead of a big word: give it room from the top edge. */
.bbs-about__card--no-title {
    padding-top: 20px;
}

.bbs-about__card--grey {
    background: var(--bbs-about-grey);
    color: #000000;
}

.bbs-about__card--coral {
    background: var(--bbs-about-coral);
}

.bbs-about__card--green {
    background: var(--bbs-about-green);
}

.bbs-about__title {
    margin: 0;
    max-width: 100%;
    color: #ffffff;
    font-size: 61px;
    line-height: 1.55;
    font-weight: 700;
    text-shadow: 5px 0 0 var(--bbs-about-purple);
    overflow-wrap: anywhere;
}

.bbs-about__img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 10px;
}

.bbs-about__text {
    margin: 0;
    max-width: 304px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 300;
    color: inherit;
}

/* Black on grey is set a little heavier than white on colour, as in the original. */
.bbs-about__card--grey .bbs-about__text {
    font-weight: 400;
}

/* ── Button ── */
.bbs-about__actions {
    display: flex;
    justify-content: center;
    margin-top: 53px;
}

.bbs-about__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    min-height: 45px;
    padding: 6px 24px;
    border-radius: 20px;
    background: var(--bbs-about-green);
    color: #ffffff;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.bbs-about__btn:visited {
    color: #ffffff;
}

.bbs-about__btn:hover,
.bbs-about__btn:focus-visible {
    background: var(--bbs-about-green-hover);
    color: #ffffff;
    text-decoration: none;
}

.bbs-about__btn:focus-visible {
    outline: 2px solid var(--bbs-about-green);
    outline-offset: 3px;
}

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

/* ── 1199 and below: the 960 px grid ── */
@media (max-width: 1199px) {
    .bbs-about {
        --bbs-about-gap-x: 40px;
    }
}

/* ── 959 and below: two to a row, in reading order ── */
@media (max-width: 959px) {
    .bbs-about {
        --bbs-about-gap-x: 24px;
        --bbs-about-gap-y: 24px;
    }

    .bbs-about__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--bbs-about-gap-y);
        align-items: stretch;
    }

    .bbs-about__col {
        display: contents;
    }

    .bbs-about__card {
        order: var(--bbs-about-order, 0);
    }

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

/* ── 639 and below: one to a row ── */
@media (max-width: 639px) {
    .bbs-about {
        --bbs-about-gutter: 16px;
        --bbs-about-gap-y: 20px;

        padding: 46px 0 56px;
    }

    .bbs-about__heading,
    .bbs-about__intro {
        margin-bottom: 36px;
    }

    .bbs-about__heading {
        font-size: 32px;
    }

    .bbs-about__heading:has(+ .bbs-about__intro) {
        margin-bottom: 16px;
    }

    .bbs-about__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 420px;
        margin: 0 auto;
    }

    .bbs-about__card {
        padding-bottom: 32px;
        border-radius: 40px;
    }

    .bbs-about__card--no-title {
        padding-top: 20px;
    }

    .bbs-about__title {
        font-size: 44px;
    }

    .bbs-about__text {
        font-size: 16px;
    }

    .bbs-about__actions {
        margin-top: 40px;
    }
}

@media (max-width: 479px) {
    .bbs-about__heading {
        font-size: 30px;
    }

    .bbs-about__btn {
        width: 100%;
        max-width: 280px;
        min-width: 0;
    }
}

/*
 * On a computer the cards stand where the original's Zero block
 * (rec508095593, the same on bebestschool.com and its course pages) puts
 * them: each card its own height, the gaps under them as measured, in
 * TildaSans — the big words 61 / 95 px, the lines 18 / 24 px — and the
 * button 61 px under the tallest column.
 */
@media (min-width: 1200px) {
    .bbs-about {
        font-family: 'TildaSans', Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    .bbs-about__grid {
        column-gap: 86px;
    }

    .bbs-about__col {
        gap: 0;
    }

    .bbs-about__card {
        justify-content: flex-start;
        padding-bottom: 0;
        overflow: hidden;
    }

    .bbs-about__title {
        line-height: 95px;
    }

    .bbs-about__text {
        line-height: 24px;
    }

    .bbs-about__col:nth-child(1) .bbs-about__card:nth-child(1) { height: 234px; }
    .bbs-about__col:nth-child(1) .bbs-about__card:nth-child(2) { height: 207px; margin-top: 37px; }
    .bbs-about__col:nth-child(1) .bbs-about__card:nth-child(3) { height: 193px; margin-top: 35px; }
    .bbs-about__col:nth-child(1) .bbs-about__card:nth-child(4) { height: 207px; margin-top: 93px; }

    .bbs-about__col:nth-child(2) .bbs-about__card:nth-child(1) { height: 258px; }
    .bbs-about__col:nth-child(2) .bbs-about__card:nth-child(2) { height: 226px; margin-top: 38px; }
    .bbs-about__col:nth-child(2) .bbs-about__card:nth-child(3) { height: 221px; margin-top: 33px; }
    .bbs-about__col:nth-child(2) .bbs-about__card:nth-child(4) { height: 197px; margin-top: 43px; }

    .bbs-about__col:nth-child(3) .bbs-about__card:nth-child(1) { height: 217px; }
    .bbs-about__col:nth-child(3) .bbs-about__card:nth-child(2) { height: 311px; margin-top: 37px; }
    .bbs-about__col:nth-child(3) .bbs-about__card:nth-child(3) { height: 191px; margin-top: 42px; }
    .bbs-about__col:nth-child(3) .bbs-about__card:nth-child(4) { height: 186px; margin-top: 25px; }

    .bbs-about__actions {
        margin-top: 61px;
    }
}

/* The Russian record (rec673214815) stands tighter: its heading 9 px down
   at 62 px leading, the cards 53 px under the text, other gaps under the
   last cards, the button 53 px under the tallest column. */
@media (min-width: 1200px) {
    .bbs-about:lang(ru) {
        padding-top: 9px;
        padding-bottom: 71px;
    }

    .bbs-about:lang(ru) .bbs-about__heading {
        line-height: 62px;
    }

    .bbs-about:lang(ru) .bbs-about__intro {
        margin: -25px 0 53px;
    }

    .bbs-about:lang(ru) .bbs-about__col:nth-child(1) .bbs-about__card:nth-child(4) { margin-top: 45px; }
    .bbs-about:lang(ru) .bbs-about__col:nth-child(2) .bbs-about__card:nth-child(4) { height: 191px; margin-top: 41px; }
    .bbs-about:lang(ru) .bbs-about__col:nth-child(3) .bbs-about__card:nth-child(4) { margin-top: 45px; }

    .bbs-about:lang(ru) .bbs-about__actions {
        margin-top: 53px;
    }
}

/* On the yellow background (the older landings): the heading in black. */
.bbs-about.bbs-bg--yellow .bbs-about__heading {
    color: #000000;
}