/* card-grid.css — card_skill.md: ideal_cols + fluid scaling */

.card-grid {
  --card-gap: var(--space-md);
  --card-min: 10.5rem;
  --grid-cols: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--card-gap);
  width: 100%;
}

.card-grid > * {
  width: calc((100% - (var(--grid-cols) - 1) * var(--card-gap)) / var(--grid-cols));
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .card-grid {
    --card-gap: var(--space-lg);
  }

  .card-grid--tablet-cols-1 { --grid-cols: 1; }
  .card-grid--tablet-cols-2 { --grid-cols: 2; }
  .card-grid--tablet-cols-3 { --grid-cols: 3; }
  .card-grid--tablet-cols-4 { --grid-cols: 4; }
}

@media (min-width: 1024px) {
  .card-grid--desktop-cols-1 { --grid-cols: 1; }
  .card-grid--desktop-cols-2 { --grid-cols: 2; }
  .card-grid--desktop-cols-3 { --grid-cols: 3; }
  .card-grid--desktop-cols-4 { --grid-cols: 4; }
  .card-grid--desktop-cols-5 { --grid-cols: 5; }
}

.card-grid--auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr));
}

.card-grid--scroll {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: var(--card-gap);
  padding-bottom: var(--space-sm);
  scroll-padding-inline: var(--container-padding);
}

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

.card-grid--scroll > * {
  flex: 0 0 clamp(12rem, 76vw, 17.5rem);
  scroll-snap-align: start;
  min-width: 0;
}

@media (min-width: 640px) {
  .card-grid--scroll > * {
    flex-basis: clamp(12rem, 42vw, 16rem);
  }
}

@media (min-width: 1024px) {
  .card-grid--scroll {
    display: grid;
    overflow: visible;
    padding-bottom: 0;
    grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
  }

  .card-grid--scroll > * {
    flex: unset;
    width: auto;
  }
}