/**
 * Info bars block.
 *
 * Values mirror the Tilda original (bebestschool.es/en/spanish, record
 * rec617543120): a 1200 px grid holding a 28 px/600 heading over three
 * 1180×170 bars with a 56 px radius, inset 10 px inside the grid and 40 px
 * apart. Inside each bar, 45 px in, a 100 px white square with a 24 px radius
 * carries an 80 px icon; 21 px after it come the 27 px/600 row heading and the
 * 20 px/400 line under it, the pair centred on the bar's height.
 *
 * The original stacks absolutely positioned boxes; this lays the same design
 * out in flow, so a longer line simply makes its own bar taller.
 *
 * The optional button follows rec623465121 on bebestschool.es/en/french/groups:
 * a white 340×70 button with a 20 px radius and 22 px/1.55/600 #ff5c00 text,
 * centred on the bar's height 61 px from its right edge. On the 960 grid it is
 * 300×60 and 19 px from the edge; from 959 down it is 250×50 with 18 px text,
 * under the copy and in line with it, and below 480 it is centred on the bar.
 */

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

    --bbs-info-bars-coral: #ff4e60;
    --bbs-info-bars-purple: #a40acf;
    --bbs-info-bars-orange: #ff5c00;

    --bbs-info-bars-bar: var(--bbs-info-bars-coral);
    --bbs-info-bars-radius: 56px;
    --bbs-info-bars-box: 100px;
    --bbs-info-bars-icon: 80px;

    padding: 20px 0 70px;
    background: #ffffff;
    font-family: var(--bbs-info-bars-font);
}

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

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

.bbs-info-bars__title {
    /* The bars are inset 10 px and the heading 13 px, as in the original. */
    margin: 0 0 40px;
    padding-left: 13px;
    color: #000000;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 600;
}

.bbs-info-bars__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 0;
    padding: 0 10px;
    list-style: none;
}

/* ── One bar ── */
.bbs-info-bars__row {
    display: flex;
    align-items: center;
    gap: 21px;
    min-height: 170px;
    margin: 0;
    padding: 20px 45px;
    border-radius: var(--bbs-info-bars-radius);
    background: var(--bbs-info-bars-bar);
}

.bbs-info-bars__row--coral  { --bbs-info-bars-bar: var(--bbs-info-bars-coral); }
.bbs-info-bars__row--purple { --bbs-info-bars-bar: var(--bbs-info-bars-purple); }
.bbs-info-bars__row--orange { --bbs-info-bars-bar: var(--bbs-info-bars-orange); }

.bbs-info-bars__icon-box {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--bbs-info-bars-box);
    height: var(--bbs-info-bars-box);
    border-radius: 24px;
    background: #ffffff;
}

.bbs-info-bars__icon {
    width: var(--bbs-info-bars-icon);
    height: auto;
}

/*
 * The original sizes every box by hand — headings up to 626 px, the lines under
 * them 504 to 583 — which is what breaks the longer sentences in two. Two caps
 * hold that measure: without them a sentence would run the full width of the
 * bar and the rhythm of the stack would go.
 */
/* A paragraph by default; clear carries over what the theme gives a heading,
   so a bar lays out the same whichever tag its title is. */
.bbs-info-bars__row-title {
    clear: both;
    max-width: 630px;
    margin: 0;
    color: #ffffff;
    font-size: 27px;
    line-height: 1.25;
    font-weight: 600;
}

.bbs-info-bars__text {
    max-width: 570px;
    margin: 14px 0 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 400;
}

.bbs-info-bars__text a {
    color: inherit;
}

/* ── Button ──
 * A bar with a button lays out on a grid instead: icon, copy, button. */
.bbs-info-bars__row.bbs-info-bars__row--has-btn {
    display: grid;
    grid-template-columns: var(--bbs-info-bars-box) minmax(0, 1fr) auto;
    padding-right: 61px;
}

.bbs-info-bars__row--has-btn.bbs-info-bars__row--no-icon {
    grid-template-columns: minmax(0, 1fr) auto;
}

.bbs-info-bars__btn {
    --bbs-info-bars-btn-ink: var(--bbs-info-bars-orange);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 340px;
    max-width: 100%;
    min-height: 70px;
    padding: 6px 20px;
    border-radius: 20px;
    background: #ffffff;
    color: var(--bbs-info-bars-btn-ink);
    font-size: 22px;
    line-height: 1.55;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

/* Orange text would fight a purple bar; it takes the bar's colour there. */
.bbs-info-bars__row--purple .bbs-info-bars__btn {
    --bbs-info-bars-btn-ink: var(--bbs-info-bars-purple);
}

.bbs-info-bars__btn:hover,
.bbs-info-bars__btn:focus-visible {
    background: #fff1e8;
    color: var(--bbs-info-bars-btn-ink);
    text-decoration: none;
}

.bbs-info-bars__btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* ── 1199 and below: the 960 grid ── */
@media (max-width: 1199px) {
    .bbs-info-bars__row {
        gap: 19px;
        padding: 20px 25px;
    }

    .bbs-info-bars__list {
        padding: 0 5px;
    }

    .bbs-info-bars__row.bbs-info-bars__row--has-btn {
        padding-right: 19px;
    }

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

/* ── 959 and below: the 640 grid ── */
@media (max-width: 959px) {
    .bbs-info-bars__list {
        gap: 30px;
        padding: 0 10px;
    }

    .bbs-info-bars__row-title,
    .bbs-info-bars__text {
        max-width: 460px;
    }

    /* The button drops under the copy, 28 px down and in line with it, and
     * the bar keeps 44 px under the button. */
    .bbs-info-bars__row.bbs-info-bars__row--has-btn {
        grid-template-columns: var(--bbs-info-bars-box) minmax(0, 1fr);
        row-gap: 28px;
        padding-right: 25px;
        padding-bottom: 44px;
    }

    .bbs-info-bars__row--has-btn.bbs-info-bars__row--no-icon {
        grid-template-columns: minmax(0, 1fr);
    }

    .bbs-info-bars__row--has-btn .bbs-info-bars__btn {
        grid-column: 2;
        justify-self: start;
    }

    .bbs-info-bars__row--no-icon .bbs-info-bars__btn {
        grid-column: 1;
    }

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

/* ── 639 and below ── */
@media (max-width: 639px) {
    .bbs-info-bars {
        --bbs-info-bars-box: 80px;
        --bbs-info-bars-icon: 64px;
    }

    .bbs-info-bars__title {
        font-size: 24px;
    }

    .bbs-info-bars__row {
        gap: 21px;
        min-height: 0;
        padding: 22px 25px;
    }

    .bbs-info-bars__row-title {
        font-size: 24px;
    }

    .bbs-info-bars__text {
        font-size: 18px;
    }
}

/* ── 479 and below ── */
@media (max-width: 479px) {
    .bbs-info-bars {
        --bbs-info-bars-gutter: 16px;
        --bbs-info-bars-radius: 35px;
        --bbs-info-bars-box: 60px;
        --bbs-info-bars-icon: 48px;
    }

    .bbs-info-bars__title {
        padding-left: 0;
        font-size: 21px;
    }

    .bbs-info-bars__list {
        gap: 20px;
        padding: 0;
    }

    .bbs-info-bars__row {
        gap: 14px;
        padding: 20px 16px;
    }

    .bbs-info-bars__icon-box {
        border-radius: 16px;
    }

    .bbs-info-bars__row-title {
        font-size: 21px;
    }

    .bbs-info-bars__text {
        font-size: 16px;
    }

    /* Centred on the bar, under icon and copy alike. */
    .bbs-info-bars__row.bbs-info-bars__row--has-btn {
        row-gap: 21px;
        padding-right: 16px;
    }

    .bbs-info-bars__row--has-btn .bbs-info-bars__btn {
        grid-column: 1 / -1;
        justify-self: center;
    }
}

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