@use "tokens" as *;

// Grid responsive (portado de kontuan). Columnas por breakpoint del contenedor
// `content` para que coincida con el ancho real disponible.

.grid {
  display: grid;
  grid-template-columns: 1fr;

  &--gap-sm { gap: $space-3; }
  &--gap-md { gap: $space-4; }
  &--gap-lg { gap: $space-5; }

  @for $i from 1 through 6 {
    &--base-#{$i} { grid-template-columns: repeat(#{$i}, 1fr); }
  }
  @for $i from 1 through 6 {
    &--sm-#{$i} {
      @container content (min-width: #{$bp-sm}) { grid-template-columns: repeat(#{$i}, 1fr); }
    }
  }
  @for $i from 1 through 6 {
    &--md-#{$i} {
      @container content (min-width: #{$bp-md}) { grid-template-columns: repeat(#{$i}, 1fr); }
    }
  }
  @for $i from 1 through 6 {
    &--lg-#{$i} {
      @container content (min-width: #{$bp-lg}) { grid-template-columns: repeat(#{$i}, 1fr); }
    }
  }
  @for $i from 1 through 6 {
    &--xl-#{$i} {
      @container content (min-width: #{$bp-xl}) { grid-template-columns: repeat(#{$i}, 1fr); }
    }
  }

  // Preset `cards` (índices de entidades): 1 → 2 → 3 → 4 → 5 con los
  // breakpoints canónicos del contenedor `content` (480/768/1024/1280).
  &--cards {
    @container content (min-width: #{$bp-sm}) { grid-template-columns: repeat(2, 1fr); }
    @container content (min-width: #{$bp-md}) { grid-template-columns: repeat(3, 1fr); }
    @container content (min-width: #{$bp-lg}) { grid-template-columns: repeat(4, 1fr); }
    @container content (min-width: #{$bp-xl}) { grid-template-columns: repeat(5, 1fr); }
  }

  // Preset `cards-dense` (piezas pequeñas, p. ej. el gestor de iconos): el
  // DOBLE de columnas que `cards` en todos los breakpoints — 2 → 4 → 6 → 8
  // → 10 con los mismos escalones del contenedor `content`.
  &--cards-dense {
    grid-template-columns: repeat(2, 1fr);

    @container content (min-width: #{$bp-sm}) { grid-template-columns: repeat(4, 1fr); }
    @container content (min-width: #{$bp-md}) { grid-template-columns: repeat(6, 1fr); }
    @container content (min-width: #{$bp-lg}) { grid-template-columns: repeat(8, 1fr); }
    @container content (min-width: #{$bp-xl}) { grid-template-columns: repeat(10, 1fr); }
  }
}