/* ============================================================
   📐 Pandero Grid System
   Grid system based on CSS Grid
   Mobile: 4 columns | Tablet: 8 columns | Desktop: 12 columns
   ============================================================ */

/* ---------- GRID CONTAINER ---------- */
.pd-grid {
  display: grid;
  gap: var(--pd-spacing-4);
  width: 100%;
}

/* Gap variants */
.pd-grid--gap-1 {
  gap: var(--pd-spacing-1);
}

.pd-grid--gap-2 {
  gap: var(--pd-spacing-2);
}

.pd-grid--gap-3 {
  gap: var(--pd-spacing-3);
}

.pd-grid--gap-4 {
  gap: var(--pd-spacing-4);
}

.pd-grid--gap-5 {
  gap: var(--pd-spacing-5);
}

.pd-grid--gap-6 {
  gap: var(--pd-spacing-6);
}

.pd-grid--gap-8 {
  gap: var(--pd-spacing-8);
}

.pd-grid--gap-10 {
  gap: var(--pd-spacing-10);
}

.pd-grid--gap-12 {
  gap: var(--pd-spacing-12);
}

.pd-grid--gap-16 {
  gap: var(--pd-spacing-16);
}

/* ---------- MOBILE: 4 COLUMNS (320px - 767px) ---------- */
/* Mobile First - By default all columns occupy 100% (4/4) */
.pd-col-1 {
  grid-column: span 1;
}

.pd-col-2 {
  grid-column: span 2;
}

.pd-col-3 {
  grid-column: span 3;
}

.pd-col-4 {
  grid-column: span 4;
}

/* Grid template for mobile (4 columns) */
.pd-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------- TABLET: 8 COLUMNS (768px - 1023px) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .pd-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .pd-col-tablet-1 {
    grid-column: span 1;
  }

  .pd-col-tablet-2 {
    grid-column: span 2;
  }

  .pd-col-tablet-3 {
    grid-column: span 3;
  }

  .pd-col-tablet-4 {
    grid-column: span 4;
  }

  .pd-col-tablet-5 {
    grid-column: span 5;
  }

  .pd-col-tablet-6 {
    grid-column: span 6;
  }

  .pd-col-tablet-7 {
    grid-column: span 7;
  }

  .pd-col-tablet-8 {
    grid-column: span 8;
  }
}

/* ---------- DESKTOP: 12 COLUMNS (1024px+) ---------- */
@media (min-width: 1024px) {
  .pd-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .pd-col-desktop-1 {
    grid-column: span 1;
  }

  .pd-col-desktop-2 {
    grid-column: span 2;
  }

  .pd-col-desktop-3 {
    grid-column: span 3;
  }

  .pd-col-desktop-4 {
    grid-column: span 4;
  }

  .pd-col-desktop-5 {
    grid-column: span 5;
  }

  .pd-col-desktop-6 {
    grid-column: span 6;
  }

  .pd-col-desktop-7 {
    grid-column: span 7;
  }

  .pd-col-desktop-8 {
    grid-column: span 8;
  }

  .pd-col-desktop-9 {
    grid-column: span 9;
  }

  .pd-col-desktop-10 {
    grid-column: span 10;
  }

  .pd-col-desktop-11 {
    grid-column: span 11;
  }

  .pd-col-desktop-12 {
    grid-column: span 12;
  }
}

/* ---------- ADDITIONAL UTILITIES ---------- */

/* Offset - Shift columns */
.pd-col-offset-0 {
  grid-column-start: 1;
}

.pd-col-offset-1 {
  grid-column-start: 2;
}

.pd-col-offset-2 {
  grid-column-start: 3;
}

.pd-col-offset-3 {
  grid-column-start: 4;
}

/* Tablet offsets */
@media (min-width: 768px) and (max-width: 1023px) {
  .pd-col-tablet-offset-0 {
    grid-column-start: 1;
  }

  .pd-col-tablet-offset-1 {
    grid-column-start: 2;
  }

  .pd-col-tablet-offset-2 {
    grid-column-start: 3;
  }

  .pd-col-tablet-offset-3 {
    grid-column-start: 4;
  }

  .pd-col-tablet-offset-4 {
    grid-column-start: 5;
  }
}

/* Desktop offsets */
@media (min-width: 1024px) {
  .pd-col-desktop-offset-0 {
    grid-column-start: 1;
  }

  .pd-col-desktop-offset-1 {
    grid-column-start: 2;
  }

  .pd-col-desktop-offset-2 {
    grid-column-start: 3;
  }

  .pd-col-desktop-offset-3 {
    grid-column-start: 4;
  }

  .pd-col-desktop-offset-4 {
    grid-column-start: 5;
  }

  .pd-col-desktop-offset-5 {
    grid-column-start: 6;
  }

  .pd-col-desktop-offset-6 {
    grid-column-start: 7;
  }
}

/* Item alignment */
.pd-grid--align-start {
  align-items: start;
}

.pd-grid--align-center {
  align-items: center;
}

.pd-grid--align-end {
  align-items: end;
}

.pd-grid--align-stretch {
  align-items: stretch;
}

/* Content justification */
.pd-grid--justify-start {
  justify-items: start;
}

.pd-grid--justify-center {
  justify-items: center;
}

.pd-grid--justify-end {
  justify-items: end;
}

.pd-grid--justify-stretch {
  justify-items: stretch;
}

/* Auto-fill for automatic columns */
.pd-grid--auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Auto-fit for automatic columns */
.pd-grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}