/* ============================================
   SPACING SYSTEM
   Spaziatura fluida con clamp() | Design System
   ============================================ */

:root {
  --s:  0;
  --m:  1.5;
  --l:  2.5;
  --xl: 3.5;
}


/* ============================================
   PADDING X — Orizzontale (left + right)
   ============================================ */

/* Padding orizzontale fisso (mobile base) */
.px-full {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* XL — Fluido */
.px-xl {
  padding-left:  clamp(1.25rem, -1.5143rem + 11.6393vw, 10.125rem);
  padding-right: clamp(1.25rem, -1.5143rem + 11.6393vw, 10.125rem);
}

/* L — Fluido */
.px-l {
  padding-left:  clamp(1.25rem, -0.541rem + 7.541vw, 7rem);
  padding-right: clamp(1.25rem, -0.541rem + 7.541vw, 7rem);
}

/* M — Fluido */
.px-m {
  padding-left:  clamp(1.25rem, 0.18rem + 5.36vw, 5rem);
  padding-right: clamp(1.25rem, 0.18rem + 5.36vw, 5rem);
}

/* S — Fluido */
.px-s {
  padding-left:  clamp(1.25rem, 0.61rem + 3.21vw, 3.5rem);
  padding-right: clamp(1.25rem, 0.61rem + 3.21vw, 3.5rem);
}

/* XS — Fluido */
.px-xs {
  padding-left:  clamp(1.25rem, 0.89rem + 1.79vw, 2.5rem);
  padding-right: clamp(1.25rem, 0.89rem + 1.79vw, 2.5rem);
}


/* ============================================
   PADDING Y — Verticale (top + bottom)
   ============================================ */

/* XL */
.py-xl {
  padding-top:    clamp(2rem, -0.5307rem + 10.6557vw, 10.125rem);
  padding-bottom: clamp(2rem, -0.5307rem + 10.6557vw, 10.125rem);
}

/* L */
.py-l {
  padding-top:    clamp(1.625rem, -0.4969rem + 8.9344vw, 8.4375rem);
  padding-bottom: clamp(1.625rem, -0.4969rem + 8.9344vw, 8.4375rem);
}

/* M */
.py-m {
  padding-top:    clamp(1.375rem, -0.377rem + 7.377vw, 7rem);
  padding-bottom: clamp(1.375rem, -0.377rem + 7.377vw, 7rem);
}

/* S */
.py-s {
  padding-top:    clamp(1.375rem, -0.0072rem + 5.8197vw, 5.8125rem);
  padding-bottom: clamp(1.375rem, -0.0072rem + 5.8197vw, 5.8125rem);
}

/* XS */
.py-xs {
  padding-top:    clamp(1.375rem, 0.3043rem + 4.5082vw, 4.8125rem);
  padding-bottom: clamp(1.375rem, 0.3043rem + 4.5082vw, 4.8125rem);
}

/* XXS */
.py-xxs {
  padding-top:    clamp(1.3rem, 0.7705rem + 2.2295vw, 3rem);
  padding-bottom: clamp(1.3rem, 0.7705rem + 2.2295vw, 3rem);
}


/* ============================================
   PADDING TOP — Solo top
   ============================================ */

.pt-xl {
  padding-top: clamp(2rem, -0.5307rem + 10.6557vw, 10.125rem);
}

.pt-l {
  padding-top: clamp(1.625rem, -0.4969rem + 8.9344vw, 8.4375rem);
}

.pt-m {
  padding-top: clamp(1.375rem, -0.377rem + 7.377vw, 7rem);
}

.pt-s {
  padding-top: clamp(1.375rem, -0.0072rem + 5.8197vw, 5.8125rem);
}

.pt-xs {
  padding-top: clamp(1.375rem, 0.3043rem + 4.5082vw, 4.8125rem);
}

.pt-xxs {
  padding-top: clamp(1.3rem, 0.7705rem + 2.2295vw, 3rem);
}

/* XXS triplo (moltiplicatore x3) */
.pt-xxss {
  padding-top: calc(clamp(1.3rem, 0.7705rem + 2.2295vw, 3rem) * 3);
}


/* ============================================
   PADDING BOTTOM — Solo bottom
   ============================================ */

.pb-xl {
  padding-bottom: clamp(2rem, -0.5307rem + 10.6557vw, 10.125rem);
}

.pb-l {
  padding-bottom: clamp(1.625rem, -0.4969rem + 8.9344vw, 8.4375rem);
}

.pb-m {
  padding-bottom: clamp(1.375rem, -0.377rem + 7.377vw, 7rem);
}

.pb-s {
  padding-bottom: clamp(1.375rem, -0.0072rem + 5.8197vw, 5.8125rem);
}

.pb-xs {
  padding-bottom: clamp(1.375rem, 0.3043rem + 4.5082vw, 4.8125rem);
}

.pb-xxs {
  padding-bottom: clamp(1.3rem, 0.7705rem + 2.2295vw, 3rem);
}

/* XXS dinamico (usa variabile --s come moltiplicatore) */
.pb-xxss {
  padding-bottom: calc(clamp(1.3rem, 0.7705rem + 2.2295vw, 3rem) * var(--s));
}


/* ============================================
   PADDING INNER — Padding interno fisso (px)
   Per componenti: card, bottoni, badge, ecc.
   ============================================ */

.pi-xxl { padding: 44px; }
.pi-xl  { padding: 34px; }
.pi-l   { padding: 26px; }
.pi-m   { padding: 20px; }
.pi-s   { padding: 17px; }
.pi-xs  { padding: 14px; }
.pi-xxs { padding: 12px; }


/* ============================================
   EFFETTI — Hover lista
   Sfoca e abbassa opacità gli elementi non hover
   ============================================ */

.list:hover > :not(:hover) {
  opacity: 0.4;
  filter: blur(4px);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}


/* ============================================
   ANIMAZIONI
   Fonte: Animista.net (FreeBSD License)
   http://animista.net/license
   ============================================ */

/* Classe da applicare all'elemento */
.slide-right {
  -webkit-animation: slide-right 0.5s ease-out both;
          animation: slide-right 0.5s ease-out both;
}

@-webkit-keyframes slide-right {
  0%   { -webkit-transform: translateX(0);    transform: translateX(0); }
  100% { -webkit-transform: translateX(100px); transform: translateX(100px); }
}

@keyframes slide-right {
  0%   { -webkit-transform: translateX(0);    transform: translateX(0); }
  100% { -webkit-transform: translateX(100px); transform: translateX(100px); }
}