/*
 * OCFai CSS contract
 * AI_RULE: define only classes matching OCFAI_ALLOWED_PREFIXES in this file.
 * AI_RULE: shared UI patterns must use their canonical component CSS instead of local variants.
 * OCFAI_ROLE: component
 * OCFAI_ALLOWED_PREFIXES: mk-card, mk-card__, mk-card--
 */
/* Component: mk_card */
.mk-card {
  --mk-card-title-color: var(--mk-color-text);
  --mk-card-text-color: var(--mk-color-muted);
  --mk-card-title-weight: 740;
  --mk-card-text-size: var(--mk-font-size-base);
  --mk-card-text-line-height: 1.52;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--mk-card-gap);
  padding: var(--mk-card-padding);
  border: 1px solid var(--mk-color-line);
  border-radius: var(--mk-card-radius);
  background: var(--mk-color-light);
  overflow-wrap: anywhere;
}

.mk-card--dark {
  --mk-card-title-color: var(--mk-color-light);
  --mk-card-text-color: rgb(var(--mk-light-rgb) / .68);
  border-color: rgb(var(--mk-light-rgb) / .12);
  background: var(--mk-color-text);
  color: rgb(var(--mk-light-rgb) / .78);
}

.mk-card--summary {
  --mk-card-title-weight: 650;
  --mk-card-text-color: var(--mk-color-text);
  --mk-card-text-size: var(--mk-font-size-md);
  --mk-card-text-line-height: 1.6;
  min-height: 260px;
  gap: var(--mk-space-8);
  padding: var(--mk-space-12);
  text-align: left;
}

.mk-card__title {
  margin: 0;
  color: var(--mk-card-title-color);
  font-size: var(--mk-font-size-md);
  line-height: 1.18;
  font-weight: var(--mk-card-title-weight);
}

.mk-card__text {
  margin: 0;
  color: var(--mk-card-text-color);
  font-size: var(--mk-card-text-size);
  line-height: var(--mk-card-text-line-height);
}

.mk-card__action {
  justify-self: start;
}

@media (max-width: 767.98px) {
  .mk-card--summary {
    --mk-card-text-size: var(--mk-font-size-base);
    --mk-card-text-line-height: 1.52;
    min-height: auto;
    padding: var(--mk-space-8);
  }
}