/**
 * Numbers - Responsive Styles
 * Mobile e tablet
 */

/* ========================================
   TABLET (max 1024px)
   ======================================== */

@media (max-width: 1024px) {
    .sslp-numbers {
        padding: 4rem 0;
    }
    
    .sslp-numbers__grid--cols-4,
    .sslp-numbers__grid--cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sslp-numbers__grid--cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .sslp-number-item__value {
        font-size: clamp(2rem, 5vw, 3rem);
    }
    
    /* Variant B - hide connector line */
    .sslp-numbers--b .sslp-numbers__grid::before {
        display: none;
    }
    
    /* Variant D - stack vertically */
    .sslp-numbers--d .sslp-number-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    
    .sslp-numbers--d .sslp-number-item:last-child {
        border-bottom: none;
    }
    
    /* Variant E - hide vertical lines */
    .sslp-numbers--e .sslp-number-item::after {
        display: none;
    }
}

/* ========================================
   MOBILE (max 768px)
   ======================================== */

@media (max-width: 768px) {
    .sslp-numbers {
        padding: 3rem 0;
    }
    
    .sslp-numbers .sslp-container {
        padding: 0 1rem;
    }
    
    .sslp-numbers__header {
        margin-bottom: 2.5rem;
    }
    
    .sslp-numbers__title {
        font-size: 1.75rem;
    }
    
    .sslp-numbers__subtitle {
        font-size: 1rem;
    }
    
    .sslp-numbers__grid,
    .sslp-numbers__grid--cols-2,
    .sslp-numbers__grid--cols-3,
    .sslp-numbers__grid--cols-4,
    .sslp-numbers__grid--cols-5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .sslp-number-item {
        padding: 1.5rem 1rem;
        max-width: none;
    }
    
    .sslp-number-item__icon {
        font-size: 2rem;
        margin-bottom: 0.75rem;
    }
    
    .sslp-number-item__value {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    .sslp-number-item__label {
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }
    
    /* Variant A */
    .sslp-numbers--a .sslp-number-item {
        border-radius: 16px;
    }
    
    .sslp-numbers--a .sslp-number-item__icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        margin-bottom: 1rem;
    }
    
    /* Variant B */
    .sslp-numbers--b .sslp-number-item::before {
        width: 24px;
        height: 24px;
        top: -12px;
        font-size: 0.7rem;
    }
    
    /* Variant C */
    .sslp-numbers--c .sslp-number-item {
        padding: 2rem 1rem;
    }
    
    .sslp-numbers--c .sslp-number-item__value {
        font-size: 3rem;
    }
    
    /* Variant D */
    .sslp-numbers--d .sslp-numbers__grid {
        padding: 0.5rem;
        gap: 0;
    }
    
    .sslp-numbers--d .sslp-number-item {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }
    
    .sslp-numbers--d .sslp-number-item__content {
        text-align: center;
    }
    
    .sslp-numbers--d .sslp-number-item__value {
        text-align: center;
        font-size: 2rem;
    }
    
    .sslp-numbers--d .sslp-number-item__label {
        text-align: center;
    }
    
    /* Variant F */
    .sslp-numbers--f .sslp-number-item {
        border-radius: 16px;
        padding: 1.5rem;
    }
    
    .sslp-numbers--f .sslp-number-item__icon {
        font-size: 2rem;
    }
    
    .sslp-numbers--f .sslp-number-item__value {
        font-size: 2rem;
    }
    
    .sslp-numbers--f .sslp-number-item--counted::before {
        font-size: 1rem;
        top: -6px;
        right: -6px;
    }
    
    /* Variant G */
    .sslp-numbers--g .sslp-number-item__icon {
        width: 60px;
        margin-bottom: 1rem;
    }
    
    .sslp-numbers--g .sslp-number-item::after {
        font-size: 0.7rem;
        bottom: 0.75rem;
    }
    
    /* Variant H */
    .sslp-numbers--h .sslp-number-item {
        padding: 1.5rem 1rem;
    }
    
    .sslp-numbers--h .sslp-number-item__value {
        font-size: 2.5rem;
    }
    
    .sslp-numbers--h .sslp-number-item::before {
        width: 24px;
        height: 24px;
        font-size: 0.9rem;
    }
}

/* ========================================
   SMALL MOBILE (max 480px)
   ======================================== */

@media (max-width: 480px) {
    .sslp-numbers {
        padding: 2.5rem 0;
    }
    
    .sslp-numbers__badge {
        font-size: 0.65rem;
        padding: 0.4rem 1rem;
    }
    
    .sslp-numbers__title {
        font-size: 1.5rem;
    }
    
    .sslp-numbers__grid {
        gap: 0.75rem;
    }
    
    .sslp-number-item {
        padding: 1.25rem 0.75rem;
    }
    
    .sslp-number-item__icon {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .sslp-number-item__value {
        font-size: 1.75rem;
    }
    
    .sslp-number-item__label {
        font-size: 0.65rem;
    }
    
    /* Variant C - single column */
    .sslp-numbers--c .sslp-numbers__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .sslp-numbers--c .sslp-number-item__value {
        font-size: 2.5rem;
    }
}

/* ========================================
   REDUCE MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .sslp-number-item,
    .sslp-number-item__icon,
    .sslp-counter {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }
    
    .sslp-number-item--visible {
        opacity: 1;
        transform: none;
    }
}