/* Block: Numbers */

/* Title padding (block-title.css handles shared styles) */
.block-numbers-title {
    padding: 0 var(--system-spacing-wrapper);
}

.block-numbers-swiper {
    width: 100%;
    padding: 0 var(--system-spacing-wrapper);
}

.block-numbers {
    --_inset: var(--system-spacing-inset-lg);

    @container page-content (max-width: 1600px) {
        --_inset: var(--system-spacing-inset-md);
    }

    /* Remove .block padding — swiper container handles it */
    &.block {
        padding-left: 0;
        padding-right: 0;
    }

    /* When title is present, stack vertically with gap-small */
    &.has-title {
        flex-direction: column;
        gap: clamp(35px, 3.7cqi, 45px);
    }

    /* Equal height slides: stretch all number-items to match tallest */
    & .swiper-wrapper {
        align-items: stretch;
    }

    & .swiper-slide {
        height: auto;
        container-type: inline-size;
        display: flex;
    }

    /* ── Number item internals (all sizes) ── */

    & .number-item {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 100%;
        aspect-ratio: 16 / 10;
        background: var(--system-bg-box);
        border-radius: var(--system-border-radius-md);
        padding: var(--_inset);
        transition: background 0.2s ease-out;

        &:hover {
            background: var(--system-bg-box-hover);
        }

        &:hover .number-reveal {
            max-height: 250px;
        }

        & .number-lead {
            display: flex;
            flex-direction: column;
            gap: var(--system-spacing-gap-sm);
        }

        /* Value is the protagonist: prefix / figure / suffix share a baseline. */
        & .number-value {
            display: flex;
            align-items: baseline;
            gap: 0.15em;
            flex-wrap: wrap;
            line-height: 1;

            & .number-figure {
                font-size: clamp(2.5rem, 22cqi, 4.5rem);
                font-weight: 300;
                letter-spacing: -0.02em;
                line-height: 0.6;
                text-box-trim: trim-start;
                text-box-edge: cap text;
            }

            & .number-prefix,
            & .number-suffix {
                font-size: clamp(1.25rem, 13cqi, 2.2rem);
                font-weight: 400;
                line-height: 0.6;
                color: var(--system-fg-primary);
            }
        }

        & .number-title {
            font-size: var(--system-font-size-body-lg);
            font-weight: 400;
            line-height: 1;
            margin: 0;
            text-box-trim: trim-start;
            text-box-edge: cap text;
            text-wrap: balance;
        }

        & .number-reveal {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }

        & .number-description {
            padding-top: var(--system-spacing-gap-sm);
            color: var(--system-fg-muted);
            text-wrap: balance;
        }

        /* Text-led card (no value): the title becomes the protagonist. */
        &.text-led .number-title {
            font-size: clamp(1.5rem, 12cqi, 2.25rem);
            line-height: 1.1;
            letter-spacing: -0.01em;
        }
    }

    /* ── items-2 desktop (>= 1400px): reset Swiper, flex+gap ── */

    &.items-2 {
        @container page-content (min-width: 1400px) {
            & .block-numbers-swiper {
                overflow: visible;
            }

            & .swiper-wrapper {
                display: flex;
                gap: 30px;
                justify-content: center;
                width: 100%;
            }

            & .swiper-slide {
                flex: 1 1 calc((100% - 30px) / 2);
                max-width: none;
                height: auto;
            }
        }
    }

    /* ── items-3 desktop (>= 1400px): reset Swiper, flex+gap ── */

    &.items-3 {
        @container page-content (min-width: 1400px) {
            & .block-numbers-swiper {
                overflow: visible;
            }

            & .swiper-wrapper {
                display: flex;
                gap: 30px;
                justify-content: center;
                width: 100%;
            }

            & .swiper-slide {
                flex-shrink: 1;
                width: 33%;
                height: auto;
            }
        }
    }

    /* ── items-4 desktop (>= 1400px): reset Swiper, flex+gap ── */

    &.items-4 {
        @container page-content (min-width: 1400px) {
            & .block-numbers-swiper {
                overflow: visible;
            }

            & .swiper-wrapper {
                display: flex;
                gap: 30px;
                width: 100%;
            }

            & .swiper-slide {
                flex-shrink: 1;
                width: 24%;
                height: auto;
            }
        }
    }

    /* ── Display Grid (forced): desktop (>= 1400px) ──
       Column count comes from --block-grid-cols (inline, set by the data
       adapter). .grid-cols-N stays on the block as a state hook for JS. */

    &.display-grid {
        @container page-content (min-width: 1400px) {
            & .block-numbers-swiper {
                overflow: visible;
            }

            & .swiper-wrapper {
                display: grid;
                grid-template-columns: repeat(var(--block-grid-cols, 4), 1fr);
                gap: 30px;
            }

            & .swiper-slide {
                width: 100%;
                max-width: none;
                flex: initial;
                height: auto;
            }
        }

        /* Display Grid + not-slide: grid at all sizes, no Swiper */

        &.not-slide {
            & .block-numbers-swiper {
                overflow: visible;
            }

            & .swiper-wrapper {
                display: grid;
                gap: 15px;
            }

            & .swiper-slide {
                width: 100%;
                max-width: none;
                flex: initial;
                height: auto;
            }

            @container page-content (min-width: 769px) and (max-width: 1399px) {
                & .swiper-wrapper {
                    grid-template-columns: repeat(var(--block-grid-cols, 4), 1fr);
                    gap: 20px;
                }
            }

            @container page-content (min-width: 1400px) {
                & .swiper-wrapper {
                    gap: 30px;
                }
            }

            @container page-content (max-width: 768px) {
                & .swiper-wrapper {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
        }

        &.mobile-full {
            @container page-content (max-width: 768px) {
                & .swiper-wrapper {
                    grid-template-columns: 1fr;
                    gap: 10px;
                }
            }
        }
    }
}