/*
 * Statistics & CTA block (s108-stat-cta)
 * Studio 108 - Concrete CMS 9.x custom block
 *
 * Every rule is scoped to .s108-stat-cta-wrapper, and type rules are
 * element-qualified (h2. / h3. / p. / hr. / a.).
 *
 * The theme's heading/paragraph rules were still winning on specificity
 * (red H2, blue H3, tiny figures, extra space above the title), so the
 * typography and spacing properties on those elements are marked
 * !important. This is deliberate and limited to this block's own
 * elements - nothing outside .s108-stat-cta-wrapper is affected.
 *
 * Tweak colours/sizes via the custom properties on .s108-stat-cta.
 * Font relies on Montserrat already being loaded by the site theme.
 */

.s108-stat-cta-wrapper .s108-stat-cta {
    /* Colours */
    --s108-bg: #e6e6e6;
    --s108-panel-bg: #ffffff;
    --s108-blue: #0b529a;
    --s108-blue-hover: #08406f;
    --s108-red: #b50b21;
    --s108-heading-color: #4d4d4d;
    --s108-divider: #a9d6cb;
    --s108-font: 'Montserrat', Helvetica, Arial, sans-serif;

    /* Sizes - mobile first, overridden in the media queries below */
    --s108-title-size: 2rem;
    --s108-number-size: 5rem;
    --s108-heading-size: 1.4rem;
    --s108-button-size: 1.2rem;

    background-color: var(--s108-bg);
    padding: 3rem 1rem;
    font-family: var(--s108-font);
    box-sizing: border-box;
}

.s108-stat-cta-wrapper .s108-stat-cta *,
.s108-stat-cta-wrapper .s108-stat-cta *::before,
.s108-stat-cta-wrapper .s108-stat-cta *::after {
    box-sizing: border-box;
}

/* ---------- Panel: tall stadium on mobile, wide pill from 640px ---------- */

.s108-stat-cta-wrapper .s108-stat-cta__panel {
    background-color: var(--s108-panel-bg);
    border-radius: 999px;
    max-width: 340px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 5.5rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* ---------- H2 title ---------- */

.s108-stat-cta-wrapper h2.s108-stat-cta__title {
    font-family: var(--s108-font) !important;
    font-weight: 700 !important;
    font-size: var(--s108-title-size) !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--s108-blue) !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 0.5rem !important;
}

/* ---------- Stats ---------- */

.s108-stat-cta-wrapper .s108-stat-cta__stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    margin-top: 1.5rem;
}

/* No title? Don't leave a gap at the top of the panel. */
.s108-stat-cta-wrapper .s108-stat-cta__stats:first-child {
    margin-top: 0;
}

.s108-stat-cta-wrapper .s108-stat-cta__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 20rem;
}

.s108-stat-cta-wrapper p.s108-stat-cta__number {
    font-family: var(--s108-font) !important;
    font-weight: 700 !important;
    font-size: var(--s108-number-size) !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    color: var(--s108-red) !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.s108-stat-cta-wrapper hr.s108-stat-cta__divider {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--s108-divider) !important;
    background: none !important;
    margin: 0.6rem 0 0.5rem !important;
    padding: 0 !important;
    clear: none !important;
}

.s108-stat-cta-wrapper h3.s108-stat-cta__heading {
    font-family: var(--s108-font) !important;
    font-weight: 700 !important;
    font-size: var(--s108-heading-size) !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--s108-heading-color) !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- CTA button ---------- */

.s108-stat-cta-wrapper .s108-stat-cta__cta {
    text-align: center;
    margin-top: 2rem;
}

.s108-stat-cta-wrapper a.s108-stat-cta__button {
    display: inline-block !important;
    font-family: var(--s108-font) !important;
    font-weight: 500 !important;
    font-size: var(--s108-button-size) !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
    background-color: var(--s108-blue) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 1.1rem 2rem !important;
    margin: 0 !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

.s108-stat-cta-wrapper a.s108-stat-cta__button:hover,
.s108-stat-cta-wrapper a.s108-stat-cta__button:focus {
    background-color: var(--s108-blue-hover) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ---------- Medium up (Foundation medium: 640px) ---------- */
@media (min-width: 640px) {
    .s108-stat-cta-wrapper .s108-stat-cta {
        --s108-title-size: 2.5rem;
        --s108-number-size: 5rem;
    }

    .s108-stat-cta-wrapper h2.s108-stat-cta__title {
        padding: 0 !important;
    }

    .s108-stat-cta-wrapper .s108-stat-cta__panel {
        max-width: 900px;
        padding: 2.5rem 3rem 3.5rem;
    }

    .s108-stat-cta-wrapper .s108-stat-cta__stats {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 2.5rem;
        margin-top: 1rem;
    }

    .s108-stat-cta-wrapper .s108-stat-cta__stat {
        flex: 0 1 20rem;
    }
}

/* ---------- Large up (Foundation large: 1024px) ---------- */
@media (min-width: 1024px) {
    .s108-stat-cta-wrapper .s108-stat-cta {
        --s108-number-size: 6rem;
    }
}