/* Concept 4 - punteggio di affidabilita' dei datori di lavoro (employer-score):
   chiaro, con indaco come colore guida. */

body.concept-4 {
    --accent: #5b3df5;
    --soft: #f5f2ff;
    --ink: #1b1533;
}

body.concept-4 .hero {
    background: var(--soft);
}


.scorecard {
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(220px, 300px) 1fr;
    align-items: center;
    max-width: 860px;
    margin: 0 auto;
    padding: 30px;
    border: 2px solid var(--line);
    border-radius: 16px;
    background: var(--paper);
}

.gauge {
    text-align: center;
}

.gauge svg {
    display: block;
    width: 100%;
    height: auto;
}

.gauge .track {
    fill: none;
    stroke: #e4defc;
    stroke-width: 16;
    stroke-linecap: round;
}

.gauge .value {
    fill: none;
    stroke: var(--accent);
    stroke-width: 16;
    stroke-linecap: round;
}

.gauge .big {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 46px;
    fill: var(--ink);
    text-anchor: middle;
}

.gauge .small {
    font-size: 13px;
    fill: var(--muted);
    text-anchor: middle;
}

.gauge h3 {
    margin-top: 6px;
    font-size: 18px;
}

.factors {
    display: grid;
    gap: 14px;
}

.factor {
    display: grid;
    grid-template-columns: 11em 1fr 2.6em;
    gap: 12px;
    align-items: center;
    font-size: 14px;
}

.factor b {
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
}

progress {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 14px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    overflow: hidden;
}

progress::-webkit-progress-bar {
    background: var(--paper);
}

progress::-webkit-progress-value {
    background: var(--accent);
}

progress::-moz-progress-bar {
    background: var(--accent);
}

.up { color: #1a8f3a; font-weight: 700; }
.down { color: #c62828; font-weight: 700; }

@media (max-width: 700px) {
    .scorecard {
        grid-template-columns: 1fr;
    }

    .factor {
        grid-template-columns: 1fr 2.6em;
    }

    .factor span {
        grid-column: 1 / -1;
    }

    .factor progress {
        grid-column: 1;
    }
}