/* =============================================================================
   Blocco «footericon» (page builder, dalla 1.2.491): fascia scura con le
   icone, di solito sopra il footer. A sinistra l'immagine che sfuma nel fondo
   con la frase in maiuscolo spaziato; poi fino a 3 colonne (icona tonda,
   titolo, testo, valore grande, pulsante pieno o link con la freccia).
   Colori dal pannello: --fi-sfondo, --fi-accento (vuoti = grigio scuro e
   rosso), --fi-immagine. Partial: views/partials/_footericon.twig.
   Su telefono l'immagine va in alto come striscia e le colonne una sotto
   l'altra.
   ============================================================================= */
.fi {
    --fi-fondo: var(--fi-sfondo, #232323);
    --fi-acc: var(--fi-accento, #c8102e);
    position: relative;
    background: var(--fi-fondo);
    color: #fff;
    overflow: hidden;
}
.fi-dentro { display: grid; grid-template-columns: minmax(0, 1fr); }

/* Lato con immagine e frase */
.fi-lato {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 150px;
    padding: 28px 24px;
}
.fi--immagine .fi-lato {
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .15)),
        var(--fi-immagine);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* La sfumatura verso il colore della fascia: in basso su telefono, a destra dal computer */
.fi--immagine .fi-lato::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, var(--fi-fondo) 100%);
    pointer-events: none;
}
.fi-frase {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .32em;
    text-transform: uppercase;
}
.fi-frase::after {
    content: '';
    width: 44px;
    height: 2px;
    margin-top: 10px;
    background: var(--fi-acc);
}

/* Colonne */
.fi-colonne {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 16px 28px;
}
.fi:not(.fi--immagine):not(.fi--frase) .fi-colonne { padding-top: 28px; }
.fi-colonna {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.fi-colonna:first-child { border-top: 0; }
.fi-icona {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: var(--fi-acc);
}
.fi-icona .ke-icona { width: 26px; height: 26px; stroke-width: 2; }
.fi-testi { min-width: 0; }
.fi .fi-titolo {
    margin: 4px 0 0;
    padding: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}
.fi .fi-testo {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    line-height: 1.5;
}
.fi .fi-valore {
    display: inline-block;
    margin: 10px 0 0;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.fi a.fi-valore:hover { color: #fff; opacity: .85; }
.fi-testi > .fi-valore { display: block; width: fit-content; }
.fi a.fi-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    transition: filter .2s ease, color .2s ease;
}
.fi a.fi-cta svg { flex: none; }
.fi a.fi-cta--pieno {
    padding: 12px 24px 12px 28px;
    border-radius: 999px;
    background: var(--fi-acc);
}
.fi a.fi-cta--pieno:hover { color: #fff; filter: brightness(1.12); }
.fi a.fi-cta--link {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--fi-acc);
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
}
.fi a.fi-cta--link:hover { color: #fff; text-decoration-color: #fff; }
.fi a.fi-cta--link svg { text-decoration: none; }
.fi a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Tablet: immagine in alto, colonne affiancate */
@media (min-width: 900px) {
    .fi-colonne { padding: 26px 24px 30px; }
    .fi-colonne--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fi-colonne--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fi-colonna { gap: 16px; padding: 0 20px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .14); }
    .fi-colonna:first-child { padding-left: 0; border-left: 0; }
    .fi-colonna:last-child { padding-right: 0; }
    .fi-colonne--1 .fi-colonna { max-width: 640px; }
    .fi .fi-valore { font-size: 21px; }
}

/* Computer: immagine a sinistra a tutta altezza, sfumata verso destra */
@media (min-width: 1280px) {
    .fi--immagine .fi-dentro,
    .fi--frase .fi-dentro { grid-template-columns: minmax(250px, 20%) minmax(0, 1fr); }
    .fi-lato { min-height: 0; padding: 32px 32px; }
    .fi--immagine .fi-lato::after { background: linear-gradient(90deg, transparent 45%, var(--fi-fondo) 100%); }
    .fi-colonne { align-self: center; padding: 34px clamp(24px, 3vw, 64px) 34px 28px; }
    .fi:not(.fi--immagine):not(.fi--frase) .fi-colonne { padding-left: clamp(24px, 3vw, 64px); padding-top: 34px; }
    .fi-colonna { gap: 18px; padding: 0 clamp(18px, 1.6vw, 32px); }
    .fi-icona { width: 60px; height: 60px; }
    .fi .fi-titolo { font-size: 21px; }
    .fi .fi-valore { font-size: 23px; }
}