.nb-prod{position:relative;overflow:hidden;border-radius:20px;background-color:#1a1a1a;aspect-ratio:9 / 16;row-gap:0;column-gap:0;}
.nb-prod-poster{position:absolute;top:0;left:0;width:100%;height:100%;}
.nb-prod-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.nb-prod-info{position:absolute;left:0;right:0;top:0;bottom:0;padding:24px 24px 24px 24px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;}
.nb-prod-cat{align-self:flex-start;color:#ffffff;font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;background-color:rgba(255, 255, 255, 0.14);padding:7px 12px 7px 12px;border-radius:999px 999px 999px 999px;}
.nb-prod-title{color:#ffffff;font-size:24px;line-height:1.15;margin:0 0 0 0;}

/* grapely:css-personalizzato */
/* Il video copre il poster appena parte; velatura per leggere i testi; zoom al passaggio. */
.nb-prod .env-post-field-image { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.nb-prod .nb-prod-video { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.nb-prod .nb-prod-video:not([src]) { display: none; }
/* Con il video niente immagine prima del caricamento: resta il fondo scuro. L'immagine serve solo se il video manca. */
.nb-prod:has(.nb-prod-video[src]) .nb-prod-poster { display: none; }
.nb-prod::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.8) 100%); }
.nb-prod .nb-prod-info { z-index: 2; }
.nb-prod .nb-prod-cat { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nb-prod .nb-prod-title a { color: inherit; text-decoration: none; pointer-events: auto; }
.nb-prod .nb-prod-title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.nb-prod:hover .nb-prod-video { transform: scale(1.05); }