/**
 * Hello Middleton - Community Stats Mini Component
 * Compact stats display showing community metrics
 *
 * @requires tokens.css
 * @since 2.1.4
 */

/* ==========================================================================
   COMMUNITY STATS MINI
   ========================================================================== */

.hm-stats-mini {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--hm-bg-subtle);
    border-radius: var(--radius-lg);
    border: 1px solid var(--hm-border);
    max-width: 1600px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.hm-stat-mini {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--hm-text-secondary);
}

.hm-stat-mini strong {
    font-weight: 700;
    color: var(--hm-text);
}

/* ==========================================================================
   RESPONSIVE - Tablet (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
    .hm-stats-mini {
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .hm-stat-mini {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   RESPONSIVE - Mobile (max-width: 480px)
   Note: Stats mini is hidden on mobile for cleaner app experience
   ========================================================================== */

@media (max-width: 480px) {
    .hm-stats-mini {
        padding: var(--space-2);
        gap: var(--space-2);
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   ACCESSIBILITY - HIGH CONTRAST
   ========================================================================== */

@media (prefers-contrast: high) {
    .hm-stats-mini {
        border-width: 2px;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .hm-stats-mini {
        border: 1px solid #ccc;
        box-shadow: none;
    }
}