.catalog-showcase {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bh-space-4xl-20);
}

.catalog-showcase__card {
  min-width: 0;
  display: grid;
  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
  align-content: start;
  border: var(--bh-space-xxxs-1) solid var(--bh-border-subtle);
  border-radius: var(--bh-radius-lg-8);
  background: var(--bh-bg-raised);
  padding: var(--bh-space-4xl-20);
  box-shadow: var(--shadow-component-default);
}

.catalog-showcase__card:nth-child(4),
.catalog-showcase__card:nth-child(5) {
  grid-column: 1 / -1;
}

.catalog-showcase__card-header {
  min-width: 0;
  display: grid;
  gap: var(--bh-space-xs-4);
}

.catalog-showcase__card h3,
.catalog-showcase__card p {
  margin: 0;
}

.catalog-showcase__card h3 {
  color: var(--bh-content-default);
  font-size: var(--bh-text-heading-xs-semibold-font-size);
  font-weight: var(--bh-text-heading-xs-semibold-font-weight);
  line-height: var(--bh-text-heading-xs-semibold-line-height);
}

.catalog-showcase__card p {
  color: var(--bh-content-subtle);
  font-size: var(--bh-text-body-xs-regular-font-size);
  line-height: var(--bh-text-body-sm-regular-line-height);
}

.catalog-showcase__stack {
  min-width: 0;
  display: grid;
  gap: var(--bh-space-2xl-14);
}

.catalog-showcase__tag-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bh-space-lg-10);
}

.catalog-showcase__upload-grid {
  display: grid;
  grid-template-columns: minmax(var(--bh-catalog-file-grid-min), var(--bh-catalog-file-grid-max)) minmax(var(--bh-catalog-file-preview-min), var(--bh-catalog-file-preview-max));
  gap: calc(var(--bh-space-xl-12) + var(--bh-space-sm-6));
  align-items: start;
}

/* Approved exception: media query breakpoints stay literal because CSS vars are not reliable in query conditions. */
@media (max-width: 1100px) {
  .catalog-showcase,
  .catalog-showcase__upload-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-showcase__card:nth-child(4),
  .catalog-showcase__card:nth-child(5) {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .catalog-showcase__card {
    padding: var(--bh-space-3xl-16);
  }
}
