/* Multi-Column Layout */

/* Column Count */
.columns-1 {
  column-count: 1;
}

.columns-2 {
  column-count: 2;
}

.columns-3 {
  column-count: 3;
}

.columns-4 {
  column-count: 4;
}

.columns-5 {
  column-count: 5;
}

.columns-6 {
  column-count: 6;
}

/* Column Width */
.columns-xs {
  column-width: 10rem;
}

.columns-sm {
  column-width: 15rem;
}

.columns-md {
  column-width: 20rem;
}

.columns-lg {
  column-width: 25rem;
}

.columns-xl {
  column-width: 30rem;
}

/* Column Gap */
.column-gap-0 {
  column-gap: 0;
}

.column-gap-1 {
  column-gap: 0.25rem;
}

.column-gap-2 {
  column-gap: 0.5rem;
}

.column-gap-4 {
  column-gap: 1rem;
}

.column-gap-6 {
  column-gap: 1.5rem;
}

.column-gap-8 {
  column-gap: 2rem;
}

/* Column Rule */
.column-rule {
  column-rule: 1px solid var(--color-border);
}

.column-rule-none {
  column-rule: none;
}

.column-rule-dotted {
  column-rule-style: dotted;
}

.column-rule-dashed {
  column-rule-style: dashed;
}

.column-rule-solid {
  column-rule-style: solid;
}

.column-rule-double {
  column-rule-style: double;
}

/* Column Rule Width */
.column-rule-1 {
  column-rule-width: 1px;
}

.column-rule-2 {
  column-rule-width: 2px;
}

.column-rule-4 {
  column-rule-width: 4px;
}

/* Column Rule Color - using CSS variables */
.column-rule-primary {
  column-rule-color: var(--color-primary);
}

.column-rule-secondary {
  column-rule-color: var(--color-secondary);
}

.column-rule-muted {
  column-rule-color: var(--color-muted);
}

/* Column Span */
.column-span-all {
  column-span: all;
}

.column-span-none {
  column-span: none;
}

/* Column Fill */
.column-fill-auto {
  column-fill: auto;
}

.column-fill-balance {
  column-fill: balance;
}

/* Break Inside */
.break-inside-auto {
  break-inside: auto;
}

.break-inside-avoid {
  break-inside: avoid;
}

.break-inside-avoid-column {
  break-inside: avoid-column;
}

/* Break Before */
.break-before-auto {
  break-before: auto;
}

.break-before-column {
  break-before: column;
}

.break-before-avoid-column {
  break-before: avoid-column;
}

/* Break After */
.break-after-auto {
  break-after: auto;
}

.break-after-column {
  break-after: column;
}

.break-after-avoid-column {
  break-after: avoid-column;
}

/* Responsive Column Utilities */
@media (min-width: 640px) {
  .sm\:columns-1 {
    column-count: 1;
  }
  .sm\:columns-2 {
    column-count: 2;
  }
  .sm\:columns-3 {
    column-count: 3;
  }
  .sm\:columns-4 {
    column-count: 4;
  }
  .sm\:columns-5 {
    column-count: 5;
  }
  .sm\:columns-6 {
    column-count: 6;
  }

  .sm\:columns-xs {
    column-width: 10rem;
  }
  .sm\:columns-sm {
    column-width: 15rem;
  }
  .sm\:columns-md {
    column-width: 20rem;
  }
  .sm\:columns-lg {
    column-width: 25rem;
  }
  .sm\:columns-xl {
    column-width: 30rem;
  }
}

@media (min-width: 768px) {
  .md\:columns-1 {
    column-count: 1;
  }
  .md\:columns-2 {
    column-count: 2;
  }
  .md\:columns-3 {
    column-count: 3;
  }
  .md\:columns-4 {
    column-count: 4;
  }
  .md\:columns-5 {
    column-count: 5;
  }
  .md\:columns-6 {
    column-count: 6;
  }

  .md\:columns-xs {
    column-width: 10rem;
  }
  .md\:columns-sm {
    column-width: 15rem;
  }
  .md\:columns-md {
    column-width: 20rem;
  }
  .md\:columns-lg {
    column-width: 25rem;
  }
  .md\:columns-xl {
    column-width: 30rem;
  }

  .md\:column-gap-0 {
    column-gap: 0;
  }
  .md\:column-gap-1 {
    column-gap: 0.25rem;
  }
  .md\:column-gap-2 {
    column-gap: 0.5rem;
  }
  .md\:column-gap-4 {
    column-gap: 1rem;
  }
  .md\:column-gap-6 {
    column-gap: 1.5rem;
  }
  .md\:column-gap-8 {
    column-gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .lg\:columns-1 {
    column-count: 1;
  }
  .lg\:columns-2 {
    column-count: 2;
  }
  .lg\:columns-3 {
    column-count: 3;
  }
  .lg\:columns-4 {
    column-count: 4;
  }
  .lg\:columns-5 {
    column-count: 5;
  }
  .lg\:columns-6 {
    column-count: 6;
  }

  .lg\:columns-xs {
    column-width: 10rem;
  }
  .lg\:columns-sm {
    column-width: 15rem;
  }
  .lg\:columns-md {
    column-width: 20rem;
  }
  .lg\:columns-lg {
    column-width: 25rem;
  }
  .lg\:columns-xl {
    column-width: 30rem;
  }

  .lg\:column-gap-0 {
    column-gap: 0;
  }
  .lg\:column-gap-1 {
    column-gap: 0.25rem;
  }
  .lg\:column-gap-2 {
    column-gap: 0.5rem;
  }
  .lg\:column-gap-4 {
    column-gap: 1rem;
  }
  .lg\:column-gap-6 {
    column-gap: 1.5rem;
  }
  .lg\:column-gap-8 {
    column-gap: 2rem;
  }
}