/*
 * Stili per il template "default" della pagina sostenibilita (sezione sostenibilita-landing).
 * Portati da public/mockups/sostenibilita-landing/style.css e prefissati con
 * .sostenibilita-landing per non interferire con gli stili globali del tema
 * (che usa gia' selettori generici come h2, img, .btn, body).
 */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,800,800i);
@import url(https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;500;600;700&display=swap);

.sostenibilita-landing {
  --sl-green-light: #30aa53;
  --sl-green-dark: #02662f;
  --sl-orange: #c08200;
  --sl-red: #c0004a;
  --sl-gray-tint: rgba(217, 217, 217, 0.35);
  --sl-orange-tint: rgba(192, 130, 0, 0.05);
  --sl-green-tint: rgba(48, 170, 83, 0.1);
  --sl-max-width: 1200px;

  font-family: "Open Sans", sans-serif;
  color: #1a1a1a;
  background: #fff;
}

.sostenibilita-landing * { box-sizing: border-box; }

.sostenibilita-landing h2 {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  margin: 0 0 24px;
  font-size: 40px;
  text-transform: uppercase;
}
.sostenibilita-landing h2 em { font-style: italic; font-weight: 700; }

.sostenibilita-landing p,
.sostenibilita-landing ul,
.sostenibilita-landing ol,
.sostenibilita-landing li { line-height: 1.55; font-size: 18px; }

.sostenibilita-landing ul,
.sostenibilita-landing ol { padding-left: 24px; }

.sostenibilita-landing h3,
.sostenibilita-landing h4 {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  margin: 24px 0 12px;
}
.sostenibilita-landing h3 { font-size: 28px; }
.sostenibilita-landing h4 { font-size: 22px; }

.sostenibilita-landing img { max-width: 100%; display: block; }

/* Testo dopo <hr> nel blocco descrizione: nascosto finche' non si clicca "Scopri di più" */
.sostenibilita-landing .sostenibilita-landing-more { display: none; padding: 0 24px 32px; }
.sostenibilita-landing .sostenibilita-landing-more.is-visible { display: block; }
/* dentro pillar/feature/cta-final (grid a 2 colonne) occupa tutta la larghezza */
.sostenibilita-landing .pillar > .sostenibilita-landing-more,
.sostenibilita-landing .feature > .sostenibilita-landing-more,
.sostenibilita-landing .cta-final > .sostenibilita-landing-more {
  grid-column: 1 / -1;
  padding: 0;
}
/* riduce lo spazio tra il testo del blocco e il bottone (invece del margine
   di default del browser sull'ultimo <p>) */
.sostenibilita-landing .pillar__content p:last-of-type,
.sostenibilita-landing .feature__content p:last-of-type,
.sostenibilita-landing .cta-final__content p:last-of-type {
  margin-bottom: 2rem;
}

.sostenibilita-landing a.btn {
  display: inline-block;
  box-sizing: border-box;
  margin: 12px 0 0;
  padding: 16px 32px;
  border-radius: 3px;
  border: 3px solid transparent;
  font-family: "Josefin Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.5px;
  vertical-align: baseline;
  background-color: transparent;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transition: none;
}
.sostenibilita-landing a.btn--outline-orange { border-color: var(--sl-orange); color: var(--sl-orange); }
.sostenibilita-landing a.btn--outline-white   { border-color: #fff; color: #fff; }
.sostenibilita-landing a.btn--outline-darkgreen { border-color: var(--sl-green-dark); color: var(--sl-green-dark); }
.sostenibilita-landing a.btn--outline-green { border-color: var(--sl-green-light); color: var(--sl-green-light); }
.sostenibilita-landing a.btn--fill-green {
  background: var(--sl-green-light);
  border-color: var(--sl-green-light);
  color: #fff;
}

/* Intro */
.sostenibilita-landing .intro {
  max-width: var(--sl-max-width);
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
}
.sostenibilita-landing .intro__icon { width: 60px; margin-bottom: 16px; }
.sostenibilita-landing .intro__eyebrow {
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  font-size: 16px;
  opacity: 0.66;
  margin: 0 0 12px;
}
.sostenibilita-landing .intro__title {
  color: var(--sl-green-light);
  font-size: 38px;
  text-transform: none;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  margin: 0 0 24px;
}

@media (max-width: 900px) {
  .sostenibilita-landing .intro { grid-template-columns: 1fr; }
}

/* Pillar sections (Culturale / Sociale / Ambientale) */
.sostenibilita-landing .pillar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 24px 24px;
}
.sostenibilita-landing .pillar__media img { border-radius: 4px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); width: 100%; height: 480px; object-fit: cover; margin-top: -8rem }
/* come da Figma (nodo 5-363): l'immagine della sezione Sociale e' piu' alta
   e sfonda di 20px oltre il bordo superiore del box rosso. align-self:start
   ancora il contenitore all'inizio della riga (invece del centraggio della
   grid, che dipenderebbe dall'altezza del testo) cosi' il margine negativo
   e' un valore fisso e prevedibile: -(padding-top della section, 64px + 20px
   di sfondamento) = -84px. */
.sostenibilita-landing .pillar--sociale .pillar__media {
  align-self: start;
}
.sostenibilita-landing .pillar--sociale .pillar__media img {
  height: 560px;
  margin-top: -84px;
}
.sostenibilita-landing .pillar__content { max-width: 560px; padding-bottom: 3rem; }
.sostenibilita-landing .pillar--culturale { background: var(--sl-orange-tint); padding-bottom: 12rem; }
.sostenibilita-landing .pillar--culturale h2 { color: var(--sl-orange); }
.sostenibilita-landing .pillar--sociale { background: var(--sl-red); color: #fff; padding-bottom: 8rem; }
.sostenibilita-landing .pillar--sociale h2 { color: #fff; }
.sostenibilita-landing .pillar--ambientale { background: var(--sl-green-tint); }
.sostenibilita-landing .pillar--ambientale h2 { color: var(--sl-green-dark); }

@media (max-width: 900px) {
  .sostenibilita-landing .pillar { grid-template-columns: 1fr; }
  .sostenibilita-landing .pillar--sociale .pillar__media { order: -1; }
}

/* Feature rows (make the difference / accessibile / migliorare / clima) */
.sostenibilita-landing .feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 72px 24px;
  max-width: var(--sl-max-width);
  margin: 0 auto;
}
.sostenibilita-landing .feature--gray { max-width: none; background: var(--sl-gray-tint); }
.sostenibilita-landing .feature--gray > * { max-width: calc(var(--sl-max-width) / 2 - 24px); }
/* Composizione presa dalle coordinate reali di Figma (nodo 5-506 e gruppi
   icona/immagini delle 4 sezioni feature): l'immagine piccola sta in alto a
   sinistra, quella grande in basso a destra e si sovrappongono leggermente;
   l'icona sta sopra l'immagine piccola. Percentuali calcolate su un
   contenitore di riferimento 581x607 (misure Figma). */
.sostenibilita-landing .feature__media {
  position: relative;
  width: 100%;
  aspect-ratio: 581 / 607;
}
.sostenibilita-landing .feature__img { border-radius: 4px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); object-fit: cover; position: absolute; }
.sostenibilita-landing .feature__img--big {
  right: 0;
  bottom: 0;
  width: 52%;
  height: 87.5%;
}
.sostenibilita-landing .feature__img--small {
  left: 0;
  top: 35.6%;
  width: 55.8%;
  height: 64.4%;
  margin-top:3rem;
}
.sostenibilita-landing .feature__icon {
  position: absolute;
  left: 13.6%;
  top: 0;
  width: 100px;
  z-index: 1;
  margin-top: 4rem;
}
.sostenibilita-landing .feature__content h2 { color: var(--sl-green-light); }

@media (max-width: 900px) {
  .sostenibilita-landing .feature,
  .sostenibilita-landing .feature--gray { grid-template-columns: 1fr; }
  .sostenibilita-landing .feature--gray > * { max-width: 100%; }
}

/* Numbers */
.sostenibilita-landing .numbers {
  position: relative;
  padding: 96px 24px;
  color: #fff;
  overflow: hidden;
}
.sostenibilita-landing .numbers__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.sostenibilita-landing .numbers__overlay {
  position: absolute;
  inset: 0;
  background: rgba(2, 102, 47, 0.55);
  z-index: 1;
}
.sostenibilita-landing .numbers__content {
  position: relative;
  z-index: 2;
  max-width: var(--sl-max-width);
  margin: 0 auto;
  text-align: center;
}
.sostenibilita-landing .numbers__content h2 { color: #fff; }
.sostenibilita-landing .numbers__row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sostenibilita-landing .numbers__track {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 8px 4px;
}
.sostenibilita-landing .numbers__track::-webkit-scrollbar { display: none; }
.sostenibilita-landing .numbers__stat {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
}
.sostenibilita-landing .numbers__track { scroll-snap-type: x proximity; }
.sostenibilita-landing .numbers__icon { width: 64px; margin: 0 auto 12px; }
.sostenibilita-landing .numbers__value {
  display: block;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  font-size: 48px;
}
.sostenibilita-landing .numbers__stat p { font-size: 15px; font-weight: 600; }
.sostenibilita-landing .numbers__arrow {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex: 0 0 auto;
}
.sostenibilita-landing .numbers__arrow img { width: 32px; }

/* Showcase / banner */
.sostenibilita-landing .showcase,
.sostenibilita-landing .banner {
  max-width: var(--sl-max-width);
  margin: 48px auto;
  padding: 0 24px;
}
.sostenibilita-landing .showcase img,
.sostenibilita-landing .banner img { border-radius: 4px; width: 100%; object-fit: cover; }

/* Final CTA */
.sostenibilita-landing .cta-final {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  max-width: var(--sl-max-width);
  margin: 0 auto;
  padding: 72px 24px;
}
.sostenibilita-landing .cta-final__img { border-radius: 4px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); height: 420px; width: 100%; object-fit: cover; }
.sostenibilita-landing .cta-final__icon { width: 90px; margin-bottom: 16px; }
.sostenibilita-landing .cta-final__content h2 { color: var(--sl-green-light); }

@media (max-width: 900px) {
  .sostenibilita-landing .cta-final { grid-template-columns: 1fr; }
}

/* Paragrafo 10: sezione di solo testo, senza immagine (il titolo e' gia' nel content) */
.sostenibilita-landing .text-block {
  max-width: var(--sl-max-width);
  margin: 0 auto;
  padding: 48px 24px;
}

/* Paragrafo 11: sezione pillar aggiuntiva, tinta neutra per non confondersi con
   le 3 pillar tematiche esistenti (culturale/sociale/ambientale) */
.sostenibilita-landing .pillar--extra {
  background: var(--sl-gray-tint);
  padding-top: 6rem;
  padding-bottom: 3rem;
}
.sostenibilita-landing .pillar--extra h2 { color: var(--sl-green-dark); }