/* =========================================================
   π-FACTOR — HERO GLOBALE
   Componente condiviso tra tutte le pagine
   ========================================================= */


/* =========================================================
   HERO
   ========================================================= */

.site-hero {
  position: relative;
  overflow: hidden;

  min-height: 610px;

  display: flex;
  align-items: center;

  background: #fff;
}


/* =========================================================
   LINEA BRAND SUPERIORE
   ========================================================= */

.site-hero::before {
  content: "";

  position: absolute;

  z-index: 10;

  top: 0;
  left: 0;
  right: 0;

  height: 7px;

  background:
    linear-gradient(
      90deg,
      var(--aqua),
      var(--turquoise),
      var(--blue),
      var(--orange)
    );
}


/* =========================================================
   IMMAGINE
   ========================================================= */

.site-hero-background {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;
}


.site-hero-background img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  object-position: right center;

  background: #fff;
}

/* =========================================================
   PROTEZIONE TESTO
   ========================================================= */

.site-hero-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.96) 19%,
      rgba(255,255,255,.84) 30%,
      rgba(255,255,255,.48) 42%,
      rgba(255,255,255,.10) 54%,
      rgba(255,255,255,0) 64%
    );
}


/* =========================================================
   CONTENUTO
   ========================================================= */

.site-hero-content {
  position: relative;

  z-index: 2;

  width: 100%;

  padding-top: 3.2rem;
  padding-bottom: 7rem;
}


/* =========================================================
   COPY
   ========================================================= */

.site-hero-copy {
  width: min(570px,42vw);
}


.site-hero-kicker {
  margin: 0 0 1rem;

  color: var(--blue);

  font-size: .78rem;

  font-weight: 900;

  letter-spacing: .18em;
}


.site-hero h1 {
  margin: 0;

  color: #173044;

  font-size:
    clamp(3.6rem,5.3vw,5.7rem);

  line-height: .90;

  letter-spacing: -.06em;

  font-weight: 850;
}


.site-hero-lead {
  max-width: 560px;

  margin: 1.3rem 0 0;

  color: #354e5e;

  font-size:
    clamp(1rem,1.2vw,1.15rem);

  line-height: 1.55;

  font-weight: 500;
}


/* =========================================================
   CTA
   ========================================================= */

.site-hero-actions {
  display: flex;
  flex-wrap: wrap;

  gap: .8rem;

  margin-top: 1.35rem;
}


.site-hero-actions .btn {
  min-height: 52px;
}


.site-hero-actions .btn.primary {
  color: #0f2435;

  background:
    linear-gradient(
      135deg,
      var(--aqua),
      var(--turquoise)
    );

  border: 0;

  box-shadow:
    0 10px 24px rgba(16,190,243,.20);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.site-hero-actions .btn.primary:hover {
  transform: translateY(-3px);

  box-shadow:
    0 16px 34px rgba(16,190,243,.30);
}


.site-hero-actions .btn.secondary {
  color: #173044;

  background:
    rgba(255,255,255,.90);

  border:
    1px solid rgba(16,162,247,.28);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}


.site-hero-actions .btn.secondary:hover {
  transform: translateY(-2px);

  background: #fff;

  border-color: var(--blue);
}


/* =========================================================
   META
   ========================================================= */

.site-hero-meta {
  display: flex;
  flex-wrap: wrap;

  gap: .5rem 1.2rem;

  margin-top: .9rem;

  color: #415968;

  font-size: .88rem;

  font-weight: 700;
}


.site-hero-meta span + span {
  padding-left: 1.2rem;

  border-left:
    1px solid rgba(23,48,68,.15);
}


/* =========================================================
   BENEFIT CARDS
   ========================================================= */

.site-hero-benefits {
  position: absolute;

  left: 0;
  right: 0;
  bottom: .55rem;

  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: .9rem;
}


/* =========================================================
   BENEFIT
   ========================================================= */

.site-hero-benefit {
  position: relative;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    48px 1fr;

  gap: .8rem;

  align-items: center;

  min-height: 74px;

  padding:
    .75rem
    1rem;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.80),
      rgba(255,255,255,.62)
    );

  border:
    1px solid rgba(255,255,255,.78);

  box-shadow:
    0 12px 28px rgba(23,48,68,.10),
    inset 0 1px 0 rgba(255,255,255,.84);

  backdrop-filter:
    blur(20px)
    saturate(115%);

  -webkit-backdrop-filter:
    blur(20px)
    saturate(115%);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}


/* texture vetro */

.site-hero-benefit::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .10;

  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.85) 0,
      rgba(255,255,255,.85) 1px,
      transparent 1px,
      transparent 5px
    );
}


.site-hero-benefit:hover {
  transform: translateY(-5px);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.88),
      rgba(255,255,255,.70)
    );

  box-shadow:
    0 20px 40px rgba(23,48,68,.14),
    inset 0 1px 0 rgba(255,255,255,.90);
}


/* =========================================================
   BENEFIT ICON
   ========================================================= */

.site-hero-benefit-icon {
  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 14px;

  color: var(--blue);

  font-size: 1rem;

  font-weight: 900;

  background:
    rgba(62,223,218,.18);

  border:
    1px solid rgba(62,223,218,.30);
}


.site-hero-benefit:nth-child(2)
.site-hero-benefit-icon {
  background:
    rgba(16,190,243,.16);

  border-color:
    rgba(16,190,243,.28);
}


.site-hero-benefit:nth-child(3)
.site-hero-benefit-icon {
  background:
    rgba(255,160,58,.17);

  border-color:
    rgba(255,160,58,.30);

  color: #e78216;
}


/* =========================================================
   BENEFIT TESTI
   ========================================================= */

.site-hero-benefit > div {
  position: relative;

  z-index: 1;
}


.site-hero-benefit strong {
  display: block;

  color: #102a3e;

  font-size: .98rem;

  line-height: 1.2;

  font-weight: 850;
}


.site-hero-benefit small {
  display: block;

  margin-top: .18rem;

  color: #354e5e;

  font-size: .82rem;

  line-height: 1.3;

  font-weight: 650;
}


/* =========================================================
   VARIANTI PAGINA
   ========================================================= */


/* HOME */

.page-home .site-hero {
  --hero-position: 60% 38%;
}


/* MATURITÀ */

.page-maturita .site-hero {
  --hero-position: 58% 45%;
}


/* =========================================================
   DESKTOP GRANDE
   ========================================================= */

@media (min-width: 1500px) {

  .site-hero {
    min-height: 630px;
  }


  .page-home .site-hero {
    --hero-position: 58% 37%;
  }


  .page-maturita .site-hero {
    --hero-position: 58% 43%;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .site-hero {
    min-height: 670px;
  }


  .site-hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,.99) 0%,
        rgba(255,255,255,.95) 28%,
        rgba(255,255,255,.68) 44%,
        rgba(255,255,255,.18) 62%,
        rgba(255,255,255,0) 76%
      );
  }


  .site-hero-copy {
    width: min(540px,52vw);
  }


  .site-hero-benefit {
    grid-template-columns:
      42px 1fr;

    padding:
      .7rem
      .85rem;
  }


  .site-hero-benefit-icon {
    width: 38px;
    height: 38px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .site-hero {
    min-height: auto;

    display: block;

    padding-top: 3.5rem;
  }


  .site-hero-background {
    position: relative;

    inset: auto;

    width: 100%;

    aspect-ratio: 16 / 10;

    margin-top: 2rem;
  }


  .site-hero-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: 67% center;
  }


  .site-hero-overlay {
    display: none;
  }


  .site-hero-content {
    padding-top: 1rem;
    padding-bottom: 0;
  }


  .site-hero-copy {
    width: 100%;
  }


  .site-hero h1 {
    font-size:
      clamp(3rem,15vw,4.8rem);
  }


  .site-hero-lead {
    margin-top: 1.3rem;

    font-size: 1.05rem;
  }


  .site-hero-actions {
    flex-direction: column;

    align-items: stretch;
  }


  .site-hero-actions .btn {
    width: 100%;
  }


  .site-hero-meta {
    flex-direction: column;

    gap: .4rem;
  }


  .site-hero-meta span + span {
    padding-left: 0;

    border-left: 0;
  }


  .site-hero-benefits {
    position: relative;

    left: auto;
    right: auto;
    bottom: auto;

    grid-template-columns: 1fr;

    gap: .7rem;

    margin-top: 2rem;
  }


  .site-hero-benefit {
    min-height: auto;

    background:
      rgba(255,255,255,.82);
  }

}