/* =============================================================================
   MeteoMatrimonio — Home v3

   Una sola scenografia editoriale ad alta definizione sostituisce la somma di
   sticker della v2. Il contenuto e la logica della landing restano invariati.
   ========================================================================== */

:root {
  --v3-coral: #d85f4a;
  --v3-coral-deep: #a63f31;
  --v3-coral-soft: #f8ded7;
  --v3-sun: #f0bd43;
  --v3-blue: #6796b6;
  --v3-sage: #6f8f78;
  --v3-ivory: #fffaf2;
}

/* La scenografia ha un'altezza propria, non quella dell'hero. Dipingendola
   come background della sezione, l'immagine (alta `larghezza / 1.5`) e la
   sfumatura che la spegne (con gli stop in percentuale dell'altezza della
   sezione) coincidevano solo intorno ai 1440px: più stretto si vedeva la
   cucitura netta dove finiva l'immagine, e sotto i 1000px — dove l'hero
   passa da ~1300 a ~2500px — restavano due terzi di carta vuota.
   Due fasce a misura fissa, con la dissolvenza in maschera sulla fascia
   stessa, si chiudono sempre allo stesso punto a qualunque larghezza. */
.home-v3 .hero {
  isolation: isolate;
  background: var(--paper);
}
.home-v3 .hero::before,
.home-v3 .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
}
.home-v3 .hero::before {
  inset-block-start: 0;
  /* La fascia segue la larghezza finché l'hero è a due colonne e la sua
     quota d'altezza quando passa a colonna unica e si allunga: è fuori
     flusso, quindi la percentuale legge l'hero senza circolarità. */
  block-size: clamp(26rem, max(50vw, 42%), 52rem);
  background-image:
    linear-gradient(180deg, rgba(255, 250, 242, .22), rgba(255, 250, 242, .46) 58%, rgba(255, 250, 242, .62)),
    url("/img/v3/wedding-weather-celebration.webp");
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 46%, rgba(0, 0, 0, .55) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 46%, rgba(0, 0, 0, .55) 78%, transparent 100%);
}
/* Chiusura: l'hero lungo della colonna unica finirebbe altrimenti nel vuoto.
   Stessa immagine specchiata, così non si legge come una ripetizione. */
.home-v3 .hero::after {
  inset-block-end: 0;
  block-size: clamp(13rem, max(26vw, 22%), 26rem);
  background-image:
    linear-gradient(180deg, rgba(255, 250, 242, .58), rgba(255, 250, 242, .34)),
    url("/img/v3/wedding-weather-celebration.webp");
  background-position: center bottom;
  transform: scaleX(-1);
  /* Sfuma da entrambi i lati: sul bordo inferiore l'hero incontra la sezione
     successiva, e un'immagine a piena opacità lascerebbe lì la stessa
     cucitura che stiamo togliendo da metà sezione. */
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%, rgba(0, 0, 0, .58) 64%, transparent 100%);
  mask-image: linear-gradient(to top, transparent 0, #000 22%, rgba(0, 0, 0, .58) 64%, transparent 100%);
}

.home-v3 .hero__copy {
  position: relative;
  z-index: 1;
}
.home-v3 .hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2.25rem -2rem -2.75rem;
  border-radius: 2rem;
  background: rgba(255, 250, 242, .84);
  box-shadow: 0 0 3rem 2.4rem rgba(255, 250, 242, .72);
}

.home-v3 .hero h1 {
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}
.home-v3 .hero .eyebrow,
.home-v3 .console__title {
  color: var(--v3-coral-deep);
}
.home-v3 .hero .eyebrow__rule {
  background: var(--v3-coral);
}

.home-v3 .console {
  border-color: rgba(216, 95, 74, .32);
  box-shadow:
    0 3px 8px rgba(74, 40, 28, .05),
    0 24px 60px rgba(74, 40, 28, .14);
}
.home-v3 .console .btn--primary {
  background: var(--v3-coral-deep);
  border-color: var(--v3-coral-deep);
}
.home-v3 .console .btn--primary:hover {
  background: #873226;
  border-color: #873226;
}

.home-v3 .preview-card--free {
  border-color: rgba(103, 150, 182, .42);
  box-shadow: 0 18px 48px rgba(53, 84, 105, .12);
}
.home-v3 .preview-card--free .tag {
  background: var(--v3-coral-soft);
  color: var(--v3-coral-deep);
}
.home-v3 .preview-card--paid {
  box-shadow: 0 24px 58px rgba(13, 27, 42, .2);
}

.home-v3 .trust-strip {
  position: relative;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(216, 95, 74, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 36px rgba(74, 40, 28, .08);
  backdrop-filter: blur(10px);
}
.home-v3 .trust-strip .icon { color: var(--v3-coral-deep); }

.home-v3 .method {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 22%, rgba(248, 222, 215, .78), transparent 24rem),
    radial-gradient(circle at 88% 78%, rgba(240, 189, 67, .18), transparent 22rem),
    var(--v3-ivory);
}
.home-v3 .method::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("/img/v3/wedding-weather-celebration.webp") center bottom / 100% auto no-repeat;
  opacity: .16;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 44%, #000 100%);
}
.home-v3 .method .section-head {
  padding: 1.25rem 1.5rem;
  border-radius: 1.25rem;
  background: rgba(255, 250, 242, .86);
  box-shadow: 0 0 2.5rem 1.5rem rgba(255, 250, 242, .72);
}
.home-v3 .method .eyebrow { color: var(--v3-coral-deep); }
.home-v3 .method .eyebrow__rule { background: var(--v3-coral); }
.home-v3 .compare__col { border-color: rgba(216, 95, 74, .24); }
.home-v3 .compare__col--accent {
  border-color: var(--v3-coral-deep);
  box-shadow: 0 22px 52px rgba(166, 63, 49, .13);
}
.home-v3 .compare__divider span {
  color: var(--v3-coral-deep);
  border-color: rgba(216, 95, 74, .32);
  background: var(--v3-coral-soft);
}

.home-v3 .preview-card--free .dot-matrix__key:first-child {
  white-space: normal;
}
.home-v3 .dot-matrix__qualifier {
  color: var(--ink-500);
  font-weight: 400;
}

@media (max-width: 999px) {
  .home-v3 .hero__copy::before {
    inset: -1.5rem -1rem -2rem;
    background: rgba(255, 250, 242, .88);
  }
  .home-v3 .trust-strip { border-radius: var(--radius-lg); }
}

@media (max-width: 700px) {
  /* Ritaglio dedicato: su un telefono la fascia è più alta che larga e
     `cover` dovrebbe ingrandire di quasi due volte l'originale. */
  .home-v3 .hero::before,
  .home-v3 .hero::after {
    background-image:
      linear-gradient(180deg, rgba(255, 250, 242, .16), rgba(255, 250, 242, .44) 58%, rgba(255, 250, 242, .6)),
      url("/img/v3/wedding-weather-celebration-sm.webp");
  }
  /* L'immagine è una cornice con il centro vuoto: su una fascia stretta il
     ritaglio va spostato su un bordo, altrimenti si inquadra la carta. */
  .home-v3 .hero::before { block-size: clamp(21rem, max(68vw, 30%), 34rem); background-position: 10% top; }
  .home-v3 .hero::after { block-size: clamp(10rem, max(34vw, 16%), 20rem); background-position: 88% bottom; }
  /* Anche il fondale della sezione "metodo", altrimenti il telefono
     scaricherebbe comunque la versione grande per dipingerlo al 12%. */
  .home-v3 .method::before { background-image: url("/img/v3/wedding-weather-celebration-sm.webp"); }
}

@media (max-width: 560px) {
  /* Il testo occupa tutta la larghezza e il suo alone copre la scenografia:
     un respiro in cima è l'unico punto in cui su un telefono la si vede. */
  .home-v3 .hero { padding-block-start: 4.5rem; }
  .home-v3 .hero__copy::before {
    inset: -1rem -.35rem -1.25rem;
    border-radius: 1.25rem;
    background: rgba(255, 250, 242, .86);
    box-shadow: 0 0 1.5rem 1rem rgba(255, 250, 242, .72);
  }
  .home-v3 .trust-strip { padding: 1rem; }
  .home-v3 .method::before {
    background-size: auto 46rem;
    background-position: center bottom;
    opacity: .12;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .home-v3 .trust-strip,
  .home-v3 .method .section-head { background: var(--v3-ivory); }
}

@media print {
  .home-v3 .hero,
  .home-v3 .method { background: var(--paper) !important; }
  .home-v3 .hero::before,
  .home-v3 .hero::after,
  .home-v3 .method::before { display: none; }
}