/* ==========================================================================
   HERO con video di sfondo a tutta larghezza e testo a sinistra - solo schermi > 800px
   --------------------------------------------------------------------------
   Il blocco <video class="rshm-hero-video"> (GreenShift Element) sta dentro la hero e
   riempie tutta la fascia. Sotto gli 800px il video e' nascosto e la hero resta com'era.
   Valido solo nella home (body.home). Caricato da
   wp-content/novamira-sandbox/rshm-home-assets.php, dopo rshm-home.css.
   ========================================================================== */
:root { --rshm-hero-poster: url("https://www.raffaelescaglione.com/wp-content/uploads/2026/10/hero-stanza-poster.jpg"); }

@media (max-width: 800px) {
  body.home .rshm-hero .rshm-hero-video { display: none; }
}

@media (min-width: 801px) {

  body.home .rshm-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;               /* i z-index negativi restano dentro la hero */
    background-color: var(--rs-green-900);
    padding-top: 104px;
    padding-bottom: 96px;
  }

  /* poster (::before) e video condividono lo stesso riquadro: a destra, alto quanto la hero,
     con le proporzioni del video (21:9). Se la hero e' piu' larga il resto resta verde e il
     bordo sinistro sfuma; se e' piu' stretta il riquadro la copre tutta (ritaglio ai lati).
     Cosi' la scena non viene mai ingrandita e tagliata, nemmeno sugli schermi molto larghi. */
  body.home .rshm-hero::before,
  body.home .rshm-hero .rshm-hero-video {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    aspect-ratio: 1470 / 630;
    max-width: 100%;
    z-index: -2;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
            mask-image: linear-gradient(90deg, transparent 0, #000 16%);
  }
  body.home .rshm-hero::before {
    background: var(--rshm-hero-poster, none) 50% 50% / cover no-repeat;   /* fotogramma fermo: subito visibile e per "riduci movimento" */
  }
  body.home .rshm-hero .rshm-hero-video {
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* velo verde scuro: fitto a sinistra (testo), leggero a destra (la stanza) */
  body.home .rshm-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(90deg,
        rgba(18, 38, 26, .96) 0%,
        rgba(18, 38, 26, .92) 32%,
        rgba(18, 38, 26, .68) 48%,
        rgba(18, 38, 26, .34) 66%,
        rgba(18, 38, 26, .22) 100%),
      linear-gradient(180deg,
        rgba(18, 38, 26, .40) 0%,
        rgba(18, 38, 26, 0) 22%,
        rgba(18, 38, 26, 0) 78%,
        rgba(18, 38, 26, .45) 100%);
  }

  /* solo titolo, sottotitolo e pulsanti passano a sinistra; sugli schermi larghi
     la colonna si avvicina al bordo (max 10vw) invece di restare al centro */
  body.home .rshm-hero .rshm-wrap {
    align-items: flex-start;
    text-align: left;
    max-width: min(var(--wp--style--global--wide-size, 1200px), 100%);
    margin-left: min(max(0px, calc((100% - 1200px) / 2)), 10vw);
    margin-right: auto;
  }
  body.home .rshm-hero .rshm-wrap > * { max-width: min(600px, 100%); }
  body.home .rshm-hero .rshm-h1 { font-size: clamp(2.25rem, 3.6vw, 3rem); }
  body.home .rshm-hero .rshm-ctarow { align-items: flex-start; width: auto; }
}

/* portatili: colonna di testo un po' piu' stretta */
@media (min-width: 801px) and (max-width: 1500px) {
  body.home .rshm-hero .rshm-wrap > * { max-width: min(520px, 100%); }
  body.home .rshm-hero .rshm-h1 { font-size: clamp(2rem, 3vw, 2.5rem); }
}

/* chi ha chiesto meno movimento: resta il fotogramma fermo */
@media (prefers-reduced-motion: reduce) {
  body.home .rshm-hero .rshm-hero-video { display: none; }
}