/* ==========================================================================
   ESG E INNOVAZIONE — Figma homepage 177:2448, y=3733–4604
   Kicker + H2/body 2-col intro (mirrors home-about's grid-split) + a
   beige-tinted showcase panel: photo on the left, three icon+text rows on
   the right, each vertically centered against its own text block.
   ========================================================================== */
.esg {
  padding-bottom: var(--space-120);   /* gap to certifications: measured ~127 */
}

.esg__kicker { margin: 0 0 var(--space-40); }  /* measured: kicker bottom (3771) → lead top (3807) = 36 */

.esg__lead { margin: 0; }   /* t-h2-small, wraps naturally inside the 413px rail */

.esg__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);       /* measured: paragraph → link = 34 */
}
.esg__copy p { margin: 0; }

/* --- Showcase panel ------------------------------------------------------ */
.esg-showcase {
  display: flex;
  margin-top: var(--space-40);   /* measured: link bottom (3953) → panel top (3993) = 40 exact */
  background: rgba(232, 228, 224, .5);  /* --aec-beige at 50% */
  border-radius: var(--radius-frame);
  overflow: hidden;
}
.esg-showcase__media {
  flex: 0 0 624px;
  align-self: stretch;
}
.esg-showcase__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.esg-showcase__features {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;                  /* measured: identical 40px gap between all 3 rows */
  padding: 40px 40px 40px 88px;   /* measured: 88 image→icon, 40 elsewhere (space-40) */
}

.esg-feature {
  display: flex;
  align-items: center;        /* icon is vertically centered against the text block */
  gap: 64px;
}
/* Fixed-width column, not a fixed gap after the icon — the three icons are
   74/95/88px wide but the text column still starts at the same x in Figma,
   so the icon must be left-aligned inside a shared 95px (max-icon-width)
   slot rather than the gap absorbing the size difference. */
.esg-feature__icon-wrap { flex: 0 0 95px; }
.esg-feature__icon-wrap img { display: block; }

.esg-feature__title { margin: 0 0 24px; }
.esg-feature__desc { margin: 0; }

/* No tablet/mobile frame exists for this section — derived, same reasoning
   as featured-project: the overlay/side-by-side layout doesn't have room,
   so it stacks instead. */
@media (max-width: 1024px) {
  .esg-showcase { flex-direction: column; }
  .esg-showcase__media { flex: none; height: 280px; }
  .esg-showcase__features { padding: var(--space-40) var(--pad-x); }
}
@media (max-width: 768px) {
  .esg-feature { gap: 24px; }
}