/* =============================================================================
   Blocco «Immagine e passi» (page builder, dalla 1.2.708). Partial:
   views/partials/_immagine_passi.twig. Colori dal pannello: --ip-sfondo
   (vuoto = bianco), --ip-accento (vuoto = il colore principale del sito:
   numeri e link). Dalla 1.2.715: .ip--cerchio-pieno / .ip--cerchio-chiaro
   (numero nel cerchio), .ip--fila (passi affiancati, --ip-colonne),
   .ip--titolo-sx (titolo e frase a sinistra).
   ============================================================================= */
.ip {
    --ip-fondo: var(--ip-sfondo, #fff);
    --ip-acc: var(--ip-accento, var(--color-primary, #ea580c));
    background: var(--ip-fondo);
    color: #1f2937;
}
.ip-dentro { max-width: var(--container-max-width, 1280px); margin: 0 auto; padding: 56px 16px; }

/* Titolo al centro */
.ip-testa { max-width: 760px; margin: 0 auto 36px; text-align: center; overflow-wrap: anywhere; }
.ip .ip-titolo {
    margin: 0;
    padding: 0; /* app.css dà 10px sopra e sotto a tutti i titoli */
    color: #111827;
    font-size: clamp(26px, 1vw + 20px, 36px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}
.ip .ip-sotto { margin: 10px 0 0; color: #4b5563; font-size: 16px; line-height: 1.6; }

/* Immagine da una parte, passi dall'altra */
.ip-griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 900px) {
    .ip-griglia { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; }
    .ip--destra .ip-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
    .ip--destra .ip-figura { order: 2; }
}
.ip--senza-immagine .ip-griglia { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: 0 auto; }

.ip-figura { margin: 0; min-width: 0; }
.ip-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 18px 40px rgba(15, 23, 42, .1);
}
.ip .ip-didascalia { margin-top: 10px; color: #9ca3af; font-size: 12px; }

/* I passi numerati */
.ip-testo { min-width: 0; }
.ip .ip-passi { margin: 0; padding: 0; list-style: none; }
.ip-passo {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(15, 23, 42, .1);
}
.ip-passo:first-child { padding-top: 0; }
.ip-passo:last-child { border-bottom: 0; }
.ip-numero {
    flex: none;
    min-width: 2.2em;
    color: var(--ip-acc);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.ip-passo-corpo { min-width: 0; overflow-wrap: anywhere; } /* parole e indirizzi lunghi non escono dalla colonna */
.ip .ip-passo-titolo { margin: 0 0 6px; padding: 0; color: #111827; font-size: 17px; font-weight: 700; line-height: 1.3; }
.ip .ip-passo-testo { margin: 0; color: #4b5563; font-size: 15px; line-height: 1.6; }

.ip .ip-link {
    display: inline-flex;
    gap: 6px;
    margin-top: 18px;
    color: var(--ip-acc);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.ip .ip-link:hover { text-decoration-thickness: 2px; }

/* ── Dalla 1.2.715 ─────────────────────────────────────────────── */

/* Numero nel cerchio: pieno (numero bianco) o chiaro (fondo tenue, bordo e numero colorati) */
.ip--cerchio .ip-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border: 1.5px solid var(--ip-acc);
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
}
.ip--cerchio-pieno .ip-numero { background: var(--ip-acc); color: #fff; }
.ip--cerchio-chiaro .ip-numero {
    border-color: color-mix(in srgb, var(--ip-acc) 45%, #fff);
    background: color-mix(in srgb, var(--ip-acc) 12%, #fff);
    color: var(--ip-acc);
}
.ip--cerchio .ip-passo { gap: 16px; }
.ip--cerchio .ip-passo-corpo { padding-top: 9px; } /* la prima riga del titolo a metà del cerchio */

/* Titolo e frase a sinistra; senza immagine (e non in fila) allineati alla colonna centrata dei passi */
.ip--titolo-sx .ip-testa { margin-left: 0; text-align: left; }
.ip--titolo-sx.ip--senza-immagine:not(.ip--fila) .ip-testa { margin-right: auto; margin-left: auto; }

/* Passi in fila, affiancati: uno sotto l'altro su telefono, due dal tablet, fino a 4 dal computer */
.ip--fila .ip-griglia { max-width: none; }
.ip--fila .ip-passi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ip--fila .ip-passo,
.ip--fila .ip-passo:first-child { padding: 0; border-bottom: 0; }
.ip--fila .ip-passo:only-child { grid-column: 1 / -1; max-width: 760px; } /* un passo solo: tutta la riga, non mezza */
@media (min-width: 640px) {
    .ip--fila .ip-passi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
}
@media (min-width: 1024px) {
    .ip--fila .ip-passi { grid-template-columns: repeat(var(--ip-colonne, 3), minmax(0, 1fr)); gap: 32px 40px; }
}