/**
 * Qing Stats band.
 *
 * Ported 1:1 from the static About page (static/assets/pages.css, the
 * "About: stats" block). Class names are namespaced to .qing-st so nothing
 * collides with Elementor or another plugin, but every measurement, colour
 * and font here is the value the static page uses.
 *
 * The section itself carries no background and no padding: the static
 * markup relies on a single bottom hairline and lets the grid supply the
 * vertical rhythm through padding-block.
 */

.qing-st {
    /* Palette and type lifted from :root in pages.css, with fallbacks so
       the band still renders correctly outside the static page. */
    --qing-st-ink: #2f2b28;
    --qing-st-muted: #7a736c;
    --qing-st-line: #eae5df;
    --qing-st-accent: #b3946f;
    --qing-st-display: Georgia, "Songti SC", "SimSun", serif;

    --qing-st-wrap: 1180px;
    --qing-st-pad: 24px;
    --qing-st-pad-block: 58px;
    --qing-st-cols: 4;
    --qing-st-num-size: 2.6rem;
    --qing-st-label-size: 0.76rem;
    --qing-st-num-gap: 10px;

    box-sizing: border-box;
    border-bottom: 1px solid var(--qing-st-line);
}

.qing-st *,
.qing-st *::before,
.qing-st *::after {
    box-sizing: inherit;
}

/* Equivalent of .wrap. */
.qing-st__inner {
    width: 100%;
    max-width: var(--qing-st-wrap);
    margin-inline: auto;
    padding-inline: var(--qing-st-pad);
}

/* ---- Optional heading ----
   The static section has none, so this only appears if an editor fills the
   fields in. Values follow the theme rather than the stats block. */
.qing-st__head {
    padding-top: var(--qing-st-pad-block);
    text-align: center;
}

.qing-st--headLeft .qing-st__head {
    text-align: left;
}

.qing-st__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--qing-st-accent);
    font-size: 0.76rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.qing-st__title {
    margin: 0;
    color: var(--qing-st-ink);
    font-family: var(--qing-st-display);
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1.3;
}

.qing-st__title em {
    color: var(--qing-st-accent);
    font-style: normal;
}

/* When a heading is present the grid would otherwise sit on its own full
   58px of top padding, doubling the gap. */
.qing-st__head + .qing-st__grid {
    padding-top: 34px;
}

/* ---- Grid ----
   Source: .stats__grid. Four equal columns, no gap: the columns are
   separated by the hairlines on the items, not by empty space. */
.qing-st__grid {
    display: grid;
    grid-template-columns: repeat(var(--qing-st-cols), 1fr);
    padding-block: var(--qing-st-pad-block);
}

/* Source: .stat */
.qing-st__item {
    text-align: center;
    padding-inline: 20px;
}

.qing-st--itemLeft .qing-st__item {
    text-align: left;
}

/* Source: .stat + .stat -- a hairline before every item except the first,
   so none is left hanging at the left edge of the section. */
.qing-st__item + .qing-st__item {
    border-left: 1px solid var(--qing-st-line);
}

.qing-st--noDivider .qing-st__item + .qing-st__item {
    border-left: 0;
}

/* Source: .stat__num */
.qing-st__num {
    display: block;
    font-family: var(--qing-st-display);
    font-size: var(--qing-st-num-size);
    line-height: 1;
    /* Not in the static CSS, but the counter changes digit widths as it
       runs; tabular figures stop the label below from shifting. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Source: .stat__label */
.qing-st__label {
    display: block;
    margin-top: var(--qing-st-num-gap);
    color: var(--qing-st-muted);
    font-size: var(--qing-st-label-size);
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

/* ---- Optional footnote ---- */
.qing-st__foot {
    margin: 0;
    padding-bottom: var(--qing-st-pad-block);
    color: var(--qing-st-muted);
    font-size: 0.85rem;
    text-align: center;
}

.qing-st--headLeft .qing-st__foot {
    text-align: left;
}

/* The grid already paid the bottom padding; with a footnote below it the
   two would stack into 116px. */
.qing-st__grid:has(+ .qing-st__foot) {
    padding-bottom: 30px;
}

.qing-st__foot a {
    color: var(--qing-st-accent);
}

/* ---- Reveal ----
   Source markup carries data-reveal and .is-visible. Scoped behind
   .qing-reveal on <html>, which only the script adds, so with JavaScript
   off nothing is ever hidden. */
.qing-reveal .qing-st [data-qing-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.qing-reveal .qing-st [data-qing-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ---- Responsive ----
   Source: the 1023px block in pages.css. Two columns with a row gap, and
   the odd items drop their left hairline because with two columns the
   third item starts a new row and its divider would float mid-section. */
@media (max-width: 1023px) {

    .qing-st__grid {
        grid-template-columns: 1fr 1fr;
        gap: 34px 0;
        padding-block: 44px;
    }

    .qing-st__item:nth-child(odd) {
        border-left: 0;
    }

    .qing-st__head {
        padding-top: 44px;
    }

    .qing-st__foot {
        padding-bottom: 44px;
    }
}

/* Source: the 640px block drops --pad to 18px. */
@media (max-width: 640px) {

    .qing-st {
        --qing-st-pad: 18px;
    }

    .qing-st__item {
        padding-inline: 12px;
    }
}

/* The count-up and the reveal are both decorative. */
@media (prefers-reduced-motion: reduce) {

    .qing-reveal .qing-st [data-qing-reveal] {
        opacity: 1;
        transform: none;
        transition-duration: 0.01ms;
    }
}