/**
 * Numbers: key figures with an explanation. Several figures in a row by
 * default (2-4), or one big figure with a longer explanation.
 *
 * globalClass: numbers   (the row) and number (each figure)
 *
 * Row variants:
 *   numbers--single   one figure: bigger value, centered, explanation up to
 *                     640px wide (use with one .number)
 *   numbers--left     left aligned figures instead of centered
 *
 * Structure:
 *   .numbers.gb-container [.numbers--single]      GB: no display setting needed
 *     .number.gb-container
 *       p.number-value      the figure, e.g. "250+" or "98 %"
 *       h3.number-label     short label
 *       p.number-text       optional explanation
 *
 * Tuning: --number-value-size (default fluid clamp), --number-value-clr
 *         (accent color), --numbers-gap (40px)
 *
 * Chain animations: the row is the chain, figures animate in order (1…n,
 * fadeInFromDown); contents are not animated separately.
 *
 * Editor: the row's flex layout is repeated on GB's editor layout element.
 */

:root {
    --numbers-gap: 40px;
    --number-value-size: clamp(3rem, 2rem + 3vw, 5rem);
    --number-value-clr: var(--accent-clr);
}

/* Row */
.numbers,
.numbers > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--numbers-gap);
}

.numbers > .block-editor-inner-blocks {
    width: 100%;
}

/* Figure */
.number {
    flex: 1 1 100%;
    min-width: 0;
    text-align: center;
}

.number > * {
    margin: 0;
}

.number-value {
    font-family: var(--title-font);
    font-size: var(--number-value-size);
    font-weight: var(--heading-weight);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--number-value-clr);
}

.number-label {
    margin-top: 12px;
    font-size: var(--h4-size);
}

.number-text {
    margin-top: 8px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* Single big figure */
.numbers--single {
    --number-value-size: clamp(4.5rem, 3rem + 6vw, 9rem);
}

.numbers--single .number-label {
    font-size: var(--h3-size);
}

.numbers--single .number-text {
    max-width: 640px;
    font-size: 1.1rem;
}

/* Left aligned */
.numbers--left {
    justify-content: flex-start;
}

.numbers--left .number {
    text-align: left;
}

.numbers--left .number-text {
    margin-left: 0;
}

@media only screen and (min-width: 768px) {
    .number {
        flex: 1 1 calc((100% - var(--numbers-gap)) / 2);
    }

    .numbers--single .number {
        flex-basis: 100%;
    }
}

@media only screen and (min-width: 990px) {
    .number {
        flex: 1 1 0;
    }

    .numbers--single .number {
        flex-basis: 100%;
    }
}