/*
 * /metodo/ — stile proprio della pagina, tutto sotto [data-ii="metodo"].
 * Valori dal CSS inline di riferimento/metodo.html.
 *
 * Il resto della pagina usa i blocchi condivisi (hero navy, tabella delle 7
 * fasi, card bordate, CTA finale): qui stanno solo la strip dei chip-ancora,
 * la sezione "coerenza" e i pochi scostamenti di misura fra il mockup e il
 * foglio condiviso.
 *
 * Selettori di sola classe e nessun selettore generico su a/p/li/h*: il
 * global-settings.css di Oxygen viene servito dopo questo foglio.
 */

/* ------------------------------------------- strip dei 7 chip dell'hero */

[data-ii="metodo"] .ii-mt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    font-weight: 600;
}

[data-ii="metodo"] .ii-mt-chips__v {
    margin: 0;
}

[data-ii="metodo"] .ii-mt-chips__a {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid var(--ii-bordo-su-navy);
    color: var(--ii-bianco);
    text-decoration: none;
}

/*
 * Nel mockup i chip non cambiano colore al passaggio (il colore inline
 * bianco batte la regola a:hover): si tiene il bianco e si segnala il
 * passaggio con il fondo velato, come il bottone a contorno su navy.
 */
[data-ii="metodo"] .ii-mt-chips__a:hover,
[data-ii="metodo"] .ii-mt-chips__a:focus-visible {
    color: var(--ii-bianco);
    background: rgba(255, 255, 255, 0.08);
}

/* Chip senza ancora: etichetta, non link. Non capita con i contenuti
   attuali, ma il blocco lo prevede. */
[data-ii="metodo"] .ii-mt-chips__a--spento {
    color: var(--ii-chiaro-su-navy);
}

/* ------------------------------------------------------------- le 7 fasi */

/* I due rimandi in linea (MAP-In, Formazione finanziata) sono in grassetto
   dentro il paragrafo della fase, come nel mockup. */
[data-ii="metodo"] .ii-num--fasi .ii-num__p a {
    font-weight: 700;
}

/* ------------------------------------------------------------- tre tipi */

/*
 * Le label delle tre card (Risolvere / Migliorare / Addestrare) nel mockup
 * sono solo testo uppercase 12.5px: senza il filetto oro degli eyebrow di
 * sezione, e grigie sulla card con il border-top navy.
 */
[data-ii="metodo"] .ii-card__corpo .ii-eyebrow {
    gap: 0;
    margin-bottom: 10px;
    font-size: 12.5px;
    letter-spacing: 0.08em;
}

[data-ii="metodo"] .ii-card__corpo .ii-eyebrow__filetto {
    display: none;
}

[data-ii="metodo"] .ii-card--navy .ii-card__corpo .ii-eyebrow {
    color: var(--ii-grigio-testo);
}

[data-ii="metodo"] .ii-card .ii-h3 {
    font-size: 23px;
}

[data-ii="metodo"] .ii-card__p {
    font-size: 15px;
}

/* -------------------------------------------------------------- coerenza */

[data-ii="metodo"] .ii-mt-coer .ii-eyebrow {
    margin-bottom: 22px;
}

[data-ii="metodo"] .ii-mt-coer__q {
    margin: 0 0 18px;
    font-family: var(--ii-serif);
    font-weight: 400;
    font-size: clamp(26px, 2.8vw, 38px);
    line-height: 1.3;
    color: var(--ii-navy);
}

[data-ii="metodo"] .ii-mt-coer__p {
    margin: 0 0 28px;
    max-width: 680px;
    font-size: 16.5px;
    color: var(--ii-grigio-testo);
}

[data-ii="metodo"] .ii-mt-coer__a {
    display: inline-flex;
}

/* ------------------------------------------------- scostamenti dal foglio
 * condiviso, verificati a schermo contro il mockup.
 */

/* Il corpo dell'h1 ora e' quello del mockup anche nel foglio condiviso: qui
   resta la sola larghezza massima, che in questa pagina e' 920px invece di
   900. */
[data-ii="metodo"] .ii-heroin .ii-h1 {
    max-width: 920px;
}