/* ==========================================================================
   Sezione 4 — "Perché le certificazioni e i rating sono importanti" (Figma 1070:4215)
   Due colonne su bianco: copy (H2 light con bold + paragrafi + CTA gradiente
   verde) | checklist 5 voci con icona check su gradiente.
   ========================================================================== */

.perche { background: var(--color-surface); }

.perche__inner {
  display: grid;
  grid-template-columns: minmax(0, 770fr) minmax(0, 541fr);
  gap: var(--space-lg);
  align-items: center;
  padding-block: var(--space-section);
}

/* ---- Colonna copy ---- */
.perche__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-text-cta);
}
.perche__head { display: flex; flex-direction: column; gap: 24px; }

.perche__title {
  max-width: 15.5em; /* forza l'a-capo su 3 righe come nel Figma */
  font-size: var(--fs-h2); /* 48px */
  font-weight: var(--fw-light);
  line-height: var(--lh-h2);
  color: var(--color-text);
}
.perche__title strong { font-weight: var(--fw-bold); }

.perche__desc {
  font-size: var(--fs-p22);
  line-height: 1.2;
  color: var(--color-text);
}
.perche__desc p + p { margin-top: 1em; }
.perche__desc strong { font-weight: var(--fw-bold); }

/* CTA pill con gradiente verde (Figma "Gradient-Sustainability") */
.btn--grad-esg {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border-radius: var(--radius-pill);
  background: linear-gradient(174.65deg, #5ee38d 0%, #00a86b 100%);
  color: #fff;
  font-size: var(--fs-h3); /* 32px */
  font-weight: var(--fw-semibold);
  line-height: 1;
  transition: filter 0.2s ease;
}
.btn--grad-esg:hover { filter: brightness(1.05); }
.btn--grad-esg .btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 19px;
  background: rgba(237, 237, 237, 0.3);
  color: #fff;
}
.btn--grad-esg .btn__arrow svg { width: 24px; height: 24px; }

/* ---- Colonna checklist ---- */
.perche__list { display: flex; flex-direction: column; }
.perche__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 14px;
  font-size: var(--fs-p22);
  line-height: 1.2;
  color: var(--color-text);
}
.perche__item-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 16px;
  background: linear-gradient(157.26deg, #5ee38d 0%, #00a86b 100%);
  color: #fff;
}
.perche__item-ic svg { width: 19px; height: 19px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .perche__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 720px) {
  .perche__inner { gap: 32px; }
  .perche__desc { line-height: 1.45; }
  .perche__item { line-height: 1.35; }
}

@media (max-width: 480px) {
  .btn--grad-esg { font-size: var(--fs-p22); padding: 16px 20px; }
  .perche__item { font-size: var(--fs-body); padding-block: 10px; }
}