/* ==========================================================================
   ASSESSMENT ENGINE
   Two-column homepage section: left = pitch + CTA, right = 2x2 card grid
   (3 gauge metric cards + 1 "Reality Check™" card).

   Reuses existing primitives rather than inventing new ones:
     - .du-gauge__track / .du-gauge__value    -> _animations.css
     - .du-progress-bar / .du-progress-bar__fill -> _animations.css
     - --healthy / --fragile / --critical      -> _variable.css
     - .du-btn--primary, .du-text-* utilities  -> _buttons.css / _typography.css

   Mobile/Tablet (< 1025px): stacked, cards in a single column.
   Desktop (>= 1025px): content column + 2x2 card grid, side by side.
   ========================================================================== */

.du-assessment {
    background-color: var(--background);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.du-assessment__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

/* ---- Left column: pitch ---- */
.du-assessment__content {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.du-assessment__content.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Eyebrow label ---- */
.du-assessment__eyebrow {
    color: var(--surface-tint);
    margin: 0 0 var(--space-sm);
}

.du-assessment__eyebrow-line {
    display: block;
    width: 40px;
    height: 1px;
    background-color: var(--outline-variant);
    margin-bottom: var(--space-md);
}

.du-assessment__heading {
    margin-bottom: var(--space-sm);
}

.du-assessment__description {
    color: var(--on-surface-variant);
    max-width: 42ch;
    margin: 0 0 var(--space-lg);
}

.du-assessment__checklist {
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.du-assessment__checklist-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    font-family: var(--font-sans);
    font-size: var(--body-md-size);
    line-height: var(--body-md-line);
    color: var(--text-body);
}

.du-assessment__checklist-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--success);
    margin-top: 2px;
}

.du-assessment__cta-icon {
    transition: transform var(--transition-fast);
}

.du-assessment__cta:hover .du-assessment__cta-icon,
.du-assessment__cta:focus-visible .du-assessment__cta-icon {
    transform: translateX(4px);
}

/* ---- Right column: card grid ---- */
.du-assessment__cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}

.du-assessment-card {
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-level-1);
    padding: var(--space-md);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--transition-slow), transform var(--transition-slow),
                box-shadow var(--transition-normal);
}

.du-assessment-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.du-assessment-card:hover {
    box-shadow: var(--shadow-level-2);
    transform: translateY(-2px);
}

.du-assessment-card.is-visible:hover {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .du-assessment__content,
    .du-assessment-card {
        transition: none;
        transform: none;
    }
    .du-assessment-card:hover {
        transform: none;
    }
}

/* ---- Card top row: title + status badge ---- */
.du-assessment-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.du-assessment-card__title {
    color: var(--on-surface-variant);
    margin: 0;
}

/*
   Status badges: DESIGN.md's semantic tokens (--healthy/--fragile/--critical)
   are solid colors only — no pale "container" tint exists for them (unlike
   --secondary-container etc.), so a badge in the solid color would be far
   too heavy for an inline pill. These tints are new values, built at low
   opacity FROM the same semantic tokens via color-mix so the badge always
   stays in sync if a token value changes, rather than a second hardcoded
   hex living apart from its source color.
*/
.du-assessment-card__badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: var(--label-caps-tracking);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.du-assessment-card__badge--healthy {
    color: var(--healthy);
    background-color: color-mix(in srgb, var(--healthy) 16%, var(--surface));
}

.du-assessment-card__badge--fragile {
    color: var(--fragile);
    background-color: color-mix(in srgb, var(--fragile) 18%, var(--surface));
}

.du-assessment-card__badge--critical {
    color: var(--critical);
    background-color: color-mix(in srgb, var(--critical) 16%, var(--surface));
}

/* ---- Gauge ---- */
.du-assessment-card__gauge {
    position: relative;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

.du-assessment-card__gauge-svg {
    width: 100%;
    height: auto;
    display: block;
}

.du-assessment-card__gauge-value {
    /* JS drives stroke-dashoffset per animation frame — the shared
       .du-gauge__value transition would fight that, so it's switched off
       here and re-enabled only for the no-JS fallback (already-correct
       final offset rendered server-side needs no transition at all). */
    transition: none;
}

.du-assessment-card__gauge-value--healthy { stroke: var(--healthy); }
.du-assessment-card__gauge-value--fragile { stroke: var(--fragile); }
.du-assessment-card__gauge-value--critical { stroke: var(--critical); }

.du-assessment-card__score {
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%);
    color: var(--on-background);
    margin: 0;
    /* Extrapolated up from --number-display-size (32px, built for a small
       dashboard badge) — same rationale/precedent as .du-hero-stats__number
       in _hero-stats.css: family/weight/tracking tokens kept as-is, size
       scaled for a more prominent context. */
    font-size: clamp(1.75rem, 5vw, 2.5rem);
}

/* ---- Insight quote ---- */
.du-assessment-card__insight {
    color: var(--on-surface-variant);
    text-align: center;
    margin: var(--space-sm) 0 0;
}

/* ---- Reality Check card (4th card): distinct shaded surface ---- */
.du-assessment-card--reality {
    background-color: var(--surface-container-low);
    display: flex;
    flex-direction: column;
}

.du-assessment-card__reality-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background-color: var(--surface);
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

.du-assessment-card__reality-title {
    /* Closest available serif headline token — DESIGN.md doesn't define a
       size between headline-lg (32px) and body, so this borrows headline-lg
       rather than introduce a new scale step. */
    margin: 0 0 var(--space-xs);
}

.du-assessment-card__reality-text {
    color: var(--on-surface-variant);
    margin: 0 0 var(--space-md);
}

.du-assessment-card__reality-progress {
    margin-top: auto;
}

/* ==========================================================================
   DESKTOP — >= 1025px
   ========================================================================== */
@media (min-width: 1025px) {
    .du-assessment__inner {
        grid-template-columns: minmax(280px, 420px) 1fr;
        gap: var(--space-xl);
    }

    .du-assessment__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}