////
///
/// Stat Site Styles
/// ===========================================================================
///
/// Classes the scapepress sites use next to the native `stat` module,
/// moved here from the removed `32-utilities/_scapepress-parity.scss` shim.
/// Forwarded from `31-modules/_index.scss` ahead of every module rather than
/// from this module's index, so at equal specificity the native rules win.
///
/// 25 blocks, each still marked with the site and file it came from.
/// Values read `--ss-*` tokens in place of the sites' own Sass and
/// custom-property variables.
///
/// @group Modules.Stat
/// @author Scape Press
/// @link https://scape.style
/// @since 0.6.0
/// @access public
///
////

@use "sass:map";
@use "../../01-core/external" as *;
@use "../../23-layout/breakpoints";

// ============================================================================
// Output
// ============================================================================

@layer ss.components {
    // -- stats-grid  (from site-scape_ventures/src/static/scss/sections/_stats.scss) --
    .ss-c-stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ss-spacing-8);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    // -- stat-item  (from site-scape_ventures/src/static/scss/sections/_stats.scss) --
    .ss-c-stat-item {
        text-align: center;
    }

    // -- stat-number  (from site-scape_ventures/src/static/scss/sections/_stats.scss) --
    .ss-c-stat-number {
        display: block;
        font-family: var(--ss-font-family-display);
        font-size: var(--ss-font-size-5xl);
        font-weight: var(--ss-font-weight-bold);
        color: var(--ss-color-white);
        margin-bottom: var(--ss-spacing-2);

        @media (min-width: map.get(breakpoints.$ss-breakpoints, "lg")) {
            font-size: var(--ss-font-size-6xl);
        }
    }

    // -- stat-label  (from site-scape_ventures/src/static/scss/sections/_stats.scss) --
    .ss-c-stat-label {
        font-size: var(--ss-font-size-sm);
        color: var(--ss-color-gray-300);
    }

    // -- stats-strip  (from site-scape_foundation/src/static/scss/sections/_home.scss) --
    .ss-c-stats-strip {
        background: var(--ss-color-black);
        color: var(--ss-color-white);
        padding: q(48) q(16);
        margin: 0;

        &__inner {
            max-width: q(1200);
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: q(32);
            text-align: center;

            @media (max-width: q(700)) {
                grid-template-columns: repeat(2, 1fr);
                gap: q(40);
            }
        }

        &__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: q(8);
        }

        &__value {
            font-family: var(--ss-font-family-display);
            font-size: clamp(q(40), 6vw, q(64));
            font-weight: 700;
            line-height: 1;
            color: var(--ss-color-white);
        }

        &__label {
            font-family: var(--ss-font-family-base);
            font-size: var(--ss-font-size-sm);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: color-mix(in srgb, var(--ss-color-white) 70%, transparent);
        }
    }

    // -- stats-card  (from site-geoid_org/src/static/scss/components/_card.scss) --
    .ss-c-stats-card {
      text-align: center;
      padding: var(--ss-spacing-12);

      &__value {
        font-size: clamp(q(24), 5vw, q(40));
        font-weight: 700;
        color: var(--ss-color-accent);
        margin-bottom: var(--ss-spacing-2);
      }

      &__label {
        font-size: q(14);
        color: var(--ss-color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
    }

    // -- stats__eyebrow  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stats__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.25em;
        font-family: unset;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ss-color-accent);
        font-size: q(12);
        margin-bottom: q(8);
    }

    // -- stats__eyebrow-dot  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stats__eyebrow-dot {
        width: 0.5em;
        height: 0.5em;
        background: var(--ss-color-accent);
        border-radius: 50%;
        flex-shrink: 0;
    }

    // -- stats__title  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stats__title {
        margin-bottom: q(32);
    }

    // -- stats__grid  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stats__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: q(16);
        width: 100%;

        @media (min-width: q(768)) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    // -- stat-item__number  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stat-item__number {
        font-family: unset;
        font-size: clamp(q(32), calc(q(24) + 2vw), q(64));
        font-weight: 700;
        line-height: 1;
        color: var(--ss-color-accent);
        letter-spacing: -0.02em;
    }

    // -- stat-item__label  (from site-inthecity_ai/src/static/scss/blocks/_stats.scss) --
    .ss-c-stat-item__label {
        font-family: unset;
        font-size: q(12);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ss-color-white);
        margin-top: q(8);
    }

    // -- stat--inline  (from site-kockums_foundation/src/static/scss/components/_bibliography.scss) --
    .ss-c-stat--inline {
      display: flex;
      align-items: baseline;
      gap: var(--ss-spacing-2);
      margin-top: var(--ss-spacing-4);


      .ss-c-stat__label {
        font-size: var(--ss-font-size-sm);
      }
    }

    // -- stat-card  (from site-kockums_foundation/src/static/scss/components/_cards.scss) --
    .ss-c-stat-card {
      padding: var(--ss-spacing-6);
      text-align: center;

      &__value {
        font-size: var(--ss-font-size-5xl);
        font-weight: var(--ss-font-weight-bold);
        color: var(--ss-color-text);
        line-height: 1;
        margin-bottom: var(--ss-spacing-2);
      }

      &__label {
        font-size: var(--ss-font-size-sm);
        font-weight: var(--ss-font-weight-medium);
        color: var(--ss-color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
    }

    // -- stats-section  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stats-section {
        padding: var(--ss-spacing-12) 0;
        background: var(--ss-color-gray-900);
    }

    // -- stats-container  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stats-container {
        max-width: unset;
        margin: 0 auto;
        padding: 0 var(--ss-spacing-6);
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: unset;

        @media (min-width: q(768)) {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    // -- stat-value  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stat-value {
        display: block;
        font-size: var(--ss-font-size-4xl);
        font-weight: 600;
        color: var(--ss-color-white);
        letter-spacing: -0.02em;
        margin-bottom: unset;
    }

    // -- stat-detail  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stat-detail {
        display: block;
        font-size: var(--ss-font-size-xs);
        color: var(--ss-color-gray-500);
    }

    // -- stats-mini  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stats-mini {
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    // -- stat-mini-item  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stat-mini-item {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    // -- stat-mini-value  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stat-mini-value {
        font-size: var(--ss-font-size-xl);
        font-weight: 600;
        color: var(--ss-color-gray-900);
    }

    // -- stat-mini-label  (from site-phytosync_com/src/static/scss/index.scss) --
    .ss-c-stat-mini-label {
        font-size: var(--ss-font-size-xs);
        color: var(--ss-color-gray-500);
    }

    // -- metric  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-metric {
        text-align: center;

        &-value {
            display: block;
            font-size: var(--ss-font-size-4xl);
            font-weight: var(--ss-font-weight-bold);
            color: var(--ss-color-gray-900);

            @media (min-width: map.get(breakpoints.$ss-breakpoints, "md")) {
                font-size: var(--ss-font-size-5xl);
            }
        }

        &-label {
            font-size: var(--ss-font-size-sm);
            color: var(--ss-color-gray-500);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
    }

    // -- report-highlights  (from site-pixi_systems/src/static/scss/index.scss) --
    .ss-c-report-highlights {
        margin-bottom: unset;

        li {
            padding: var(--ss-spacing-3) 0;
            font-size: var(--ss-font-size-sm);
            color: var(--ss-color-gray-700);
            border-bottom: q(1) solid var(--ss-color-gray-200);

            &:last-child {
                border-bottom: none;
            }
        }
    }

    // -- page-stats  (from site-starling_studio/src/static/scss/app/page_stats.scss) --
    .ss-c-page-stats {
      display: flex;
      align-items: center;
      gap: q(24);
      font-size: q(12);
      font-family: 'Courier New', monospace;
      color: inherit;
      opacity: 0.7;

      &__item {
        display: flex;
        align-items: center;
        gap: q(4);
        white-space: nowrap;
      }

      &__label {
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      &__value {
        font-weight: 400;
        font-variant-numeric: tabular-nums;
        min-width: 3ch;
        text-align: right;
      }
    }
}