/* ============================================================
   publiek/cijfers.css - de balk met totalen.
   Hoort bij templates/public/delen/_cijfers.html.

   De balk schuift een stukje over de kop heen (margin-top
   negatief). Staat hij op een pagina zonder kop, zet dan
   margin-top op 20px.
   ============================================================ */

.cijferbalk {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 6px 20px;
    margin-top: -52px;
    margin-bottom: 14px;
    padding: 12px clamp(14px, 3vw, 54px);
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    background: linear-gradient(180deg, rgba(16, 20, 60, .94), rgba(9, 12, 38, .96));
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.cijfer {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 44px;
}
.cijfer .icoon { color: #9a6bff; filter: drop-shadow(0 0 8px rgba(139, 61, 255, .55)); }
.cijfer-kroon .icoon { color: var(--goud); filter: drop-shadow(0 0 8px rgba(251, 191, 36, .45)); }
.cijfer-klok .icoon { color: #c4c9f5; filter: none; }

.cijfer b {
    display: block;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.15;
    color: #c9cdfb;
    font-variant-numeric: tabular-nums;
}
.cijfer span {
    display: block;
    font-size: 12.5px;
    color: var(--tekst-zacht);
}

@media (max-width: 520px) {
    .cijferbalk { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 12px 14px; }
    .cijfer { gap: 10px; }
    .cijfer .icoon { width: 26px; height: 26px; }
    .cijfer b { font-size: 18px; }
}