/* MP Why-Buy - fascia "Perché acquistare" in home (modulo indipendente da mpfeatures).
   Restyle 16/07 (mockup mpwhybuy-restyle.jpeg): stile allineato a mpshippingbanner —
   stessi token brand, card bordata con radius 20px + ombra tenue, titoli maiuscoli blu,
   icone SVG lineari. Card unica a 4 voci con separatori verticali; icona a sinistra.
   Griglia 4 col -> 2x2 (tablet/mobile), sotto 575px icona sopra il testo e voce centrata.
   Namespace mp-why* per non dipendere dal CSS della fascia reassurance (mpfeatures). */

.mp-why {
  padding: 2.5rem 0;
  background: #fff;
  /* stessi valori di mpshippingbanner: le due fasce convivono in home */
  --mp-blue: #084c95;
  --mp-muted: #6a7686;
  --mp-line: #e7ecf3;
  --mp-cardline: #eaeef4;
}

/* ---------- card esterna (come .mp-sb__col) ---------- */
.mp-why__card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--mp-cardline);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(16, 42, 76, .06);
  padding: 1.5rem .5rem;
}

/* ---------- voce: icona a sx + testo a dx, divisori verticali ---------- */
.mp-why__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .35rem 1.25rem;
}
.mp-why__item + .mp-why__item { border-left: 1px solid var(--mp-line); }

.mp-why__icon {
  flex: 0 0 auto;
  color: var(--mp-blue);
  line-height: 0;
}
.mp-why__icon svg { width: 42px; height: 42px; }
/* fallback material-icons (config legacy con nome icona non mappato) */
.mp-why__icon-mi { font-size: 38px; line-height: 1; }

.mp-why__txt { display: flex; flex-direction: column; min-width: 0; }
.mp-why__title {
  font-weight: 800;
  color: var(--mp-blue);
  font-size: .95rem;
  letter-spacing: .2px;
  text-transform: uppercase;
  line-height: 1.2;
}
.mp-why__desc {
  color: var(--mp-muted);
  font-size: .85rem;
  line-height: 1.4;
  margin-top: .3rem;
}

/* ---------- TABLET / MOBILE: 2x2 ---------- */
@media (max-width: 991.98px) {
  .mp-why__card { grid-template-columns: repeat(2, 1fr); padding: 1.25rem .25rem; }
  .mp-why__item { padding: 1rem 1.1rem; }
  /* i divisori seguono la griglia 2x2, non piu' l'ordine dei fratelli */
  .mp-why__item + .mp-why__item { border-left: 0; }
  .mp-why__item:nth-child(even) { border-left: 1px solid var(--mp-line); }
  .mp-why__item:nth-child(n+3) { border-top: 1px solid var(--mp-line); }
}

/* ---------- MOBILE stretto: icona SOPRA il testo, voce centrata ---------- */
@media (max-width: 575.98px) {
  .mp-why { padding: 1.75rem 0; }
  .mp-why__card { border-radius: 16px; }
  .mp-why__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .6rem;
    padding: 1rem .6rem;
  }
  .mp-why__icon svg { width: 36px; height: 36px; }
  .mp-why__icon-mi { font-size: 32px; }
  .mp-why__txt { align-items: center; }
  .mp-why__title { font-size: .82rem; }
  .mp-why__desc { font-size: .78rem; margin-top: .25rem; }
}