/* ========================================
   RIBASSI.TOP - UTILITY CLASSES
   File: utilities.css
   Versione: 1.0.0
   
   ISTRUZIONI INSTALLAZIONE:
   1. Salva questo file come: utilities.css
   2. Posiziona in: wp-content/themes/ribassi-blog/assets/css/utilities.css
   3. Il functions.php si occuperà dell'importazione automatica
   ======================================== */

/* ========================================
   CSS CUSTOM PROPERTIES (CSS Variables)
   ======================================== */
:root {
  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Font Weights */
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Spacing Scale */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Text Utilities */
  --text-align-left: left;
  --text-align-center: center;
  --text-align-right: right;
  --text-align-justify: justify;
}

/* ========================================
   TYPOGRAPHY - FONT SIZES, WEIGHTS, LINE HEIGHTS
   ======================================== */

/* Typography Size Classes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* Font Weight Classes */
.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* Line Height Classes */
.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text Style */
.italic { font-style:italic; }

/* Text Decoration */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }


/* Line Clamp - Truncate Text */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1; /* Standard property */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* Standard property */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* Standard property */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-none {
  display: block;
  -webkit-line-clamp: none;
  line-clamp: none; /* Standard property */
  -webkit-box-orient: horizontal;
  overflow: visible;
  text-overflow: clip;
}

/* ========================================
   SPACING - MARGINI E PADDING
   ======================================== */

/* MARGIN - Tutti i lati */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }
.m-10 { margin: 2.5rem; }
.m-12 { margin: 3rem; }
.m-16 { margin: 4rem; }
.m-20 { margin: 5rem; }
.m-24 { margin: 6rem; }
.m-auto { margin: auto; }

/* MARGIN - Asse X (left + right) */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; }
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-8 { margin-left: 2rem; margin-right: 2rem; }
.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }
.mx-12 { margin-left: 3rem; margin-right: 3rem; }
.mx-16 { margin-left: 4rem; margin-right: 4rem; }
.mx-20 { margin-left: 5rem; margin-right: 5rem; }
.mx-24 { margin-left: 6rem; margin-right: 6rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* MARGIN - Asse Y (top + bottom) */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.my-12 { margin-top: 3rem; margin-bottom: 3rem; }
.my-16 { margin-top: 4rem; margin-bottom: 4rem; }
.my-20 { margin-top: 5rem; margin-bottom: 5rem; }
.my-24 { margin-top: 6rem; margin-bottom: 6rem; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* MARGIN - Lati singoli */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mt-20 { margin-top: 5rem; }
.mt-24 { margin-top: 6rem; }
.mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-24 { margin-bottom: 6rem; }
.mb-auto { margin-bottom: auto; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1.25rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-8 { margin-left: 2rem; }
.ml-10 { margin-left: 2.5rem; }
.ml-12 { margin-left: 3rem; }
.ml-16 { margin-left: 4rem; }
.ml-20 { margin-left: 5rem; }
.ml-24 { margin-left: 6rem; }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-8 { margin-right: 2rem; }
.mr-10 { margin-right: 2.5rem; }
.mr-12 { margin-right: 3rem; }
.mr-16 { margin-right: 4rem; }
.mr-20 { margin-right: 5rem; }
.mr-24 { margin-right: 6rem; }
.mr-auto { margin-right: auto; }

/* PADDING - Tutti i lati */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.p-16 { padding: 4rem; }
.p-20 { padding: 5rem; }
.p-24 { padding: 6rem; }

/* PADDING - Asse X (left + right) */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.px-16 { padding-left: 4rem; padding-right: 4rem; }
.px-20 { padding-left: 5rem; padding-right: 5rem; }
.px-24 { padding-left: 6rem; padding-right: 6rem; }

/* PADDING - Asse Y (top + bottom) */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }

/* PADDING - Lati singoli */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-12 { padding-top: 3rem; }
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }
.pt-24 { padding-top: 6rem; }

.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-24 { padding-bottom: 6rem; }

.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-6 { padding-left: 1.5rem; }
.pl-8 { padding-left: 2rem; }
.pl-10 { padding-left: 2.5rem; }
.pl-12 { padding-left: 3rem; }
.pl-16 { padding-left: 4rem; }
.pl-20 { padding-left: 5rem; }
.pl-24 { padding-left: 6rem; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }
.pr-5 { padding-right: 1.25rem; }
.pr-6 { padding-right: 1.5rem; }
.pr-8 { padding-right: 2rem; }
.pr-10 { padding-right: 2.5rem; }
.pr-12 { padding-right: 3rem; }
.pr-16 { padding-right: 4rem; }
.pr-20 { padding-right: 5rem; }
.pr-24 { padding-right: 6rem; }

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

.-m-1 { margin: -0.25rem; }
.-m-2 { margin: -0.5rem; }
.-m-3 { margin: -0.75rem; }
.-m-4 { margin: -1rem; }
.-m-5 { margin: -1.25rem; }
.-m-6 { margin: -1.5rem; }

.-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; }
.-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
.-mx-3 { margin-left: -0.75rem; margin-right: -0.75rem; }
.-mx-4 { margin-left: -1rem; margin-right: -1rem; }

.-my-1 { margin-top: -0.25rem; margin-bottom: -0.25rem; }
.-my-2 { margin-top: -0.5rem; margin-bottom: -0.5rem; }
.-my-3 { margin-top: -0.75rem; margin-bottom: -0.75rem; }
.-my-4 { margin-top: -1rem; margin-bottom: -1rem; }

.-mt-1 { margin-top: -0.25rem; }
.-mt-2 { margin-top: -0.5rem; }
.-mt-3 { margin-top: -0.75rem; }
.-mt-4 { margin-top: -1rem; }

.-mb-1 { margin-bottom: -0.25rem; }
.-mb-2 { margin-bottom: -0.5rem; }
.-mb-3 { margin-bottom: -0.75rem; }
.-mb-4 { margin-bottom: -1rem; }

.-ml-1 { margin-left: -0.25rem; }
.-ml-2 { margin-left: -0.5rem; }
.-ml-3 { margin-left: -0.75rem; }
.-ml-4 { margin-left: -1rem; }

.-mr-1 { margin-right: -0.25rem; }
.-mr-2 { margin-right: -0.5rem; }
.-mr-3 { margin-right: -0.75rem; }
.-mr-4 { margin-right: -1rem; }

/* ========================================
   DISPLAY & VISIBILITY
   ======================================== */

/* Display Classes */
.hidden { display: none !important; }
.block { display: block !important; }
.inline { display: inline !important; }
.inline-block { display: inline-block !important; }
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid { display: grid !important; }
.table { display: table !important; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.group { position: relative; }
.relative { position: relative; }
.absolute { position: absolute; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }


/* Grid Template Columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Gap Classes */
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }


/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Small screens and up (640px+) */
@media (min-width: 640px) {
  .sm\:hidden { display: none !important; }
  .sm\:block { display: block !important; }
  .sm\:inline { display: inline !important; }
  .sm\:inline-block { display: inline-block !important; }
  .sm\:flex { display: flex !important; }
  .sm\:inline-flex { display: inline-flex !important; }
  .sm\:grid { display: grid !important; }
  .sm\:table { display: table !important; }
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
   .sm\:gap-1 { gap: 0.25rem; }
  .sm\:gap-2 { gap: 0.5rem; }
  .sm\:gap-3 { gap: 0.75rem; }
  .sm\:gap-4 { gap: 1rem; }
  .sm\:gap-6 { gap: 1.5rem; }
  .sm\:gap-8 { gap: 2rem; }
}

/* Medium screens and up (768px+) */
@media (min-width: 768px) {
  .md\:hidden { display: none !important; }
  .md\:block { display: block !important; }
  .md\:inline { display: inline !important; }
  .md\:inline-block { display: inline-block !important; }
  .md\:flex { display: flex !important; }
  .md\:inline-flex { display: inline-flex !important; }
  .md\:grid { display: grid !important; }
  .md\:table { display: table !important; }
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 .md\:gap-1 { gap: 0.25rem; }
  .md\:gap-2 { gap: 0.5rem; }
  .md\:gap-3 { gap: 0.75rem; }
  .md\:gap-4 { gap: 1rem; }
  .md\:gap-6 { gap: 1.5rem; }
  .md\:gap-8 { gap: 2rem; }
}

/* Large screens and up (1024px+) */
@media (min-width: 1024px) {
  .lg\:hidden { display: none !important; }
  .lg\:block { display: block !important; }
  .lg\:inline { display: inline !important; }
  .lg\:inline-block { display: inline-block !important; }
  .lg\:flex { display: flex !important; }
  .lg\:inline-flex { display: inline-flex !important; }
  .lg\:grid { display: grid !important; }
  .lg\:table { display: table !important; }
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 .lg\:gap-1 { gap: 0.25rem; }
  .lg\:gap-2 { gap: 0.5rem; }
  .lg\:gap-3 { gap: 0.75rem; }
  .lg\:gap-4 { gap: 1rem; }
  .lg\:gap-6 { gap: 1.5rem; }
  .lg\:gap-8 { gap: 2rem; }
}

/* Extra large screens and up (1280px+) */
@media (min-width: 1280px) {
  .xl\:hidden { display: none !important; }
  .xl\:block { display: block !important; }
  .xl\:inline { display: inline !important; }
  .xl\:inline-block { display: inline-block !important; }
  .xl\:flex { display: flex !important; }
  .xl\:inline-flex { display: inline-flex !important; }
  .xl\:grid { display: grid !important; }
  .xl\:table { display: table !important; }
  .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 .xl\:gap-1 { gap: 0.25rem; }
  .xl\:gap-2 { gap: 0.5rem; }
  .xl\:gap-3 { gap: 0.75rem; }
  .xl\:gap-4 { gap: 1rem; }
  .xl\:gap-6 { gap: 1.5rem; }
  .xl\:gap-8 { gap: 2rem; }
}