/* Hero video — variante alternativa della home (index-video.html).
   Non tocca index.html: questo foglio viene caricato solo dalla variante. */

.hero-v{position:relative;overflow:hidden;background:#0b2d46;isolation:isolate}
.hero-v .bg{position:absolute;inset:0;z-index:0}
.hero-v .bg img{width:100%;height:100%;object-fit:cover;display:block;filter:blur(7px);transform:scale(1.04)}
/* velo nei blu del marchio: tiene il testo leggibile senza spegnere il video */
.hero-v .bg:after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,#072639f2 0%,#093050e3 40%,#0b345594 70%,#0d3a5c63 100%)}
.hero-v .inner{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:86px 4% 74px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}

.hero-v .eyebrow{color:#8fd2f6;margin-bottom:18px}
.hero-v h1{color:#fff;font-size:clamp(44px,5.3vw,78px);letter-spacing:-.06em;line-height:1.02;margin-bottom:22px}
.hero-v h1 em{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#7fc8f2}
.hero-v .text{color:#d9e9f3;font-size:17px;line-height:1.75;max-width:480px;margin-bottom:30px}
.hero-v .meta{display:flex;gap:46px;flex-wrap:wrap;margin-bottom:34px}
.hero-v .meta span{display:block}
.hero-v .meta .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9dc4d9;margin-bottom:7px}
.hero-v .meta .v{font-size:23px;color:#fff;letter-spacing:-.03em}
.hero-v .content-btn .btn-secondary{background:#0f8fd6;border-color:#0f8fd6}
.hero-v .text-link{color:#cfe6f3}

/* la stessa scheda bianca della home attuale, appoggiata sullo sfondo fotografico */
.hero-v .img-preview{background:#fff;padding:28px;width:100%;max-width:470px;margin-left:auto;
  box-shadow:0 30px 70px #00131f59}


/* il video vive dentro la scheda bianca, sopra la foto di sfondo */
.hero-v .vbox{position:relative}
.hero-v .vbox video{width:100%;height:290px;object-fit:cover;display:block;background:#0b2d46}
.hero-v .vbox .fallback{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-v .vbox.novideo video{display:none}
.hero-v .vbox.novideo .fallback{display:block}
.hero-v .vctrl{position:absolute;right:10px;bottom:10px;z-index:2;background:#06233ab3;border:1px solid #ffffff59;
  color:#fff;font-size:10px;letter-spacing:.12em;padding:8px 12px;border-radius:2px}
.hero-v .vctrl:hover{background:#06233ae6}

@media(max-width:900px){
  .hero-v .vbox video{height:250px}
  .hero-v .inner{grid-template-columns:minmax(0,1fr);gap:34px;padding:54px 5% 56px}
  .hero-v .img-preview{margin-left:0;max-width:100%}
  .hero-v .bg:after{background:linear-gradient(180deg,#082a43d6 0%,#0a3050bf 52%,#0b3455a6 100%)}
}
@media(max-width:600px){
  .hero-v .inner{padding:40px 20px 44px}
  .hero-v h1{font-size:47px}
  .hero-v .text{font-size:16px}
  .hero-v .meta{gap:26px}
  .hero-v .meta .v{font-size:19px}
  .hero-v .img-preview{padding:20px}
  .hero-v .vbox video{height:210px}
  .hero-v .vctrl{right:10px;bottom:10px;padding:7px 10px}
}
/* Il video resta SEMPRE visibile: se il sistema chiede meno animazioni
   o il browser blocca la riproduzione automatica, si vede fermo sul primo
   fotogramma e il pulsante diventa "avvia". */

/* Video del negozio girato da Mara in verticale (29-09): il riquadro segue
   il formato del filmato invece di ritagliarlo in una fascia orizzontale. */
.hero-v .vbox{width:fit-content;max-width:100%;margin:0 auto}
.hero-v .vbox video{height:480px;width:auto;max-width:100%;aspect-ratio:478/778;object-fit:cover}
@media(max-width:900px){.hero-v .vbox video{height:440px}}
@media(max-width:600px){.hero-v .vbox video{height:400px}}
.hero-v .hero-label{text-align:center}

/* 29-09: via il riquadro video, al suo posto la foto vera del negozio
   (Mara e Mario al banco), senza scheda bianca attorno. */
.hero-v .hero-photo{margin:0 0 0 auto;max-width:480px;width:100%}
.hero-v .hero-photo img{display:block;width:100%;height:auto;aspect-ratio:1040/1000;object-fit:cover;
  border-radius:4px;box-shadow:0 30px 70px #00131f59}
.hero-v .hero-photo figcaption{margin-top:16px;padding-left:14px;border-left:2px solid #0f8fd6}
.hero-v .hero-photo strong{display:block;color:#fff;font-size:16px;letter-spacing:-.01em}
.hero-v .hero-photo span{display:block;color:#9dc4d9;font-size:13px;margin-top:4px}
@media(max-width:900px){.hero-v .hero-photo{margin:0;max-width:560px}}
/* 29-09: illustrazione elettrodomestici in bianco e blu al posto della foto */
.hero-v .hero-photo img{aspect-ratio:1560/1140}
/* 29-09 sera: foto professionale del banco di riparazione (bianco e blu) al posto dell'illustrazione */
.hero-v .hero-photo img{aspect-ratio:1040/1000}
/* 29-09 sera: 4 immagini in quadrato 2x2 al posto dell'immagine singola */
.hero-v .hero-photo .hero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;aspect-ratio:1/1;
  border-radius:4px;overflow:hidden;box-shadow:0 30px 70px #00131f59}
.hero-v .hero-photo .hero-grid img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0;box-shadow:none}
/* 29-09 sera: al posto della griglia, grandi elettrodomestici (richiesta di Mara) */
.hero-v .hero-photo > img{aspect-ratio:1254/900}
/* 29-09 sera: quadrato con cornice bianca (richiesta di Mara): passe-partout bianco attorno e tra le foto */
.hero-v .hero-photo .hero-grid{gap:6px;padding:6px;background:#fff;border-radius:6px}
.hero-v .hero-photo .hero-grid img{border-radius:2px}
@media(max-width:600px){.hero-v .hero-photo .hero-grid{gap:4px;padding:4px}}
/* 30-09 sera: mosaico con le foto vere dei marchi scelto da Mara, immagine unica gia' composta */
.hero-v .hero-photo > img.hero-mosaico{aspect-ratio:696/616;object-fit:cover;background:#fff;padding:6px;border-radius:6px}
@media(max-width:600px){.hero-v .hero-photo > img.hero-mosaico{padding:4px}}