/* ---------------------------------------------------------------------------
   I Benefit del programma — 3-up from tablet, matching the live site. Live
   has no 2-up intermediate stage at all: confirmed a single column at
   767px and already the full 3-column grid at 768px (the design system's
   general grid rule says 4-up, but this specific band ships 3 columns of
   unequal-height cards, so the live layout wins here).

   Background is the same flat rgb(228, 221, 208) as Corporate Partners —
   measured directly on the section element, not the shared --surface-page.
   --------------------------------------------------------------------------- */

.benefits { background: rgb(228, 221, 208); }

.benefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Gap measured on the live site at tablet: a flat 20px, tighter than the
   shared --grid-gutter (24px) used everywhere else. */
@media (min-width: 768px) and (max-width: 1024px) {
  .benefits__grid { gap: 20px; }
}

/* Mobile only, this section specifically (not "Come funziona", which
   already scopes its own smaller 16px/8px padding). Direct measurement on
   the live site: the shared .ils-benefit-card rules were sized for a much
   roomier card than this band's mobile cards actually are — 46px padding
   and a clamp() bottoming out around 20.6px for the title — while live
   runs 25px padding and a flat 32px/bold/line-height-1 title (at 335px
   viewport content width). Body size is handled by the shared
   .ils-benefit-card__body rule in components.css, since Come funziona's
   cards turned out to need the same 15px. Scoped by section since the
   shared class is also used by "Come funziona" with different live
   padding/title numbers of its own. */
@media (max-width: 767px) {
  .benefits .ils-benefit-card { padding: 25px; }

  .benefits .ils-benefit-card__title {
    font-size: 32px;
    line-height: 1;
  }
}