/* Banner scorrevoli della home (templates/_banner.html + static/js/banner.js).
   Velatura per slide da --vel (colore) e --vel-a (intensità), impostate dal back office. */
.bnr{position:relative;background:var(--navy);color:#fff}
.bnr-view{overflow:hidden;position:relative}
.bnr-track{display:flex;transition:transform .65s cubic-bezier(.4,0,.2,1);will-change:transform}
.bnr-track.drag{transition:none}
.bnr-slide{position:relative;flex:0 0 100%;min-width:0;display:flex;align-items:flex-end;min-height:clamp(480px,78vh,560px);overflow:hidden;background:var(--navy)}
.bnr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 30%}
@media (min-width:900px){.bnr-img{object-position:68% 50%}}
/* velatura: su telefono dal basso (il testo sta in basso), su schermo grande dal lato del testo */
.bnr-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,27,51,.9),rgba(11,27,51,.75) 55%,rgba(11,27,51,.2) 82%,rgba(11,27,51,.1));background:linear-gradient(0deg,
  color-mix(in srgb,var(--vel,#0b1b33) calc(var(--vel-a,.75)*100% + 14%),transparent) 0%,
  color-mix(in srgb,var(--vel,#0b1b33) calc(var(--vel-a,.75)*100%),transparent) 55%,
  color-mix(in srgb,var(--vel,#0b1b33) calc(var(--vel-b,.4)*50%),transparent) 82%,
  color-mix(in srgb,var(--vel,#0b1b33) calc(var(--vel-b,.4)*25%),transparent) 100%)}
.bnr-in{position:relative;z-index:1;width:100%;padding-top:48px;padding-bottom:28px}
.bnr-box{max-width:600px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.bnr-eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;font-weight:700;color:var(--gold);margin:0 0 .7em}
.bnr-title{font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 .4em;color:#fff;text-wrap:balance}
.bnr-lead{font-size:clamp(.95rem,1.6vw,1.15rem);color:#e6edf5;max-width:54ch;margin:0}
.bnr-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.bnr-cta .btn{text-shadow:none}
.bnr-btn{background:var(--accent);color:#fff;box-shadow:0 4px 18px rgba(46,95,174,.45)}
.bnr-btn:hover{background:#3a72cc;color:#fff}
.bnr .btn-ghost{color:#fff}
.bnr .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.bnr a:focus-visible,.bnr button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* controlli */
.bnr-ctl{background:var(--navy);position:relative;z-index:2}
.bnr-ctl-in{display:flex;align-items:center;gap:6px;padding-top:6px;padding-bottom:10px}
.bnr-b{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;flex:none}
.bnr-b:hover{background:rgba(255,255,255,.2)}
.bnr-b svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bnr-play .i-play{display:none}
.bnr-play .i-play path{fill:currentColor;stroke:none}
.bnr.fermo .bnr-play .i-play{display:block}
.bnr.fermo .bnr-play .i-pausa{display:none}
.bnr-dots{display:flex;align-items:center;flex:1;justify-content:center}
.bnr-dot{position:relative;width:32px;height:44px;border:0;background:none;cursor:pointer;padding:0}
.bnr-dot::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:5px;background:rgba(255,255,255,.45);transition:width .3s,margin .3s,background .3s}
.bnr-dot:hover::before{background:rgba(255,255,255,.8)}
.bnr-dot[aria-current="true"]::before{width:26px;margin-left:-13px;background:#6f9be0}
/* la sezione successiva non copre i controlli */
.bnr + .pillars{margin-top:16px}

@media (min-width:900px){
  .bnr-slide{align-items:center;min-height:clamp(460px,64vh,600px)}
  .bnr-in{padding-top:56px;padding-bottom:96px}
  .bnr-slide::after{background:linear-gradient(90deg,rgba(11,27,51,.88),rgba(11,27,51,.75) 45%,rgba(11,27,51,.3) 66%,transparent 88%);background:linear-gradient(90deg,
    color-mix(in srgb,var(--vel,#0b1b33) calc(var(--vel-a,.75)*100% + 12%),transparent) 0%,
    color-mix(in srgb,var(--vel,#0b1b33) calc(var(--vel-a,.75)*100%),transparent) 45%,
    color-mix(in srgb,var(--vel,#0b1b33) calc(var(--vel-b,.4)*100%),transparent) 66%,
    transparent 88%)}
  .pos-destra .bnr-img{object-position:32% 50%}
  .pos-destra .bnr-box{margin-left:auto}
  .pos-destra::after{transform:scaleX(-1)}
  .pos-centro .bnr-box{margin:0 auto;text-align:center}
  .pos-centro .bnr-lead{margin:0 auto}
  .pos-centro .bnr-cta{justify-content:center}
  .pos-centro::after{background:color-mix(in srgb,var(--vel,#0b1b33) calc(var(--vel-a,.75)*100%),transparent)}
  /* controlli sovrapposti in basso, sopra le card che salgono sul banner */
  .bnr-ctl{position:absolute;left:0;right:0;bottom:44px;background:none}
  .bnr-ctl-in{justify-content:flex-start;padding:0 16px}
  .bnr-dots{flex:none;margin:0 4px}
  .bnr + .pillars{margin-top:-36px}
}
@media (prefers-reduced-motion:reduce){
  .bnr-track{transition:none}
  .bnr-dot::before{transition:none}
}
@media (forced-colors:active){
  .bnr-dot::before{background:ButtonText}
  .bnr-dot[aria-current="true"]::before{background:Highlight}
}