/* ---------------------------------------------------------------------------
   Come funziona — four solid-red tiles, single column on mobile, 2-up from
   tablet, matching the live site (not a numbered timeline).

   .ils-heading--center's 62ch cap is meant for the section title (short
   text, never actually reaches it) — this is the only section that pairs
   --center with a long .ils-heading__intro paragraph, and 62ch wrapped it
   to 6 lines instead of the live site's 3. The live site doesn't cap this
   paragraph's width at all, so neither does this override.
   --------------------------------------------------------------------------- */

/* 100%, not none — this still needs the viewport-safety cap the base
   .ils-heading rule provides (see components.css), just not the narrower
   62ch reading-width one .ils-heading--center adds on top of it. */
.how-it-works .ils-heading--center { max-width: 100%; }

/* This band reuses .ils-benefit-card, but the live site ships a different
   radius here (8px, tablet+ padding 16px) than I Benefit del programma's
   15px/25px — and adds a drop shadow the other band doesn't have — so
   it's scoped here rather than folded into the shared default. */
.how-it-works .ils-benefit-card {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 9px 15px -9px rgba(0, 0, 0, 0.5);
}

/* Mobile only. Direct measurement: at 375px this band's own padding
   opens up to 30px (not the 16px that holds from 768px up — confirmed
   unchanged there) and the title matches I Benefit del programma's mobile
   treatment exactly: a flat 32px/bold/line-height-1, not the shared
   clamp() this was inheriting (which bottomed out around 20.6px).

   Bounded at 599px, not 767px: this band's grid switches to 6 tracks at
   600px (below), where cards span 2-4 of them and the narrowest is 168px
   wide. Both values here were measured on a full-width card, and carrying
   them into that multi-column range was the bug behind a title painting
   ~74px outside its card at 600px — 30px of padding left it a 108px box
   for a 212px word. From 600px the tablet padding and the card-relative
   title size in components.css take over. */
@media (max-width: 599px) {
  .how-it-works .ils-benefit-card { padding: 30px; }

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

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

/* Measured on the live site: row 1 (Session di Mentoring / Open innovation)
   is an even 50/50 split, but row 2 is not — Formazione - Consulenze 1 to 1
   is 363px against Workshop & eventi's 727px, a 1:2 ratio, not the 4-equal-
   tile grid this looked like from I Benefit del programma. A 6-column grid
   with explicit spans reproduces both ratios without needing two different
   grids. */
@media (min-width: 600px) {
  .how-it-works__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .how-it-works__grid > li:nth-child(1),
  .how-it-works__grid > li:nth-child(2) { grid-column: span 3; }
  .how-it-works__grid > li:nth-child(3) { grid-column: span 2; }
  .how-it-works__grid > li:nth-child(4) { grid-column: span 4; }
}