/**
 * ═══════════════════════════════════════════════════════════════
 * MASTER DESIGN SYSTEM V7.5 - "FULL SCALE"
 * ═══════════════════════════════════════════════════════════════
 * Logic: 
 * - Section = Solo Altezza (Padding Y), Zero Lati
 * - P-Class = Lati Fissi (Allineati), Altezza Variabile (da XS a 2XL)
 * - PY-Class = Solo Altezza (da XS a 2XL), Zero Lati
 * ═══════════════════════════════════════════════════════════════
 */

/* ─── 1. RESET & BASE ─── */
html {
  font-size: 100%; 
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-size: 1rem; 
  line-height: 1.6;
  overflow-x: hidden;
}

/* ─── 2. VARIABILI FLUIDE (Base 16px) ─── */
:root {
  /* Spacing Scale (Altezze) */
  --space-xs:  clamp(0.75rem, 1.5vw, 1rem);   /* ~12-16px */
  --space-s:   clamp(1rem, 2vw, 1.5rem);      /* ~16-24px */
  --space-m:   clamp(1.5rem, 3vw, 2rem);      /* ~24-32px */
  --space-l:   clamp(2rem, 4vw, 3rem);        /* ~32-48px */
  --space-xl:  clamp(3rem, 6vw, 5rem);        /* ~48-80px */
  --space-2xl: clamp(5rem, 8vw, 10rem);       /* ~80-160px */

  /* Safety Zone (L'unico valore per i lati) */
  --fluid-side: clamp(1.25rem, 5vw, 5rem);

  /* Layout Widths */
  --section-narrow: 62.5rem; /* 1000px */
}

/* ─── 3. MACRO LAYOUT (Sezioni / Row Layout) ─── */
/* Agiscono SOLO sull'altezza (Verticale). 
   Nessun padding laterale qui per permettere il full-width. */

.section-2xl, .section-xl, .section-l, .section-m, .section-s, .section-xs {
  width: 100%;
  padding-inline: 0 !important; /* Zero lati */
}

/* 6 Varianti di Altezza */
.section-2xl { padding-block: var(--space-2xl); }
.section-xl  { padding-block: var(--space-xl); }
.section-l   { padding-block: var(--space-l); }
.section-m   { padding-block: var(--space-m); }
.section-s   { padding-block: var(--space-s); }
.section-xs  { padding-block: var(--space-xs); } 


/* ─── 4. MICRO LAYOUT (Contenuto Interno) ─── */
/* Classi P: Padding laterale UNICO e FISSO.
   Cambia solo il padding verticale in base alla classe. */

.p-2xl, .p-xl, .p-l, .p-m, .p-s, .p-xs {
  padding-inline: var(--fluid-side); /* Allineamento perfetto garantito */
}

/* Varianti Verticali per le P classes (Ora complete) */
.p-2xl { padding-block: var(--space-2xl); }
.p-xl  { padding-block: var(--space-xl); }
.p-l   { padding-block: var(--space-l); }
.p-m   { padding-block: var(--space-m); }
.p-s   { padding-block: var(--space-s); }
.p-xs  { padding-block: var(--space-xs); }


/* ─── 5. UTILITY EXTRA (Opzionali ma utili) ─── */
/* Solo padding verticale se serve spaziare elementi senza toccare i lati */

.py-2xl { padding-block: var(--space-2xl); }
.py-xl  { padding-block: var(--space-xl); }
.py-l   { padding-block: var(--space-l); }
.py-m   { padding-block: var(--space-m); }
.py-s   { padding-block: var(--space-s); }
.py-xs  { padding-block: var(--space-xs); }

/* ─── 6. HELPER CRITICI ─── */
/* Larghezza lettura ottimale (AEO) */
.reading-width { max-width: 65ch; margin-inline: auto; }

/* Mobile Edge Fix */
@media (max-width: 1024px) {
  .edge-mobile { padding-inline: 0 !important; }
}

/* Kadence Inner Fix */
.section-narrow > .kt-row-layout-inner {
  max-width: var(--section-narrow);
  margin-inline: auto;
}

/* Performance Hook */
.lazy-section { content-visibility: auto; contain-intrinsic-size: 1px 500px; }