/**
 * Statistics Block Styles
 * These styles are loaded conditionally when the Statistics block is used
 */

.platform-band {
    /* Row gap for desktop - grid system handles column gap */
    row-gap: var(--space-3xl);
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Layout: Content Left, Image Right (Default) */

/* Grid system default order: content first, visual second */

/* No CSS needed - template order handles this */

/* Layout: Image Left, Content Right */

/* Swap order using CSS order property */
.platform-band.layout-image-left .platform-content {
    order: 2;

    /* Content appears after visual */
}

.platform-band.layout-image-left .platform-visual {
    order: 1;

    /* Visual appears before content */
}

.platform-band::before {
    max-width: 100%;
    overflow: hidden;
}

/* Position decorative element based on layout */
.platform-band.layout-content-left::before {
    right: -20%;
}

.platform-band.layout-image-left::before {
    left: -20%;
}

/* Create wrapper for shadow preservation */
.platform-content-wrapper {
    position: relative;
    z-index: var(--z-above);

    /* Shadows remain visible */
}

.platform-content {
    position: relative;
    z-index: var(--z-above);
}

.platform-label {
    display: inline-block;
    color: var(--color-text-light);
    border-radius: var(--radius-card);
    margin-bottom: var(--space-md);
}

.platform-header {
    padding-bottom: var(--space-lg);
}

.platform-header span.h5 {
    margin-bottom: var(--space-md);
    display: block;
    color: var(--color-primary);
}

/* Dark bg text colors handled globally by theme dark-bg-adaptation.css */

.platform-statistics {
    /* Grid system (.row class) provides layout - no custom grid needed */
    margin-bottom: var(--space-lg);
}

.platform-band .statistic-item {
    /* flex-col utility class provides: display: flex; flex-direction: column */
    text-align: left;
    opacity: 0;
    transform: translateY(var(--space-lg));
    line-height: var(--line-height-normal);
}

.platform-band .statistic-item.visible {
    animation: fade-in-up 0.6s ease forwards;
}

.platform-band .statistic-item:nth-child(1).visible {
    animation-delay: 0.2s;
}

.platform-band .statistic-item:nth-child(2).visible {
    animation-delay: 0.3s;
}

.platform-band .statistic-item:nth-child(3).visible {
    animation-delay: 0.4s;
}

@keyframes fade-in-up {
    /* End state only - browser interpolates from element's initial state */
    to {
        opacity: 1;

        /* Fade to fully visible */
        transform: translateY(0);

        /* Move to final position */
    }
}

@keyframes count-up {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.platform-band .statistic-metric {
    display: block;
    margin-bottom: var(--space-xs) !important;
    font-variant-numeric: tabular-nums;

    /* Monospace digits prevent layout shifts during count-up */
    min-width: 5ch;

    /* Reserve space for up to 5-digit numbers with suffixes */
    text-align: left;
}

section.has-text-color .platform-statistics .statistic-metric {
    color: inherit;
}

.platform-band .statistic-metric.counting {
    animation: count-up 0.8s ease-out;
}

.platform-band .statistic-text {
    text-wrap: balance;
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
    display: block;
    max-width: 100%;
}

.platform-cta {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Button styles already defined globally - removed duplicates */

/* Additional button variant - merged with .btn-outline definition above */

/* Center container for buttons - uses utility class from line 372 */

.platform-visual {
    position: relative;

    /* flex-col utility class provides: display: flex; flex-direction: column */
    justify-content: center;
    min-height: var(--dimension-hero-height);
    grid-column-end: -1;

    /* Extend to right edge of grid */
}

.platform-visual img {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
}

/* Platform badge positioning */
.platform-badge-position {
    top: var(--space-lg);
    right: var(--space-lg);
    left: auto;

    /* Override default left positioning */
}

.platform-visual-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background: var(--gradient-2);
    border-radius: var(--radius-card);
    padding: var(--space-xl);
    width: 100%;
}

.platform-visual-text {
    font-size: var(--font-small);
    font-style: italic;
    margin: 0;
    text-align: center;
}

@media (width >= 991px) {
    .platform-band .statistic-item {
        max-width: 130px;
    }
}

/* Tablet and Mobile: Content first on all small screens (1024px and below) */
@media (width <=1024px) {
    /* Force content first, regardless of layout setting */
    .platform-band .platform-content,
    .platform-band.layout-content-left .platform-content,
    .platform-band.layout-image-left .platform-content {
        order: 1;
    }

    .platform-band .platform-visual,
    .platform-band.layout-content-left .platform-visual,
    .platform-band.layout-image-left .platform-visual {
        order: 2;
    }
}

/* Tablet: Constrain visual sizing (768px - 1024px) */
@media (width >=768px) and (width <=1024px) {
    .platform-visual {
        min-height: 350px;
    }

    .platform-visual img {
        max-width: 600px;
        margin: 0 auto;
        display: block;
    }
}

/* Mobile Responsive (767px and below) */
@media (width <= 767px) {
    .platform-band {
        /* REMOVED: grid-template-columns: 1fr !important - grid system (.col-sm-12) handles stacking */

        /* REMOVED: gap: var(--space-2xl) - grid system handles gap reset on mobile */
        padding: var(--space-xl) var(--space-md);
        max-width: 100%;
        overflow: hidden;
    }

    /* Fix platform content overflow */
    .platform-content,
    .platform-header {
        max-width: 100%;
    }

    /* Fix superscript position on mobile */
    .platform-header sup {
        font-size: 0.6em;
        top: -0.4em;
    }

    /* Preserve shadows on mobile */
    .platform-card,
    .platform-highlight {
        box-shadow: var(--shadow-default);
    }

    /* Prevent overflow from decorative elements */
    .platform-section {
        position: relative;
        overflow: hidden;
    }

    .platform-section::before,
    .platform-section::after,
    .decorative-element {
        max-width: 100vw;
        overflow: hidden;
    }

    /* REMOVED: platform-statistics and statistic-item rules - grid system (.col-sm-12) handles mobile layout */

    .platform-cta {
        flex-direction: column;
    }

    .platform-visual {
        min-height: 300px;
        padding: var(--space-lg);
    }

    /* Touch target compliance - ensure platform buttons meet 44x44 minimum */

    /* Only if absolutely necessary */
    .platform-band::before {
        display: none;

        /* Nuclear option */
    }
}

/* Extra small screens (480px and below) */
@media (width <=480px) {
    /* Platform section specific fixes for 320px */
    .platform-band {
        padding: var(--space-lg) var(--space-sm);
    }

    .platform-content,
    .platform-header {
        max-width: 100%;
        overflow-wrap: break-word;
    }

    /* Ensure platform statistics don't overflow */
    .platform-statistics {
        flex-wrap: wrap;
    }
}