/*
 * /formazione-finanziata/ — stile proprio della pagina.
 * Valori dal CSS inline di riferimento/formazione-finanziata.html.
 *
 * Tutto sotto [data-ii="formazione-finanziata"], che e' l'attributo del
 * contenitore .ii-pg dello shortcode: niente selettori generici, perche' il
 * global-settings.css di Oxygen viene servito dopo questo foglio. I reset
 * delle <details> sono gli unici elementi senza classe del mockup e qui
 * hanno comunque una classe propria.
 *
 * Nel mockup non c'e' nessuna media query: l'impaginazione e' tutta flex-wrap
 * e auto-fit, quindi a 390px non c'e' scorrimento orizzontale. In fondo al
 * foglio ci sono solo le correzioni di spaziatura per gli schermi stretti.
 */

/* ------------------------------------------------- canali: "Da dove arrivano" */

/* La testata della sezione ha 44px sotto, non i 40 di default. */
[data-ii="formazione-finanziata"] .ii-ff-canali__shead {
    margin-bottom: 44px;
}

/* Padding 30px delle tre card dei canali (gap e altezze uguali sono nel
   foglio condiviso). */
[data-ii="formazione-finanziata"] .ii-ff-canali .ii-card__corpo {
    padding: clamp(22px, 2.6vw, 30px);
}

[data-ii="formazione-finanziata"] .ii-ff-canali .ii-card__corpo .ii-h3 {
    margin-bottom: 12px;
}

/* "Fondi con cui lavoriamo: [ELENCO FONDI — es. da vecchio sito]" */
[data-ii="formazione-finanziata"] .ii-ff-canali__nota {
    margin: 28px 0 0;
    font-size: 14.5px;
    color: var(--ii-grigio-testo);
}

[data-ii="formazione-finanziata"] .ii-ff-canali__nota strong {
    color: var(--ii-navy);
}

/* ------------------------------------------ cosa facciamo: i 5 passi FUND-In */

[data-ii="formazione-finanziata"] .ii-ff-cosa__in {
    display: flex;
    flex-wrap: wrap;
    gap: 48px 80px;
    align-items: flex-start;
}

[data-ii="formazione-finanziata"] .ii-ff-cosa__shead {
    flex: 1 1 380px;
    min-width: 0;
    margin-bottom: 0;
}

[data-ii="formazione-finanziata"] .ii-ff-cosa__shead .ii-h2 {
    margin-bottom: 20px;
}

[data-ii="formazione-finanziata"] .ii-ff-cosa__shead .ii-shead__p {
    margin-top: 0;
    font-size: 17px;
    max-width: 440px;
}

[data-ii="formazione-finanziata"] .ii-ff-passi {
    flex: 1.4 1 480px;
    min-width: 0;
    border-top: 2px solid var(--ii-navy);
}

[data-ii="formazione-finanziata"] .ii-ff-passi .ii-num__voce {
    display: flex;
    gap: 22px;
    padding: 20px 0;
    border-bottom: 1px solid var(--ii-bordo-grigio);
}

[data-ii="formazione-finanziata"] .ii-ff-passi .ii-num__testa {
    flex: 0 0 34px;
}

[data-ii="formazione-finanziata"] .ii-ff-passi .ii-num__n {
    display: block;
    font-size: 26px;
    line-height: 1.1;
}

[data-ii="formazione-finanziata"] .ii-ff-passi .ii-num__corpo {
    min-width: 0;
}

/* Nel mockup il titolo del passo e' uno <strong> nel corpo del testo: qui e'
   un h3, quindi la misura va dichiarata per intero. */
[data-ii="formazione-finanziata"] .ii-ff-passi .ii-num__t {
    margin: 0;
    font-family: var(--ii-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: normal;
    color: var(--ii-navy);
}

[data-ii="formazione-finanziata"] .ii-ff-passi .ii-num__p {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ii-grigio-testo);
}

/* --------------------------------- TeACH-In: il tracciamento che il fondo chiede */

[data-ii="formazione-finanziata"] .ii-ff-teachin__in {
    display: flex;
    flex-wrap: wrap;
    gap: 48px 80px;
    align-items: center;
}

[data-ii="formazione-finanziata"] .ii-ff-teachin__media {
    flex: 1.2 1 460px;
    min-width: 0;
}

[data-ii="formazione-finanziata"] .ii-ff-teachin__media .ii-ph {
    border: 1px solid var(--ii-bordo);
}

[data-ii="formazione-finanziata"] .ii-ff-teachin__testo {
    flex: 1 1 380px;
    min-width: 0;
}

[data-ii="formazione-finanziata"] .ii-ff-teachin__shead {
    margin-bottom: 20px;
}

[data-ii="formazione-finanziata"] .ii-ff-teachin__lista {
    margin: 0 0 28px;
    padding: 0;
    border-top: 1px solid var(--ii-bordo);
    font-size: 15.5px;
}

[data-ii="formazione-finanziata"] .ii-ff-teachin__voce {
    margin: 0;
    padding: 13px 0;
    border-bottom: 1px solid var(--ii-bordo);
}

/* "Accedi a TeACH-In ↗" e' il pulsante condiviso
   .ii-btn--contorno-navy-chiaro; la classe di pagina resta solo per la
   larghezza piena sugli schermi stretti, in fondo al foglio. */

/* ------------------------------------------------------------------ stretti */

@media (max-width: 760px) {
    /* Impilate, le due colonne non hanno bisogno dei 48px pieni di gap. */
    [data-ii="formazione-finanziata"] .ii-ff-cosa__in,
    [data-ii="formazione-finanziata"] .ii-ff-teachin__in {
        gap: 32px 80px;
    }

    [data-ii="formazione-finanziata"] .ii-ff-canali__shead {
        margin-bottom: 32px;
    }
}

@media (max-width: 480px) {
    /* Il numero serif del passo resta leggibile ma lascia piu' spazio al
       testo quando la riga e' larga meno di 300px. */
    [data-ii="formazione-finanziata"] .ii-ff-passi .ii-num__voce {
        gap: 16px;
    }

    [data-ii="formazione-finanziata"] .ii-ff-passi .ii-num__testa {
        flex: 0 0 26px;
    }

    [data-ii="formazione-finanziata"] .ii-ff-passi .ii-num__n {
        font-size: 22px;
    }

    [data-ii="formazione-finanziata"] .ii-ff-teachin__btn {
        width: 100%;
    }
}