/**
 * Hero block.
 *
 * Values mirror the Tilda original (bebestschool.es/en, record rec601161390):
 * 1200 px grid, 62/42/23/20 px type in ApercuPro, #ff5c00 brand orange, and the
 * layout flip at 960 px where the photo drops below the text.
 */

.bbs-hero {
    --bbs-hero-orange: #ff5c00;
    --bbs-hero-purple: #a40acf;
    --bbs-hero-text: #ffffff;

    /* Orange on the photo; below 960 px the button sits on the orange
       background instead, so it switches to the brand purple. */
    --bbs-hero-btn-bg: var(--bbs-hero-orange);
    --bbs-hero-btn-bg-hover: #e35100;
    --bbs-hero-font: 'ApercuPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    /* Card width — 110% of Tilda's 1200 px grid — plus the side gutter. */
    --bbs-hero-container: 1320px;
    --bbs-hero-gutter: 24px;
    /* Matches the corner baked into the original card image as it scales. */
    --bbs-hero-radius: clamp(12px, 3.8vw, 50px);

    /* Overridden inline by render.php from the "Text overlay" field. */
    --bbs-hero-overlay: 0;
    --bbs-hero-focus: center;
    /* What the breadcrumb row takes: its line plus the gap under it. Zero
     * unless the row is there. */
    --bbs-hero-crumbs: 0px;

    position: relative;
    padding: max(0px, calc(80px - var(--bbs-hero-crumbs))) 0 61px;
    background-color: var(--bbs-hero-orange);
    background-image: url('images/hero-bg.png');
    background-image: image-set(
        url('images/hero-bg.webp') type('image/webp'),
        url('images/hero-bg.png') type('image/png')
    );
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--bbs-hero-text);
    font-family: var(--bbs-hero-font);
}

/* Don't lean on the theme's reset — the block ships its own box model. */
.bbs-hero *,
.bbs-hero *::before,
.bbs-hero *::after {
    box-sizing: border-box;
}

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

/* ── Breadcrumbs ──
 * On the band above the card, lined up with its left edge. The row takes its
 * own height out of the band's top padding instead of adding to it, so the
 * card stays where the original puts it. The gap under it is padding, which
 * no neighbouring margin can swallow. */
.bbs-hero--breadcrumbs {
    --bbs-hero-crumbs: 42px;
}

.bbs-hero__breadcrumbs {
    margin: 0;
    padding: 0 0 16px;
    font-size: 17px;
    /* In pixels, so the row's height is the one the variable above promises. */
    line-height: 26px;
    font-weight: 300;
}

/* Media and content share one grid cell, so the row is as tall as the taller of
   the two — the photo keeps its ratio, long copy pushes the card open. */
.bbs-hero__card {
    display: grid;
    border-radius: var(--bbs-hero-radius);
    background: rgba(255, 255, 255, 0.12);
}

.bbs-hero__media {
    position: relative;
    grid-area: 1 / 1;
    overflow: hidden;
    border-radius: var(--bbs-hero-radius);
    background: rgba(255, 255, 255, 0.12);
}

.bbs-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1342 / 634;
    object-fit: cover;
    object-position: var(--bbs-hero-focus) center;
}

/* Off by default — the original relies on the bright wall in the photo. Raise
   the "Text overlay" field when a darker picture is used. */
.bbs-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(45, 45, 45, var(--bbs-hero-overlay)) 0%,
        rgba(45, 45, 45, calc(var(--bbs-hero-overlay) * 0.8)) 34%,
        rgba(45, 45, 45, 0) 68%
    );
}

.bbs-hero__content {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 81 px at the 1320 px design width, proportional below it. */
    padding: 6.1%;
}

/* ── Type ── */
.bbs-hero__eyebrow {
    margin: 0 0 53px;
    font-size: 23px;
    line-height: 1.55;
    font-weight: 400;
}

/* The home page sets its eyebrow bold by wrapping it in strong, the contact
   page leaves it plain — same as the original. */
.bbs-hero__eyebrow strong {
    font-weight: 700;
}

.bbs-hero__title {
    margin: 0 0 39px;
    max-width: 647px;
    font-size: 62px;
    line-height: 1.25;
    font-weight: 700;
    color: var(--bbs-hero-text);
}

/* Wrap a word in span to give it the accent colour. */
.bbs-hero__title span {
    color: var(--bbs-hero-orange);
}

.bbs-hero__subtitle {
    margin: 0 0 36px;
    max-width: 1012px;
    font-size: 42px;
    line-height: 1.55;
    font-weight: 400;
}

.bbs-hero__content > :last-child {
    margin-bottom: 0;
}

/* An icon link standing in for the button. */
.bbs-hero__icon {
    align-self: flex-start;
    display: block;
    line-height: 0;
    transition: transform 0.2s ease-in-out;
}

.bbs-hero__icon:hover,
.bbs-hero__icon:focus-visible {
    transform: scale(1.05);
}

.bbs-hero__icon:focus-visible {
    outline: 2px solid var(--bbs-hero-text);
    outline-offset: 4px;
    border-radius: 50%;
}

.bbs-hero__icon-img {
    display: block;
    width: 121px;
    height: auto;
}

/* With no subhead in between the icon needs the gap the subhead would have
   given it — this is the spacing the contact page uses. */
.bbs-hero__title + .bbs-hero__icon {
    margin-top: 39px;
}

.bbs-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 320px;
    min-height: 60px;
    padding: 8px 24px;
    border-radius: 20px;
    background: var(--bbs-hero-btn-bg);
    color: var(--bbs-hero-text);
    font-size: 20px;
    line-height: 1.55;
    font-weight: 300;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

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

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

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

    .bbs-hero__icon:hover {
        transform: none;
    }
}

/* ── 1199 and below ── */
@media (max-width: 1199px) {
    .bbs-hero {
        padding: max(0px, calc(62px - var(--bbs-hero-crumbs))) 0 62px;
    }

    .bbs-hero__eyebrow {
        margin-bottom: 40px;
    }

    .bbs-hero__title {
        max-width: 560px;
        font-size: 55px;
        margin-bottom: 30px;
    }

    .bbs-hero__subtitle {
        font-size: 36px;
        margin-bottom: 32px;
    }
}

/* ── 959 and below: the photo drops below the text, which sits on the orange ── */
@media (max-width: 959px) {
    .bbs-hero {
        --bbs-hero-btn-bg: var(--bbs-hero-purple);
        --bbs-hero-btn-bg-hover: #8b08b0;

        padding: max(0px, calc(71px - var(--bbs-hero-crumbs))) 0 66px;
    }

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

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

    .bbs-hero__card {
        grid-template-rows: auto auto;
        row-gap: 44px;
        border-radius: 0;
        background: none;
    }

    .bbs-hero__content {
        grid-area: 1 / 1;
        padding: 0;
    }

    .bbs-hero__media {
        grid-area: 2 / 1;
    }

    .bbs-hero__eyebrow {
        margin-bottom: 28px;
    }

    .bbs-hero__title {
        max-width: 488px;
        font-size: 48px;
        margin-bottom: 20px;
    }

    .bbs-hero__subtitle {
        max-width: 570px;
        font-size: 32px;
        margin-bottom: 28px;
    }

    .bbs-hero__btn {
        min-height: 55px;
        font-size: 18px;
    }
}

/* ── 639 and below ── */
@media (max-width: 639px) {
    .bbs-hero {
        padding: max(0px, calc(70px - var(--bbs-hero-crumbs))) 0 62px;
    }

    .bbs-hero__card {
        row-gap: 35px;
    }

    .bbs-hero__title {
        max-width: 442px;
        font-size: 42px;
    }

    .bbs-hero__subtitle {
        max-width: 459px;
        font-size: 26px;
    }

    .bbs-hero__btn {
        min-width: 280px;
    }
}

/* ── 479 and below: everything centres ── */
@media (max-width: 479px) {
    .bbs-hero {
        padding: max(0px, calc(53px - var(--bbs-hero-crumbs))) 0 61px;
    }

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

    /* Centred, like everything else on the band at this width. */
    .bbs-hero__breadcrumbs {
        font-size: 14px;
        line-height: 22px;
    }

    .bbs-hero__breadcrumbs .bbs-breadcrumbs__list {
        justify-content: center;
    }

    .bbs-hero {
        --bbs-hero-gutter: 16px;
    }

    .bbs-hero__card {
        row-gap: 32px;
    }

    .bbs-hero__content {
        align-items: center;
        text-align: center;
    }

    .bbs-hero__eyebrow {
        margin-bottom: 20px;
    }

    .bbs-hero__title {
        max-width: 310px;
        font-size: 30px;
        margin-bottom: 12px;
    }

    .bbs-hero__subtitle {
        max-width: 233px;
        font-size: 20px;
        line-height: 1.25;
        margin-bottom: 20px;
    }

    .bbs-hero__btn {
        width: 100%;
        max-width: 280px;
        min-width: 0;
    }

    .bbs-hero__icon {
        align-self: center;
    }

    .bbs-hero__icon-img {
        width: 90px;
    }
}