/* ============================================================
   GLS · LE SPECIALIZZAZIONI DEL PILASTRO (Mosaico) · 1.0 · child theme 1.1.74
   Sezione 04b delle cinque pagine pilastro: otto tessere, ognuna con il suo
   pittogramma a quadrati (lo stesso di Altri servizi), numero, nome (h3),
   descrizione e link. I quadrati si compongono all ingresso; al passaggio la
   tessera passa al Navy, il pittogramma diventa bianco e fa un onda.
   Markup nella pagina (section[data-gls-sp]), pittogrammi disegnati da
   gls-specializzazioni.js a partire da data-art. Solo variabili del design system.
   ============================================================ */
.gls-sp { position: relative; padding: 112px 0; background: var(--gls-surface-raised); border-top: var(--gls-border-hairline); overflow-x: clip; }
.gls-sp .sp-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; }
.gls-sp .sp-h { margin: 16px 0 0; font-family: var(--gls-font-display); font-weight: var(--gls-weight-light); font-size: clamp(34px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -.02em; color: var(--gls-primary); text-wrap: balance; }
.gls-sp .sp-sub { margin: 0; font-size: 16px; line-height: 1.65; color: var(--gls-ink-muted); }
.gls-sp .sp-micro { margin: 0; font-size: 10.5px; line-height: 1.2; font-weight: var(--gls-weight-semi); letter-spacing: .14em; text-transform: uppercase; color: var(--gls-ink-muted); font-variant-numeric: tabular-nums; transition: color .5s var(--gls-ease); }
.gls-sp .sp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 64px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--gls-line-strong); border-left: 1px solid var(--gls-line-strong); }
.gls-sp .sp-tiles li { margin: 0; list-style: none; }
.gls-sp .sp-tiles a, .gls-sp .sp-tiles a:visited { position: relative; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 30px 28px 28px; text-decoration: none; color: inherit;
  background: var(--gls-surface-base); border-right: 1px solid var(--gls-line-strong); border-bottom: 1px solid var(--gls-line-strong); transition: background-color .5s var(--gls-ease); }
.gls-sp .sp-pic { --u: 11px; --g: 2px; position: relative; width: calc(16 * var(--u)); height: calc(10 * var(--u)); margin: 8px 0 34px; }
.gls-sp .sp-pic i { position: absolute; left: 0; top: 0; width: calc(var(--u) - var(--g)); height: calc(var(--u) - var(--g)); background: var(--gls-primary);
  transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))); transition: background-color .5s var(--gls-ease); }
.gls-sp .sp-pic i.a { background: var(--gls-royal); }
.gls-sp .sp-tiles h3 { margin: 12px 0 0; font-family: var(--gls-font-display); font-weight: var(--gls-weight-regular); font-size: 23px; line-height: 1.2; color: var(--gls-primary); transition: color .5s var(--gls-ease); }
.gls-sp .sp-tiles p.sp-d { flex: 1; margin: 10px 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--gls-ink-muted); transition: color .5s var(--gls-ease); }
.gls-sp .sp-link { align-self: flex-start; display: inline-flex; gap: 8px; padding-bottom: 2px; font-size: 14.5px; font-weight: var(--gls-weight-medium); color: var(--gls-royal);
  border-bottom: 1px solid color-mix(in srgb, var(--gls-royal) 35%, transparent); transition: color .5s var(--gls-ease), border-color .5s var(--gls-ease); }
.gls-sp .sp-link span { transition: transform .35s var(--gls-ease-in); }
.gls-sp .sp-tiles a:hover, .gls-sp .sp-tiles a:focus-visible { background: var(--gls-surface-inverse); outline: none; }
.gls-sp .sp-tiles a:focus-visible { box-shadow: none; outline: 2px solid var(--gls-royal); outline-offset: -2px; }
.gls-sp .sp-tiles a:hover h3, .gls-sp .sp-tiles a:focus-visible h3 { color: var(--gls-ink-inverse); }
.gls-sp .sp-tiles a:hover p.sp-d, .gls-sp .sp-tiles a:focus-visible p.sp-d { color: color-mix(in srgb, var(--gls-ink-inverse) 75%, transparent); }
.gls-sp .sp-tiles a:hover .sp-micro, .gls-sp .sp-tiles a:focus-visible .sp-micro { color: color-mix(in srgb, var(--gls-ink-inverse) 60%, transparent); }
.gls-sp .sp-tiles a:hover .sp-pic i, .gls-sp .sp-tiles a:focus-visible .sp-pic i { background: var(--gls-ink-inverse); }
.gls-sp .sp-tiles a:hover .sp-pic i.a, .gls-sp .sp-tiles a:focus-visible .sp-pic i.a { background: var(--gls-blue-200); }
.gls-sp .sp-tiles a:hover .sp-link, .gls-sp .sp-tiles a:focus-visible .sp-link { color: var(--gls-ink-inverse); border-bottom-color: color-mix(in srgb, var(--gls-ink-inverse) 45%, transparent); }
.gls-sp .sp-tiles a:hover .sp-link span { transform: translateX(4px); }
@keyframes sp-pop { from { transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))) scale(0); } }
@keyframes sp-wave { 0%, 100% { transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))); } 40% { transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u) - 5px)); } }
.gls-sp.is-armed:not(.is-in) .sp-pic i { transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))) scale(0); }
.gls-sp.is-in .sp-pic i { animation: sp-pop .5s var(--gls-ease-in) both; animation-delay: calc(.3s + var(--t) * 90ms + var(--x) * 30ms); }
.gls-sp .sp-tiles a:hover .sp-pic i { animation: sp-wave .9s var(--gls-ease) both; animation-delay: calc(var(--x) * 35ms); }
@media (max-width: 980px) {
  .gls-sp { padding: 80px 0; }
  .gls-sp .sp-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .gls-sp .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gls-sp .sp-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .gls-sp *, .gls-sp *::before, .gls-sp *::after { animation: none !important; transition: none !important; }
}