/**
 * Section: Metrics — Band
 * RSD Design Language Wave 5 Primitive 4.
 * Companion to: pages/sections/metrics-band.php
 *
 * @since 3.5.70 (RSD primitives band)
 */

[data-ssla-type="metrics-band"]{
    padding: var(--shell-section-padding-y-generous) 48px;
    background: var(--shell-surface-dark);
}

[data-ssla-type="metrics-band"][data-ssla-variant-surface="cream"]{ background: var(--shell-surface-cream); }
[data-ssla-type="metrics-band"][data-ssla-variant-surface="warm"]{ background: var(--shell-surface-warm); }
[data-ssla-type="metrics-band"][data-ssla-variant-surface="dark"]{ background: var(--shell-surface-dark); }
[data-ssla-type="metrics-band"][data-ssla-variant-surface="darker"]{ background: var(--shell-surface-darker); }

.ssla-metrics-band{
    max-width: var(--shell-content-max-width);
    margin: 0 auto;
}

.ssla-metrics-band-eyebrow{
    text-align: center;
    margin-bottom: 56px;
}

/* Hide empty eyebrow */
.ssla-metrics-band-eyebrow:has(.ssla-eyebrow.is-plain:empty){
    display: none;
}

/* Metrics grid */
.ssla-metrics-band-row{
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
}

[data-ssla-type="metrics-band"][data-ssla-variant-metric-count="2"] .ssla-metrics-band-row{
    grid-template-columns: repeat(2, 1fr);
}

[data-ssla-type="metrics-band"][data-ssla-variant-metric-count="3"] .ssla-metrics-band-row{
    grid-template-columns: repeat(3, 1fr);
}

[data-ssla-type="metrics-band"][data-ssla-variant-metric-count="4"] .ssla-metrics-band-row{
    grid-template-columns: repeat(4, 1fr);
}

/* Metric */
.ssla-metric{
    text-align: center;
    padding: 0 16px;
}

/* Hide unused metric slots */
.ssla-metric:has(.ssla-metric-value:empty){
    display: none;
}

/* Hide metrics beyond declared count */
[data-ssla-type="metrics-band"][data-ssla-variant-metric-count="2"] .ssla-metric:nth-child(n+3){
    display: none;
}

[data-ssla-type="metrics-band"][data-ssla-variant-metric-count="3"] .ssla-metric:nth-child(n+4){
    display: none;
}

[data-ssla-type="metrics-band"][data-ssla-variant-metric-count="4"] .ssla-metric:nth-child(n+5){
    display: none;
}

/* Hairline dividers */
[data-ssla-type="metrics-band"][data-ssla-variant-divider-style="hairline"] .ssla-metric{
    border-right: 1px solid var(--shell-hairline-on-dark);
}

[data-ssla-type="metrics-band"][data-ssla-variant-divider-style="hairline"][data-ssla-variant-tone="light"] .ssla-metric{
    border-right-color: var(--shell-hairline);
}

[data-ssla-type="metrics-band"][data-ssla-variant-divider-style="hairline"] .ssla-metric:last-child{
    border-right: 0;
}

/* Metric value */
.ssla-metric-value{
    font-family: var(--shell-font-family-heading);
    font-size: var(--shell-metric-value-size);
    font-weight: 700;
    letter-spacing: var(--shell-metric-value-letter-spacing);
    color: var(--shell-text-on-dark);
    line-height: 1.0;
    margin-bottom: 12px;
}

[data-ssla-variant-tone="light"] .ssla-metric-value{
    color: var(--shell-text-dark);
}

/* Accent position */
[data-ssla-type="metrics-band"][data-ssla-variant-accent-position="value"] .ssla-metric-value{
    color: var(--shell-accent);
}

[data-ssla-type="metrics-band"][data-ssla-variant-accent-position="label"] .ssla-metric-label{
    color: var(--shell-accent);
}

/* Metric label */
.ssla-metric-label{
    font-size: var(--shell-metric-label-size);
    color: var(--shell-text-on-dark-muted);
    line-height: 1.4;
}

[data-ssla-variant-tone="light"] .ssla-metric-label{
    color: var(--shell-text-muted);
}

/* Metric helper */
.ssla-metric-helper{
    margin-top: 8px;
    font-size: 12px;
    color: var(--shell-text-on-dark-muted);
    opacity: 0.7;
}

[data-ssla-variant-tone="light"] .ssla-metric-helper{
    color: var(--shell-text-muted);
}

.ssla-metric-helper:empty{
    display: none;
}

@media (max-width: 1023px) {
    [data-ssla-type="metrics-band"][data-ssla-variant-metric-count="4"] .ssla-metrics-band-row{
        grid-template-columns: repeat(2, 1fr);
    }

    [data-ssla-type="metrics-band"][data-ssla-variant-metric-count="4"] .ssla-metric:nth-child(2){
        border-right: 0;
    }
}

@media (max-width: 639px) {
    [data-ssla-type="metrics-band"]{
        padding: 80px 24px;
    }

    [data-ssla-type="metrics-band"] .ssla-metrics-band-row{
        grid-template-columns: 1fr;
        gap: 32px;
    }

    [data-ssla-type="metrics-band"] .ssla-metric{
        border-right: 0;
        padding-bottom: 32px;
        border-bottom: 1px solid var(--shell-hairline-on-dark);
    }

    [data-ssla-variant-tone="light"] .ssla-metric{
        border-bottom-color: var(--shell-hairline);
    }

    [data-ssla-type="metrics-band"] .ssla-metric:last-child{
        border-bottom: 0;
    }
}