/* =========================================================
   LA STORIA  (pagina 182)  -  storia.css
   Riproduce "Reginato - La Storia - Desktop 1440".

   Struttura (classi gia' presenti nella pagina Divi):
     .hero_azienda                 > .row_azienda          hero con foto e titolo
     .Sezione_le_nostre_radici     > .Riga_le_nostre_radici    1971 | La Storia
     .Sezione_nostro_impegno       > .Riga_nostro_impegno      Gli obbiettivi
     .Sezione_qualita              > .Riga_qualita             Qualita' e attestazioni
     .sezione_parliamone_insieme                           (gia' in style.css)

   Classe da AGGIUNGERE in Divi: .hero_breadcrumb (vedi note in fondo).

   Va caricato DOPO style.css. Sostituisce azienda.css (stessa pagina, id 182).
   ========================================================= */

/* ---------------------------------------------------------
   Scala: tutte le misure sono in vw rispetto al mockup a 1440px
   (es. 60px a 1440 = 4.17vw), con tetto a 2560px (x1.78), cosi' su
   monitor grandi la pagina cresce in proporzione invece di restare piccola.
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Variabili della pagina (colori misurati sul PDF)
   --------------------------------------------------------- */
:root{
  --st-navy: #152c72;
  --st-rosso: #f01824;
  --st-testo: #596174;
  --st-azzurro: #e9f7fd;
  --st-linea: #dde2ec;
  --st-font: 'Inter', var(--font, 'Montserrat'), Helvetica, Arial, sans-serif;
}

/* Margini laterali del mockup: 80px a 1440 (= 88.9%). Vale per tutta la pagina,
   cosi' header, contenuti e footer restano sulla stessa linea. */
@media (min-width: 768px){
  :root{ /* --riga-w: ora unico, definito in style.css */ }
}

/* Qualsiasi riga della pagina (corpo e footer) = stessa larghezza del resto del sito */
body.page-id-182 .et_pb_section .et_pb_row,
body.page-id-182 .et-l--footer .et_pb_section .et_pb_row{
  box-sizing: border-box !important;
  width: var(--riga-w, 86%) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Righe a larghezza standard */
.et_pb_section .et_pb_row:is(.row_azienda, .Riga_le_nostre_radici,
  .Riga_nostro_impegno, .Riga_qualita){
  width: var(--riga-w) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

/* Font e reset dei testi in tutte le sezioni della pagina */
.et_pb_section:is(.hero_azienda, .Sezione_le_nostre_radici,
  .Sezione_nostro_impegno, .Sezione_qualita) :is(div, h1, h3, p){
  font-family: var(--st-font);
}
.et_pb_section:is(.hero_azienda, .Sezione_le_nostre_radici,
  .Sezione_nostro_impegno, .Sezione_qualita) .et_pb_text_inner{
  padding: 0 !important;
}

/* Div vuoti lasciati dal copia/incolla: nascosti */
.et_pb_section:is(.Sezione_le_nostre_radici, .Sezione_nostro_impegno, .Sezione_qualita)
  .et_pb_text_inner > div:empty{ display: none; }


/* =========================================================
   1. HERO
   Foto = sfondo della sezione (impostata in Divi).
   Velo blu a sinistra che sfuma verso destra.
   ========================================================= */
.et_pb_section.hero_azienda{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 0 !important;
  min-height: clamp(380px, 44.44vw, 1140px) !important;  /* 640px a 1440 */
  background-color: var(--st-navy);
  background-size: cover !important;
  background-position: right center !important;
}

/* Velo: pieno fino al 37%, poi sfuma sulla foto */
.hero_azienda::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg,
    rgba(21,44,114,1) 0%,
    rgba(21,44,114,1) 37.5%,
    rgba(21,44,114,.62) 62.5%,
    rgba(21,44,114,.34) 100%);
  pointer-events: none;
}
/* Riflesso diagonale chiaro (alto, verso il 60-62%) */
.hero_azienda::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255,255,255,.07);
  clip-path: polygon(62.5% 0, 64.2% 0, 57.3% 33%, 55.6% 33%);
  pointer-events: none;
}

.et_pb_section.hero_azienda .et_pb_row.row_azienda{
  position: relative;
  padding-top: clamp(96px, 12.85vw, 330px) !important;   /* barra rossa a 185px a 1440 */
}
/* La colonna NON deve essere il riferimento del breadcrumb (absolute):
   altrimenti il breadcrumb parte da sotto il padding della riga e si sovrappone al titolo */
.row_azienda > .et_pb_column{
  position: static !important;
  gap: 0 !important;
}

/* Titolo */
.hero_azienda .tit1{
  font-size: clamp(30px, 4.17vw, 107px);                 /* 60px a 1440 */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: #fff;
}
.hero_azienda .tit1::before{                             /* barra rossa */
  content: "";
  display: block;
  width: clamp(36px, 3.33vw, 85px);
  height: clamp(3px, .28vw, 7px);
  margin-bottom: clamp(14px, 1.32vw, 34px);
  background: var(--st-rosso);
}
.hero_azienda .tit2{
  margin-top: clamp(14px, 1.46vw, 37px);
  font-size: clamp(18px, 2.78vw, 71px);                  /* 40px a 1440 */
  font-weight: 400;
  line-height: 1.2;
  color: #fff;
}

/* Breadcrumb (modulo Testo con classe hero_breadcrumb, NUOVO) */
.row_azienda .hero_breadcrumb{
  position: absolute;
  top: clamp(28px, 2.5vw, 64px);
  left: 0;
  margin: 0 !important;
  z-index: 2;
}
.hero_breadcrumb,
.hero_breadcrumb :is(p, a, span){
  font-family: var(--st-font);
  font-size: clamp(13px, .972vw, 25px);                  /* 14px a 1440 */
  line-height: 1.4;
  color: #fff !important;
  text-decoration: none;
}
.hero_breadcrumb p{ margin: 0 !important; padding: 0 !important; }
.hero_breadcrumb a:hover{ text-decoration: underline; }


/* =========================================================
   2. LE NOSTRE RADICI  |  LA STORIA
   ========================================================= */
.et_pb_section.Sezione_le_nostre_radici{
  background: #fff !important;
  padding: clamp(52px, 6.67vw, 171px) 0 clamp(64px, 9.375vw, 240px) !important;
}

.Sezione_le_nostre_radici .et_pb_row.Riga_le_nostre_radici{
  display: grid !important;
  grid-template-columns: 34% minmax(0, 1fr);
  column-gap: 0;
  align-items: start;
}
.Riga_le_nostre_radici > .et_pb_column{
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  grid-area: auto !important;
  gap: 0 !important;
}
.Riga_le_nostre_radici > .et_pb_column:last-child{ padding-right: 0 !important; }

/* Colonna sinistra */
.radici_tit,
.obbiettivi_tit,
.qualita_tit{
  font-size: clamp(12px, .972vw, 25px);                  /* 14px a 1440 */
  font-weight: 700;
  line-height: 1.3;
  color: var(--st-rosso);
}
.radici_anno{
  margin-top: 1.46vw;
  padding-left: 1.8vw;
  border-left: clamp(3px, .28vw, 7px) solid var(--st-rosso);
  font-size: clamp(64px, 8.33vw, 213px);                 /* 120px a 1440 */
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.03em;
  color: var(--st-navy);
}
.radici_text{
  margin-top: 1.53vw;
  font-size: clamp(14px, 1.11vw, 28px);                  /* 16px a 1440 */
  line-height: 1.5;
  color: var(--st-testo);
}

/* Colonna destra */
.Riga_le_nostre_radici h1.et_pb_module_header{
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(34px, 3.33vw, 85px);                  /* 48px a 1440 */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--st-navy) !important;
}
.Riga_le_nostre_radici .et_pb_heading{ margin: 0 0 0 !important; }
.intro_storia,
.intro_obbiettivi{
  max-width: 55.6vw;
  font-size: clamp(18px, 1.667vw, 43px);                 /* 24px a 1440 */
  font-weight: 400;
  line-height: 1.5;
  color: var(--st-navy);
}
.Riga_le_nostre_radici .et_pb_heading + .et_pb_text{ margin-top: 2.08vw !important; }

.tit_paragrafo{
  margin-top: 1.8vw;
  font-size: clamp(17px, 1.39vw, 36px);                  /* 20px a 1440 */
  font-weight: 700;
  line-height: 1.3;
  color: var(--st-navy);
}
.tit_paragrafo ~ .txt_paragrafo{ margin-top: .97vw; }
.txt_paragrafo,
.obbiettivi_paragrafo,
.qualita_paragrafo{
  max-width: 55.6vw;
  font-size: clamp(15px, 1.25vw, 32px);                  /* 18px a 1440 */
  font-weight: 400;
  line-height: 1.667;
  color: var(--st-testo);
}


/* =========================================================
   3. IL NOSTRO IMPEGNO  (sfondo azzurro, riga con filetto sotto)
   ========================================================= */
.et_pb_section.Sezione_nostro_impegno{
  background: var(--st-azzurro) !important;
  padding: clamp(56px, 6.67vw, 171px) 0 0 !important;
}
.et_pb_section.Sezione_qualita{
  background: var(--st-azzurro) !important;
  padding: 0 0 clamp(56px, 6.46vw, 165px) !important;
}

.Sezione_nostro_impegno .et_pb_row.Riga_nostro_impegno,
.Sezione_qualita .et_pb_row.Riga_qualita{
  display: grid !important;
  grid-template-columns: 34% minmax(0, 1fr);
  column-gap: 0;
  align-items: start;
}
.Riga_nostro_impegno > .et_pb_column,
.Riga_qualita > .et_pb_column{
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  grid-area: auto !important;
  gap: 0 !important;
}

/* Filetto tra "Gli obbiettivi" e "Qualita'" */
.Sezione_nostro_impegno .et_pb_row.Riga_nostro_impegno{
  padding-bottom: clamp(40px, 5vw, 128px) !important;
  border-bottom: 1px solid var(--st-linea);
}
.Sezione_qualita .et_pb_row.Riga_qualita{
  padding-top: clamp(32px, 3.33vw, 85px) !important;
}

.obbiettivi_bigtit,
.qualita_bigtit{
  margin-top: 1.25vw;
  font-size: clamp(34px, 3.33vw, 85px);                  /* 48px a 1440 */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--st-navy);
}
.qualita_bigtit{
  max-width: 23.3vw;
  margin-top: .83vw;
  font-size: clamp(26px, 2.5vw, 64px);                   /* 36px a 1440 */
  line-height: 1.11;
  letter-spacing: 0;
}
.obbiettivi_paragrafo{ margin-top: 1.67vw; }
.qualita_paragrafo{ margin-top: 0; }


/* =========================================================
   4. CERTIFICAZIONI (gruppo: img, titolo, img, titolo)
   ========================================================= */
.Riga_qualita .et_pb_group{
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(12px, 1.1vw, 28px);
  align-items: center;
  margin-top: 2.36vw !important;
  width: 100%;
}
.Riga_qualita .et_pb_group > .et_pb_module{ margin: 0 !important; }
.Riga_qualita .et_pb_group .et_pb_image_wrap{ display: block; }
.Riga_qualita .et_pb_group .et_pb_image img{
  display: block;
  height: auto;
  object-fit: contain;
}
.Riga_qualita .et_pb_group > :nth-child(1) img{ width: clamp(48px, 4.44vw, 114px); }
.Riga_qualita .et_pb_group > :nth-child(3) img{ width: clamp(42px, 3.89vw, 100px); }

/* Il titolo contiene 2 righe: prima "ISO 9001", poi la descrizione.
   white-space: pre-line mantiene l'a-capo, ::first-line stila solo la prima riga. */
.Riga_qualita .et_pb_group h3.et_pb_module_header{
  margin: 0 !important;
  padding: 0 !important;
  white-space: pre-line;
  font-family: var(--st-font);
  font-size: clamp(11px, .9vw, 23px);                    /* 13px a 1440 */
  font-weight: 400;
  line-height: .85;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--st-testo) !important;
}
.Riga_qualita .et_pb_group h3.et_pb_module_header::first-line{
  font-size: clamp(20px, 1.667vw, 43px);                 /* 24px a 1440 */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--st-navy);
}


/* =========================================================
   5. FASCIA "HAI UN PROGETTO DA COSTRUIRE?"
   Gia' in style.css (sezione_parliamone_insieme): qui nessuna modifica.
   ========================================================= */


/* =========================================================
   TABLET (<= 980px)
   ========================================================= */
@media (max-width: 980px){
  .hero_azienda::after{ display: none; }
  .hero_azienda::before{
    background: linear-gradient(90deg, rgba(21,44,114,.96) 0%, rgba(21,44,114,.8) 70%, rgba(21,44,114,.55) 100%);
  }
  .et_pb_section.hero_azienda{ min-height: clamp(360px, 52vw, 500px) !important; }

  .Sezione_le_nostre_radici .et_pb_row.Riga_le_nostre_radici,
  .Sezione_nostro_impegno .et_pb_row.Riga_nostro_impegno,
  .Sezione_qualita .et_pb_row.Riga_qualita{
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }
  .radici_anno{ font-size: 88px; }
  .qualita_bigtit{ max-width: none; }
  :is(.intro_storia, .intro_obbiettivi, .txt_paragrafo, .obbiettivi_paragrafo, .qualita_paragrafo){ max-width: 800px; }
}


/* =========================================================
   MOBILE (<= 767px)
   ========================================================= */
@media (max-width: 767px){
  .et_pb_section.hero_azienda{ min-height: 340px !important; }
  .hero_azienda::before{ background: rgba(21,44,114,.86); }
  .et_pb_section.hero_azienda .et_pb_row.row_azienda{ padding-top: 96px !important; padding-bottom: 48px !important; }
  .row_azienda .hero_breadcrumb{ top: 28px; }
  .hero_breadcrumb, .hero_breadcrumb :is(p, a, span){ font-size: 13px; }
  .hero_azienda .tit1{ font-size: 32px; }
  .hero_azienda .tit1::before{ margin-bottom: 14px; }
  .hero_azienda .tit2{ margin-top: 14px; font-size: 19px; }

  .et_pb_section.Sezione_le_nostre_radici{ padding: 48px 0 56px !important; }
  .radici_anno{ margin-top: 18px; padding-left: 18px; font-size: 72px; }
  .Riga_le_nostre_radici h1.et_pb_module_header{ font-size: 34px; }
  .Riga_le_nostre_radici .et_pb_heading + .et_pb_text{ margin-top: 20px !important; }
  .intro_storia,
  .intro_obbiettivi{ font-size: 18px; line-height: 1.55; }
  .tit_paragrafo{ margin-top: 28px; font-size: 18px; }
  .txt_paragrafo,
  .obbiettivi_paragrafo,
  .qualita_paragrafo{ font-size: 15px; line-height: 1.75; }

  .et_pb_section.Sezione_nostro_impegno{ padding: 48px 0 0 !important; }
  .Sezione_nostro_impegno .et_pb_row.Riga_nostro_impegno{ padding-bottom: 40px !important; }
  .et_pb_section.Sezione_qualita{ padding: 0 0 56px !important; }
  .Sezione_qualita .et_pb_row.Riga_qualita{ padding-top: 40px !important; }
  .obbiettivi_bigtit{ font-size: 34px; }
  .qualita_bigtit{ font-size: 26px; }

  /* Certificazioni: una sotto l'altra */
  .Riga_qualita .et_pb_group{
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 22px;
  }
  .Riga_qualita .et_pb_group h3.et_pb_module_header::first-line{ font-size: 22px; }
}


/* =========================================================
   NOTE PER DIVI
   0. Nei testi (intro_storia, txt_paragrafo, intro_obbiettivi, obbiettivi_paragrafo,
      qualita_paragrafo) ci sono a-capo manuali <br> presi dal mockup: su desktop
      riproducono il PDF, su mobile fanno righe spezzate. Toglili dal testo
      (basta uno spazio al posto dell'a-capo) e il testo va a capo da solo.
   1. Foto hero: impostala come sfondo della sezione "hero_azienda"
      (Foto-Azienda.webp, posizione destra/centro, cover). Il velo blu e'
      nel CSS.
   2. .hero_breadcrumb: aggiungi un modulo Testo DENTRO la colonna dell'hero,
      sopra il modulo del titolo, con la classe CSS "hero_breadcrumb" e il testo
      <a href="/">Home</a> / <a href="/azienda/">Azienda</a> / La Storia
      Se non lo aggiungi, il resto funziona uguale.
   ========================================================= */