.node-collection-component {
  display: block;
}

.node-collection__loading {
  font-size: 0.95rem;
  color: #6b7280;
}

.node-collection__error {
  font-size: 0.95rem;
  color: #dc2626;
}

/* Grid system from dripyard_base (needed because SDC CSS doesn't auto-load for JS components) */
.node-collection-component .grid-wrapper {
  container-type: inline-size;
}

.node-collection-component .grid-wrapper__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: min(calc(100cqw / 12), 40px);
  row-gap: 40px;
}

@container (width > 600px) {
  .node-collection-component .grid-wrapper__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

.node-collection-component .grid-cell {
  grid-column: span var(--grid-cell-columns-small, 6);
  display: flex;
  flex-direction: column;
}

@container (width > 600px) {
  .node-collection-component .grid-cell {
    grid-column: span var(--grid-cell-columns-medium, var(--grid-cell-columns-small, 6));
  }
}

@container (width > 1200px) {
  .node-collection-component .grid-cell {
    grid-column: span var(--grid-cell-columns-large, var(--grid-cell-columns-medium, var(--grid-cell-columns-small, 6)));
  }
}

/* Apply theme surface styling to cards inside a themed wrapper */
.node-collection-component[class*="theme"] .card {
  background-color: var(--theme-surface);
  border-radius: var(--radius-md);
  overflow: clip;
  color: var(--theme-text-color-loud);
}

.node-collection-component[class*="theme"] .card__bottom {
  padding: 0 var(--gap) var(--gap) var(--gap);
}