/* ==========================================================================
   MF ICON BOX - STANDARD PROFESSIONALE (CLEAN SPECIFICITY)
   ========================================================================== */

.mf-icon-box {
    display: flex;
    box-sizing: border-box;
    margin-bottom: 1.5em;
    padding: 15px 0;
}

.mf-icon-box *, 
.mf-icon-box *::before, 
.mf-icon-box *::after {
    box-sizing: border-box;
}

.mf-icon-box .mf-icon-wrapper svg { 
    width: 100%; 
    height: 100%; 
    display: block; 
}

.mf-icon-box .mf-icon-wrapper svg path, 
.mf-icon-box .mf-icon-wrapper svg circle, 
.mf-icon-box .mf-icon-wrapper svg rect, 
.mf-icon-box .mf-icon-wrapper svg polygon { 
    fill: currentcolor; 
}

.mf-icon-box .mf-text-wrapper {
    flex: 1;
}

.mf-icon-box .mf-icon-box-title { 
    margin: 0 0 8px 0; 
    text-wrap: balance;
}

.mf-icon-box .mf-icon-box-content { 
    margin: 0; 
    line-height: 1.6; 
    text-wrap: balance;
}

/* ==========================================================================
   CLASSI DINAMICHE DI POSIZIONAMENTO (FLEX STANDARD)
   ========================================================================== */

.mf-icon-box.mf-position-left { flex-direction: row; justify-content: flex-start; }
.mf-icon-box.mf-position-left .mf-icon-wrapper { margin-right: 20px; flex-shrink: 0; }
.mf-icon-box.mf-position-left .mf-text-wrapper { text-align: left; }

.mf-icon-box.mf-position-right { flex-direction: row; justify-content: flex-end; }
.mf-icon-box.mf-position-right .mf-icon-wrapper { margin-left: 20px; flex-shrink: 0; }
.mf-icon-box.mf-position-right .mf-text-wrapper { text-align: right; }

/* ==========================================================================
   VARIANTI GRID: IN LINEA SOLO COL TITOLO (Sottotitolo a capo full-width)
   ========================================================================== */

.mf-icon-box.mf-position-left-title-only,
.mf-icon-box.mf-position-right-title-only {
    display: grid;
    align-items: center; /* Allinea verticalmente di default */
}

/* Promuoviamo i testi a elementi diretti della griglia */
.mf-icon-box.mf-position-left-title-only .mf-text-wrapper,
.mf-icon-box.mf-position-right-title-only .mf-text-wrapper {
    display: contents; 
}

/* LEFT TITLE ONLY */
.mf-icon-box.mf-position-left-title-only {
    grid-template-columns: max-content 1fr;
    gap: 8px 15px; /* 8px tra righe, 15px tra colonne */
}
.mf-icon-box.mf-position-left-title-only .mf-icon-wrapper {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}
.mf-icon-box.mf-position-left-title-only .mf-icon-box-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    text-align: left;
}
.mf-icon-box.mf-position-left-title-only .mf-icon-box-content {
    grid-column: 1 / 3; /* Prende entrambe le colonne! */
    grid-row: 2;
    margin: 0;
    text-align: left;
}

/* RIGHT TITLE ONLY */
.mf-icon-box.mf-position-right-title-only {
    grid-template-columns: 1fr max-content;
    gap: 8px 15px;
}
.mf-icon-box.mf-position-right-title-only .mf-icon-box-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    text-align: right;
}
.mf-icon-box.mf-position-right-title-only .mf-icon-wrapper {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}
.mf-icon-box.mf-position-right-title-only .mf-icon-box-content {
    grid-column: 1 / 3;
    grid-row: 2;
    margin: 0;
    text-align: right;
}

/* GESTIONE VERTICAL ALIGN */
.mf-icon-box.mf-valign-top { align-items: flex-start; }
.mf-icon-box.mf-valign-center { align-items: center; }
.mf-icon-box.mf-valign-bottom { align-items: flex-end; }

/* POSIZIONAMENTI VERTICALI GLOBALI (SOPRA/SOTTO) */
.mf-icon-box.mf-position-top-left { flex-direction: column; align-items: flex-start; }
.mf-icon-box.mf-position-top-left .mf-icon-wrapper { margin-bottom: 15px; }
.mf-icon-box.mf-position-top-left .mf-text-wrapper { text-align: left; }

.mf-icon-box.mf-position-top-center { flex-direction: column; align-items: center; }
.mf-icon-box.mf-position-top-center .mf-icon-wrapper { margin-bottom: 15px; }
.mf-icon-box.mf-position-top-center .mf-text-wrapper { text-align: center; }

.mf-icon-box.mf-position-bottom-left { flex-direction: column; align-items: flex-start; }
.mf-icon-box.mf-position-bottom-left .mf-icon-wrapper { margin-top: 15px; }
.mf-icon-box.mf-position-bottom-left .mf-text-wrapper { text-align: left; }

.mf-icon-box.mf-position-bottom-center { flex-direction: column; align-items: center; }
.mf-icon-box.mf-position-bottom-center .mf-icon-wrapper { margin-top: 15px; }
.mf-icon-box.mf-position-bottom-center .mf-text-wrapper { text-align: center; }

/* ==========================================================================
   MOBILE FALLBACK (Impilato)
   ========================================================================== */
@media (max-width: 767px) {
    /* Override per tutte le versioni affiancate (Flex e Grid) */
    .mf-icon-box.mf-mobile-stacked.mf-position-left, 
    .mf-icon-box.mf-mobile-stacked.mf-position-right,
    .mf-icon-box.mf-mobile-stacked.mf-position-left-title-only,
    .mf-icon-box.mf-mobile-stacked.mf-position-right-title-only {
        display: flex; /* Forza Flexbox su mobile al posto di Grid */
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .mf-icon-box.mf-mobile-stacked .mf-text-wrapper {
        display: block; /* Annulla il display: contents per ritornare standard */
    }

    .mf-icon-box.mf-mobile-stacked .mf-icon-wrapper {
        margin: 0 0 15px 0 !important;
    }
    
    .mf-icon-box.mf-mobile-stacked .mf-text-wrapper,
    .mf-icon-box.mf-mobile-stacked .mf-icon-box-title,
    .mf-icon-box.mf-mobile-stacked .mf-icon-box-content {
        text-align: center !important;
    }
}

/* ==========================================================================
   EFFETTI SUI LINK NEL TESTO
   ========================================================================== */
.mf-icon-box .mf-text-wrapper a,
.mf-icon-box .mf-icon-box-content a {
    text-decoration: none;
    /* color: #AF1920; */
    font-weight: 600;
    position: relative;
    transition: color 0.3s ease;
}

.mf-icon-box .mf-text-wrapper a::after,
.mf-icon-box .mf-icon-box-content a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #111111;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.mf-icon-box .mf-text-wrapper a:hover,
.mf-icon-box .mf-icon-box-content a:hover { color: #111111; }

.mf-icon-box .mf-text-wrapper a:hover::after,
.mf-icon-box .mf-icon-box-content a:hover::after { transform: scaleX(1); }

/* ==========================================================================
   OVERRIDE DIMENSIONI FONT
   ========================================================================== */
.mf-icon-box :is(h1, h2, h3, h4, h5, h6, p, div, span).has-small-font-size { font-size: 1rem; } 
.mf-icon-box :is(h1, h2, h3, h4, h5, h6, p, div, span).has-normal-font-size { font-size: 1.25rem; } 
.mf-icon-box :is(h1, h2, h3, h4, h5, h6, p, div, span).has-medium-font-size { font-size: 1.75rem; } 
.mf-icon-box :is(h1, h2, h3, h4, h5, h6, p, div, span).has-large-font-size { font-size: 2.25rem; } 
.mf-icon-box :is(h1, h2, h3, h4, h5, h6, p, div, span).has-huge-font-size { font-size: 3rem; }