/* ==========================================================================
   ESG — Figma 86:317 ("ESG v2"), y=809–4014.

   Mostly assembled from components that already existed; this file only holds
   what Figma genuinely draws differently. Reused verbatim, no CSS here:
     · .page-hero + __wash/__caption/__title  (686h, 108px caption inset —
       identical to the Servizi and Progetti hubs)
     · .breadcrumb, .page-kicker
     · .grid-2 / .grid-split
     · .values / __list / __row / __title / __desc — the ESG row bands measure
       143/138/140, inside the 138–143 range value-list.css was already built
       for, so the bordered list drops straight in
     · .featured-project (797px band, right-pinned panel) — only the panel's
       kicker type differs, overridden below
     · .aec-btn, and the 7 certification marks already in assets/icons
   No CTA band: the footer starts at 4014 and ends at 4554 = the frame height.
   ========================================================================== */
.esg-page {
  padding-top: 64px;   /* measured: hero bottom (809) → crumb top (873) */
}

/* --- Intro: kicker over a heading / paragraph split ----------------------- */
.esg-page__kicker { margin: 0 0 20px; }   /* kicker box bottom (1009) → heading top (1029) */
.esg-page__heading { margin: 0; max-width: 522px; }   /* Figma wraps it to 3 lines at 522 */
/* Figma drops the paragraph 13px below the heading beside it (1042 vs 1029) —
   optical alignment again, their line boxes being 45px and 30px. */
.esg-page__copy { margin: 13px 0 0; }

/* --- "Costruiamo valore sostenibile" ------------------------------------- */
.esg-values { padding-top: var(--space-120); }   /* intro bottom (1164) → heading top (1284) */
.esg-values .section-heading {
  line-height: var(--lh-titoletti);   /* 38 — the one instance Figma draws shorter than the shared 44 (104:1170) */
  margin-bottom: 37px;                /* heading box bottom (1322) → top rule (1359) */
}

/* .values brings its own --space-120 top/bottom padding, which this section
   already supplies — zero it so the rules land on their measured y. */
.esg-values .values { padding: 0; }

/* Figma draws these descriptions in a 628px box and they wrap to two lines,
   which is what makes the row bands 138–143 tall. At exactly 1440 the
   .grid-split fallback in base.css hands the right track 758px instead of the
   design's 628 (the fixed tracks only apply above 1440), so uncapped they pull
   onto one line and every rule below rides up ~18px per row. */
.esg-values .values__desc { max-width: var(--col-2); }

/* --- Sustainability report download -------------------------------------- */
/* A single label + PULSANTE row confined to the right half, not the full-width
   bordered list Chi Siamo uses — so it borrows .aec-btn but not .downloads. */
.esg-report {
  max-width: var(--col-2);
  margin-left: auto;   /* Figma confines this row to the right column (x=732) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 57px;   /* measured: closing rule (1780) → label top (1837) */
}
.esg-report__label { margin: 0; text-transform: uppercase; }

/* --- Certifications ------------------------------------------------------
   Two centred rows of marks, each with its own download link underneath.
   Distinct from the homepage's .partners marquee, which shows the same eight
   images scrolling and without links. Figma's gaps run 66 on the first row
   and 57/73 on the second (hand-placed, differently sized logos); one 66px
   gap reproduces both rows' spans to within 3px. Items align on their
   bottoms so the links form a straight row despite the marks differing in
   height by up to 9px. */
.esg-certs { margin-top: 179px; }   /* measured: report row bottom (1859) → first mark top (2038) */
.esg-certs__row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 66px;
}
.esg-certs__row + .esg-certs__row { margin-top: 85px; }   /* link row bottom (2254) → next marks (2339) */
.esg-cert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 31px;   /* measured: mark bottom (2201) → link top (2232) */
}
.esg-cert__mark { display: block; }

/* --- Featured project ----------------------------------------------------
   .featured-project verbatim; only the panel kicker and the band's own
   spacing differ. The component carries margin-bottom: --space-120 for the
   homepage's rhythm, but here Figma runs 175px above the band and only 80
   below it, so the built-in gap is moved to the top. */
.esg-page .featured-project {
  margin-top: 166px;   /* measured: last download row (2512) → band top (2687) */
  margin-bottom: 0;
}
/* The panel also sits 3px higher and is padded tighter at the top than the
   homepage's (kicker at +25 from the panel edge, not +40). */
.esg-page .featured-project__panel { top: 80px; padding-top: 25px; }
/* pale grey here against the homepage's 21/500/25 tortora. */
.esg-page .featured-project__kicker {
  margin: 0 0 17px;
  font-size: 18px;
  line-height: 44px;
  color: #d1d1d1;
}

/* --- "Le nostre innovazioni" ---------------------------------------------
   Heading over a .grid-2: lead sentence left, three items right on their own
   2-up grid. The inner grid is narrower than its column — Figma runs the two
   tracks 199px wide with a 128px gutter, stopping ~108px short of the
   container's right edge rather than filling it. */
.esg-innov { padding: 80px 0 74px; }   /* featured bottom (3484) → heading (3564); last desc (3940) → footer (4014) */
/* This heading sits on a 44px line where the one above it is 38. */
.esg-innov__heading { line-height: 44px; }
.esg-innov__lead { margin: 24px 0 0; max-width: 406px; }
/* Both halves are grid items and would otherwise stretch to the taller one,
   which cascades: the stretched inner grid then stretches its own rows and
   pushes the footer ~80px down. Neither needs to fill the row. */
.esg-innov .grid-2 { align-items: start; }

.esg-innov__grid {
  margin-top: 12px;   /* Figma starts the items 12px above the lead (3620 vs 3632) */
  display: grid;
  grid-template-columns: repeat(2, 199px);
  column-gap: 128px;
  row-gap: 49px;
  align-content: start;
}

@media (max-width: 1024px) {
  .esg-values { padding-top: var(--space-100); }
  .esg-certs { margin-top: 72px; }
  .esg-certs__row { flex-wrap: wrap; gap: 40px; }
  .esg-certs__row + .esg-certs__row { margin-top: 40px; }
  .esg-innov { padding: 56px 0 60px; }
  .esg-innov__lead { max-width: none; }
  /* The inner grid's fixed 199px tracks would leave the column half empty
     once it is the full width. */
  .esg-innov__grid { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .esg-report { margin-top: 40px; }
}
@media (max-width: 768px) {
  .esg-page { padding-top: 40px; }
  .esg-innov__grid { grid-template-columns: 1fr; row-gap: 32px; }
  .esg-report { flex-direction: column; align-items: flex-start; gap: 12px; }
}