/* Shared adaptive one-type catalog and semantic card contracts. */

:root {
  --vk-catalog-gap: var(--vk-space-section);
  --vk-catalog-card-min-width: 260px;
  --vk-catalog-card-max-width: 100%;
  --vk-catalog-single-row-card-width: min(var(--vk-catalog-card-max-width), calc(var(--vk-catalog-card-min-width) * 1.5));

  --vk-card-variation-min-width: 362px;
  --vk-card-variation-max-width: 560px;
  --vk-card-tsumego-min-width: 184px;
  --vk-card-tsumego-max-width: 184px;
  --vk-card-user-min-width: 260px;
  --vk-card-user-max-width: 320px;
  --vk-card-collection-min-width: 300px;
  --vk-card-collection-max-width: 420px;
  --vk-card-selection-min-width: 300px;
  --vk-card-selection-max-width: 420px;
  --vk-card-bookmark-min-width: 320px;
  --vk-card-bookmark-max-width: 460px;
  --vk-card-review-min-width: 260px;
  --vk-card-review-max-width: 320px;
  --vk-card-tool-min-width: 100%;
  --vk-card-tool-max-width: 100%;
  --vk-card-create-icon-size: 42px;
}

.vk-catalog {
  --vk-catalog-card-min-width: 260px;
  --vk-catalog-card-max-width: 100%;
  --vk-catalog-single-row-card-width: min(var(--vk-catalog-card-max-width), calc(var(--vk-catalog-card-min-width) * 1.5));
  --menu-catalog-card-min: var(--vk-catalog-card-min-width);
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.vk-catalog__grid {
  --menu-catalog-card-min: var(--vk-catalog-card-min-width);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--vk-catalog-card-min-width)), 1fr));
  gap: var(--vk-catalog-gap);
  min-width: 0;
  box-sizing: border-box;
  align-items: start;
  justify-items: center;
}

.vk-catalog__grid > .vk-card {
  width: 100%;
  max-width: var(--vk-catalog-card-max-width);
  min-width: 0;
}

.vk-catalog--variation {
  --vk-catalog-card-min-width: var(--vk-card-variation-min-width);
  --vk-catalog-card-max-width: var(--vk-card-variation-max-width);
}

.vk-catalog--tsumego {
  --vk-catalog-card-min-width: var(--vk-card-tsumego-min-width);
  --vk-catalog-card-max-width: var(--vk-card-tsumego-max-width);
}

.vk-catalog--user {
  --vk-catalog-card-min-width: var(--vk-card-user-min-width);
  --vk-catalog-card-max-width: var(--vk-card-user-max-width);
}

.vk-catalog--collection {
  --vk-catalog-card-min-width: var(--vk-card-collection-min-width);
  --vk-catalog-card-max-width: var(--vk-card-collection-max-width);
}

.vk-catalog--selection {
  --vk-catalog-card-min-width: var(--vk-card-selection-min-width);
  --vk-catalog-card-max-width: var(--vk-card-selection-max-width);
}

.vk-catalog--bookmark {
  --vk-catalog-card-min-width: var(--vk-card-bookmark-min-width);
  --vk-catalog-card-max-width: var(--vk-card-bookmark-max-width);
}

.vk-catalog--review {
  --vk-catalog-card-min-width: var(--vk-card-review-min-width);
  --vk-catalog-card-max-width: var(--vk-card-review-max-width);
}

.vk-catalog--tool {
  --vk-catalog-card-min-width: var(--vk-card-tool-min-width);
  --vk-catalog-card-max-width: var(--vk-card-tool-max-width);
}

.vk-card {
  --vk-card-min-width: var(--vk-catalog-card-min-width);
  --vk-card-max-width: var(--vk-catalog-card-max-width);
  min-width: 0;
  box-sizing: border-box;
}

.vk-card--catalog {
  width: 100%;
  max-width: var(--vk-card-max-width);
}

.vk-card--create {
  justify-self: stretch;
  width: 100%;
  max-width: var(--vk-card-max-width);
}

.vk-catalog__grid > .vk-card--create:only-child {
  justify-self: flex-start;
  width: min(100%, var(--vk-catalog-single-row-card-width));
  max-width: var(--vk-catalog-single-row-card-width);
}

.vk-card__create-surface {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vk-card__create-icon {
  width: var(--vk-card-create-icon-size);
  height: var(--vk-card-create-icon-size);
  color: var(--vk-text-primary);
  stroke-width: 1.6;
}

.vk-card--create:hover .vk-card__create-icon {
  color: var(--vk-text-primary);
}

.vk-card--variation {
  --vk-card-min-width: var(--vk-card-variation-min-width);
  --vk-card-max-width: var(--vk-card-variation-max-width);
}

.vk-card--tsumego {
  --vk-card-min-width: var(--vk-card-tsumego-min-width);
  --vk-card-max-width: var(--vk-card-tsumego-max-width);
}

.vk-card--user {
  --vk-card-min-width: var(--vk-card-user-min-width);
  --vk-card-max-width: var(--vk-card-user-max-width);
}

.vk-card--collection {
  --vk-card-min-width: var(--vk-card-collection-min-width);
  --vk-card-max-width: var(--vk-card-collection-max-width);
}

.vk-card--selection {
  --vk-card-min-width: var(--vk-card-selection-min-width);
  --vk-card-max-width: var(--vk-card-selection-max-width);
}

.vk-card--bookmark {
  --vk-card-min-width: var(--vk-card-bookmark-min-width);
  --vk-card-max-width: var(--vk-card-bookmark-max-width);
}

.vk-card--review {
  --vk-card-min-width: var(--vk-card-review-min-width);
  --vk-card-max-width: var(--vk-card-review-max-width);
}

.vk-card--tool {
  --vk-card-min-width: var(--vk-card-tool-min-width);
  --vk-card-max-width: var(--vk-card-tool-max-width);
}