/* ==========================================================
   FLEX, SPACING & MEDIA UTILITIES
   Nomenclatura basata su Bootstrap 5 + estensioni custom

   Breakpoint mobile: <= 767px

   La scala degli spacing utilizza clamp():
   - valore minimo
   - valore fluido basato sul viewport
   - valore massimo
   ========================================================== */


/* ==========================================================
   FLUID SPACING TOKENS
   ========================================================== */

:root {
  --space-0: 0;

  --space-1: clamp(.25rem, .20rem + .15vw, .50rem);
  --space-2: clamp(.50rem, .40rem + .20vw, .75rem);
  --space-3: clamp(.75rem, .60rem + .40vw, 1rem);
  --space-4: clamp(1rem, .75rem + .60vw, 1.5rem);
  --space-5: clamp(1.5rem, 1rem + 1.50vw, 3rem);
  --space-6: clamp(2rem, 1.25rem + 2vw, 4rem);
  --space-7: clamp(2.5rem, 1.5rem + 2.5vw, 5rem);
  --space-8: clamp(3rem, 1.75rem + 3vw, 6rem);
  --space-9: clamp(3.5rem, 2rem + 3.5vw, 7rem);
  --space-10: clamp(4rem, 2rem + 4vw, 8rem);
}


/* ==========================================================
   IMAGE
   ========================================================== */

.img-flex {
  display: block;
  max-width: 100%;
  height: auto!important;
}


/* ==========================================================
   DISPLAY
   ========================================================== */

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}


/* ==========================================================
   FLEX DIRECTION
   ========================================================== */

.flex-row {
  flex-direction: row !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}


/* ==========================================================
   FLEX WRAP
   ========================================================== */

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}


/* ==========================================================
   JUSTIFY CONTENT
   ========================================================== */

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}


/* ==========================================================
   ALIGN ITEMS
   ========================================================== */

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}


/* ==========================================================
   ALIGN SELF
   ========================================================== */

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}


/* ==========================================================
   FLEX GROW / SHRINK
   ========================================================== */

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}


/* ==========================================================
   FLEX BASIS
   ========================================================== */

.flex-basis-0 {
  flex-basis: 0 !important;
}

.flex-basis-10 {
  flex-basis: 10% !important;
}

.flex-basis-20 {
  flex-basis: 20% !important;
}

.flex-basis-25 {
  flex-basis: 25% !important;
}

.flex-basis-30 {
  flex-basis: 30% !important;
}

.flex-basis-33 {
  flex-basis: 33.333333% !important;
}

.flex-basis-40 {
  flex-basis: 40% !important;
}

.flex-basis-50 {
  flex-basis: 50% !important;
}

.flex-basis-55 {
  flex-basis: 55% !important;
}

.flex-basis-60 {
  flex-basis: 60% !important;
}

.flex-basis-66 {
  flex-basis: 66.666667% !important;
}

.flex-basis-70 {
  flex-basis: 70% !important;
}

.flex-basis-75 {
  flex-basis: 75% !important;
}

.flex-basis-80 {
  flex-basis: 80% !important;
}

.flex-basis-90 {
  flex-basis: 90% !important;
}

.flex-basis-100 {
  flex-basis: 100% !important;
}

.flex-basis-auto {
  flex-basis: auto !important;
}


/* ==========================================================
   TEXT ALIGNMENT
   ========================================================== */

.text-start {
  text-align: start !important;
}

.text-center {
  text-align: center !important;
}

.text-end {
  text-align: end !important;
}


/* ==========================================================
   GAP
   ========================================================== */

.gap-0  { gap: var(--space-0) !important; }
.gap-1  { gap: var(--space-1) !important; }
.gap-2  { gap: var(--space-2) !important; }
.gap-3  { gap: var(--space-3) !important; }
.gap-4  { gap: var(--space-4) !important; }
.gap-5  { gap: var(--space-5) !important; }
.gap-6  { gap: var(--space-6) !important; }
.gap-7  { gap: var(--space-7) !important; }
.gap-8  { gap: var(--space-8) !important; }
.gap-9  { gap: var(--space-9) !important; }
.gap-10 { gap: var(--space-10) !important; }


/* ==========================================================
   GAP X - COLUMN GAP
   ========================================================== */

.gap-x-0  { column-gap: var(--space-0) !important; }
.gap-x-1  { column-gap: var(--space-1) !important; }
.gap-x-2  { column-gap: var(--space-2) !important; }
.gap-x-3  { column-gap: var(--space-3) !important; }
.gap-x-4  { column-gap: var(--space-4) !important; }
.gap-x-5  { column-gap: var(--space-5) !important; }
.gap-x-6  { column-gap: var(--space-6) !important; }
.gap-x-7  { column-gap: var(--space-7) !important; }
.gap-x-8  { column-gap: var(--space-8) !important; }
.gap-x-9  { column-gap: var(--space-9) !important; }
.gap-x-10 { column-gap: var(--space-10) !important; }


/* ==========================================================
   GAP Y - ROW GAP
   ========================================================== */

.gap-y-0  { row-gap: var(--space-0) !important; }
.gap-y-1  { row-gap: var(--space-1) !important; }
.gap-y-2  { row-gap: var(--space-2) !important; }
.gap-y-3  { row-gap: var(--space-3) !important; }
.gap-y-4  { row-gap: var(--space-4) !important; }
.gap-y-5  { row-gap: var(--space-5) !important; }
.gap-y-6  { row-gap: var(--space-6) !important; }
.gap-y-7  { row-gap: var(--space-7) !important; }
.gap-y-8  { row-gap: var(--space-8) !important; }
.gap-y-9  { row-gap: var(--space-9) !important; }
.gap-y-10 { row-gap: var(--space-10) !important; }


/* ==========================================================
   PADDING
   ========================================================== */

/* Padding all */

.p-0  { padding: var(--space-0) !important; }
.p-1  { padding: var(--space-1) !important; }
.p-2  { padding: var(--space-2) !important; }
.p-3  { padding: var(--space-3) !important; }
.p-4  { padding: var(--space-4) !important; }
.p-5  { padding: var(--space-5) !important; }
.p-6  { padding: var(--space-6) !important; }
.p-7  { padding: var(--space-7) !important; }
.p-8  { padding: var(--space-8) !important; }
.p-9  { padding: var(--space-9) !important; }
.p-10 { padding: var(--space-10) !important; }


/* Padding X */

.px-0 {
  padding-left: var(--space-0) !important;
  padding-right: var(--space-0) !important;
}

.px-1 {
  padding-left: var(--space-1) !important;
  padding-right: var(--space-1) !important;
}

.px-2 {
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}

.px-3 {
  padding-left: var(--space-3) !important;
  padding-right: var(--space-3) !important;
}

.px-4 {
  padding-left: var(--space-4) !important;
  padding-right: var(--space-4) !important;
}

.px-5 {
  padding-left: var(--space-5) !important;
  padding-right: var(--space-5) !important;
}

.px-6 {
  padding-left: var(--space-6) !important;
  padding-right: var(--space-6) !important;
}

.px-7 {
  padding-left: var(--space-7) !important;
  padding-right: var(--space-7) !important;
}

.px-8 {
  padding-left: var(--space-8) !important;
  padding-right: var(--space-8) !important;
}

.px-9 {
  padding-left: var(--space-9) !important;
  padding-right: var(--space-9) !important;
}

.px-10 {
  padding-left: var(--space-10) !important;
  padding-right: var(--space-10) !important;
}


/* Padding Y */

.py-0 {
  padding-top: var(--space-0) !important;
  padding-bottom: var(--space-0) !important;
}

.py-1 {
  padding-top: var(--space-1) !important;
  padding-bottom: var(--space-1) !important;
}

.py-2 {
  padding-top: var(--space-2) !important;
  padding-bottom: var(--space-2) !important;
}

.py-3 {
  padding-top: var(--space-3) !important;
  padding-bottom: var(--space-3) !important;
}

.py-4 {
  padding-top: var(--space-4) !important;
  padding-bottom: var(--space-4) !important;
}

.py-5 {
  padding-top: var(--space-5) !important;
  padding-bottom: var(--space-5) !important;
}

.py-6 {
  padding-top: var(--space-6) !important;
  padding-bottom: var(--space-6) !important;
}

.py-7 {
  padding-top: var(--space-7) !important;
  padding-bottom: var(--space-7) !important;
}

.py-8 {
  padding-top: var(--space-8) !important;
  padding-bottom: var(--space-8) !important;
}

.py-9 {
  padding-top: var(--space-9) !important;
  padding-bottom: var(--space-9) !important;
}

.py-10 {
  padding-top: var(--space-10) !important;
  padding-bottom: var(--space-10) !important;
}


/* Padding Top */

.pt-0  { padding-top: var(--space-0) !important; }
.pt-1  { padding-top: var(--space-1) !important; }
.pt-2  { padding-top: var(--space-2) !important; }
.pt-3  { padding-top: var(--space-3) !important; }
.pt-4  { padding-top: var(--space-4) !important; }
.pt-5  { padding-top: var(--space-5) !important; }
.pt-6  { padding-top: var(--space-6) !important; }
.pt-7  { padding-top: var(--space-7) !important; }
.pt-8  { padding-top: var(--space-8) !important; }
.pt-9  { padding-top: var(--space-9) !important; }
.pt-10 { padding-top: var(--space-10) !important; }


/* Padding Bottom */

.pb-0  { padding-bottom: var(--space-0) !important; }
.pb-1  { padding-bottom: var(--space-1) !important; }
.pb-2  { padding-bottom: var(--space-2) !important; }
.pb-3  { padding-bottom: var(--space-3) !important; }
.pb-4  { padding-bottom: var(--space-4) !important; }
.pb-5  { padding-bottom: var(--space-5) !important; }
.pb-6  { padding-bottom: var(--space-6) !important; }
.pb-7  { padding-bottom: var(--space-7) !important; }
.pb-8  { padding-bottom: var(--space-8) !important; }
.pb-9  { padding-bottom: var(--space-9) !important; }
.pb-10 { padding-bottom: var(--space-10) !important; }


/* ==========================================================
   MARGIN
   ========================================================== */

/* Margin all */

.m-0  { margin: var(--space-0) !important; }
.m-1  { margin: var(--space-1) !important; }
.m-2  { margin: var(--space-2) !important; }
.m-3  { margin: var(--space-3) !important; }
.m-4  { margin: var(--space-4) !important; }
.m-5  { margin: var(--space-5) !important; }
.m-6  { margin: var(--space-6) !important; }
.m-7  { margin: var(--space-7) !important; }
.m-8  { margin: var(--space-8) !important; }
.m-9  { margin: var(--space-9) !important; }
.m-10 { margin: var(--space-10) !important; }


/* Margin X */

.mx-0 {
  margin-left: var(--space-0) !important;
  margin-right: var(--space-0) !important;
}

.mx-1 {
  margin-left: var(--space-1) !important;
  margin-right: var(--space-1) !important;
}

.mx-2 {
  margin-left: var(--space-2) !important;
  margin-right: var(--space-2) !important;
}

.mx-3 {
  margin-left: var(--space-3) !important;
  margin-right: var(--space-3) !important;
}

.mx-4 {
  margin-left: var(--space-4) !important;
  margin-right: var(--space-4) !important;
}

.mx-5 {
  margin-left: var(--space-5) !important;
  margin-right: var(--space-5) !important;
}

.mx-6 {
  margin-left: var(--space-6) !important;
  margin-right: var(--space-6) !important;
}

.mx-7 {
  margin-left: var(--space-7) !important;
  margin-right: var(--space-7) !important;
}

.mx-8 {
  margin-left: var(--space-8) !important;
  margin-right: var(--space-8) !important;
}

.mx-9 {
  margin-left: var(--space-9) !important;
  margin-right: var(--space-9) !important;
}

.mx-10 {
  margin-left: var(--space-10) !important;
  margin-right: var(--space-10) !important;
}


/* Margin Y */

.my-0 {
  margin-top: var(--space-0) !important;
  margin-bottom: var(--space-0) !important;
}

.my-1 {
  margin-top: var(--space-1) !important;
  margin-bottom: var(--space-1) !important;
}

.my-2 {
  margin-top: var(--space-2) !important;
  margin-bottom: var(--space-2) !important;
}

.my-3 {
  margin-top: var(--space-3) !important;
  margin-bottom: var(--space-3) !important;
}

.my-4 {
  margin-top: var(--space-4) !important;
  margin-bottom: var(--space-4) !important;
}

.my-5 {
  margin-top: var(--space-5) !important;
  margin-bottom: var(--space-5) !important;
}

.my-6 {
  margin-top: var(--space-6) !important;
  margin-bottom: var(--space-6) !important;
}

.my-7 {
  margin-top: var(--space-7) !important;
  margin-bottom: var(--space-7) !important;
}

.my-8 {
  margin-top: var(--space-8) !important;
  margin-bottom: var(--space-8) !important;
}

.my-9 {
  margin-top: var(--space-9) !important;
  margin-bottom: var(--space-9) !important;
}

.my-10 {
  margin-top: var(--space-10) !important;
  margin-bottom: var(--space-10) !important;
}


/* Margin Top */

.mt-0  { margin-top: var(--space-0) !important; }
.mt-1  { margin-top: var(--space-1) !important; }
.mt-2  { margin-top: var(--space-2) !important; }
.mt-3  { margin-top: var(--space-3) !important; }
.mt-4  { margin-top: var(--space-4) !important; }
.mt-5  { margin-top: var(--space-5) !important; }
.mt-6  { margin-top: var(--space-6) !important; }
.mt-7  { margin-top: var(--space-7) !important; }
.mt-8  { margin-top: var(--space-8) !important; }
.mt-9  { margin-top: var(--space-9) !important; }
.mt-10 { margin-top: var(--space-10) !important; }


/* Margin Bottom */

.mb-0  { margin-bottom: var(--space-0) !important; }
.mb-1  { margin-bottom: var(--space-1) !important; }
.mb-2  { margin-bottom: var(--space-2) !important; }
.mb-3  { margin-bottom: var(--space-3) !important; }
.mb-4  { margin-bottom: var(--space-4) !important; }
.mb-5  { margin-bottom: var(--space-5) !important; }
.mb-6  { margin-bottom: var(--space-6) !important; }
.mb-7  { margin-bottom: var(--space-7) !important; }
.mb-8  { margin-bottom: var(--space-8) !important; }
.mb-9  { margin-bottom: var(--space-9) !important; }
.mb-10 { margin-bottom: var(--space-10) !important; }


/* ==========================================================
   MARGIN AUTO
   ========================================================== */

.m-auto {
  margin: auto !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.ms-auto {
  margin-inline-start: auto !important;
}

.me-auto {
  margin-inline-end: auto !important;
}

.mt-auto {
  margin-top:auto!important;
}

.mb-auto {
  margin-bottom:auto!important;
}


/* ==========================================================
   BACKGROUND SIZE
   ========================================================== */

.bg-cover {
  background-size: cover !important;
}

.bg-contain {
  background-size: contain !important;
}

.bg-auto {
  background-size: auto !important;
}

.bg-size-100 {
  background-size: 100% 100% !important;
}

.bg-size-full {
  background-size: 100% auto !important;
}


/* ==========================================================
   BACKGROUND POSITION
   ========================================================== */

.bg-position-center {
  background-position: center center !important;
}

.bg-position-top {
  background-position: center top !important;
}

.bg-position-bottom {
  background-position: center bottom !important;
}

.bg-position-left {
  background-position: left center !important;
}

.bg-position-right {
  background-position: right center !important;
}

.bg-position-top-left {
  background-position: left top !important;
}

.bg-position-top-right {
  background-position: right top !important;
}

.bg-position-bottom-left {
  background-position: left bottom !important;
}

.bg-position-bottom-right {
  background-position: right bottom !important;
}


/* ==========================================================
   BACKGROUND REPEAT
   ========================================================== */

.bg-no-repeat {
  background-repeat: no-repeat !important;
}

.bg-repeat {
  background-repeat: repeat !important;
}

.bg-repeat-x {
  background-repeat: repeat-x !important;
}

.bg-repeat-y {
  background-repeat: repeat-y !important;
}


/* ==========================================================
   OBJECT FIT
   Per immagini, video e altri elementi sostituiti
   ========================================================== */

.object-fit-cover {
  object-fit: cover !important;
}

.object-fit-contain {
  object-fit: contain !important;
}

.object-fit-fill {
  object-fit: fill !important;
}

.object-fit-none {
  object-fit: none !important;
}

.object-fit-scale {
  object-fit: scale-down !important;
}

.img-flex[class*="object-fit-"] {
  width:100%!important;
  height:100%!important;
  display:block!important;
}


/* ==========================================================
   OBJECT POSITION
   ========================================================== */

.object-position-center {
  object-position: center center !important;
}

.object-position-top {
  object-position: center top !important;
}

.object-position-bottom {
  object-position: center bottom !important;
}

.object-position-left {
  object-position: left center !important;
}

.object-position-right {
  object-position: right center !important;
}

.object-position-top-left {
  object-position: left top !important;
}

.object-position-top-right {
  object-position: right top !important;
}

.object-position-bottom-left {
  object-position: left bottom !important;
}

.object-position-bottom-right {
  object-position: right bottom !important;
}


/* ==========================================================
   RESPONSIVE
   Mobile <= 991px

   - I contenitori flex vengono incolonnati
   - Tutti i flex-basis diventano 100%
   ========================================================== */

@media (max-width: 991px) {

  .d-flex,
  .d-inline-flex {
    flex-direction: column !important;
  }

  [class*="flex-basis-"] {
    flex-basis: 100% !important;
  }
}