/* =============================================================================
   Flip Stat Block
   /blocks/flip-stat/flip-stat.css
   ============================================================================= */

/* ── Custom properties (defaults — overridden per-block via inline style) ── */
:root {
    --flip-stat-accent       : #0057FF;
    --flip-stat-back         : #111111;
    --flip-stat-text-light   : #ffffff;
    --flip-stat-card-radius  : 16px;
    --flip-stat-duration     : 0.55s;
    --flip-stat-ease         : cubic-bezier(0.45, 0.05, 0.55, 0.95);
    --flip-stat-min-height   : 220px;
}

/* ── Outer wrapper ─────────────────────────────────────────────────────────── */
.flip-stat-block {
    display          : block; /* shrink-wraps by default; stack via grid in section */
    width            : 100%;
}

/* ── The 3-D scene — sets up the perspective ───────────────────────────────── */
.flip-stat__scene {
    perspective      : 1000px;
    width            : 100%;
    min-height       : var(--flip-stat-min-height);
    cursor           : pointer;
    -webkit-tap-highlight-color: transparent; /* remove blue flash on iOS */
    outline          : none;
}

/* Focus ring for keyboard users */
.flip-stat__scene:focus-visible {
    outline          : 3px solid var(--flip-stat-accent);
    outline-offset   : 4px;
    border-radius    : var(--flip-stat-card-radius);
}

/* ── The card — the element that physically rotates ────────────────────────── */
.flip-stat__card {
    position         : relative;
    width            : 100%;
    height           : 100%;
    min-height       : var(--flip-stat-min-height);
    transform-style  : preserve-3d;
    transition       : transform var(--flip-stat-duration) var(--flip-stat-ease);
    border-radius    : var(--flip-stat-card-radius);
}

/* Flipped state — toggled by JS */
.flip-stat__scene.is-flipped .flip-stat__card {
    transform        : rotateY(180deg);
}

/* ── Shared face styles ─────────────────────────────────────────────────────── */
.flip-stat__face {
    position         : absolute;
    inset            : 0;
    backface-visibility   : hidden;
    -webkit-backface-visibility: hidden;
    border-radius    : var(--flip-stat-card-radius);
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    justify-content  : center;
    padding          : 2rem 1.5rem;
    text-align       : center;
    overflow         : hidden;
}

.flip-stat__face.flip-stat__face--front {
    justify-content  : space-between;
}

/* ── FRONT face ─────────────────────────────────────────────────────────────── */
.flip-stat__face--front {
    background-color : var(--flip-stat-accent);
    color            : var(--flip-stat-text-light);
}

/* Subtle top-right circle decoration */
.flip-stat__face--front::before {
    /* content          : ''; */
    position         : absolute;
    top              : -40px;
    right            : -40px;
    width            : 130px;
    height           : 130px;
    border-radius    : 50%;
    background       : rgba(255, 255, 255, 0.1);
    pointer-events   : none;
}

/* Number wrapper keeps prefix/number/suffix on one line */
.flip-stat__number-wrap {
    display          : flex;
    align-items      : baseline;
    gap              : 0.1em;
    line-height      : 1;
}

.flip-stat__prefix,
.flip-stat__suffix {
    font-size        : clamp(1.6rem, 5vw, 2.4rem);
    font-weight      : 700;
    opacity          : 0.85;
}

.flip-stat__number {
    font-size        : clamp(3rem, 10vw, 4rem);
    font-weight      : 800;
    letter-spacing   : -0.03em;
    line-height      : 1;
}

.flip-stat__front-label {
    margin           : 0.6em 0 0;
    font-size        : clamp(0.8rem, 2.5vw, 1rem);
    font-weight      : 500;
    text-transform   : uppercase;
    letter-spacing   : 0.1em;
    opacity          : 0.8;
    line-height      : 1;
}

/* "Tap to learn more" hint */
.flip-stat__hint {
    display          : block;
    margin-top       : 1.2em;
    font-size        : 0.72rem;
    text-transform   : uppercase;
    letter-spacing   : 0.12em;
    opacity          : 0.55;
    transition       : opacity 0.2s;
}

.flip-stat__scene:hover .flip-stat__hint,
.flip-stat__scene:focus-visible .flip-stat__hint {
    opacity          : 0.9;
}

/* Hide hint once flipped */
.flip-stat__scene.is-flipped .flip-stat__hint {
    opacity          : 0;
}

/* ── BACK face ──────────────────────────────────────────────────────────────── */
.flip-stat__face--back {
    background-color : var(--flip-stat-back);
    color            : var(--flip-stat-text-light);
    transform        : rotateY(180deg); /* pre-rotated so it starts hidden */
}

/* Subtle bottom-left circle decoration — mirrors front */
.flip-stat__face--back::after {
    content          : '';
    position         : absolute;
    bottom           : -40px;
    left             : -40px;
    width            : 130px;
    height           : 130px;
    border-radius    : 50%;
    background       : rgba(255, 255, 255, 0.06);
    pointer-events   : none;
}

.flip-stat__back-heading {
    margin           : 0 0 0.5em;
    font-size        : clamp(1rem, 3vw, 1rem);
    font-weight      : 700;
    line-height      : 1.2;
}

.flip-stat__back-text {
    margin           : 0 0 1.2em;
    font-size        : clamp(0.82rem, 2.2vw, 0.95rem);
    line-height      : 1.6;
    opacity          : 0.85;
}

/* CTA button */
.flip-stat__cta {
    display          : inline-flex;
    align-items      : center;
    gap              : 0.35em;
    padding          : 0.55em 1.2em;
    border           : 2px solid rgba(255, 255, 255, 0.7);
    border-radius    : 999px;
    color            : #ffffff;
    font-size        : 0.82rem;
    font-weight      : 600;
    text-decoration  : none;
    text-transform   : uppercase;
    letter-spacing   : 0.08em;
    transition       : background 0.2s, border-color 0.2s, color 0.2s;
    position         : relative; /* above the ::after pseudo-element */
    z-index          : 1;
}

.flip-stat__cta:hover,
.flip-stat__cta:focus-visible {
    background-color : rgba(255, 255, 255, 0.15);
    border-color     : #ffffff;
    color            : #ffffff;
    text-decoration  : none;
}

/* ── Mobile — card expands in height to fit back text ───────────────────────── */
@media (max-width: 600px) {
    :root {
        --flip-stat-min-height: 180px;
    }

    .flip-stat__back-text {
        /* clamp keeps text readable without overflowing tiny cards */
        font-size    : clamp(0.8rem, 3.5vw, 0.95rem);
    }

    /* On small screens, scale hint down */
    .flip-stat__hint {
        font-size    : 0.65rem;
    }
}

/* ── Reduced motion — skip the flip animation ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .flip-stat__card {
        transition   : none;
    }
    .flip-stat__face--front {
        transition   : opacity 0.2s;
    }
    .flip-stat__scene.is-flipped .flip-stat__face--front {
        opacity      : 0;
        pointer-events: none;
    }
    .flip-stat__scene.is-flipped .flip-stat__face--back {
        transform    : rotateY(0deg);
    }
}