/* ==========================================================
   "Perché riparare" — stesso pattern di category-grid
   ========================================================== */

/* La sezione usa già .mz-section (padding var(--s-9) 0) */

/* Grid a 2 colonne, divisore con 1px gap su var(--border) */
.mz-pr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
}

/* Singola card — uguale a .mz-cat */
.mz-pr-card {
  background: var(--paper);
  padding: var(--s-8) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  transition: background var(--d-1) var(--ease);
}

/* Icon — brand red, stile identico a .mz-cat__icon */
.mz-pr-card__icon {
  width: 40px;
  height: 40px;
  color: var(--brand);
  display: grid;
  place-items: center;
}

.mz-pr-card__icon svg,
.mz-pr-card__icon img {
  width: 36px;
  height: 36px;
}

/* Titolo — brand red come i titoli sezione */
.mz-pr-card__title {
  font: 700 var(--t-md)/1.3 var(--ff-ui);
  color: var(--brand);
  letter-spacing: var(--tr-tight);
  margin: 0;
}

/* Testo */
.mz-pr-card__body {
  font: normal var(--t-base)/var(--lh-base) var(--ff-ui);
  color: var(--ink-2);
  margin: 0;
  max-width: 52ch;
}

/* Solo un blocco visibile */
.mz-pr-grid:has(.mz-pr-card:only-child) {
  grid-template-columns: 1fr;
  max-width: 640px;
}

@media (max-width: 680px) {
  .mz-pr-grid {
    grid-template-columns: 1fr;
  }

  .mz-pr-card {
    padding: var(--s-6);
  }
}