/**
 * Course hero block.
 *
 * Values mirror the Tilda original (bebestschool.es/en/spanish, record
 * rec617543116): a 1200 px grid on a 747 px #a40acf band, with the coral
 * speech-bubble card floating in the middle of it — 1206 px wide, centred,
 * nudged 7 px down — and the content sitting over it.
 *
 * Everything down the page is a measurement from that record:
 *
 *   128 px  to the top of the 340×70 button
 *    79 px  from the button to the 63 px/1.0 title
 *    26 px  between the 180 px photo and the title
 *   118 px  from the title block to the 22 px facts row
 *    95 px  from the facts to the bottom of the band
 *
 * The original positions every element absolutely, which is why its own phone
 * layout overflows; this lays the same design out in flow so it holds together
 * at any width.
 */

.bbs-course-hero {
    --bbs-course-hero-bg: #a40acf;
    --bbs-course-hero-text: #ffffff;
    --bbs-course-hero-font: 'ApercuPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    /*
     * The grid is a fixed width that stays centred, the way the original's is,
     * and only goes fluid once the window is narrower than it. A container that
     * simply filled the window would slide the photo out past the card's left
     * edge on every screen between two breakpoints.
     */
    --bbs-course-hero-grid: 1200px;
    --bbs-course-hero-gutter: 20px;
    --bbs-course-hero-card: 1206px;
    --bbs-course-hero-photo: 180px;
    /* What the breadcrumb row takes: its line plus the gap under it. Zero
     * unless the row is there — see the note by the modifier below. */
    --bbs-course-hero-crumbs: 0px;

    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 747px;
    padding: max(0px, calc(128px - var(--bbs-course-hero-crumbs))) 0 95px;
    background: var(--bbs-course-hero-bg);
    font-family: var(--bbs-course-hero-font);
}

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

.bbs-course-hero--purple { --bbs-course-hero-bg: #a40acf; }
.bbs-course-hero--orange { --bbs-course-hero-bg: #ff5c00; }
.bbs-course-hero--coral  { --bbs-course-hero-bg: #ff4e60; }

/* ── Breadcrumbs ──
 * The path to the page, at the top of the band. The band already carries 128 px
 * of empty space above the button; the row takes its own height out of that
 * instead of adding to it, so the card, the photo, the title and the facts row
 * stay at the measurements the original record gives them. Indented to the
 * title rather than to the grid edge, which is where the eye expects it. */
.bbs-course-hero--breadcrumbs {
    --bbs-course-hero-crumbs: 42px;
}

.bbs-course-hero__breadcrumbs {
    /* The gap under the row is padding, not a margin: without a button the
     * next thing on the band is .bbs-course-hero__head, whose own 121 px top
     * margin would swallow a margin here and pull everything up with it. */
    margin: 0;
    padding: 0 0 16px 65px;
    color: var(--bbs-course-hero-text);
    font-size: 17px;
    /* In pixels, so the row's height is the one the variable above promises. */
    line-height: 26px;
    font-weight: 300;
}

/* ── The card ──
 * Centred on the band rather than on the content: the text sits high on it and
 * the facts run across its lower third, exactly as in the original. */
.bbs-course-hero__card {
    position: absolute;
    top: calc(50% + 7px);
    left: 50%;
    width: var(--bbs-course-hero-card);
    aspect-ratio: 1206 / 615;
    transform: translate(-50%, -50%);
    background-image: url('images/card.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 86%;
}

.bbs-course-hero__inner {
    position: relative;
    z-index: 1;
    width: min(100% - var(--bbs-course-hero-gutter) * 2, var(--bbs-course-hero-grid));
    margin: 0 auto;
}

/* ── Button ──
 * Sits over the orange corner of the card, so it is white with the band's own
 * colour for the label. */
.bbs-course-hero__actions {
    display: flex;
    justify-content: flex-end;
    padding-right: 19px;
}

.bbs-course-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 340px;
    min-height: 70px;
    padding: 8px 24px;
    border-radius: 20px;
    background: #ffffff;
    color: var(--bbs-course-hero-bg);
    font-size: 22px;
    line-height: 1.55;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.bbs-course-hero__btn:hover,
.bbs-course-hero__btn:focus-visible {
    background: #f1f1f1;
    color: var(--bbs-course-hero-bg);
    text-decoration: none;
}

.bbs-course-hero__btn:focus-visible {
    outline: 2px solid var(--bbs-course-hero-text);
    outline-offset: 3px;
}

/* ── Photo and title ── */
.bbs-course-hero__head {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    margin-top: 79px;
    padding-left: 65px;
}

/*
 * The original crops the photo to its top right corner — a 180 px square taken
 * from a 2.1:1 photo, held at 81.7% across. object-position repeats that crop
 * whatever picture is put in the field.
 */
.bbs-course-hero__photo {
    flex: none;
    width: var(--bbs-course-hero-photo);
    height: var(--bbs-course-hero-photo);
    /* The title's cap height starts 6 px above the photo. */
    margin-top: 6px;
    border-radius: 32%;
    background: #ffffff;
    object-fit: cover;
    object-position: 82% center;
}

.bbs-course-hero__copy {
    min-width: 0;
    max-width: 668px;
}

.bbs-course-hero__description {
    max-width: 560px;
    margin: 24px 0 0;
    color: var(--bbs-course-hero-text);
    font-size: 23px;
    line-height: 1.55;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.bbs-course-hero__title {
    max-width: 668px;
    margin: 0;
    color: var(--bbs-course-hero-text);
    font-size: 63px;
    line-height: 1;
    font-weight: 600;
}

/* ── Facts ──
 * Four columns on a 1100 px row inset 50 px inside the grid: 122 / 266 / 266 /
 * 266 with 60 px between them. Written as fractions so the row keeps those
 * proportions as the container narrows. */
.bbs-course-hero__facts {
    display: grid;
    grid-template-columns: 122fr 266fr 266fr 266fr;
    column-gap: 60px;
    row-gap: 14px;
    margin: 118px 0 0;
    padding: 0 50px;
    list-style: none;
}

.bbs-course-hero__fact {
    margin: 0;
    color: var(--bbs-course-hero-text);
    font-size: 22px;
    line-height: 1.55;
    /* The original asks for 100; 300 is the lightest ApercuPro the theme ships. */
    font-weight: 300;
}

/* ── 1199 and below: the 960 grid ── */
@media (max-width: 1199px) {
    .bbs-course-hero {
        --bbs-course-hero-grid: 960px;
        --bbs-course-hero-card: 960px;
        --bbs-course-hero-photo: 150px;

        min-height: 587px;
        padding: max(0px, calc(120px - var(--bbs-course-hero-crumbs))) 0 42px;
    }

    .bbs-course-hero__actions {
        padding-right: 30px;
    }

    .bbs-course-hero__btn {
        min-width: 300px;
        min-height: 60px;
        font-size: 20px;
    }

    .bbs-course-hero__breadcrumbs {
        padding-left: 29px;
    }

    .bbs-course-hero__head {
        gap: 30px;
        margin-top: 15px;
        padding-left: 29px;
    }

    .bbs-course-hero__photo {
        margin-top: 23px;
    }

    .bbs-course-hero__facts {
        column-gap: 40px;
        margin-top: 99px;
        padding: 0 0 0 30px;
    }

    .bbs-course-hero__fact {
        font-size: 20px;
    }
}

/* ── 959 and below: the 640 grid, facts break to two rows ── */
@media (max-width: 959px) {
    .bbs-course-hero {
        --bbs-course-hero-grid: 640px;
        --bbs-course-hero-card: 640px;
        --bbs-course-hero-photo: 100px;

        min-height: 427px;
        padding: max(0px, calc(99px - var(--bbs-course-hero-crumbs))) 0 24px;
    }

    .bbs-course-hero__actions {
        padding-right: 7px;
    }

    .bbs-course-hero__btn {
        min-width: 250px;
        min-height: 50px;
        font-size: 18px;
    }

    .bbs-course-hero--breadcrumbs {
        --bbs-course-hero-crumbs: 35px;
    }

    .bbs-course-hero__breadcrumbs {
        padding: 0 0 12px 19px;
        font-size: 15px;
        line-height: 23px;
    }

    .bbs-course-hero__head {
        gap: 25px;
        margin-top: 25px;
        padding-left: 19px;
    }

    .bbs-course-hero__photo {
        margin-top: 8px;
        border-radius: 38%;
    }

    .bbs-course-hero__copy {
        max-width: 384px;
    }

    .bbs-course-hero__description {
        margin-top: 16px;
        font-size: 18px;
    }

    .bbs-course-hero__title {
        max-width: 384px;
        font-size: 36px;
    }

    .bbs-course-hero__facts {
        grid-template-columns: 1fr 1fr;
        column-gap: 30px;
        row-gap: 6px;
        margin-top: 27px;
        padding: 0;
        text-align: center;
    }

    .bbs-course-hero__fact {
        max-width: 220px;
        margin-inline: auto;
        font-size: 16px;
    }
}

/* ── 639 and below: the card fills the band and the button moves under it ──
 * Below this width the card is wider than the window in the original, which is
 * to say its corners are meant to be off screen: it reads as the band itself. */
@media (max-width: 639px) {
    .bbs-course-hero {
        /* Edge to edge: the card is the band down here. */
        --bbs-course-hero-grid: 100%;

        min-height: 0;
        padding: max(0px, calc(44px - var(--bbs-course-hero-crumbs))) 0 40px;
    }

    .bbs-course-hero__card {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        transform: none;
        background-size: cover;
    }

    .bbs-course-hero__inner {
        display: flex;
        flex-direction: column;
    }

    .bbs-course-hero__breadcrumbs {
        padding-left: 0;
    }

    /* Photo, title and facts first; the button closes the section. */
    .bbs-course-hero__actions {
        order: 1;
        justify-content: stretch;
        margin-top: 36px;
        padding-right: 0;
    }

    .bbs-course-hero__btn {
        width: 100%;
    }

    .bbs-course-hero__head {
        margin-top: 0;
        padding-left: 0;
    }

    .bbs-course-hero__facts {
        margin-top: 30px;
    }
}

/* ── 479 and below: the photo moves above the title ── */
@media (max-width: 479px) {
    .bbs-course-hero {
        --bbs-course-hero-gutter: 16px;
        --bbs-course-hero-photo: 80px;
    }

    .bbs-course-hero--breadcrumbs {
        --bbs-course-hero-crumbs: 34px;
    }

    .bbs-course-hero__breadcrumbs {
        font-size: 14px;
        line-height: 22px;
    }

    .bbs-course-hero__head {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }

    .bbs-course-hero__photo {
        margin-top: 0;
        border-radius: 19%;
    }

    .bbs-course-hero__title {
        max-width: none;
        font-size: 30px;
    }

    .bbs-course-hero__facts {
        column-gap: 20px;
    }
}

/* ── Without a button ──
 * The layout of the exercise and article headers (rec2018290353 on
 * bebestschool.es/en/exercises/english-date-exercises-with-answers): with no
 * button above them the photo and title sit lower — photo 249 px from the top
 * of the band and the title 26 px below the photo's top — the title may run
 * 879 px wide, and the bottom row starts 584 px down. The same measurements
 * are repeated for each grid below. */
/* This record's card keeps the picture's own proportions (the course pages
 * stretch it taller), which also brings its top edge to where the original
 * has it, 96 px down the band. */
.bbs-course-hero--no-button .bbs-course-hero__card {
    aspect-ratio: 1206 / 569;
}

.bbs-course-hero--no-button .bbs-course-hero__head {
    gap: 23px;
    margin-top: 121px;
}

.bbs-course-hero--no-button .bbs-course-hero__photo {
    margin-top: 0;
}

.bbs-course-hero--no-button .bbs-course-hero__copy {
    max-width: 879px;
    padding-top: 26px;
}

.bbs-course-hero--no-button .bbs-course-hero__title {
    max-width: 879px;
}

.bbs-course-hero--no-button .bbs-course-hero__facts {
    margin-top: 155px;
}

/* ── Bottom row: first left, last right ──
 * On the 1200 and 960 grids the last line takes the fourth column, where the
 * original puts the reading time; anything between fills the columns between.
 * Below 960 the lines spread to the two ends of the card. */
.bbs-course-hero--facts-edges .bbs-course-hero__fact:last-child:not(:first-child) {
    grid-column: 4;
}

@media (max-width: 1199px) {
    /* On the 960 and 640 grids the original sets the card 23 px low. */
    .bbs-course-hero--no-button .bbs-course-hero__card {
        top: calc(50% + 23px);
    }

    .bbs-course-hero--no-button .bbs-course-hero__head {
        margin-top: 84px;
    }

    .bbs-course-hero--no-button .bbs-course-hero__photo {
        margin-top: 0;
    }

    .bbs-course-hero--no-button .bbs-course-hero__copy,
    .bbs-course-hero--no-button .bbs-course-hero__title {
        max-width: 688px;
    }

    .bbs-course-hero--no-button .bbs-course-hero__copy {
        padding-top: 21px;
    }

    .bbs-course-hero--no-button .bbs-course-hero__facts {
        margin-top: 129px;
    }
}

@media (max-width: 959px) {
    .bbs-course-hero--no-button .bbs-course-hero__head {
        margin-top: 49px;
    }

    .bbs-course-hero--no-button .bbs-course-hero__photo {
        margin-top: 3px;
    }

    .bbs-course-hero--no-button .bbs-course-hero__copy,
    .bbs-course-hero--no-button .bbs-course-hero__title {
        max-width: 357px;
    }

    .bbs-course-hero--no-button .bbs-course-hero__copy {
        padding-top: 0;
    }

    .bbs-course-hero--no-button .bbs-course-hero__facts {
        margin-top: 50px;
    }

    .bbs-course-hero--facts-edges .bbs-course-hero__facts {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 0 15px;
        text-align: left;
    }

    .bbs-course-hero--facts-edges .bbs-course-hero__fact {
        max-width: none;
        margin-inline: 0;
    }

    .bbs-course-hero--facts-edges .bbs-course-hero__fact:last-child:not(:first-child) {
        text-align: right;
    }
}

@media (max-width: 639px) {
    .bbs-course-hero--no-button {
        padding: max(0px, calc(179px - var(--bbs-course-hero-crumbs))) 0 48px;
    }

    /* The card fills the band down here, as it does without the modifier. */
    .bbs-course-hero--no-button .bbs-course-hero__card {
        top: 0;
        aspect-ratio: auto;
    }

    .bbs-course-hero--no-button .bbs-course-hero__head {
        margin-top: 0;
    }

    .bbs-course-hero--no-button .bbs-course-hero__facts {
        margin-top: 38px;
    }
}

@media (max-width: 479px) {
    .bbs-course-hero--no-button {
        padding: max(0px, calc(140px - var(--bbs-course-hero-crumbs))) 0 30px;
    }

    .bbs-course-hero--no-button .bbs-course-hero__head {
        gap: 21px;
    }

    /* The original's title spans the whole 320 px screen at 29 px, which
     * keeps "English dates exercises" on one line. */
    .bbs-course-hero--no-button .bbs-course-hero__copy {
        margin-inline: calc(var(--bbs-course-hero-gutter) * -1);
    }

    .bbs-course-hero--no-button .bbs-course-hero__title {
        font-size: 29px;
    }

    .bbs-course-hero--no-button .bbs-course-hero__photo {
        margin-top: 0;
    }

    .bbs-course-hero--no-button .bbs-course-hero__facts {
        margin-top: 75px;
    }

    .bbs-course-hero--facts-edges .bbs-course-hero__facts {
        padding: 0;
    }
}

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