/* ==========================================================================
   SECTION HEADING + RULED ITEM — two units that turned up on a third page.

   `.section-heading` is the TITOLETTI pairing at Medium rather than
   .page-kicker's bold override: 27px red uppercase. Figma draws it on a 44px
   line everywhere except ESG's "COSTRUIAMO VALORE SOSTENIBILE" (38), so 44 is
   the base and that one instance overrides.
     · 82:1158  INTERVENTO                 (progetto detail)
     · 86:409   LE NOSTRE INNOVAZIONI      (ESG)
     · 87:665   I NOSTRI CONTATTI          (Contatti)
     · 104:1170 COSTRUIAMO VALORE SOSTENIBILE (ESG, the 38 case)

   `.ruled-item` is a 21/50 label with a 193px rule under it and body copy
   below — identical on ESG's innovation items and Contatti's address/email
   blocks, down to the 193px rule width and the 8px gap beneath it. The label
   is fixed-width + nowrap because Figma sizes each label box to its own text
   (194/183/227 on ESG) so none of them wrap, while the rule stays 193.
     · 86:425/427/431 + lines 86:371/372/374  (ESG)
     · 87:667/669     + lines 87:661/662      (Contatti)
   ========================================================================== */
.section-heading {
  margin: 0;
  font-weight: 500;
  font-size: var(--fs-titoletti);
  line-height: 44px;
  text-transform: uppercase;
  color: var(--c-accent);
}

.ruled-item__label {
  width: 193px;
  margin: 0;
  font-weight: 400;
  font-size: 21px;
  line-height: 50px;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-rule);
}
.ruled-item__body { margin: 8px 0 0; }

@media (max-width: 768px) {
  /* The fixed label width is only there to pin the rule at the drawn 193px;
     once a column is narrower than that it has to give way. */
  .ruled-item__label { width: 100%; }
}