html,
body {
  height: 100%;
  margin: 0;
}

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

.wp-site-blocks {
  flex: 1;
  display: flex;
  flex-direction: column;
}

main,
.wp-site-blocks > main,
.wp-site-blocks > [role="main"] {
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
}

header,
footer,
.wp-site-blocks > header,
.wp-site-blocks > footer {
  flex: 0 0 auto;
}

/* =========================================
   SISTEMA DE GRID
   ========================================= */

   :root {
    --grid-columns: 12;
    --grid-gap: 26px;      
    --grid-margin: 40px;   
    --container-max-width: 1440px; 
  }
  
  /* El Contenedor Principal */
  .grid-container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
    width: 100%;
    /* max-width: var(--container-max-width); */
    margin-left: auto;
    margin-right: auto;
  }
  
  /* =========================================
     CLASES DE ANCHO (SPAN) - Desktop
     ========================================= */
  .col-1  { grid-column-end: span 1; }
  .col-2  { grid-column-end: span 2; }
  .col-3  { grid-column-end: span 3; }
  .col-4  { grid-column-end: span 4; }
  .col-5  { grid-column-end: span 5; }
  .col-6  { grid-column-end: span 6; }
  .col-7  { grid-column-end: span 7; }
  .col-8  { grid-column-end: span 8; }
  .col-9  { grid-column-end: span 9; }
  .col-10 { grid-column-end: span 10; }
  .col-11 { grid-column-end: span 11; }
  .col-12 { grid-column-end: span 12; }
  
  /* =========================================
     CLASES DE POSICIÓN (START) - Desktop
     ========================================= */
  .col-start-1  { grid-column-start: 1; }
  .col-start-2  { grid-column-start: 2; }
  .col-start-3  { grid-column-start: 3; }
  .col-start-4  { grid-column-start: 4; }
  .col-start-5  { grid-column-start: 5; }
  .col-start-6  { grid-column-start: 6; }
  .col-start-7  { grid-column-start: 7; }
  .col-start-8  { grid-column-start: 8; }
  .col-start-9  { grid-column-start: 9; }
  .col-start-10 { grid-column-start: 10; }
  .col-start-11 { grid-column-start: 11; }
  .col-start-12 { grid-column-start: 12; }
  
  /* =========================================
     MEDIA QUERIES (Responsive)
     ========================================= */
  
  /* TABLETS */
  @media (max-width: 1024px) {
    :root {
      --grid-margin: 24px;
      --grid-gap: 20px;
    }
  }
  
  /* MÓVILES */
  @media (max-width: 768px) {
    :root {
      --grid-columns: 4; 
      --grid-margin: 20px; 
      --grid-gap: 8px;     
    }

    /* Reset: tots els col-* i col-start-* passen a amplada completa */
    .grid-container > [class*="col-"],
    .grid-container > [class*="col-start-"] {
      grid-column-start: auto;
      grid-column-end: span 4;
    }

    /* col-sm-* sobreescriu el reset (mateixa especificitat, declarat després) */
    .grid-container > .col-sm-1 { grid-column-start: auto; grid-column-end: span 1; }
    .grid-container > .col-sm-2 { grid-column-start: auto; grid-column-end: span 2; }
    .grid-container > .col-sm-3 { grid-column-start: auto; grid-column-end: span 3; }
    .grid-container > .col-sm-4 { grid-column-start: auto; grid-column-end: span 4; }
  }