/**
 * Single post.
 *
 * Values mirror the articles on the old site (bebestschool.es/en/blog/…):
 * a #a40acf band holding a 1206 px gradient card with the title at 63 px/600
 * over it, the date and reading time at 22 px along its bottom edge, then the
 * body in colour bands — #f1f1f1, #ffffff, #ff4e60 in turn — with 61 px/700
 * headings and 20 px/1.55 text. On the coral band the type turns white.
 *
 * The card and the photo are the same on every post there, so both ship with
 * the theme rather than coming from the post.
 */

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

    --bbs-article-purple: #a40acf;
    --bbs-article-orange: #ff5c00;
    --bbs-article-coral: #ff4e60;
    --bbs-article-grey: #f1f1f1;

    font-family: var(--bbs-article-font);
}

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

/* ── Hero ── */
.bbs-article__hero {
    padding: 40px 0 96px;
    background: var(--bbs-article-purple);
}

.bbs-article__hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: calc(1206px + var(--bbs-article-gutter) * 2);
    /* The card sets the height; everything else sits on top of it. */
    margin: 0 auto;
    padding: 0 var(--bbs-article-gutter);
}

/* The path to the article, over the band above the card, lined up with the
 * card's left edge. */
.bbs-article__breadcrumbs {
    max-width: calc(1206px + var(--bbs-article-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--bbs-article-gutter) 16px;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 300;
}

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

.bbs-article__hero-photo {
    position: absolute;
    top: 33%;
    left: calc(var(--bbs-article-gutter) + 5.6%);
    width: 15%;
    max-width: 180px;
    height: auto;
    border-radius: 32%;
    background: #ffffff;
}

.bbs-article__title {
    position: absolute;
    top: 50%;
    left: calc(var(--bbs-article-gutter) + 23%);
    width: 56%;
    margin: 0;
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 63px;
    line-height: 1.05;
    font-weight: 600;
}

.bbs-article__meta {
    position: absolute;
    top: 88%;
    right: calc(var(--bbs-article-gutter) + 4%);
    left: calc(var(--bbs-article-gutter) + 4%);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: #ffffff;
    font-size: 22px;
    line-height: 1.55;
    font-weight: 300;
}

/* ── Body bands ── */
.bbs-article__band {
    padding: 46px 0 52px;
}

.bbs-article__band--grey  { background: var(--bbs-article-grey); }
.bbs-article__band--white { background: #ffffff; }
.bbs-article__band--coral { background: var(--bbs-article-coral); color: #ffffff; }

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

/* ── Body type ── */
.bbs-article__content h2 {
    margin: 0 0 24px;
    color: var(--bbs-article-orange);
    font-size: 61px;
    line-height: 1.2;
    font-weight: 700;
}

.bbs-article__content h3 {
    margin: 1.4em 0 16px;
    color: var(--bbs-article-orange);
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
}

.bbs-article__content h4 {
    margin: 1.3em 0 12px;
    color: var(--bbs-article-orange);
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
}

.bbs-article__band--coral h2,
.bbs-article__band--coral h3,
.bbs-article__band--coral h4 {
    color: #ffffff;
}

.bbs-article__content p {
    margin: 0 0 1.1em;
    color: #000000;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 400;
}

.bbs-article__band--coral p,
.bbs-article__band--coral li {
    color: #ffffff;
}

.bbs-article__content > .bbs-article__band:first-child .bbs-article__band-inner > *:first-child,
.bbs-article__content p:last-child {
    margin-bottom: 0;
}

.bbs-article__content ul,
.bbs-article__content ol {
    margin: 0 0 1.1em;
    padding-left: 1.3em;
    color: #000000;
    font-size: 20px;
    line-height: 1.55;
}

.bbs-article__content li + li {
    margin-top: 0.4em;
}

.bbs-article__content a {
    color: var(--bbs-article-orange);
}

.bbs-article__band--coral a {
    color: #ffffff;
}

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

/* ── Tables ──
 * White on every band, with the orange rules the old site draws between rows. */
.bbs-article__content figure,
.bbs-article__content .wp-block-table {
    margin: 26px 0;
    overflow-x: auto;
}

.bbs-article__content table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    color: #000000;
    font-size: 17px;
    line-height: 1.45;
}

.bbs-article__content th,
.bbs-article__content td {
    padding: 14px 20px;
    border-top: 1px solid var(--bbs-article-orange);
    border-bottom: 1px solid var(--bbs-article-orange);
    text-align: left;
    vertical-align: middle;
}

.bbs-article__content thead th,
.bbs-article__content tr:first-child td {
    font-weight: 700;
}

.bbs-article__content tbody tr:nth-child(even) td {
    background: var(--bbs-article-grey);
}

.bbs-article__content img {
    max-width: 100%;
    height: auto;
}

/* The two sections every post ends with sit flush under the last band. */
.bbs-article__after {
    margin: 0;
}

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

    .bbs-article__content h2 {
        font-size: 44px;
    }

    .bbs-article__content h3 {
        font-size: 28px;
    }
}

/* ── 959 and below ── */
@media (max-width: 959px) {
    .bbs-article__hero {
        padding: 28px 0 60px;
    }

    .bbs-article__title {
        font-size: 36px;
    }

    .bbs-article__meta {
        font-size: 17px;
    }

    .bbs-article__breadcrumbs {
        padding-bottom: 12px;
        font-size: 15px;
    }

    .bbs-article__band {
        padding: 34px 0 38px;
    }

    .bbs-article__content h2 {
        font-size: 34px;
    }

    .bbs-article__content p,
    .bbs-article__content ul,
    .bbs-article__content ol {
        font-size: 18px;
    }
}

/* ── 639 and below: the card stops carrying the title ── */
@media (max-width: 639px) {
    .bbs-article {
        --bbs-article-gutter: 16px;
    }

    .bbs-article__hero {
        padding: 20px 0 32px;
    }

    .bbs-article__hero-inner {
        display: block;
    }

    .bbs-article__hero-card {
        border-radius: 18px;
    }

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

    /* Below this width the card is too short to hold the type legibly, so the
       title and meta drop underneath it. */
    .bbs-article__hero-photo,
    .bbs-article__title,
    .bbs-article__meta {
        position: static;
        transform: none;
    }

    .bbs-article__hero-photo {
        width: 88px;
        margin: -44px 0 16px var(--bbs-article-gutter);
        border-radius: 26px;
    }

    .bbs-article__title {
        width: auto;
        padding: 0 var(--bbs-article-gutter);
        font-size: 30px;
    }

    .bbs-article__meta {
        margin-top: 16px;
        padding: 0 var(--bbs-article-gutter);
        font-size: 15px;
    }

    .bbs-article__content h2 {
        font-size: 28px;
    }

    .bbs-article__content h3 {
        font-size: 22px;
    }

    .bbs-article__content th,
    .bbs-article__content td {
        padding: 10px 12px;
    }
}

/* ── Bands that came with the content ──
 * An imported post carries its own colour bands as group blocks, one per
 * section, holding the colour the author picked on the old site. They run the
 * full width of the window with the text held to the usual grid inside. */
.bbs-article__content > .wp-block-group {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 46px;
    padding-bottom: 52px;
    padding-inline: max(var(--bbs-article-gutter), calc(50vw - var(--bbs-article-container) / 2));
}

/* On coral the type turns white, exactly as the bands the template draws. */
.bbs-article__content > .wp-block-group[style*="#ff4e60"] h2,
.bbs-article__content > .wp-block-group[style*="#ff4e60"] h3,
.bbs-article__content > .wp-block-group[style*="#ff4e60"] h4 {
    color: #ffffff;
}

.bbs-article__content > .wp-block-group[style*="#ff4e60"] p,
.bbs-article__content > .wp-block-group[style*="#ff4e60"] li {
    color: #ffffff;
}

.bbs-article__content > .wp-block-group[style*="#ff4e60"] a {
    color: #ffffff;
}

.bbs-article__content > .wp-block-group > *:first-child { margin-top: 0; }
.bbs-article__content > .wp-block-group > *:last-child { margin-bottom: 0; }

@media (max-width: 959px) {
    .bbs-article__content > .wp-block-group {
        padding-top: 34px;
        padding-bottom: 38px;
    }
}