/**
 * Text band block.
 *
 * Values mirror the text sections of the exercise pages — the introduction on
 * bebestschool.es/en/exercises/english-date-exercises-with-answers
 * (rec2018290363): a #f1f1f1 band with 20 px/1.55 black copy 28 px from its
 * top, running the full width of each grid less 20 px a side:
 *
 *   1200 grid  1160 px    960 grid  920 px    640 grid  600 px
 *    480 grid   440 px    320 grid  280 px (18 px text below 640)
 *
 * The original gives each band a fixed height; here it grows with its text,
 * keeping the original's space under it: 20 px, then 28 px on the 960 grid and
 * 17 px below it.
 */

.bbs-text-band {
    --bbs-text-band-bg: #f1f1f1;
    --bbs-text-band-ink: #000000;
    --bbs-text-band-font: 'ApercuPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --bbs-text-band-width: 1160px;
    --bbs-text-band-pb: 20px;

    box-sizing: border-box;
    padding: 28px 0 var(--bbs-text-band-pb);
    background: var(--bbs-text-band-bg);
    color: var(--bbs-text-band-ink);
    font-family: var(--bbs-text-band-font);
}

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

.bbs-text-band--white { --bbs-text-band-bg: #ffffff; }

.bbs-text-band--coral {
    --bbs-text-band-bg: #ff4e60;
    --bbs-text-band-ink: #ffffff;
}

.bbs-text-band__inner {
    width: min(100% - 40px, var(--bbs-text-band-width));
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 400;
}

.bbs-text-band__inner p {
    margin: 0 0 1em;
    color: inherit;
    font: inherit;
}

/* The copy's own blocks sit in ACF's wrapper (.bbs-text-band__content) on the
 * site, or straight in the band when the renderer is called directly. */
:is(.bbs-text-band__inner, .bbs-text-band__content) > :last-child,
.bbs-text-band__inner p:last-child {
    margin-bottom: 0;
}

.bbs-text-band__inner a {
    color: #ff8562;
    text-decoration: none;
}

.bbs-text-band__inner a:hover {
    text-decoration: underline;
}

/* On coral the orange would disappear: links take the text colour there. */
.bbs-text-band--coral .bbs-text-band__inner a {
    color: inherit;
    text-decoration: underline;
}

/* ── Headings ──
 * "Table of contents" on the exercise pages (rec2018290373): 61 px/1.55 bold
 * purple, 20 px from the top of its band — so a band that opens with a heading
 * starts 8 px higher than one opening with text. White on coral.
 * The Table of contents block's own heading is matched by its class as well,
 * so it keeps this look at whatever heading level it is set to. */
.bbs-text-band__inner h2,
.bbs-text-band__inner .bbs-toc__title {
    margin: 0 0 13px;
    color: #a40acf;
    font-family: inherit;
    font-size: 61px;
    line-height: 1.55;
    font-weight: 700;
    letter-spacing: 0;
}

.bbs-text-band--coral .bbs-text-band__inner h2,

.bbs-text-band--coral .bbs-text-band__inner .bbs-toc__title {
    color: #ffffff;
}

/* On grey the exercise titles are orange. */
.bbs-text-band--grey .bbs-text-band__inner h2,
.bbs-text-band--grey .bbs-text-band__inner .bbs-toc__title {
    color: #ff5c00;
}

/* "Medium" heading style: the exercise title (rec2018290403), 50 px/1.2 with
 * 23 px under it. Sizes and spacing follow the original at each grid. */
.bbs-text-band__inner h2.is-style-bbs-medium {
    margin-bottom: 23px;
    font-size: 50px;
    line-height: 1.2;
}

/* "Small" heading style: the second exercise title (rec2018290423), 40 px/1.2
 * with 20 px under it, 30 px from the 640 grid down. */
.bbs-text-band__inner h2.is-style-bbs-small {
    margin-bottom: 20px;
    font-size: 40px;
    line-height: 1.2;
}

:is(.bbs-text-band__inner, .bbs-text-band__content) > h2:first-child,

:is(.bbs-text-band__inner, .bbs-text-band__content) > .bbs-toc__title:first-child {
    margin-top: -8px;
}

/* ── Lists ──
 * The contents list under it (rec2018290383): black disc markers indented
 * 20 px, light 20 px/1.55 text, and links in #ff8562. */
.bbs-text-band__inner ul,
.bbs-text-band__inner ol {
    margin: 0 0 10px;
    padding-left: 20px;
}

.bbs-text-band__inner ul {
    list-style: disc;
}

.bbs-text-band__inner li {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: 300;
}

.bbs-text-band__inner li strong,
.bbs-text-band__inner li b {
    font-weight: 700;
}

/* A band ending in a list keeps the original's 16 px under it, whatever the
 * band's own bottom padding is at that width. */
:is(.bbs-text-band__inner, .bbs-text-band__content) > :is(ul, ol):last-child {
    margin-bottom: calc(16px - var(--bbs-text-band-pb));
}

@media (max-width: 1199px) {
    .bbs-text-band {
        --bbs-text-band-width: 920px;
        --bbs-text-band-pb: 28px;

        padding-top: 20px;
    }

    :is(.bbs-text-band__inner, .bbs-text-band__content) > h2:first-child,

    :is(.bbs-text-band__inner, .bbs-text-band__content) > .bbs-toc__title:first-child {
        margin-top: 0;
    }

    .bbs-text-band__inner h2.is-style-bbs-medium {
        margin-bottom: 46px;
    }
}

@media (max-width: 959px) {
    .bbs-text-band {
        --bbs-text-band-width: 600px;
        --bbs-text-band-pb: 17px;
    }

    .bbs-text-band__inner h2.is-style-bbs-medium {
        margin-bottom: 20px;
        font-size: 51px;
    }

    .bbs-text-band__inner h2.is-style-bbs-small {
        margin-bottom: 17px;
        font-size: 30px;
    }
}

@media (max-width: 639px) {
    .bbs-text-band {
        --bbs-text-band-width: 440px;
    }

    .bbs-text-band__inner {
        font-size: 18px;
    }

    /* "Text on phones: 20 px" keeps the full size. */
    .bbs-text-band--phone-large .bbs-text-band__inner {
        font-size: 20px;
    }

    .bbs-text-band__inner h2,

    .bbs-text-band__inner .bbs-toc__title {
        margin-bottom: 11px;
        font-size: 38px;
    }

    .bbs-text-band__inner h2.is-style-bbs-medium {
        margin-bottom: 21px;
        font-size: 38px;
    }

    .bbs-text-band__inner h2.is-style-bbs-small {
        margin-bottom: 20px;
        font-size: 30px;
    }
}

@media (max-width: 479px) {
    .bbs-text-band {
        --bbs-text-band-width: 280px;
    }

    /* "Text on phones: 16 px" steps down again below 480. */
    .bbs-text-band--phone-small .bbs-text-band__inner {
        font-size: 16px;
    }

    .bbs-text-band__inner h2,

    .bbs-text-band__inner .bbs-toc__title {
        margin-bottom: 3px;
        font-size: 29px;
    }

    :is(.bbs-text-band__inner, .bbs-text-band__content) > h2:first-child,

    :is(.bbs-text-band__inner, .bbs-text-band__content) > .bbs-toc__title:first-child {
        margin-top: -8px;
    }

    .bbs-text-band__inner h2.is-style-bbs-medium {
        margin-bottom: 23px;
        font-size: 29px;
    }

    .bbs-text-band__inner h2.is-style-bbs-small {
        margin-bottom: 21px;
        font-size: 30px;
    }

    /* The exercise titles keep their 20 px from the top here. */
    :is(.bbs-text-band__inner, .bbs-text-band__content) > h2:is(.is-style-bbs-medium, .is-style-bbs-small):first-child {
        margin-top: 0;
    }
}

/* List text follows the original's text blocks, whose steps fall at 1200 and
 * 640 inclusive rather than at the grid breakpoints above. */
@media (max-width: 1200px) {
    .bbs-text-band__inner li {
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    .bbs-text-band__inner li {
        font-size: 16px;
        line-height: 1.45;
    }
}