/*
 * /map-in/ — stile proprio della pagina MAP-In.
 * Valori presi dal CSS inline di riferimento/map-in.html; tutto quello che
 * era gia' nel foglio generale (fascia navy dell'hero, .ii-h1, .ii-h2,
 * eyebrow, bottoni, card bordate, stat in riga) non si ripete qui.
 *
 * Tutto sotto [data-ii="map-in"]: specificita' 0,2,0 o piu', quindi vince
 * sul global-settings.css di Oxygen che viene servito dopo. Nessun selettore
 * generico su a/p/li/h*: gli elementi nudi (dt, dd, th, td, li) sono sempre
 * dentro una classe del blocco.
 */

/* ------------------------------------------------------------------ hero */

/* Nel mockup la colonna del testo e' piu' larga (1.5) di quella delle
   lettere e i gap sono leggermente piu' ampi di quelli condivisi. */
[data-ii="map-in"] .ii-mapin-hero .ii-heroin__in {
    gap: 40px 72px;
}

[data-ii="map-in"] .ii-mapin-hero .ii-heroin__testo {
    flex: 1.5 1 520px;
}

[data-ii="map-in"] .ii-mapin-hero .ii-heroin__p {
    max-width: 620px;
    margin-bottom: 32px;
}

/* M / A / P: tre colonne uguali sotto il filetto, separate dai bordi. */
[data-ii="map-in"] .ii-mapin-map {
    display: flex;
    flex: 1 1 320px;
    border-top: 1px solid var(--ii-sep-navy);
}

[data-ii="map-in"] .ii-mapin-map__c {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 16px 0;
}

[data-ii="map-in"] .ii-mapin-map__c:first-child {
    padding-left: 0;
}

[data-ii="map-in"] .ii-mapin-map__c:last-child {
    padding-right: 0;
}

[data-ii="map-in"] .ii-mapin-map__c + .ii-mapin-map__c {
    border-left: 1px solid var(--ii-sep-navy);
}

[data-ii="map-in"] .ii-mapin-map__l {
    font-family: var(--ii-serif);
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: var(--ii-oro-chiaro);
}

[data-ii="map-in"] .ii-mapin-map__t {
    margin-top: 8px;
    font-size: 14px;
    color: var(--ii-chiaro-su-navy-2);
}

/* ---------------------------------------------- perche' esiste + i dati */

[data-ii="map-in"] .ii-mapin-problema__in {
    display: flex;
    flex-wrap: wrap;
    gap: 48px 80px;
}

[data-ii="map-in"] .ii-mapin-problema__testo {
    flex: 1 1 420px;
    min-width: 0;
}

/* Nel mockup fra l'h2 e il primo paragrafo ci sono 20px, non i 40px della
   testata di sezione usata da sola. */
[data-ii="map-in"] .ii-mapin-problema .ii-shead {
    margin-bottom: 20px;
}

[data-ii="map-in"] .ii-mapin-problema__p {
    margin: 0 0 16px;
    font-size: 17px;
    color: var(--ii-grigio-testo);
}

[data-ii="map-in"] .ii-mapin-problema__p:last-child {
    margin-bottom: 0;
}

[data-ii="map-in"] .ii-mapin-problema__dati {
    flex: 1 1 420px;
    min-width: 0;
    border-top: 2px solid var(--ii-navy);
}

[data-ii="map-in"] .ii-mapin-problema__dati .ii-stat {
    gap: 12px 24px;
    padding: 24px 0;
}

[data-ii="map-in"] .ii-mapin-problema__dati .ii-stat__p {
    margin-bottom: 6px;
    font-size: 15.5px;
}

/* ------------------------------------------------- come funziona: M A P */

[data-ii="map-in"] .ii-mapin-passaggi .ii-shead {
    margin-bottom: 44px;
}

[data-ii="map-in"] .ii-mapin-carta--rosso {
    border-top-color: var(--ii-rosso);
}

[data-ii="map-in"] .ii-mapin-carta .ii-card__corpo {
    align-items: stretch;
    gap: 14px;
    padding: clamp(22px, 2.4vw, 30px);
}

[data-ii="map-in"] .ii-mapin-carta .ii-card__p {
    margin: 0;
}

[data-ii="map-in"] .ii-mapin-carta__testa {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

[data-ii="map-in"] .ii-mapin-carta__l {
    font-family: var(--ii-serif);
    font-size: 56px;
    font-weight: 700;
    line-height: 0.9;
    color: var(--ii-navy);
}

[data-ii="map-in"] .ii-mapin-carta__t {
    margin: 0;
    font-family: var(--ii-sans);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ii-navy);
}

/* Elenco puntato con il pallino, come nel mockup: il reset del foglio
   generale toglie i marker dentro .ii-pg, qui si rimettono. */
[data-ii="map-in"] .ii-mapin-carta__punti {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    font-size: 14.5px;
    color: var(--ii-inchiostro);
}

[data-ii="map-in"] .ii-mapin-carta__punti > li {
    display: list-item;
    margin: 0;
}

[data-ii="map-in"] .ii-mapin-carta__dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    margin: 0;
    font-size: 14.5px;
}

[data-ii="map-in"] .ii-mapin-carta__dl dt {
    margin: 0;
    font-weight: 700;
    color: var(--ii-navy);
}

[data-ii="map-in"] .ii-mapin-carta__dl dd {
    margin: 0;
    color: var(--ii-grigio-testo);
}

/* --------------------------------------- cosa ricevi + esempio di output */

[data-ii="map-in"] .ii-mapin-ricevi__in {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48px 80px;
}

[data-ii="map-in"] .ii-mapin-ricevi__testo {
    flex: 1 1 400px;
    min-width: 0;
}

[data-ii="map-in"] .ii-mapin-ricevi .ii-shead {
    margin-bottom: 24px;
}

[data-ii="map-in"] .ii-mapin-ricevi__ol {
    margin: 0 0 28px;
    padding: 0;
    border-top: 1px solid var(--ii-bordo);
}

[data-ii="map-in"] .ii-mapin-ricevi__li {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--ii-bordo);
}

[data-ii="map-in"] .ii-mapin-ricevi__n {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--ii-oro-scuro);
}

[data-ii="map-in"] .ii-mapin-ricevi__dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    margin: 0;
    font-size: 15px;
}

[data-ii="map-in"] .ii-mapin-ricevi__dl dt {
    margin: 0;
    font-weight: 700;
    color: var(--ii-navy);
}

[data-ii="map-in"] .ii-mapin-ricevi__dl dd {
    margin: 0;
}

[data-ii="map-in"] .ii-mapin-tab {
    flex: 1.1 1 440px;
    min-width: 0;
    border: 1px solid var(--ii-bordo);
}

[data-ii="map-in"] .ii-mapin-tab__testa {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 22px;
    background: var(--ii-navy);
    color: var(--ii-bianco);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

[data-ii="map-in"] .ii-mapin-tab__meta {
    color: var(--ii-oro-chiaro);
}

[data-ii="map-in"] .ii-mapin-tab__t {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

[data-ii="map-in"] .ii-mapin-tab__t th {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ii-bordo);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--ii-grigio-testo);
}

[data-ii="map-in"] .ii-mapin-tab__t td {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ii-bordo);
    color: var(--ii-inchiostro);
    vertical-align: top;
}

/* La colonna centrale ha i fianchi stretti, come nel mockup. */
[data-ii="map-in"] .ii-mapin-tab__t th:nth-child(2),
[data-ii="map-in"] .ii-mapin-tab__t td:nth-child(2) {
    padding-left: 12px;
    padding-right: 12px;
}

[data-ii="map-in"] .ii-mapin-tab__t tbody tr:last-child td {
    border-bottom: 0;
}

[data-ii="map-in"] .ii-mapin-prio {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

[data-ii="map-in"] .ii-mapin-prio--alta {
    background: var(--ii-rosso);
    color: var(--ii-bianco);
}

[data-ii="map-in"] .ii-mapin-prio--media {
    background: var(--ii-oro);
    color: var(--ii-navy-scuro);
}

[data-ii="map-in"] .ii-mapin-prio--bassa {
    border: 1px solid var(--ii-bordo-input);
    color: var(--ii-inchiostro);
}

/* ------------------------------------------------- la domanda in piu' */

[data-ii="map-in"] .ii-mapin-domanda {
    padding: clamp(64px, 8vw, 96px) 0;
}

[data-ii="map-in"] .ii-mapin-domanda .ii-eyebrow {
    margin-bottom: 22px;
}

[data-ii="map-in"] .ii-mapin-domanda__q {
    margin: 0 0 18px;
    font-family: var(--ii-serif);
    font-size: clamp(26px, 2.8vw, 36px);
    line-height: 1.3;
    color: var(--ii-navy);
}

[data-ii="map-in"] .ii-mapin-domanda__p {
    margin: 0;
    max-width: 680px;
    font-size: 16.5px;
    color: var(--ii-grigio-testo);
}

/* --------------------------------------------------------- responsive */

/*
 * Il mockup e' tutto fluido e non ha media query: queste servono solo a
 * tenere la pagina dentro i 390px, dove la tabella a tre colonne con i
 * fianchi da 22px non ci sta.
 */

@media (max-width: 560px) {
    [data-ii="map-in"] .ii-mapin-map__l {
        font-size: 44px;
    }

    [data-ii="map-in"] .ii-mapin-tab__testa {
        padding-left: 16px;
        padding-right: 16px;
    }

    [data-ii="map-in"] .ii-mapin-tab__t {
        font-size: 13.5px;
    }

    [data-ii="map-in"] .ii-mapin-tab__t th,
    [data-ii="map-in"] .ii-mapin-tab__t td {
        padding: 12px 10px;
    }

    [data-ii="map-in"] .ii-mapin-tab__t th:first-child,
    [data-ii="map-in"] .ii-mapin-tab__t td:first-child {
        padding-left: 16px;
    }

    [data-ii="map-in"] .ii-mapin-tab__t th:last-child,
    [data-ii="map-in"] .ii-mapin-tab__t td:last-child {
        padding-right: 16px;
    }

    [data-ii="map-in"] .ii-mapin-tab__t th:nth-child(2),
    [data-ii="map-in"] .ii-mapin-tab__t td:nth-child(2) {
        padding-left: 10px;
        padding-right: 10px;
    }
}