/* funzioni.css: pagine delle singole funzionalità (/piattaforma-evento/…). Si carica dopo shared.css. */

/* hero a tutta altezza su #F6F7F8: breadcrumb in alto, testo a sinistra, immagine a destra; i punti di forza (se ci sono) in fondo */
.fx-hero{background:#f6f7f8;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:140px 0 48px}
.fx-hero .crumb2{position:absolute;top:96px;left:0;right:0;z-index:2;pointer-events:auto}
.fx-hero .crumb2 a{color:var(--muted);transition:color .2s ease}
.fx-hero .crumb2 a:hover{color:var(--teal-700);text-decoration:underline;text-underline-offset:4px}
.fx-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center}
.fx-hero .lab{display:flex;align-items:center;gap:14px;color:var(--teal-700);text-transform:uppercase;font-size:var(--fs-ll);line-height:var(--lh-caps);letter-spacing:var(--ls-caps);font-weight:var(--fw-caps)}
.fx-hero .ibox{width:48px;height:48px;border-radius:12px;background:#348e9e;color:#fff;display:grid;place-items:center;flex:none}
.fx-hero .ibox svg{width:26px;height:26px}
.fx-hero h1{margin-top:24px;font-size:var(--fs-dm);line-height:var(--lh-dm);letter-spacing:var(--ls-dm);font-weight:var(--fw-dm)}
.fx-hero .sub{margin-top:24px;max-width:600px;color:var(--ink-2);font-size:var(--fs-tm);line-height:var(--lh-tm);font-weight:var(--fw-tm)}
.fx-hero .btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.fx-hero .ph img{display:block;width:100%;max-width:620px;height:auto;margin-left:auto}
.fx-key{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.fx-key>*{min-width:0}
.fx-key .c{background:#fff;border:1px solid #e1e4e8;border-radius:var(--r-xl);padding:24px 28px}
.fx-key h3{font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm);min-height:calc(var(--lh-hm)*2)}
.fx-key p{margin-top:10px;color:var(--ink-2);font-size:var(--fs-bm);line-height:var(--lh-bm)}

/* «guarda in azione»: l'immagine apre il video */
.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}

/* icone delle card «C'è di più» come in home */
.more .ibox{background:#348e9e}

/* titoli dei passaggi in Headline Large */
.fx-hero~.how .stp h3{font-size:var(--fs-hl);line-height:var(--lh-hl);letter-spacing:var(--ls-hl);font-weight:var(--fw-hl)}

/* sezione video: un solo riquadro (prima lo sfondo grigio con margine sopra sembrava ripetersi) */
.fx-hero~.how .seeai .big{background:none;padding:0;border-radius:var(--r-xl);overflow:hidden}

/* «Come funziona» a card (con icona o numero) */
.fx-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:56px;text-align:left}
.fx-cards>*{min-width:0}
.fx-cards .c{background:#fff;border:1px solid #e1e4e8;border-radius:var(--r-xl);padding:32px}
.fx-cards .ibox{width:56px;height:56px;border-radius:16px;background:#348e9e;color:#fff;display:grid;place-items:center}
.fx-cards .ibox svg{width:28px;height:28px}
.fx-cards .nn{font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:var(--fs-bs);color:var(--teal)}
.fx-cards h3{margin-top:20px;font-size:var(--fs-hm);line-height:var(--lh-hm);font-weight:var(--fw-hm)}
.fx-cards .nn+h3{margin-top:8px}
.fx-cards p{margin-top:12px;color:var(--ink-2);font-size:var(--fs-bm);line-height:var(--lh-bm)}

/* vantaggi e casi studio come nella pagina Piattaforma evento */
.fx-hero~.why h2{font-size:var(--fs-ds);line-height:var(--lh-ds)}
.fx-hero~.why .it h3{font-size:var(--fs-hm);line-height:var(--lh-hm);letter-spacing:var(--ls-hm);font-weight:var(--fw-hm)}
.fx-case{padding:96px 0 64px}

@media (max-width:1100px){
  .fx-top{grid-template-columns:1fr;gap:40px}
  .fx-hero .ph img{margin:0 auto}
  .fx-key{grid-template-columns:1fr}
  .fx-cards{grid-template-columns:1fr}
}
@media (max-width:720px){
  .fx-hero{padding:130px 0 56px}
  .fx-hero .crumb2{top:90px}
  .fx-hero .btns{flex-direction:column;align-items:stretch}
  .fx-key h3{min-height:0}
  .fx-cards .c{padding:24px}
  .fx-play .pl{width:64px;height:64px;margin:-32px 0 0 -32px}
}
/* spazio sotto il video, prima della sezione successiva */
.fx-hero~.how{padding-bottom:120px}
@media (max-width:720px){.fx-hero~.how{padding-bottom:72px}}
.fx-hero .ph img[src$="mappa-interattiva.jpg"],.fx-hero .ph img[src$="controllo-accessi.jpg"]{border-radius:var(--r-xl);max-width:560px}

/* live streaming: card principale con testo e immagine, poi tre card in fila (come la versione inglese) */
.fx-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:center;margin-top:56px;text-align:left}
.fx-feat .ibox{width:56px;height:56px;border-radius:16px;background:#348e9e;color:#fff;display:grid;place-items:center}
.fx-feat .ibox svg{width:28px;height:28px}
.fx-feat h3{margin-top:20px;font-size:var(--fs-hl);line-height:var(--lh-hl);font-weight:var(--fw-hl)}
.fx-feat p{margin-top:14px;color:var(--ink-2);font-size:var(--fs-bl);line-height:var(--lh-bl)}
.fx-feat .ph img{display:block;width:100%;height:auto}
.fx-cards.c3{grid-template-columns:repeat(3,1fr);margin-top:24px}
@media (max-width:1100px){.fx-feat{grid-template-columns:1fr;gap:32px}.fx-cards.c3{grid-template-columns:1fr}}

/* tre card in fila: icona, titolo e testo allineati tra le card (il titolo prende l’altezza del più lungo della fila) */
.fx-cards.c3 .c{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
.fx-cards.c3 h3{align-self:start}
/* con i punti di forza sotto, l'immagine resta un po' più contenuta per non spingerli fuori dalla prima schermata */
/* controllo accessi: schermate verticali dello smartphone, più contenute */
.stp .im img[src*="/ca-"]{max-width:300px;margin:0 auto;border-radius:32px;box-shadow:0 24px 60px -12px rgba(43,48,54,.3)}

/* altre funzionalità: hero senza immagine con l'indice delle funzionalità, poi una riga per funzionalità */
.af-hero .wrap>.tx{max-width:900px}
.af-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.af-nav a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1.5px solid #c9d0d6;border-radius:999px;color:var(--ink-2);font-size:var(--fs-bs);background:#fff;transition:border-color .25s ease,color .25s ease}
.af-nav a:hover{border-color:var(--teal);color:var(--teal-700)}
.af-nav svg{width:18px;height:18px;color:#348e9e}
.af-list{padding:96px 0 120px;text-align:left}
.af-list .stp{margin-top:0}
.af-list .stp+.stp{margin-top:120px}
.af-list .stp{scroll-margin-top:120px}
.af-list .tx .ibox{width:56px;height:56px;border-radius:16px;background:#348e9e;color:#fff;display:grid;place-items:center}
.af-list .tx .ibox svg{width:28px;height:28px}
.af-list .stp h3{margin-top:20px;font-size:var(--fs-hl);line-height:var(--lh-hl);letter-spacing:var(--ls-hl);font-weight:var(--fw-hl)}
.af-list .stp p{margin-top:16px;color:var(--ink-2);font-size:var(--fs-bl);line-height:var(--lh-bl)}
.af-li{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.af-li li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);font-size:var(--fs-bm);line-height:var(--lh-bm)}
.af-li svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:2px}
.af-li b{font-weight:600;color:var(--ink)}
.af-list .shot{aspect-ratio:4/3}
@media (max-width:720px){.af-list .stp+.stp{margin-top:72px}}
.af-list .im .shot{height:auto;min-height:0;aspect-ratio:4/3!important}
/* immagini rettangolari nella hero (con sfondo proprio) */
.fx-hero .ph img.rect{max-width:600px;border-radius:var(--r-xl)}
/* screenshot di pannello nella card principale */
.fx-feat .ph img.shot-img{border-radius:16px;box-shadow:0 24px 60px -12px rgba(43,48,54,.25)}
/* righe testo/immagine dentro «Come funziona» */
.fx-rows{padding:0;margin-top:72px}
.fx-rows .stp{text-align:left}
/* stampa badge: ibrida.io Printers */
.sb-pr{background:#fcfcfc;padding-top:120px}
.sb-pr .af-list{padding-bottom:120px}
.sb-pr .im img{border-radius:var(--r-xl);box-shadow:0 24px 60px -12px rgba(43,48,54,.22)}
.sb-more{background:#f6f7f8;padding:120px 0}
.sb-more .g3b{margin-top:56px;text-align:left}
.sb-more .scard .ibox{background:#348e9e}
.sb-more .scard .ibox svg{width:28px;height:28px}
@media (max-width:1100px){.sb-more .g3b{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.sb-pr{padding-top:72px}.sb-pr .af-list{padding-bottom:72px}.sb-more{padding:72px 0}.sb-more .g3b{grid-template-columns:1fr}}
/* AI Matchmaking e Meeting B2B: i tre box sotto la hero */
.fx-keys{background:#f6f7f8;padding:24px 0 120px}
.fx-keys .fx-key{margin-top:0}
@media (max-width:720px){.fx-keys{padding:8px 0 72px}}