/**
 * Stat Features Component Styles
 * 
 * Component for displaying statistics with large background numbers
 * and descriptive foreground text, with optional slider functionality.
 */

/* ===== BASE COMPONENT STRUCTURE ===== */

.stat-features {
    position: relative;
    margin: var(--spacing-16) 0;
}

/* When used as a slider, ensure proper container context */
.stat-features.universal-slider {
    position: relative;
    overflow: visible;
    min-height: 400px; /* Ensure container has height for absolutely positioned slides */
}

.stat-features .slider-controls {
    bottom:-5%;
}

.stat-features__text {
    margin-top:0;
}


/* ===== STAT LAYOUT ===== */

.stat-features__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 300px;
    justify-content: center;
    width: 100%;
    overflow: visible; /* Allow background stat to extend beyond */
}

@media (min-width: 768px) {
    .stat-features__content {
        min-height: 400px;
    }
}

@media (min-width: 1024px) {
    .stat-features__content {
        min-height: 500px;
    }
}

/* ===== BACKGROUND STATISTIC ===== */

.stat-features__background-stat {
    position: absolute;
    top: 50%;
    left: 50%;
    
    /* Key requirement: Always 70% of container width */
    width: 70%;
    
    /* Typography - font-size will be set by JavaScript */
    font-weight: 900; /* Black weight - not defined in variables so using literal value */
    font-family: var(--font-primary); /* Lato font */
    color: var(--primary-700);
    
    /* Text shadow: 2px y offset, black 20%, no blur or x offset */
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
    
    /* Center the text */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Initial font size - will be overridden by JavaScript */
    font-size: 100px;
    line-height: 1;
    white-space: nowrap;
    
    /* Prevent interaction */
    pointer-events: none;
    user-select: none;
    
    /* Animation initial state and transitions */
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== FOREGROUND CONTENT ===== */

.stat-features__foreground {
    position: relative;
    z-index: 2;
    max-width: 90%;
    margin: 0 auto;
    padding: var(--spacing-lg);
}

/* Remove all redundant styling - let default H3 and .h3 class handle everything */

/* ===== SLIDER INTEGRATION ===== */

/* Override universal slider scale animation positioning for stat features */
.stat-features.universal-slider[data-animation="scale"] {
    position: relative;
    overflow: visible;
}

/* Fix the positioning context for stat features slides */
.stat-features.universal-slider[data-animation="scale"] .slider-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    overflow: visible !important;
}

/* Active slide positioning */
.stat-features.universal-slider[data-animation="scale"] .slider-item.active {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 2;
}

/* Ensure stat content takes full width and height */
.stat-features .stat-features__content {
    width: 100%;
    min-height: 400px;
}

/* ===== COLOR THEMES ===== */


/* Dark Theme */
.stat-features--dark {
    background-color: var(--color-gray-900);
}

/* Light Theme */
.stat-features--light {
    --stat-background-opacity: 0.12;
    background-color: var(--color-gray-50);
}

/* ===== SIMPLE SCALE ANIMATION ===== */

/* Final visible state with radial gradient animation */
.stat-features__background-stat.animate {
    opacity: 0.6;
    transform: translate(-50%, -45%) scale(1);
    background: radial-gradient(var(--secondary-500), var(--primary-700),var(--secondary-500), var(--primary-700));
    background-size: 600% 600%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gradientMove 8s linear infinite alternate;
}

@keyframes gradientMove {
    0% {
        background-position: -100% -50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* ===== ACCESSIBILITY & MOTION ===== */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .stat-features__background-stat {
        transition: none;
    }
}

/* High contrast support */
@media (prefers-contrast: high) {
    .stat-features {
        --stat-background-opacity: 0.15;
    }
    
    .stat-features__background-stat {
        opacity: var(--stat-background-opacity);
    }
}

/* Focus styles for accessibility */
.stat-features:focus-within .stat-features__background-stat {
    opacity: 0.056;
}


@media (max-width: 480px) {
    /* Reset the container height */
    .stat-features {
        margin: var(--spacing-8) 0; /* Reduce margin */
    }

    
    .stat-features .stat-features__content {
        min-height: auto; /* Remove fixed height */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-4) 0;
    }
    
    /* Make background stat part of normal flow */
    .stat-features__background-stat {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        line-height: 1 !important;
        margin: 0 0 var(--spacing-4) 0;
        opacity: 1 !important; /* Full opacity */
        order: 1; /* First in flex order */
    }
    
    /* Ensure the stat shows even without animation class */
    .stat-features__background-stat,
    .stat-features__background-stat.animate {
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* Foreground content adjustments */
    .stat-features__foreground {
        order: 2; /* After the stat */
        padding: 0 var(--spacing-4);
        max-width: 100%;
    }
    
    /* Title styling */
    .stat-features__foreground h3,
    .stat-features__foreground .h3 {
        margin: 0 0 var(--spacing-3) 0;
        order: 2;
    }
    
    /* Text styling */
    .stat-features__text {
        font-size: 1rem !important;
        margin: 0;
        order: 3;
    }
    
    /* Remove min-height from slider version too */
    .stat-features.universal-slider {
        min-height: auto;
    }
    
    /* Adjust slider controls position */
    .stat-features .slider-controls {
        position: relative;
        bottom: auto;
        margin-top: var(--spacing-4);
    }
}