/* scenario-columns: the conversations a team rehearses, a column per team (a face, its name, four real situations), as
   MasterClass On Call shows its "moments that matter" (Tommi, 2026-10-01: "gli esempi... mi piace"). Four across on a
   wide screen, two on a tablet; on a phone the columns slide sideways, one and a bit in sight. Optional sector pills
   above them swap their content (scenario-columns.js, 2026-10-02). Needs ../base/base.css. */
.sc-colonne{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(14 * var(--px));margin-top:clamp(40px,5vw,64px)}
.sc-col{padding:calc(22 * var(--px)) calc(18 * var(--px)) calc(18 * var(--px));border-radius:calc(24 * var(--px));background:var(--fondo-2);box-shadow:inset 0 0 0 1px var(--riga),0 24px 48px -36px oklch(30% .08 262/.35)}
.sc-col h3{display:flex;align-items:center;gap:calc(12 * var(--px));margin:0 calc(4 * var(--px)) calc(16 * var(--px));font-size:var(--t-lista);font-weight:640;letter-spacing:-.018em}
.sc-col h3 img{width:calc(40 * var(--px));height:calc(40 * var(--px));border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--fondo-2),0 0 0 3.5px oklch(73% .14 252/.5)}
/* a department's icon in place of a face (2026-10-07): whole, a little larger, no ring */
.sc-col h3 img.sc-ico{width:calc(42 * var(--px));height:calc(42 * var(--px));border-radius:0;object-fit:contain;box-shadow:none}
.sc-col ul{list-style:none;padding:0;margin:0;display:grid;gap:calc(8 * var(--px))}
.sc-col li{display:flex;align-items:center;min-height:calc(56 * var(--px));padding:calc(12 * var(--px)) calc(16 * var(--px));border-radius:calc(14 * var(--px));background:var(--piano);font-size:var(--t-nota);font-weight:560;line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
.sc-col li:has(>.sc-prova){padding:0}   /* a case that links to its call (/chiamata): the whole line is the link */
.sc-prova{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:inherit;padding:calc(12 * var(--px)) calc(16 * var(--px));border-radius:inherit;color:inherit;transition:background .2s}
/* its play shows when the pointer is on the case (Tommi, 2026-10-03: "non lo devi far vedere... in generale"): a blue
   circle, and over its centre the base's play (--play, centred on its centroid); the room is kept, so the words stay */
.sc-prova::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--blu)}
.sc-prova::before{content:"";position:absolute;top:50%;right:calc(16 * var(--px) + 6px);width:18px;height:18px;translate:0 -50%;background:var(--su-blu);-webkit-mask:var(--play) center/contain no-repeat;mask:var(--play) center/contain no-repeat;z-index:1}
.sc-prova::after,.sc-prova::before{opacity:0;scale:.6;transition:opacity .2s var(--e-ui),scale .4s var(--e-molla)}
.sc-prova:focus-visible::after,.sc-prova:focus-visible::before{opacity:1;scale:1}
@media (hover:hover){.sc-prova:hover{background:var(--piano-2,var(--piano))}.sc-prova:hover::after,.sc-prova:hover::before{opacity:1;scale:1}}
.sc-settori{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(28px,3vw,40px)}
.sc-settori button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--fondo-2);box-shadow:inset 0 0 0 1px var(--riga);color:var(--ink-2);font:inherit;font-size:calc(14.5 * var(--px));font-weight:560;cursor:pointer;transition:background .2s,color .2s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.sc-settori button:hover{color:var(--ink)}
.sc-settori button:active{transform:scale(.95)}
.sc-settori button[aria-checked="true"]{background:var(--ink);color:var(--fondo);box-shadow:none}
.sc-settori+.sc-colonne{margin-top:clamp(24px,3vw,36px)}
.sc-cambia{animation:sale .7s var(--e-esce) backwards}
.sc-tutti{display:flex;justify-content:center;margin-top:clamp(20px,2.4vw,32px)}
@media (max-width:1099px) and (min-width:700px){.sc-colonne{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){
  .sc-settori{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter);scrollbar-width:none}
  .sc-settori::-webkit-scrollbar{display:none}
  .sc-settori button{flex:none}
  .sc-colonne{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 12px;scroll-padding-inline:var(--gutter)}
  .sc-colonne::-webkit-scrollbar{display:none}
  .sc-col{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.sc-cambia{animation:none}}