/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 19 2026 | 13:05:40 */
/* ==========================================================================
   CONTE MANGESA — HOME · SEZIONE 1 · HERO
   Snippet:   cm-hero-home (CSS)
   Dove:      Custom CSS & JS → Frontend → Header → File esterno
   Struttura in Elementor (pagina Home):
     Contenitore (larghezza piena) ................ cm-hero-home
       ├── Immagine (foto colline + Conte) ........ cm-hero-home__bg
       └── Contenitore (testi) .................... cm-hero-home__content
             ├── Titolo "Quando un vino"   (div) .. cm-hero-home__kicker
             ├── Titolo "DIVENTA LEGGENDA" (div) .. cm-hero-home__title
             ├── Titolo sottotitolo        (H1) ... cm-hero-home__subtitle
             └── Pulsante "SCOPRI I VINI" ......... cm-hero-home__cta
   La foto è un vero widget Immagine (non uno sfondo): così ha il testo
   alternativo per Google e il browser scarica la misura giusta per ogni schermo.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CONTENITORE — a tutto schermo
   -------------------------------------------------------------------------- */
.elementor .e-con.cm-hero-home {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100svh;                           /* altezza schermo corretta anche su iPhone */
  padding: 140px var(--cm-gutter) var(--cm-space-3xl);  /* 140px sopra = spazio per l'header */
  overflow: hidden;
  background-color: var(--cm-black);
}


/* --------------------------------------------------------------------------
   2. FOTO DI SFONDO + SFUMATURA SCURA
   -------------------------------------------------------------------------- */
.elementor .cm-hero-home__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
}

.elementor .cm-hero-home__bg .elementor-widget-container,
.elementor .cm-hero-home__bg a {
  height: 100%;
}

.elementor .cm-hero-home__bg img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;                  /* tiene il Conte nell'inquadratura */
}

/* Sfumatura: scura a sinistra (sotto il testo), trasparente a destra (sul Conte),
   più una leggera sfumatura in basso per fondersi con la sezione successiva */
.elementor .cm-hero-home__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--cm-overlay-strong) 0%, var(--cm-overlay) 38%, transparent 70%),
    linear-gradient(0deg, var(--cm-black) 0%, transparent 22%);
}


/* --------------------------------------------------------------------------
   3. TESTI
   -------------------------------------------------------------------------- */
.elementor .e-con.cm-hero-home__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  max-width: 820px;
  margin: 0;
  padding: 0;
}

.elementor .cm-hero-home .elementor-heading-title {
  margin: 0;
}

/* "Quando un vino" */
.elementor .cm-hero-home__kicker .elementor-heading-title {
  font-family: var(--cm-font-body);
  font-size: 68px;                              /* grandezza "Quando un vino" */
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cm-white);
}

/* "DIVENTA LEGGENDA" — va a capo da solo su due righe */
.elementor .cm-hero-home__title .elementor-heading-title {
  max-width: 5em;
  margin-top: 8px;
  font-family: var(--cm-font-display);
  font-size: 120px;                             /* grandezza "DIVENTA LEGGENDA" */
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cm-gold);
}

/* Sottotitolo (è l'H1 della pagina) */
.elementor .cm-hero-home__subtitle {
  margin-top: 36px;
}

.elementor .cm-hero-home__subtitle .elementor-heading-title {
  max-width: 720px;                             /* larghezza sottotitolo: 2 righe */
  font-family: var(--cm-font-body);
  font-size: 28px;                              /* grandezza sottotitolo */
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cm-white);
}


/* --------------------------------------------------------------------------
   4. PULSANTE "SCOPRI I VINI"
   -------------------------------------------------------------------------- */
.elementor .cm-hero-home__cta {
  margin-top: 48px;
}

.elementor .cm-hero-home__cta .elementor-button {
  display: inline-block;
  padding: 22px 48px;
  font-family: var(--cm-font-display);
  font-size: 22px;                              /* grandezza testo pulsante */
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cm-black);
  background-color: var(--cm-gold);
  border: 0;
  border-radius: var(--cm-radius-sm);
  transition: background-color var(--cm-transition);
}

.elementor .cm-hero-home__cta .elementor-button:hover,
.elementor .cm-hero-home__cta .elementor-button:focus {
  color: var(--cm-black);
  background-color: var(--cm-gold-hover);
}


/* --------------------------------------------------------------------------
   5. RESPONSIVE
   -------------------------------------------------------------------------- */

/* Portatili */
@media (max-width: 1280px) {
  .elementor .cm-hero-home__kicker .elementor-heading-title {
    font-size: 58px;
  }
  .elementor .cm-hero-home__title .elementor-heading-title {
    font-size: 100px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .elementor .e-con.cm-hero-home {
    padding-top: 120px;
  }
  .elementor .cm-hero-home__kicker .elementor-heading-title {
    font-size: 50px;
  }
  .elementor .cm-hero-home__title .elementor-heading-title {
    font-size: 84px;
  }
  .elementor .cm-hero-home__subtitle .elementor-heading-title {
    font-size: 24px;
  }
}

/* Mobile: testo in basso, Conte visibile in alto */
@media (max-width: 767px) {
  .elementor .e-con.cm-hero-home {
    justify-content: flex-end;
    padding: 120px var(--cm-gutter) 56px;
  }
  .elementor .cm-hero-home__bg img {
    object-position: 84% center;                /* Conte al centro su mobile */
  }
  .elementor .cm-hero-home__bg::after {
    background: linear-gradient(0deg, var(--cm-black) 0%, var(--cm-overlay-strong) 35%, var(--cm-overlay) 55%, transparent 80%);
  }
  .elementor .cm-hero-home__kicker .elementor-heading-title {
    font-size: 38px;
  }
  .elementor .cm-hero-home__title .elementor-heading-title {
    font-size: 58px;
  }
  .elementor .cm-hero-home__subtitle {
    margin-top: 24px;
  }
  .elementor .cm-hero-home__subtitle .elementor-heading-title {
    max-width: none;
    font-size: 20px;
  }
  .elementor .cm-hero-home__cta {
    margin-top: 32px;
  }
  .elementor .cm-hero-home__cta .elementor-button {
    padding: 18px 36px;
    font-size: 18px;
  }
}