/* ========================================
   LAYOUT
   ======================================== */

/* ----------------------------------------
   A. STICKY FOOTER & BODY SETUP
   ---------------------------------------- */
html, body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  /* main riempie lo spazio, spingendo il footer giù */
  flex: 1 0 auto; 
  display: flex;
  flex-direction: column;
}

.site-footer {
  /* Impedisce al footer di restringersi */
  flex-shrink: 0;
}

/* ----------------------------------------
   B. GRID CONTAINER
   ---------------------------------------- */
.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  column-gap: var(--grid-gutter);
  width: 100%;
  padding: 0 var(--grid-margin);
  margin: 0 auto;
}

/* ----------------------------------------
   C. GLOBAL PAGE TRANSITIONS
   ---------------------------------------- */
main {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--motion-slow) var(--ease-interaction), 
              transform var(--motion-slow) var(--ease-interaction);
}

body.page-loaded main {
  opacity: 1;
  transform: none; 
}