/**
 * Teacher cards block.
 *
 * Values mirror the Tilda original (bebestschool.kz, record rec534207569):
 * two 560 × 329 #f3f3f3 cards 40 px apart on the 1200 px grid, rounded 50 px,
 * each with a 200 px round photo, a 20 px name, a 14 px coloured language and
 * 14 px copy beside them, and a 230 × 45 green button under the row.
 */

.bbs-tcards {
    --bbs-tcards-font: 'ApercuPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --bbs-tcards-container: 1200px;
    --bbs-tcards-gutter: 20px;
    --bbs-tcards-card: #f3f3f3;
    --bbs-tcards-green: #1cb65a;
    --bbs-tcards-green-hover: #169c4c;
    --bbs-tcards-photo: 200px;

    padding: 20px 0 57px;
    background: #ffffff;
    color: #000000;
    font-family: var(--bbs-tcards-font);
}

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

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

.bbs-tcards__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
}

/* A single card stays card-sized, in the middle. */
.bbs-tcards__card:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(560px, 100%);
}

/* ── Card ── */
.bbs-tcards__card {
    --bbs-tcards-accent: #f66746;

    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 329px;
    padding: 20px 24px 20px 16px;
    border-radius: 50px;
    background: var(--bbs-tcards-card);
}

.bbs-tcards__card--pink   { --bbs-tcards-accent: #f16698; }
.bbs-tcards__card--green  { --bbs-tcards-accent: #1cb65a; }
.bbs-tcards__card--yellow { --bbs-tcards-accent: #ffd62c; }
.bbs-tcards__card--purple { --bbs-tcards-accent: #4b23db; }

.bbs-tcards__person {
    display: flex;
    flex: 0 0 var(--bbs-tcards-photo);
    flex-direction: column;
    align-items: center;
    width: var(--bbs-tcards-photo);
    text-align: center;
}

.bbs-tcards__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: #e4e4e4;
}

/* The ring sits a little way out from the photo, as in the original pictures. */
.bbs-tcards__card--ring .bbs-tcards__photo {
    padding: 5%;
    border: 2px dashed var(--bbs-tcards-accent);
    background: #ffffff;
    background-clip: padding-box;
}

.bbs-tcards__img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

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

.bbs-tcards__subject {
    margin: 0;
    color: var(--bbs-tcards-accent);
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
}

.bbs-tcards__bio {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
}

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

.bbs-tcards__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 230px;
    min-height: 45px;
    padding: 6px 24px;
    border-radius: 20px;
    background: var(--bbs-tcards-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-tcards__btn:visited {
    color: #ffffff;
}

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

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

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

/* ── 1199 and below: the 960 px grid, smaller photos ── */
@media (max-width: 1199px) {
    .bbs-tcards {
        --bbs-tcards-gutter: 10px;
        --bbs-tcards-photo: 140px;
    }

    .bbs-tcards__grid {
        gap: 19px;
    }

    .bbs-tcards__card {
        gap: 16px;
        padding: 24px 20px 24px 12px;
    }

    .bbs-tcards__actions {
        margin-top: 64px;
    }
}

/* ── 959 and below: one under another ── */
@media (max-width: 959px) {
    .bbs-tcards {
        --bbs-tcards-gutter: 10px;
        --bbs-tcards-photo: 170px;
    }

    .bbs-tcards__inner {
        max-width: 663px;
    }

    .bbs-tcards__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .bbs-tcards__card {
        min-height: 0;
        gap: 24px;
        padding: 30px 24px 30px 30px;
    }

    .bbs-tcards__actions {
        margin-top: 36px;
    }
}

/* ── 479 and below: photo above the text, everything centred ── */
@media (max-width: 479px) {
    .bbs-tcards {
        --bbs-tcards-gutter: 16px;
        --bbs-tcards-photo: 176px;

        padding-bottom: 40px;
    }

    .bbs-tcards__card {
        flex-direction: column;
        gap: 14px;
        padding: 24px 16px 30px;
        border-radius: 40px;
    }

    .bbs-tcards__bio {
        font-size: 13px;
        text-align: center;
    }
}

/* ── Heading ── */
.bbs-tcards__title {
    margin: 0 0 48px;
    color: #1cb65a;
    font-size: 40px;
    line-height: 1.55;
    font-weight: 700;
    text-align: center;
}

/* ── Columns look ──
   bebestschool.kz/german, rec564206369: a 40 px bold green heading 60 px
   from the top; three columns across the 1160 px grid, each a 220 px photo
   (its dashed ring part of the picture), then 28 px under it the name,
   the language in its colour and the text, all 18 px at 28 px and centred;
   the green button 13 px under the tallest. Below 960 px one under another. */
.bbs-tcards--columns {
    --bbs-tcards-container: 1160px;
    --bbs-tcards-photo: 220px;

    padding: 60px 0 89px;
}

.bbs-tcards--columns .bbs-tcards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px 24px;
}

.bbs-tcards--columns .bbs-tcards__card,
.bbs-tcards--columns .bbs-tcards__card:only-child {
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: auto;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    text-align: center;
}

.bbs-tcards--columns .bbs-tcards__card:only-child {
    grid-column: 2;
}

.bbs-tcards--columns .bbs-tcards__person {
    flex: none;
    width: 100%;
}

.bbs-tcards--columns .bbs-tcards__photo {
    width: var(--bbs-tcards-photo);
    background: none;
}

.bbs-tcards--columns .bbs-tcards__name {
    margin-top: 28px;
    font-size: 18px;
    line-height: 28px;
}

.bbs-tcards--columns .bbs-tcards__subject {
    margin-top: 3px;
    font-size: 18px;
    line-height: 28px;
}

.bbs-tcards--columns .bbs-tcards__card--yellow {
    --bbs-tcards-accent: #ffce35;
}

.bbs-tcards--columns .bbs-tcards__bio {
    flex: none;
    max-width: 360px;
    margin-top: 3px;
    font-size: 18px;
    line-height: 28px;
}

.bbs-tcards--columns .bbs-tcards__actions {
    margin-top: 13px;
}

@media (max-width: 1199px) {
    .bbs-tcards--columns {
        --bbs-tcards-gutter: 20px;
        --bbs-tcards-photo: 220px;
    }
}

@media (max-width: 959px) {
    .bbs-tcards--columns {
        --bbs-tcards-photo: 220px;
    }

    .bbs-tcards--columns .bbs-tcards__inner {
        max-width: 660px;
    }

    .bbs-tcards--columns .bbs-tcards__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .bbs-tcards--columns .bbs-tcards__card:only-child {
        grid-column: 1;
    }

    .bbs-tcards--columns .bbs-tcards__bio {
        max-width: 620px;
    }

    .bbs-tcards--columns .bbs-tcards__actions {
        margin-top: 74px;
    }
}

@media (max-width: 639px) {
    .bbs-tcards__title {
        margin-bottom: 16px;
        font-size: 30px;
        line-height: 36px;
    }

    .bbs-tcards--columns {
        padding: 30px 0 45px;
    }
}

@media (max-width: 479px) {
    .bbs-tcards--columns {
        --bbs-tcards-photo: 220px;
    }

    .bbs-tcards--columns .bbs-tcards__card {
        padding: 0;
        border-radius: 0;
    }

    .bbs-tcards--columns .bbs-tcards__bio {
        font-size: 18px;
    }
}

/* Smaller text in the columns look: 16 px at 25 px, as on bebestschool.kz/spanish-course. */
.bbs-tcards--columns.bbs-tcards--small .bbs-tcards__name,
.bbs-tcards--columns.bbs-tcards--small .bbs-tcards__subject,
.bbs-tcards--columns.bbs-tcards--small .bbs-tcards__bio {
    font-size: 16px;
    line-height: 25px;
}

.bbs-tcards--columns.bbs-tcards--small .bbs-tcards__subject {
    font-size: 14px;
}