/* GSAP refresh temporarily restores scroll positions; native smoothing must
   not make those measurements race an unfinished scroll. */
html.bb-text-reveal-page { scroll-behavior: auto !important; }

.bb-statement {
    padding-block: var(--bb-space-section-mobile);
    background-color: var(--bb-color-paper);
}

.bb-statement__container {
    display: grid;
    gap: 20px;
    width: min(100% - 2 * var(--bb-gutter-mobile), var(--bb-content-width));
    margin-inline: auto;
}

.bb-statement__label {
    margin: 0;
    padding: 0;
    color: var(--bb-color-blue);
    font: 600 14px / 1.05 var(--bb-font-mono);
    text-transform: uppercase;
    letter-spacing: 0;
}

.bb-statement__copy {
    min-width: 0;
    font: 500 20px / 1.4 var(--bb-font-body-medium);
    letter-spacing: -0.25px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bb-statement__copy :where(p, li, blockquote) {
    font: inherit;
    letter-spacing: inherit;
}

.bb-statement__copy p { margin: 0 0 1em; }
.bb-statement__copy > div > :last-child { margin-bottom: 0; }
.bb-statement__closing { margin-top: 1.5em; }
.bb-statement__signature { margin-top: 32px; }
.bb-statement__signature,
.bb-statement--quote .bb-statement__closing {
    font: 400 20px / 1.3 var(--bb-font-body);
}
.bb-statement--quote .bb-statement__signature { margin-top: 8px; }
.bb-statement__copy > :first-child { margin-top: 0; }

.bb-statement--divided .bb-statement__container {
    padding-bottom: var(--bb-space-section-mobile);
    border-bottom: 1px solid var(--bb-color-divider);
}
.bb-statement--divided { padding-bottom: 0; }

/* This class can also be applied to an existing rich-text container. */
.bb-text-reveal {
    --bb-reveal-muted: #c8c8c8;
    --bb-reveal-active: var(--bb-color-pink);
    color: var(--bb-reveal-active);
    /* Keep the semantic text and decorative character layer identical. */
    font-kerning: none;
    font-variant-ligatures: none;
}

.bb-text-reveal :where(p, li, blockquote, strong, em, span) { color: inherit; }
.bb-text-reveal a { text-decoration: underline; text-underline-offset: 0.15em; }
.bb-text-reveal a:focus-visible { outline: 2px solid var(--bb-color-blue); outline-offset: 4px; }

.bb-text-accent {
    --bb-reveal-active: var(--bb-color-blue);
    color: var(--bb-reveal-active);
}

.bb-text-gradient {
    --bb-text-gradient: linear-gradient(90deg, var(--bb-color-pink) 0%, var(--bb-color-blue) 38%, var(--bb-color-blue) 100%);
    color: var(--bb-color-blue);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .bb-text-gradient :where(p),
    span.bb-text-gradient {
        width: fit-content;
        max-width: 100%;
        background: var(--bb-text-gradient);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

/* Optional small attribution line, usable in any of the WYSIWYG fields. */
.bb-text-caption,
.bb-statement--quote .bb-statement__signature {
    display: block;
    font: 600 12px / 1.05 var(--bb-font-mono);
    text-transform: uppercase;
    letter-spacing: 0;
}

.bb-text-reveal__block { position: relative; }
.bb-text-gradient p.bb-text-reveal__block { width: auto; }
.bb-text-reveal__block,
.bb-text-reveal__block :where(*) {
    color: var(--bb-reveal-muted);
    -webkit-text-fill-color: currentColor;
    background-image: none;
}

.bb-text-reveal__layer {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    user-select: none;
}
.bb-text-reveal__layer,
.bb-text-reveal__layer :where(*) {
    color: var(--bb-reveal-active);
}
.bb-text-reveal__char { position: absolute; white-space: pre; opacity: 0; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .bb-text-reveal__char--gradient {
        background-image: var(--bb-text-gradient);
        background-size: var(--bb-gradient-width) 100%;
        background-position: var(--bb-gradient-offset) 0;
        background-repeat: no-repeat;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

/* Keyboard focus always exposes the original link at full contrast. */
.bb-text-reveal__block:focus-within,
.bb-text-reveal__block:focus-within :where(*) {
    color: var(--bb-color-blue);
    -webkit-text-fill-color: currentColor;
}
.bb-text-reveal__block:focus-within > .bb-text-reveal__layer { visibility: hidden; }

.bb-text-reveal-loading .bb-text-reveal,
.bb-text-reveal-loading .bb-text-reveal :where(*) {
    color: var(--bb-reveal-muted);
    -webkit-text-fill-color: currentColor;
    background-image: none;
}

@media (min-width: 992px) {
    .bb-statement { padding-block: var(--bb-space-section); }
    .bb-statement__container { width: min(100% - 160px, var(--bb-content-width)); }
    .bb-statement--labelled .bb-statement__container { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
    .bb-statement__label { padding-top: 5px; }
    .bb-statement__copy { font-size: 28px; }
    .bb-statement--divided .bb-statement__container { padding-bottom: var(--bb-space-section); }
    .bb-statement--divided { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
    .bb-text-reveal,
    .bb-text-reveal :where(*) {
        color: var(--bb-color-ink);
        -webkit-text-fill-color: currentColor;
        background-image: none;
    }
    .bb-text-reveal__layer { display: none; }
}

@media print {
    .bb-text-reveal,
    .bb-text-reveal :where(*) { color: #000; -webkit-text-fill-color: currentColor; background-image: none; }
    .bb-text-reveal__layer { display: none; }
}