/* ══ Scheda annuncio — report "Com'è questa …" (06/11/2026) ═══════════════════
   Markup: templates/single-annuncio.php (section.vr), testi da ListingInsight::compute()['sections'].
   Nessuno slot pubblicitario dentro il report. Rollback: templates/single-annuncio.php.bak-20261106-report */

/* il contenitore esterno non fa più da riquadro: il report è la card */
.vas-description.vas-description--report { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.vas-description--report > .vas-section-title { margin: 0 0 10px; }
.vas-description--report > .vas-description-body {
    background: #fff; border: 1px solid var(--mx-line, #e4e7ec); border-radius: 16px; padding: 18px 20px; margin-bottom: 22px;
    font-size: 15.5px; line-height: 1.7;
}

.vr {
    --vr-ink: var(--mx-ink, #15171c);
    --vr-text: var(--mx-text, #2b2f36);
    --vr-muted: var(--mx-muted, #5d6470);
    --vr-line: var(--mx-line, #e4e7ec);
    margin: 0;
    border: 1px solid var(--vr-line);
    border-radius: 22px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px -20px rgba(16, 24, 40, .25);
}

/* intestazione */
.vr-head {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 24px 24px 20px;
    background:
        radial-gradient(520px 200px at 0% 0%, rgba(232, 255, 71, .35), transparent 70%),
        linear-gradient(180deg, #fbfcf4, #fff);
    border-bottom: 1px solid var(--vr-line);
}
.vr-avatar {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
    display: grid; place-items: center; background: #15171c; color: #e8ff47;
    box-shadow: 0 6px 16px -8px rgba(21, 23, 28, .6);
}
.vr-avatar .msr { font-size: 26px; font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
.vr-eyebrow { margin: 2px 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5b6b00; }
.vr .vr-title { margin: 0; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -.02em; color: var(--vr-ink); text-transform: none; font-weight: 800; }
.vr-sub { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--vr-muted); max-width: 60ch; }

/* introduzione */
.vr-lead {
    margin: 0; padding: 20px 24px 4px;
    font-size: 17px; line-height: 1.6; font-weight: 500; color: var(--vr-ink);
}

/* sezioni */
.vr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px 24px 22px; }
.vr-card {
    position: relative; min-width: 0;
    padding: 16px 18px; border-radius: 16px;
    background: #f7f8fa; border: 1px solid #edf0f4;
}
.vr-card--costs, .vr-card--checks { grid-column: 1 / -1; }
.vr-card--good { background: #f4fbf6; border-color: #d3f0dc; }
.vr-card--warn { background: #fffaf0; border-color: #fbe6b8; }
.vr-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.vr-ico {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; background: #fff; color: #2f6fe4;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.vr-ico .msr { font-size: 20px; }
.vr-card--good .vr-ico { color: #067647; }
.vr-card--warn .vr-ico { color: #b54708; }
.vr .vr-card-title { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.25; color: var(--vr-ink); letter-spacing: -.01em; text-transform: none; flex: 1 1 auto; }
.vr-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.vr-chip--good { background: #dcfae6; color: #067647; }
.vr-chip--ok { background: #e8f0fd; color: #1f4f99; }
.vr-chip--warn { background: #fef0c7; color: #93370d; }
.vr-text { font-size: 15px; line-height: 1.65; color: var(--vr-text); }
.vr-plain { padding: 18px 24px; display: grid; gap: 12px; }

.vr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vr-card--checks .vr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.vr-list li { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.55; color: var(--vr-text); }
.vr-list li > .msr {
    flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
    display: grid; place-items: center; font-size: 15px; background: #fff; color: #2f6fe4; border: 1px solid #dbe4f3;
}
.vr-card--checks .vr-list li > .msr { background: #17b26a; color: #fff; border-color: #17b26a; font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20; }

/* firma */
.vr-foot {
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 24px 18px; border-top: 1px dashed var(--vr-line);
    font-size: 12.5px; line-height: 1.5; color: var(--vr-muted);
}
.vr-sign { font-size: 13.5px; font-weight: 800; color: var(--vr-ink); }
.vr-sign::before { content: "— "; color: #9aa3b2; }

@media (max-width: 760px) {
    .vr { border-radius: 18px; }
    .vr-head { padding: 18px 16px 16px; gap: 12px; }
    .vr-avatar { width: 40px; height: 40px; border-radius: 12px; }
    .vr-avatar .msr { font-size: 22px; }
    .vr-sub { font-size: 14.5px; }
    .vr-lead { padding: 16px 16px 2px; font-size: 16px; }
    .vr-grid { grid-template-columns: 1fr; padding: 14px 12px 16px; gap: 10px; }
    .vr-card { padding: 14px; }
    .vr-card--checks .vr-list { grid-template-columns: 1fr; }
    .vr-foot { padding: 12px 16px 16px; }
    .vr-plain { padding: 16px; }
}

/* sezioni a mezza larghezza solo in coppia (chilometri + prezzo), altrimenti a tutta larghezza */
.vr-card--engine { grid-column: 1 / -1; }
.vr-card--km:not(:has(+ .vr-card--price)) { grid-column: 1 / -1; }
.vr-card--price:not(.vr-card--km + .vr-card--price) { grid-column: 1 / -1; }