/**
 * iNKPPL Design System — Grid Component
 */

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-4));
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

@media (max-width: 767px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Horizontal Scroll Row
   Generic layout primitive for horizontally scrollable content.
   ========================================================================== */

.grid--scroll-wrap {
  position: relative;
}

.grid--scroll-wrap::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(to left, var(--color-bg), transparent);
  pointer-events: none;
  z-index: 1;
}

.grid--scroll {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--space-1) var(--space-1) var(--space-4);
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.grid--scroll::-webkit-scrollbar {
  display: none;
}

.grid--scroll:active {
  cursor: grabbing;
}