/**
 * Columns component styles
 */

/* Base component */
.columns {
  display: grid;
  width: 100%;
  padding: 2rem 0;
}

/* Column count variants */
.columns--count-2 {
  grid-template-columns: repeat(2, 1fr);
}

.columns--count-3 {
  grid-template-columns: repeat(3, 1fr);
}

.columns--count-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Gap variants */
.columns--gap-small {
  gap: var(--spacing-sm, 1rem);
}

.columns--gap-default {
  gap: var(--spacing-md, 2rem);
}

.columns--gap-large {
  gap: var(--spacing-lg, 3rem);
}

/* Individual column */
.columns__column {
  min-width: 0; /* Prevents overflow issues */
}

/* Responsive stacking - tablet (768px) */
@media (max-width: 768px) {
  .columns--stack-tablet {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
  }

  /* Remove card margins when stacked - grid gap handles spacing */
  .columns--stack-tablet .columns__column > .card {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Remove top padding when stacked on tablet and option is enabled */
  .columns--stack-tablet.columns--no-top-padding-mobile {
    padding-top: 0;
  }

  /* Reduce gap on mobile even if not stacking */
  .columns--gap-large {
    gap: var(--spacing-md, 2rem);
  }

  .columns--gap-default {
    gap: var(--spacing-sm, 1rem);
  }
}

/* Responsive stacking - mobile (640px) */
@media (max-width: 640px) {
  .columns--stack-mobile {
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
  }

  /* Remove card margins when stacked - grid gap handles spacing */
  .columns--stack-mobile .columns__column > .card {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Remove top padding when stacked on mobile and option is enabled */
  .columns--stack-mobile.columns--no-top-padding-mobile {
    padding-top: 0;
  }
}

/* Additional responsive adjustments for 3-4 columns */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Stack 4 columns to 2 on tablets */
  .columns--count-4:not(.columns--stack-never) {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stack 3 columns to 2 on tablets */
  .columns--count-3:not(.columns--stack-never) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Never stack - force columns on all screen sizes */
.columns--stack-never {
  /* Keep grid-template-columns as defined by count */
}

/* On very small screens, even "never" should consider stacking 4 columns */
@media (max-width: 480px) {
  .columns--count-4.columns--stack-never {
    grid-template-columns: repeat(2, 1fr);
  }
}