/* =============================================================================
   dcCMS — Achilles :: Liczniki (statystyki z animacją count-up)
   Wymaga tokens.css (kolory, fonty, radiusy, cienie).
   ============================================================================= */

.dc-counters {
    max-width: var(--container-max);
    margin-inline: auto;
}

.dc-counters__head { text-align: center; margin-bottom: 40px; }
.dc-counters__eyebrow {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--teal);
}
.dc-counters__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-tight);
    color: var(--navy);
}
.dc-counters__subtitle {
    margin: 16px auto 0;
    max-width: 640px;
    font-family: var(--font-body);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
    color: var(--color-text-secondary);
}

.dc-counters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-8);
    text-align: center;
}

.dc-counters__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
}
a.dc-counters__item { transition: transform var(--dur-fast) var(--ease-out); }
a.dc-counters__item:hover { transform: translateY(-4px); }

.dc-counters__icon {
    font-size: 2rem;
    color: var(--teal);
    margin-bottom: var(--space-2);
}

.dc-counters__value {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: var(--fw-bold);
    color: var(--color-surface);
    line-height: var(--lh-tight);
}
.dc-counters__affix {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: var(--fw-semibold);
    color: var(--color-surface);
}

.dc-counters__label {
    font-family: var(--font-body);
	font-weight: var(--fw-light);
    font-size: var(--fs-body);
    color: var(--white-85);
}

@media (max-width: 575px) {
    .dc-counters__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
    .dc-counters__value { font-size: var(--fs-h2); }
}