/* ================================================================
 * Block: Dashboard preview — dashboard_preview
 * Design: Figma "GS - LP Design - Service" §10 REPORTING
 * Tokens: assets/css/tokens.css only (gaps listed in build report).
 * ================================================================ */

.block-dashboard-preview {
    /* Block-local tokens (values from Figma; gaps listed in build report) */
    --eyebrow-line-w: 33px;
    --eyebrow-line-h: 2px;
    --eyebrow-fs: 20px;
    --eyebrow-lh: 24px;
    --dash-col-left: 531px;
    --dash-col-right: 638px;
    --dash-grid-gap: 64px;
    --dash-card-border: 1px solid rgba(26, 31, 58, 0.10);
    --fs-dash-desc: 16px;
    --fs-dash-kpi: 22px;
    --dash-kpi-gap: 1px;
    --dash-chart-h: 150px;
    --dash-bar-opacity: 0.9;

    background-color: var(--color-cultured);
}

.block-dashboard-preview__container {
    max-width: calc(var(--container-service) + 2 * var(--container-pad));
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.block-dashboard-preview__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
}

.block-dashboard-preview__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-15);
}

.block-dashboard-preview__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--eyebrow-fs);
    font-weight: var(--fw-light);
    line-height: var(--eyebrow-lh);
    text-transform: uppercase;
    color: var(--color-whimsical-blue);
}

.block-dashboard-preview__eyebrow::before {
    content: '';
    flex-shrink: 0;
    width: var(--eyebrow-line-w);
    height: var(--eyebrow-line-h);
    background-color: var(--color-whimsical-blue);
}

.block-dashboard-preview__heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-display-50);
    font-weight: var(--fw-heading);
    line-height: var(--lh-heading);
    color: var(--color-yankees-blue);
}

.block-dashboard-preview__desc {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-dash-desc);
    font-weight: var(--fw-light);
    line-height: var(--lh-relaxed);
    color: var(--color-yankees-blue-82);
}

.block-dashboard-preview__desc p {
    margin: 0;
}

.block-dashboard-preview__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--color-white);
    border: var(--dash-card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.block-dashboard-preview__image {
    display: block;
    width: 100%;
    height: auto;
}

.block-dashboard-preview__card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-cultured);
}

.block-dashboard-preview__card-title,
.block-dashboard-preview__card-status {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-microcopy);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body-sm);
    color: var(--color-yankees-blue-65);
}

.block-dashboard-preview__kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dash-kpi-gap);
    background-color: var(--color-yankees-blue-08);
}

.block-dashboard-preview__kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6px);
    min-width: 0;
    padding: var(--space-5) var(--space-6) var(--space-4);
    background-color: var(--color-white);
}

.block-dashboard-preview__kpi-label {
    font-family: var(--font-body);
    font-size: var(--fs-pill);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    color: var(--color-yankees-blue-60);
}

.block-dashboard-preview__kpi-value {
    font-family: var(--font-display);
    font-size: var(--fs-dash-kpi);
    font-weight: var(--fw-bold);
    line-height: var(--lh-body);
    color: var(--color-yankees-blue);
    overflow-wrap: break-word;
}

.block-dashboard-preview__kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}

.block-dashboard-preview__kpi-change {
    font-family: var(--font-body);
    font-size: var(--fs-microcopy);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-body);
    white-space: nowrap;
}

.block-dashboard-preview__kpi-change--up {
    color: var(--color-success);
}

.block-dashboard-preview__kpi-change--down {
    color: var(--color-error);
}

.block-dashboard-preview__chart {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-2);
    height: var(--dash-chart-h);
    padding: var(--space-6);
}

.block-dashboard-preview__bar {
    flex: 1 1 0;
    min-width: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--gradient-signature);
    opacity: var(--dash-bar-opacity);
}

@media (min-width: 900px) {
    .block-dashboard-preview__grid {
        grid-template-columns: minmax(0, var(--dash-col-left)) minmax(0, var(--dash-col-right));
        justify-content: space-between;
        align-items: center;
        gap: var(--dash-grid-gap);
    }
}