/*
 * The core values with their films (inc/core-values.php, 3 November 2026). Tokens only.
 *
 * The cards keep the Core Values page's own recovered stylesheet (assets/css/legacy/ba1d8105ab.css,
 * built from the old site's page, never edited). This adds the film under each value's words, sets
 * the wide last card out side by side, and lands a value's address (/core-values/#<slug>) clear of
 * the sticky header. The numbers' colours are review-fixes.css's (white on navy, 15.0:1).
 */

/* Words first, then the film, which sits at the foot so the two films in a row line up. */
.bh-values-grid--films .bh-values-card {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-4);
    scroll-margin-top: calc(var(--bh-space-16) + var(--bh-space-12));
}

.bh-values-grid--films .bh-values-card--wide {
    grid-column: 1 / -1;
}

.bh-values-film {
    margin-top: auto;
}

.bh-values-film__frame {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--bh-radius-md);
    background: var(--bh-navy);
}

/* The last value on its own row: its words beside its film rather than a film the full width. */
@media (min-width: 760px) {
    .bh-values-grid--films .bh-values-card--wide {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--bh-space-6);
    }

    .bh-values-grid--films .bh-values-card--wide .bh-values-film {
        margin-top: 0;
    }
}

/*
 * Our Story's line for the value, under its name (Teamwork 11933825 point 5), then the page's longer
 * explanation, a step larger than it and semi-bold, in navy.
 */
.bh-values-card__line {
    margin: 0;
    font-weight: 600;
    font-size: var(--bh-text-md);
    color: var(--bh-navy);
}