/* ============================================================
   CarbonIsle Assessment — Results Styling
   Targets the SiteQ golden-path embed (results-embed.js), which
   injects .gp-results markup into the .ci-assessment wrapper.
   Host-side styling by design (DOM injection, not iframe).

   Severity driven by embed classes:
   .gp-results__bar-fill--{high|elevated|lower}
   .gp-results__bar-severity--{high|elevated|lower}

   CTA cards match the home-page "Sound familiar?" cards exactly:
   bg #F6F6F4, 1px solid #8A95A4, radius 10px, rust heading #6A2C2C.
   Assumes the .gp-results__cta-rows wrapper around the three
   .gp-results__cta-row anchors (h3 title stays outside it).
   ============================================================ */

.ci-assessment .gp-results {
    --ci-slate: #33516C;
    --ci-sage: #739C49;
    --ci-amber: #E8A33D;
    --ci-rust: #C24A2A;
    --ci-card-bg: #F6F6F4;
    --ci-card-border: #8A95A4;

    font-family: inherit !important;
    max-width: 760px;
    margin: 0 auto;
    color: #2B2B2B;
}

/* ---- Hero band ---- */
.ci-assessment .gp-results__headline {
    background: var(--ci-slate);
    color: #fff;
    border-radius: 12px;
    padding: 30px 32px;
    margin: 0 0 22px;
    line-height: 1.25;
}

.ci-assessment .gp-results__headline>span:last-child {
    font-size: 27px;
    font-weight: 500;
}

.ci-assessment .gp-results__amount {
    display: block;
    font-size: 44px;
    font-weight: 600;
    color: var(--ci-amber);
    margin-bottom: 4px;
}

/* ---- Pain callout (sage left border) ---- */
.ci-assessment .gp-results__pain {
    background: #f3f6ef;
    border-left: 4px solid var(--ci-sage);
    border-radius: 0 8px 8px 0;
    padding: 16px 18px;
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.55;
    color: #3d4a3a;
}

/* ---- Concentration bars ---- */
.ci-assessment .gp-results__bars-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a97a1;
    margin: 0 0 14px;
}

.ci-assessment .gp-results__bar-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    margin: 0 0 16px;
}

.ci-assessment .gp-results__bar-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ci-slate);
}

.ci-assessment .gp-results__bar-severity {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: right;
}

.ci-assessment .gp-results__bar-severity--high {
    color: var(--ci-rust);
}

.ci-assessment .gp-results__bar-severity--elevated {
    color: var(--ci-amber);
}

.ci-assessment .gp-results__bar-severity--lower {
    color: var(--ci-sage);
}

.ci-assessment .gp-results__bar-track {
    grid-column: 1 / -1;
    height: 9px;
    background: #e9ecee;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 6px;
}

.ci-assessment .gp-results__bar-fill {
    height: 100%;
    border-radius: 5px;
    background: var(--ci-sage);
}

.ci-assessment .gp-results__bar-fill--high {
    background: var(--ci-rust);
}

.ci-assessment .gp-results__bar-fill--elevated {
    background: var(--ci-amber);
}

.ci-assessment .gp-results__bar-fill--lower {
    background: var(--ci-sage);
}

/* ---- Insights list ---- */
.ci-assessment .gp-results__insights {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}

.ci-assessment .gp-results__insights li {
    position: relative;
    padding: 0 0 0 20px;
    margin: 0 0 13px;
    font-size: 15.5px;
    line-height: 1.55;
    color: #3a4450;
}

.ci-assessment .gp-results__insights li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ci-sage);
}

/* ---- CTA cards (matched to home-page "Sound familiar?" cards) ---- */
.ci-assessment .gp-results__cta {
    margin: 28px 0 0;
}

.ci-assessment .gp-results__cta-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--ci-slate);
    margin: 0 0 16px;
}

.ci-assessment .gp-results__cta-rows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ci-assessment .gp-results__cta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    background: var(--ci-card-bg);
    border: 1px solid var(--ci-card-border);
    border-radius: 10px;
    padding: 24px 20px;
    text-decoration: none;
    transition: border-color .15s, transform .1s;
}

.ci-assessment .gp-results__cta-row:hover {
    border-color: var(--ci-sage);
    transform: translateY(-2px);
}

.ci-assessment .gp-results__cta-label {
    font-size: 22px;
    font-weight: 500;
    color: var(--ci-slate);
    line-height: 1.2;
}

.ci-assessment .gp-results__cta-action {
    font-size: 15px;
    font-weight: 500;
    color: var(--ci-sage);
}

/* Stack to one column on mobile */
@media (max-width: 679px) {
    .ci-assessment .gp-results__cta-rows {
        grid-template-columns: 1fr;
    }
}