/* ============================================= */
/* Component: Grid                               */
/* Description: Basic responsive grid container  */
/* Default: 2 columns, 1 row, gap md, auto rows  */
/* ============================================= */
[data-lk-component="grid"] {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* default: 2 columns */
  grid-template-rows: auto;
  /* default: 1 row, auto height */
  gap: var(--lk-size-md);
  /* default spacing */
}

/* Sets the number of columns in the grid */
[data-lk-component="grid"][data-lk-grid-columns="1"] {
  grid-template-columns: repeat(1, 1fr);
}

[data-lk-component="grid"][data-lk-grid-columns="2"] {
  grid-template-columns: repeat(2, 1fr);
}

[data-lk-component="grid"][data-lk-grid-columns="3"] {
  grid-template-columns: repeat(3, 1fr);
}

[data-lk-component="grid"][data-lk-grid-columns="4"] {
  grid-template-columns: repeat(4, 1fr);
}

[data-lk-component="grid"][data-lk-grid-columns="5"] {
  grid-template-columns: repeat(5, 1fr);
}

[data-lk-component="grid"][data-lk-grid-columns="6"] {
  grid-template-columns: repeat(6, 1fr);
}

[data-lk-component="grid"][data-lk-grid-columns="7"] {
  grid-template-columns: repeat(7, 1fr);
}

[data-lk-component="grid"][data-lk-grid-columns="8"] {
  grid-template-columns: repeat(8, 1fr);
}

[data-lk-component="grid"][data-lk-grid-columns="9"] {
  grid-template-columns: repeat(9, 1fr);
}

[data-lk-component="grid"][data-lk-grid-columns="10"] {
  grid-template-columns: repeat(10, 1fr);
}

[data-lk-component="grid"][data-lk-grid-columns="11"] {
  grid-template-columns: repeat(11, 1fr);
}

[data-lk-component="grid"][data-lk-grid-columns="12"] {
  grid-template-columns: repeat(12, 1fr);
}

/* Enables auto-fitting columns with a default minmax range */
[data-lk-component="grid"][data-lk-grid-minmax="true"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Overrides default min width in minmax range */
[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="3xs"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-3xs), 1fr));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="2xs"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-2xs), 1fr));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="xs"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-xs), 1fr));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="sm"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-sm), 1fr));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="md"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-md), 1fr));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="lg"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-lg), 1fr));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="xl"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-xl), 1fr));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="2xl"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-2xl), 1fr));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="3xl"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-3xl), 1fr));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-minwidth="4xl"] {
  grid-template-columns: repeat(auto-fit, minmax(var(--lk-size-4xl), 1fr));
}

/* Overrides default max width in minmax range */
[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="3xs"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-3xs)));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="2xs"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-2xs)));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="xs"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-xs)));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="sm"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-sm)));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="md"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-md)));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="lg"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-lg)));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="xl"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-xl)));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="2xl"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-2xl)));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="3xl"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-3xl)));
}

[data-lk-component="grid"][data-lk-grid-minmax="true"][data-lk-grid-minmax-maxwidth="4xl"] {
  grid-template-columns: repeat(auto-fit, minmax(200px, var(--lk-size-4xl)));
}

/* Collapse to single column on mobile viewports (portrait) */
@media (max-width: 480px) {
  [data-lk-component="grid"][data-lk-grid-auto-responsive="true"] {
    grid-template-columns: 1fr !important;
  }

  /* Force all children to single span (use !important to override combinations) */
  [data-lk-component="grid"][data-lk-grid-auto-responsive="true"]>* {
    grid-column: span 1 !important;
  }
}

/* Sets gap using LiftKit spacing scale */
[data-lk-component="grid"][data-lk-grid-gap="3xs"] {
  gap: var(--lk-size-3xs);
}

[data-lk-component="grid"][data-lk-grid-gap="2xs"] {
  gap: var(--lk-size-2xs);
}

[data-lk-component="grid"][data-lk-grid-gap="xs"] {
  gap: var(--lk-size-xs);
}

[data-lk-component="grid"][data-lk-grid-gap="sm"] {
  gap: var(--lk-size-sm);
}

[data-lk-component="grid"][data-lk-grid-gap="md"] {
  gap: var(--lk-size-md);
}

[data-lk-component="grid"][data-lk-grid-gap="lg"] {
  gap: var(--lk-size-lg);
}

[data-lk-component="grid"][data-lk-grid-gap="xl"] {
  gap: var(--lk-size-xl);
}

[data-lk-component="grid"][data-lk-grid-gap="2xl"] {
  gap: var(--lk-size-2xl);
}

[data-lk-component="grid"][data-lk-grid-gap="3xl"] {
  gap: var(--lk-size-3xl);
}

[data-lk-component="grid"][data-lk-grid-gap="4xl"] {
  gap: var(--lk-size-4xl);
}

/* THESE ARE FOR WEBFLOW ONLY */

/* Show only the first 1 slot */
[data-lk-component="grid"][data-lk-grid-slots-to-show="1"]>[data-lk-element="slot"]:nth-of-type(n + 2) {
  display: none;
}

/* Show only the first 2 slots */
[data-lk-component="grid"][data-lk-grid-slots-to-show="2"]>[data-lk-element="slot"]:nth-of-type(n + 3) {
  display: none;
}

[data-lk-component="grid"][data-lk-grid-slots-to-show="3"]>[data-lk-element="slot"]:nth-of-type(n + 4) {
  display: none;
}

[data-lk-component="grid"][data-lk-grid-slots-to-show="4"]>[data-lk-element="slot"]:nth-of-type(n + 5) {
  display: none;
}

[data-lk-component="grid"][data-lk-grid-slots-to-show="5"]>[data-lk-element="slot"]:nth-of-type(n + 6) {
  display: none;
}

[data-lk-component="grid"][data-lk-grid-slots-to-show="6"]>[data-lk-element="slot"]:nth-of-type(n + 7) {
  display: none;
}

[data-lk-component="grid"][data-lk-grid-slots-to-show="7"]>[data-lk-element="slot"]:nth-of-type(n + 8) {
  display: none;
}

[data-lk-component="grid"][data-lk-grid-slots-to-show="8"]>[data-lk-element="slot"]:nth-of-type(n + 9) {
  display: none;
}

[data-lk-component="grid"][data-lk-grid-slots-to-show="9"]>[data-lk-element="slot"]:nth-of-type(n + 10) {
  display: none;
}

[data-lk-component="grid"][data-lk-grid-slots-to-show="10"]>[data-lk-element="slot"]:nth-of-type(n + 11) {
  display: none;
}

[data-lk-component="grid"][data-lk-grid-slots-to-show="11"]>[data-lk-element="slot"]:nth-of-type(n + 12) {
  display: none;
}

/* No rule needed for 12 – all slots are shown by default */

.lk-debug--grid-override {
  grid-template-columns: 0.5fr 1fr 0.5fr 2fr 0.5fr;

}
