/* ─────────────────────────────────────────────────────────────────────
   bdc_stat_showcase — quantified-claim showcase (grid + single modes).

   Two visual variants:
   - grid    : 2–6 stats in a horizontal band. Compact, editorial tone.
   - single  : one large hero card. Used when featuring a single
               headline metric (e.g. clinical outcome).
   ───────────────────────────────────────────────────────────────────── */

.bdc-stat-showcase {
    --bdc-stat-radius: 14px;
    --bdc-stat-gap: 20px;
    --bdc-stat-card-bg: var(--bdc-ink-7, #f6f6f4);
    display: grid;
    gap: var(--bdc-stat-gap);
}

/* ─── Grid variant ─── */
.bdc-stat-showcase--grid {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .bdc-stat-showcase--grid-2,
    .bdc-stat-showcase--grid-3,
    .bdc-stat-showcase--grid-4,
    .bdc-stat-showcase--grid-5,
    .bdc-stat-showcase--grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .bdc-stat-showcase--grid-3 { grid-template-columns: repeat(3, 1fr); }
    .bdc-stat-showcase--grid-4 { grid-template-columns: repeat(4, 1fr); }
    .bdc-stat-showcase--grid-5,
    .bdc-stat-showcase--grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
    .bdc-stat-showcase--grid-5 { grid-template-columns: repeat(5, 1fr); }
    .bdc-stat-showcase--grid-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ─── Single variant — one huge stat ─── */
.bdc-stat-showcase--single {
    max-width: 640px;
    margin: 0 auto;
    grid-template-columns: 1fr;
}
.bdc-stat-showcase--single .bdc-stat-card {
    padding: 40px 32px;
    text-align: center;
}
.bdc-stat-showcase--single .bdc-stat-card__number {
    font-size: clamp(56px, 8vw, 96px);
}
.bdc-stat-showcase--single .bdc-stat-card__caption {
    font-size: clamp(15px, 1.6vw, 20px);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── Card ─── */
.bdc-stat-card {
    position: relative;
    padding: 24px 20px;
    background: var(--bdc-stat-card-bg);
    border-radius: var(--bdc-stat-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.bdc-stat-card:hover,
.bdc-stat-card:focus-within {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.bdc-stat-card__icon {
    font-size: 24px;
    line-height: 1;
    color: var(--bdc-sage, #3d5844);
    margin-bottom: 4px;
    opacity: 0.85;
}

.bdc-stat-card__value {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    color: var(--bdc-ink, #1a1a1a);
    font-family: Newsreader, Georgia, serif;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1;
}

.bdc-stat-card__number {
    font-size: clamp(38px, 5vw, 56px);
}
.bdc-stat-card__prefix,
.bdc-stat-card__suffix {
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 500;
    color: var(--bdc-sage, #3d5844);
}
.bdc-stat-card__prefix {
    margin-right: 4px;
}

.bdc-stat-card__caption {
    font: 400 14px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-2, #4a4a48);
    margin: 4px 0 0;
    max-width: 320px;
}

/* Source citation — quiet by default, prominent on hover */
.bdc-stat-card__source {
    font: 500 11px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bdc-ink-4, #8a8a86);
    text-decoration: none;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}
.bdc-stat-card:hover .bdc-stat-card__source,
.bdc-stat-card:focus-within .bdc-stat-card__source {
    opacity: 1;
    pointer-events: auto;
}
a.bdc-stat-card__source:hover,
a.bdc-stat-card__source:focus {
    color: var(--bdc-sage, #3d5844);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Assistive-tech users always get the source visible for the source
   link to be actually reachable via keyboard — the opacity trick above
   only hides visually, not from screen readers. But keep the link
   focusable so keyboard users trigger the hover state. */
.bdc-stat-card:focus-within .bdc-stat-card__source {
    outline: none; /* handled by inner focus ring */
}

/* ─── Empty state ─── */
.bdc-stat-showcase__empty {
    grid-column: 1 / -1;
    padding: 32px 24px;
    background: var(--bdc-ink-7, #f6f6f4);
    border-radius: var(--bdc-stat-radius);
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}
.bdc-stat-showcase__empty-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 8px;
    opacity: 0.7;
}
.bdc-stat-showcase__empty-heading {
    font: 600 20px/1.2 Newsreader, Georgia, serif;
    color: var(--bdc-ink, #1a1a1a);
    margin: 0 0 6px;
}
.bdc-stat-showcase__empty-text {
    font: 400 14px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-2, #4a4a48);
    margin: 0;
}