/**
 * Hero delle pagine interne (.page-header) — stile condiviso da tutte le pagine
 * che usano il banner con breadcrumb + titolo (esclusa la home).
 * Caricato da includes/header.php dopo il CSS principale.
 */

/* Hero: velo sfumato #16243D / #015FC9 sopra l'immagine (tutte le larghezze).
   I testi sono bianchi e vanno a capo entro il 40% del banner (80% sotto i 1200px);
   la sfumatura resta piena almeno fin dove arriva il testo e lascia una piccola
   porzione di immagine scoperta a destra. Il banner e' un po' piu' alto;
   la shape bianca a sinistra (.page-header-shape-1) e' nascosta su tutti gli schermi.
   Il posizionamento dell'immagine resta per pagina (.page-header-bg). */
.page-header {
  padding-top: 135px;
  padding-bottom: 131px;
  /* distanza del testo dal bordo sinistro dello schermo (container Bootstrap) */
  --hero-left: calc(max(0px, (100vw - 1300px) / 2) + 15px);
  /* larghezza massima raggiungibile dal testo, misurata dal bordo sinistro dello schermo */
  --hero-text-w: 40vw;
}

@media (max-width: 1199px) { .page-header { --hero-left: calc((100vw - 960px) / 2 + 15px); --hero-text-w: 80vw; } }
@media (max-width: 991px)  { .page-header { --hero-left: calc((100vw - 720px) / 2 + 15px); } }
@media (max-width: 767px)  { .page-header { --hero-left: calc((100vw - 540px) / 2 + 15px); } }
@media (max-width: 575px)  { .page-header { --hero-left: 15px; } }

/* L'immagine copre tutta la larghezza; via la vecchia sfumatura chiara a sinistra */
.page-header-bg {
  width: 100%;
}

.page-header-bg::before,
.page-header-shape-1 {
  display: none;
}

.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(22, 36, 61, 0.96) 0%,
    rgba(22, 36, 61, 0.9) 6%,
    rgba(5, 48, 96, 0.45) 55%,
    rgba(1, 80, 170, 0.2) 70%,
    rgba(0, 0, 0, 0) 80%
  );
}

@media (max-width: 1199px) {
  .page-header::after {
    background: linear-gradient(
      90deg,
      rgba(22, 36, 61, 0.96) 0%,
      rgba(22, 36, 61, 0.9) 6%,
      rgba(5, 48, 96, 0.45) 55%,
      rgba(1, 80, 170, 0.2) 75%,
      rgba(0, 0, 0, 0) 90%
    );
  }
}

@media (max-width: 768px) {
  .page-header::after {
    background: linear-gradient(
      90deg,
      rgba(22, 36, 61, 0.96) 0%,
      rgba(22, 36, 61, 0.9) 6%,
      rgba(22, 36, 61, 0.7) 50%,
      rgba(5, 48, 96, 0.4) 70%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* Il testo non supera --hero-text-w (mai fuori dalla sfumatura) e va a capo prima */
.page-header__inner {
  max-width: calc(var(--hero-text-w) - var(--hero-left));
}

.page-header__inner h2,
.thm-breadcrumb li,
.thm-breadcrumb li a {
  color: #fff;
  overflow-wrap: anywhere;
}

.page-header__inner h2 {
  white-space: normal;
  max-width: none;
  word-break: normal;
}

.thm-breadcrumb li:hover a {
  color: rgba(255, 255, 255, 0.75);
}

/* Hero delle pagine categoria (Veicoli, Casa e Famiglia, Persona, Risparmio e Previdenza):
   stesso banner delle altre pagine, con in piu' testo introduttivo e pulsante. */
.page-header__icon {
  margin-right: 16px;
  font-size: 0.8em;
  vertical-align: middle;
}

.page-header__text {
  margin: 20px 0 0;
  color: #fff;
  font-size: 18px;
  line-height: 30px;
  overflow-wrap: anywhere;
}

.page-header__text b {
  color: #fff;
}

.page-header__btn-box {
  margin-top: 28px;
}

/* Banner categoria: testi un po' piu' grandi */
.page-header--categoria .page-header__inner h2 {
  font-size: 46px;
  line-height: 58px;
}

.page-header--categoria .page-header__text {
  font-size: 21px;
  line-height: 33px;
}

@media (max-width: 767px) {
  .page-header--categoria .page-header__inner h2 {
    font-size: 36px;
    line-height: 46px;
  }

  .page-header--categoria .page-header__text {
    font-size: 19px;
    line-height: 30px;
  }
}

/* Banner categoria: sfumatura nel colore tema della pagina (Veicoli resta sul blu predefinito) */
body.page-casa-famiglia      { --hero-c-dark: 89, 30, 6;   --hero-c-mid: 140, 47, 10;  --hero-c-light: 233, 78, 16; }
body.page-persona            { --hero-c-dark: 34, 63, 15;  --hero-c-mid: 53, 100, 23;  --hero-c-light: 89, 166, 39; }
body.page-risparmio-previdenza { --hero-c-dark: 54, 2, 84; --hero-c-mid: 85, 3, 132;   --hero-c-light: 142, 5, 220; }

.page-header--categoria::after {
  background: linear-gradient(
    90deg,
    rgba(var(--hero-c-dark, 22, 36, 61), 0.96) 0%,
    rgba(var(--hero-c-dark, 22, 36, 61), 0.9) 6%,
    rgba(var(--hero-c-mid, 5, 48, 96), 0.45) 55%,
    rgba(var(--hero-c-light, 1, 80, 170), 0.2) 70%,
    rgba(0, 0, 0, 0) 80%
  );
}

@media (max-width: 1199px) {
  .page-header--categoria::after {
    background: linear-gradient(
      90deg,
      rgba(var(--hero-c-dark, 22, 36, 61), 0.96) 0%,
      rgba(var(--hero-c-dark, 22, 36, 61), 0.9) 6%,
      rgba(var(--hero-c-mid, 5, 48, 96), 0.45) 55%,
      rgba(var(--hero-c-light, 1, 80, 170), 0.2) 75%,
      rgba(0, 0, 0, 0) 90%
    );
  }
}

@media (max-width: 768px) {
  .page-header--categoria::after {
    background: linear-gradient(
      90deg,
      rgba(var(--hero-c-dark, 22, 36, 61), 0.96) 0%,
      rgba(var(--hero-c-dark, 22, 36, 61), 0.9) 6%,
      rgba(var(--hero-c-dark, 22, 36, 61), 0.7) 50%,
      rgba(var(--hero-c-mid, 5, 48, 96), 0.4) 70%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* Hero con titolo h1 (Preventivo, Contatti): testo bianco */
.page-header__inner h1,
.page-header__inner h1 b {
  color: #fff;
}