/* soluzioni.css: pagine Soluzioni (format, tipologie di evento, settori e riepilogo). Si carica dopo shared.css. */

/* hero a tutta altezza, con breadcrumb in alto */
.shero{height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:140px 0 80px}
.shero>.wrap{padding-top:0;align-items:center}
.shero .l{margin-top:0}
.shero .ph{height:auto;border-radius:var(--r-xl);overflow:hidden}
.shero .ph img{height:auto;aspect-ratio:1;object-fit:cover;display:block;width:100%}
.shero .crumb2{position:absolute;top:96px;left:0;right:0;z-index:3}
.shero .crumb2 a{color:var(--muted);transition:color .2s ease}
.shero .crumb2 a:hover{color:var(--teal-700);text-decoration:underline;text-underline-offset:4px}

/* icone dei servizi come nel resto del sito */
.svc .ibox,.so-grid .ibox{background:#348e9e;color:#fff;display:grid;place-items:center;width:56px;height:56px;border-radius:16px}
.svc .ibox svg,.so-grid .ibox svg{width:28px;height:28px}
.srow h2{margin-left:0;margin-right:0;max-width:none;text-align:left;font-size:var(--fs-ds);line-height:var(--lh-ds);letter-spacing:var(--ls-ds);font-weight:var(--fw-ds)}
.srow p{color:var(--ink-2);font-size:var(--fs-bl);line-height:var(--lh-bl)}
.srow img{height:auto;aspect-ratio:4/3;object-fit:cover}
.srow .shot.r43{aspect-ratio:4/3;height:auto}
.addon .arow ul li svg{color:var(--teal)}

/* video della sezione servizi */
.svc .band{position:relative;box-shadow:none}
.fx-play{all:unset;cursor:pointer;position:relative;display:block}
.fx-play img{display:block;width:100%;height:auto;transition:opacity .25s ease}
.fx-play:hover img{opacity:.9}
.fx-play .pl{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:var(--amber);color:#2b3036;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25);transition:box-shadow .25s ease}
.fx-play:hover .pl{box-shadow:inset 0 0 0 50px rgba(252,252,252,.4),0 6px 20px rgba(0,0,0,.25)}
.fx-play .pl svg{width:34px;height:34px;fill:currentColor;stroke:none;margin-left:5px}
.fx-play:focus-visible{outline:3px solid var(--amber);outline-offset:4px;border-radius:16px}

/* tipologie di evento */
.so-types{padding:136px 0;text-align:center}
.so-types h2{margin-top:24px;font-size:var(--fs-ds);line-height:var(--lh-ds);letter-spacing:var(--ls-ds);font-weight:var(--fw-ds)}
.so-types .lead2{margin:20px auto 0;max-width:760px}
.so-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;text-align:left}
.so-grid>*{min-width:0}
.so-grid .c{background:#fff;border:1px solid #e1e4e8;border-radius:var(--r-xl);padding:28px;display:flex;flex-direction:column;align-items:flex-start}
.so-grid h3{margin-top:20px;font-size:var(--fs-hs);line-height:var(--lh-hs);font-weight:var(--fw-hs)}
.so-grid p{margin-top:10px;color:var(--ink-2);font-size:var(--fs-bm);line-height:var(--lh-bm)}
.so-grid .lnk{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:var(--fs-bm);color:var(--teal-700)}
.so-grid .lnk svg{width:16px;height:16px;stroke-width:2.2;transition:transform .25s ease}
.so-grid .lnk:hover svg{transform:translateX(4px)}

/* vantaggi: titoli a 32 e linee grigie come nel resto del sito */
.sw .it h3{font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}
.sw .it{border-bottom:1px solid #a9aeb6}
.sw .it:last-child{border-bottom:0}

/* clienti: nastro dei loghi in nero e slider dei casi studio */
.scl .logos{margin-top:48px}
.scl .logos .lg{background:#303030}
.so-cases{margin-top:120px;text-align:left}

@media (max-width:1100px){
  .shero{min-height:0;padding:130px 0 64px}

  .so-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .shero .crumb2{top:90px}
  .so-types{padding:72px 0}
  .so-grid{grid-template-columns:1fr}
  .fx-play .pl{width:64px;height:64px;margin:-32px 0 0 -32px}
}
/* il contenitore del breadcrumb non deve ereditare la griglia della hero */
.shero .crumb2 .wrap{display:flex;grid-template-columns:none;padding-top:0}
.srow{text-align:left}
.shero .crumb2 .wrap{justify-content:flex-start;gap:14px}
.shero>.wrap{grid-template-columns:minmax(0,1fr) minmax(0,600px);gap:64px}
@media (max-width:1100px){.shero>.wrap{grid-template-columns:minmax(0,1fr)}}

/* pagine per tipologia di evento e per settore: card con icone al posto delle foto */
.so-grid.c4{grid-template-columns:repeat(4,1fr)}
.so-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 32px;margin-top:56px;text-align:left}
.so-mini>*{min-width:0}
.so-mini .ibox{background:#e3f1f2;color:#348e9e;display:grid;place-items:center;width:48px;height:48px;border-radius:14px}
.so-mini .ibox svg{width:24px;height:24px}
.so-mini h3{margin-top:16px;font-size:var(--fs-tl);line-height:var(--lh-tl);font-weight:600}
.so-mini p{margin-top:8px;color:var(--ink-2);font-size:var(--fs-bm);line-height:var(--lh-bm)}
.so-ext{border-top:1px solid #e1e4e8}
@media (max-width:1100px){.so-grid.c4,.so-mini{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.so-grid.c4,.so-mini{grid-template-columns:1fr}}

/* hero: sfondo con i cerchi del logo, al posto delle forme decorative */
.shero{background:#fcfcfc url(/img/soluzioni/bg-hero.jpg) center bottom/cover no-repeat}

/* servizi aggiuntivi: immagini tutte uguali, 664 x 708 */
.arow{grid-template-columns:664px 1fr;align-items:center}
.arow.rev{grid-template-columns:1fr 664px}
.addon h2.top+.arow.rev{margin-top:49px}
.arow img{aspect-ratio:664/708;height:auto;object-fit:cover}

/* video dei servizi: lo stesso player dei casi studio */
.svc .so-video{box-shadow:none;border-radius:0;overflow:visible}
.so-video .fr{position:relative;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;background:#162d31;box-shadow:0 12px 40px rgba(30,50,55,.14)}
.so-video button{all:unset;cursor:pointer;position:absolute;inset:0;display:block}
.so-video button img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:opacity .15s}
.so-video button:hover img{opacity:1}
.so-video button i{transition:box-shadow .25s ease;position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:var(--amber);display:grid;place-items:center;color:#2b3036;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.so-video button:hover i{box-shadow:inset 0 0 0 50px rgba(252,252,252,.4),0 6px 20px rgba(0,0,0,.25)}
.so-video button i svg{width:34px;height:34px;fill:currentColor;stroke:none;margin-left:5px}
.so-video button:focus-visible{outline:3px solid var(--amber);outline-offset:-6px}
.so-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.so-video .pv{margin-top:12px;color:var(--muted);text-align:center;font-size:var(--fs-bs);line-height:var(--lh-bs)}

/* numeri con etichetta */
.snums .tag+.stats{margin-top:56px}

/* gli altri format, prima dei clienti */
.so-plat{padding:136px 0;text-align:center}
.so-plat h2{margin:24px auto 0;max-width:860px;font-size:var(--fs-ds);line-height:var(--lh-ds);letter-spacing:var(--ls-ds);font-weight:var(--fw-ds)}
.so-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;text-align:left}
.so-pgrid.c4{grid-template-columns:repeat(4,1fr)}
.so-pgrid>*{min-width:0}
.so-pgrid .c{display:flex;flex-direction:column;background:#fff;border:1px solid #e1e4e8;border-radius:var(--r-xl);overflow:hidden;color:inherit;transition:box-shadow .25s ease}
.so-pgrid .c:hover{box-shadow:0 12px 32px rgba(30,50,55,.12)}
.so-pgrid img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;display:block}
.so-pgrid .b{padding:24px 28px 28px;display:flex;flex-direction:column;flex:1}
.so-pgrid h3{font-size:var(--fs-hs);line-height:var(--lh-hs);font-weight:var(--fw-hs)}
.so-pgrid p{margin-top:10px;color:var(--ink-2);font-size:var(--fs-bm);line-height:var(--lh-bm)}
.so-pgrid .lnk{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:var(--fs-bm);color:var(--teal-700)}
.so-pgrid .lnk svg{width:16px;height:16px;stroke-width:2.2;transition:transform .25s ease}
.so-pgrid .c:hover .lnk svg{transform:translateX(4px)}

@media (max-width:1100px){
  .arow,.arow.rev{grid-template-columns:1fr}
  .so-pgrid,.so-pgrid.c4{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .so-plat{padding:72px 0}
  .so-pgrid,.so-pgrid.c4{grid-template-columns:1fr}
  .so-video button i{width:68px;height:68px;margin:-34px 0 0 -34px}
}

/* pagina di riepilogo /soluzioni/ (linkata solo dal footer) */
.shero.solo{min-height:0;padding:200px 0 120px}
.shero.solo>.wrap{grid-template-columns:minmax(0,860px)}
.so-sum{scroll-margin-top:80px}
.so-sum+.so-sum{padding-top:0}

/* tipologie e settori: video dopo la hero */

/* tipologie: «perché» su grigio chiaro, funzionalità su fascia scura con il link alla piattaforma */
.so-why.lt{background:#f6f7f8}
.so-ext.dk{background:url(/img/soluzioni/dk-forma-alto.png) right top/min(290px,38vw) auto no-repeat,url(/img/soluzioni/dk-forma-basso.png) left bottom/min(270px,36vw) auto no-repeat,#1d6e7c;border-top:0;color:#fff}
.so-ext.dk h2{color:#fff}
.so-ext.dk .lead2{color:rgba(255,255,255,.8)}
.so-ext.dk .so-mini h3{color:#fff}
.so-ext.dk .so-mini p{color:rgba(255,255,255,.75)}
.so-ext.dk .so-mini .ibox{background:#348e9e;color:#fff}
.so-ext.dk .so-cta{margin-top:64px}
.so-ext.dk .btn-x{background:#88bec1;color:#1e2228;box-shadow:0 2px 6px rgba(0,0,0,.12)}
@media (hover:hover){.so-ext.dk .btn-x:hover{box-shadow:inset 0 0 0 100px rgba(252,252,252,.4),0 2px 6px rgba(0,0,0,.12)}}
.so-ext.dk .btn-x svg{width:18px;height:18px}

/* format in card compatte con icona (tipologie e settori) */
.so-fmt2{padding:136px 0 0;text-align:center}
.so-fmt2 h2{margin:24px auto 0;max-width:860px;font-size:var(--fs-ds);line-height:var(--lh-ds);letter-spacing:var(--ls-ds);font-weight:var(--fw-ds)}
.so-flist{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;text-align:left}
.so-flist>*{min-width:0}
.so-flist .c{display:flex;align-items:flex-start;gap:20px;padding:28px;border:1px solid #e1e4e8;border-radius:var(--r-xl);background:#fff;color:inherit;transition:box-shadow .25s ease}
.so-flist .c:hover{box-shadow:0 12px 32px rgba(30,50,55,.12)}
.so-flist .ibox{flex:none;background:#348e9e;color:#fff;display:grid;place-items:center;width:56px;height:56px;border-radius:16px}
.so-flist .ibox svg{width:28px;height:28px}
.so-flist .c>div{flex:1;min-width:0}
.so-flist h3{font-size:var(--fs-hs);line-height:var(--lh-hs);letter-spacing:var(--ls-hs);font-weight:var(--fw-hs)}
.so-flist p{margin-top:8px;color:var(--ink-2);font-size:var(--fs-bm);line-height:var(--lh-bm)}
.so-flist .ar{flex:none;width:20px;height:20px;margin-top:4px;color:var(--teal-700);stroke-width:2.2;transition:transform .25s ease}
.so-flist .c:hover .ar{transform:translateX(4px)}
.so-fmt2+.so-port{padding-top:136px}
@media (max-width:1100px){.so-flist{grid-template-columns:1fr}}
@media (max-width:720px){.so-fmt2{padding-top:72px}.so-fmt2+.so-port{padding-top:88px}}

/* numeri con titolo, come nelle altre fasce numeri */
.snums h2{position:relative;color:#fff;margin-top:26px;font-size:var(--fs-dm);line-height:var(--lh-dm);letter-spacing:var(--ls-dm);font-weight:var(--fw-dm)}
.snums h2+.stats{margin-top:56px}


/* «Perché ibrida.io» e funzionalità: titoli allineati a sinistra */
.so-ext{text-align:left}
.so-ext .lead2{margin-left:0}
/* video dentro la sezione Perché ibrida.io, tra il titolo e le card */
.so-why .so-video{margin-top:64px}
/* fascia scura delle funzionalità: card scure come in "C'è di più" */
.so-ext.dk .so-mini{gap:24px}
.so-ext.dk .so-mini .c{background:#2d333b;border-radius:var(--r-xl);padding:24px}
.so-ext.dk .so-mini .ibox{background:#348e9e}
.scl{padding:136px 0}
@media (max-width:720px){.so-types,.so-plat,.scl{padding:88px 0}.so-fmt2{padding-top:88px}.so-fmt2+.so-port{padding-top:88px}}
@media (max-width:720px){.so-ext.dk .so-cta .btn{width:100%;white-space:normal;text-align:center}}
/* riga che introduce il video sotto le card */
.so-why .so-vl{margin-top:72px;color:var(--ink-2);font-size:var(--fs-tl);line-height:var(--lh-tl)}
.so-why .so-vl b{color:var(--ink);font-weight:600}
.so-why .so-vl+.so-video{margin-top:24px}
@media (max-width:720px){.so-why .so-vl{margin-top:56px}}