/* ==========================================================================
   DUE - Blocchi
   Libreria grafica portata dal tema UNO (componenti SDC Drupal).
   I nomi delle classi sono gli stessi di UNO, cosi' il markup si sposta da
   un progetto all'altro senza traduzioni. Si applicano al widget "HTML"
   di Elementor, oppure come "Classi CSS" su contenitori e widget.
   Il markup di riferimento di ogni blocco e' in README.md.

   Nota: le immagini di sfondo dei blocchi usano un selettore composto
   (.blocco-x .blocco-x__bg) perche' Elementor applica .elementor img{height:auto},
   che a specificita' batterebbe una classe sola e schiaccerebbe l'immagine
   sulla sua altezza naturale. Si vede solo sotto una certa larghezza.
   ========================================================================== */

/* ==========================================================================
   Fascia Titolo  (UNO: fascia-titolo)
   Titolo H2 + occhiello colorato, con allineamento e padding a step.
   ========================================================================== */

.fascia-titolo {
  width: 100%;
  box-sizing: border-box;
}

.fascia-titolo__container {
  max-width: var(--container-width, 75rem);
  margin: 0 auto;
  padding: 0 20px;
}

.fascia-titolo--left .fascia-titolo__container { text-align: left; }
.fascia-titolo--center .fascia-titolo__container { text-align: center; }
.fascia-titolo--right .fascia-titolo__container { text-align: right; }

.fascia-titolo__title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  color: var(--color-text, #1D1D1B);
  font-size: 4.0625rem;
  line-height: 1.2;
  margin: 0 0 20px 0;
}

.fascia-titolo__text {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-weight: var(--weight-body, 400);
  color: var(--color-primary, #E20714);
  text-transform: uppercase;
  font-size: 1.15rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  opacity: 0.85;
}

.fascia-titolo--left .fascia-titolo__text { margin-left: 0; }
.fascia-titolo--right .fascia-titolo__text { margin-right: 0; }

@media (max-width: 768px) {
  .fascia-titolo__title { font-size: 2.5rem; }
}

/* ==========================================================================
   Blocco Sfondo  (UNO: blocco-sfondo)
   Card con immagine di fondo, zoom all'hover e freccia nell'angolo.
   ========================================================================== */

.blocco-sfondo {
  position: relative;
  display: block;
  min-height: 380px;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
}

.blocco-sfondo .blocco-sfondo__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  z-index: 1;
}

.blocco-sfondo__bg--placeholder {
  background-color: var(--color-text, #1D1D1B);
}

.blocco-sfondo:hover .blocco-sfondo__bg {
  transform: scale(1.1);
}

.blocco-sfondo__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.20) 55%,
    rgba(0, 0, 0, 0.05) 100%
  );
  transition: background 0.3s ease;
}

.blocco-sfondo:hover .blocco-sfondo__overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(0, 0, 0, 0.30) 55%,
    rgba(0, 0, 0, 0.10) 100%
  );
}

/* Triangolo bianco con freccia, in alto a destra. */
.blocco-sfondo__arrow {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  z-index: 3;
  border-style: solid;
  border-width: 0 72px 72px 0;
  border-color: transparent #ffffff transparent transparent;
  opacity: 0;
  transform: translate(-20px, 20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.blocco-sfondo:hover .blocco-sfondo__arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.blocco-sfondo__arrow svg {
  position: absolute;
  top: 8px;
  right: -66px;
  width: 22px;
  height: 22px;
  color: var(--color-primary, #E20714);
  opacity: 0;
  transform: translate(-10px, 10px);
  transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
}

.blocco-sfondo:hover .blocco-sfondo__arrow svg {
  opacity: 1;
  transform: translate(0, 0);
}

.blocco-sfondo__content {
  position: absolute;
  bottom: 10%;
  left: 30%;
  right: 0;
  padding: 32px 28px;
  z-index: 3;
  text-align: left;
}

.blocco-sfondo__title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: var(--weight-headings, 700);
  font-size: 3rem;
  color: #ffffff;
  margin: 0 0 20px 0;
  line-height: 1.15;
}

.blocco-sfondo__paragraph {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-weight: var(--weight-body, 400);
  font-size: var(--p-size, 1.05rem);
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 80%;
  line-height: 1.5;
}

.blocco-sfondo--no-link {
  cursor: default;
  pointer-events: none;
}

@media (max-width: 768px) {
  .blocco-sfondo__content {
    left: 0;
    bottom: 5%;
  }
  .blocco-sfondo__title { font-size: 2rem; }
  .blocco-sfondo__paragraph { max-width: 100%; }
}

/* ==========================================================================
   Blocco Color  (UNO: blocco-color)
   Quadrato 1:1, velo colorato che appare all'hover.
   ========================================================================== */

.blocco-color {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  background: #000;
  cursor: pointer;
  /* Rete di sicurezza se il markup arriva senza immagine. */
  min-height: 240px;
}

/* L'immagine resta nel flusso ed e' lei a dare l'altezza al quadrato.
   Non e' un vezzo: gli altri figli del blocco sono tutti assoluti, quindi
   con l'immagine in posizione assoluta l'altezza dipenderebbe solo da
   aspect-ratio su una larghezza percentuale. Dentro una colonna flex di
   Elementor quella percentuale e' indefinita durante il calcolo intrinseco,
   l'altezza risulta zero e i tre blocchi finiscono uno sopra l'altro. */
.blocco-color .blocco-color__bg {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blocco-color:hover .blocco-color__bg {
  transform: scale(1.05);
}

.blocco-color__overlay-dark {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.25) 55%,
    rgba(0, 0, 0, 0.10) 100%
  );
  pointer-events: none;
}

.blocco-color__hover-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  z-index: 3;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: color-mix(in srgb, var(--color-primary, #E20714), transparent 100%);
  transition: background 0.3s 0.1s, transform 0.3s;
}

.blocco-color:hover .blocco-color__hover-box {
  background: color-mix(in srgb, var(--color-primary, #E20714), transparent 30%);
}

.blocco-color__content {
  text-align: center;
  width: 100%;
}

.blocco-color__subtitle,
.blocco-color__title,
.blocco-color__paragraph {
  color: #ffffff;
  margin: 0;
}

.blocco-color__title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.1;
  margin-bottom: 5px;
}

.blocco-color__subtitle {
  display: inline-block;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 8px;
}

.blocco-color__paragraph {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.3;
}

/* ==========================================================================
   Blocco Focus  (UNO: blocco-focus)
   Card alta con filetto primario, occhiello e "Scopri di piu'".
   ========================================================================== */

.blocco-focus {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 450px;
  overflow: hidden;
  text-decoration: none;
  background: #000;
  border-bottom: 5px solid var(--color-primary, #E20714);
  transition: transform 0.4s ease;
}

.blocco-focus:hover {
  transform: translateY(-10px);
}

.blocco-focus .blocco-focus__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 0.4s ease, transform 0.8s ease;
}

.blocco-focus:hover .blocco-focus__bg {
  transform: scale(1.05);
  opacity: 0.7;
}

.blocco-focus__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
}

.blocco-focus__content {
  position: relative;
  z-index: 3;
  padding: 40px;
  width: 100%;
}

.blocco-focus__subtitle {
  display: block;
  font-family: var(--font-headings, 'Poppins', sans-serif);
  color: var(--color-primary, #E20714);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.blocco-focus__title {
  color: #ffffff;
  font-size: 2.5rem;
  margin: 0 0 15px 0;
  line-height: 1.2;
}

.blocco-focus__paragraph {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
  margin-bottom: 25px;
  max-width: 90%;
}

.blocco-focus__more {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}

@media (max-width: 768px) {
  .blocco-focus__content { padding: 25px; }
  .blocco-focus__title { font-size: 1.9rem; }
}

/* ==========================================================================
   Blocco Sfasato  (UNO: blocco-sfasato)
   Immagine con angoli tagliati, testi sfasati che salgono all'hover.
   ========================================================================== */

.blocco-sfasato {
  max-width: 800px;
  margin: 0 auto;
}

.blocco-sfasato__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.blocco-sfasato__image-container {
  width: 75%;
  position: relative;
  z-index: 1;
  clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%);
}

.blocco-sfasato__gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(135deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,1) 100%);
  pointer-events: none;
}

.blocco-sfasato__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  z-index: 1;
}

.blocco-sfasato__content {
  position: relative;
  z-index: 3;
  margin-top: -50px;
  margin-left: auto;
  width: 75%;
  background: transparent;
  text-align: left;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.blocco-sfasato:hover .blocco-sfasato__content {
  transform: translateY(-40px);
}

.blocco-sfasato__title {
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-text, #1D1D1B);
  line-height: 0.9;
  margin: 0 0 30px 0;
}

.blocco-sfasato__text {
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.5rem;
  color: var(--color-text, #1D1D1B);
  margin-bottom: 5px;
}

.blocco-sfasato__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body, 'Open Sans', sans-serif);
  font-weight: 400;
  color: var(--color-primary, #E20714);
  text-decoration: none;
  font-size: 0.75rem;
  transition: color 0.3s ease;
}

.blocco-sfasato__arrow {
  display: flex;
  align-items: center;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.blocco-sfasato__arrow svg {
  width: 14px;
  height: 14px;
  stroke-width: 4px;
}

.blocco-sfasato__link:hover .blocco-sfasato__arrow {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .blocco-sfasato { padding: 20px; }
  .blocco-sfasato__image-container { width: 100%; }
  .blocco-sfasato__content {
    width: 100%;
    margin-top: 20px;
    padding-left: 0;
  }
  .blocco-sfasato:hover .blocco-sfasato__content { transform: none; }
}

/* ==========================================================================
   Blocco Quote  (UNO: blocco-quote)
   Citazione bianca su fondo scuro, con squadra che si allarga all'hover.
   Va messo dentro un contenitore con sfondo scuro o immagine.
   ========================================================================== */

.blocco-quote {
  position: relative;
  margin: 2rem 0;
  min-height: 450px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}

.blocco-quote__corner {
  position: absolute;
  top: 72px;
  left: 40px;
  width: 100px;
  height: 100px;
  z-index: 1;
  border-top: 5px solid var(--color-primary, #E20714);
  border-left: 5px solid var(--color-primary, #E20714);
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.blocco-quote:hover .blocco-quote__corner {
  top: 30px;
  left: 20px;
  width: 70%;
  height: 50%;
}

.blocco-quote__inner {
  padding: 80px 60px 80px 100px;
  width: 100%;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease-in-out;
}

.blocco-quote:hover .blocco-quote__inner {
  transform: translateX(10px);
}

.blocco-quote__inner--left {
  align-items: flex-start;
  text-align: left;
}

.blocco-quote__inner--center {
  align-items: center;
  text-align: center;
}

.blocco-quote__inner--center .blocco-quote__button {
  margin-left: auto;
  margin-right: auto;
}

.blocco-quote h3,
.blocco-quote p {
  color: #ffffff;
  margin-bottom: 30px;
}

.blocco-quote h3 {
  font-size: 2.5rem;
  line-height: 2.8125rem;
  text-transform: uppercase;
}

.blocco-quote p {
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

.blocco-quote__button {
  border: 2px solid #ffffff;
  color: #ffffff;
  background: transparent;
  padding: 27px 35px;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.75rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

.blocco-quote__button:hover {
  background: #ffffff;
  color: #000000;
}

@media (max-width: 768px) {
  .blocco-quote {
    min-height: 350px;
    margin: 1rem 0;
  }
  .blocco-quote__inner { padding: 60px 30px 60px 60px; }
  .blocco-quote h3 { font-size: 1.8rem; line-height: 2.1rem; }
  .blocco-quote__corner {
    top: 30px;
    left: 25px;
    width: 60px;
    height: 60px;
  }
  .blocco-quote:hover .blocco-quote__corner {
    top: 15px;
    left: 15px;
    width: 150px;
    height: 150px;
  }
}

/* ==========================================================================
   Blocco Highlight  (UNO: blocco-highlight)
   Numero che si anima al primo scroll + testo. Il conteggio lo fa
   assets/js/theme.js leggendo data-number su .js-count.
   ========================================================================== */

.blocco-highlight {
  position: relative;
  margin: 2rem 0;
  min-height: 450px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
}

.blocco-highlight__corner {
  position: absolute;
  top: 72px;
  left: 40px;
  width: 100px;
  height: 100px;
  z-index: 1;
  border-top: 5px solid var(--color-bg-2, #E8E8E8);
  border-left: 5px solid var(--color-bg-2, #E8E8E8);
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.blocco-highlight:hover .blocco-highlight__corner {
  top: 30px;
  left: 20px;
  width: 70%;
  height: 30%;
}

.blocco-highlight__inner {
  padding: 80px 60px 80px 100px;
  width: 100%;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease-in-out;
}

.blocco-highlight:hover .blocco-highlight__inner {
  transform: translateX(10px);
}

.blocco-highlight__inner--left {
  align-items: flex-start;
  text-align: left;
}

.blocco-highlight__inner--center {
  align-items: center;
  text-align: center;
}

.blocco-highlight__inner--center .blocco-highlight__title {
  justify-content: center;
}

.blocco-highlight__title {
  color: var(--color-primary, #E20714);
  margin-bottom: 30px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.blocco-highlight__title-number {
  font-size: 3.75rem;
  line-height: 2.8rem;
  font-weight: 400;
}

.blocco-highlight__title-text {
  font-size: 1.4rem;
  line-height: 1.6rem;
  font-weight: 400;
  opacity: 0.9;
}

.blocco-highlight__text {
  color: var(--color-text, #1D1D1B);
  margin-bottom: 30px;
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.5rem;
}

@media (max-width: 768px) {
  .blocco-highlight {
    min-height: 350px;
    margin: 1rem 0;
  }
  .blocco-highlight__inner { padding: 60px 30px 60px 60px; }
  .blocco-highlight__corner {
    top: 30px;
    left: 25px;
    width: 60px;
    height: 60px;
  }
  .blocco-highlight:hover .blocco-highlight__corner {
    top: 15px;
    left: 15px;
    width: 150px;
    height: 150px;
  }
}

/* ==========================================================================
   Blocco Form  (UNO: blocco-form)
   Contenitore per form esterni via iframe. Per i form nativi usa il
   widget Form di Elementor Pro: eredita gia' i colori dal design system.
   ========================================================================== */

.blocco-form {
  position: relative;
  margin: 2rem 0;
  box-sizing: border-box;
}

.blocco-form__inner {
  width: 100%;
  max-width: var(--container-width, 75rem);
  margin: 0 auto;
  padding: 0 16px;
}

.blocco-form--center .blocco-form__inner {
  text-align: center;
}

.blocco-form__title {
  margin: 0 0 16px 0;
  font-family: var(--font-headings, 'Poppins', sans-serif);
  font-weight: 700;
  color: var(--color-primary, #E20714);
}

.blocco-form__iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Su fondo scuro il titolo passa in bianco. */
.due-bg-primary .blocco-form__title,
.due-bg-secondary .blocco-form__title,
.due-bg-text .blocco-form__title {
  color: #ffffff;
}

/* ==========================================================================
   Hero  (UNO: hero-basic / hero-page)
   Sezione a tutta larghezza con immagine, velo scuro regolabile e CTA.
   L'opacita' del velo si imposta con --due-hero-overlay (0-1).
   ========================================================================== */

.due-hero {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  min-height: clamp(420px, 70vh, 900px);
  display: flex;
  align-items: center;
}

.due-hero--page {
  min-height: 410px;
  align-items: flex-end;
}

.due-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.due-hero .due-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.due-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, var(--due-hero-overlay, 0.3));
  pointer-events: none;
}

.due-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 3rem 1.25rem;
  box-sizing: border-box;
}

.due-hero__inner {
  width: 100%;
  max-width: var(--container-width, 75rem);
  margin: 0 auto;
}

.due-hero--align-left   { text-align: left; }
.due-hero--align-center { text-align: center; }
.due-hero--align-right  { text-align: right; }

.due-hero__p,
.due-hero__h1,
.due-hero__h2,
.due-hero__h3 {
  color: #ffffff;
}

.due-hero__p {
  font-size: var(--p-size, 1.05rem);
  line-height: 1.55;
  margin: 0 0 1rem 0;
  opacity: 0.95;
}

.due-hero__h1 {
  font-size: var(--h1-size, clamp(2.2rem, 5vw, 4rem));
  line-height: 1.05;
  margin: 0 0 1rem 0;
}

.due-hero__h2 {
  font-size: var(--h2-size, clamp(1.3rem, 2.6vw, 2rem));
  margin: 0 0 0.75rem 0;
}

.due-hero__h3 {
  font-size: var(--h3-size, clamp(1.1rem, 2.0vw, 1.5rem));
  margin: 0 0 1.25rem 0;
}

.due-hero__cta {
  margin-top: 1.5rem;
}