/*
 * 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-hero, mk-hero__, mk-hero--
 */
/* Component: mk_hero */
.mk-hero {
  --mk-hero-content-width: auto;
  --mk-hero-content-margin: 0;
  --mk-hero-content-justify: stretch;
  --mk-hero-copy-max-width: var(--mk-brand-copy-width);
  --mk-hero-title-color: var(--mk-color-text);
  --mk-hero-title-size: var(--mk-font-size-md);
  --mk-hero-title-line-height: .98;
  --mk-hero-lead-color: var(--mk-color-muted);
  --mk-typo-display-color: var(--mk-hero-title-color);
  --mk-typo-display-size: var(--mk-hero-title-size);
  --mk-typo-display-line-height: var(--mk-hero-title-line-height);
  --mk-typo-lead-color: var(--mk-hero-lead-color);
  --mk-hero-actions-justify: flex-start;
  --mk-hero-actions-direction: row;
  --mk-hero-actions-align: center;
  --mk-hero-actions-width: auto;
  --mk-hero-actions-max-width: none;
  width: min(var(--mk-hero-width), calc(100% - var(--mk-public-gutter)));
  min-height: var(--mk-hero-min-height);
  margin-inline: auto;
  display: grid;
  align-items: center;
  padding: var(--mk-hero-padding-top) 0 var(--mk-hero-padding-bottom);
}

.mk-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(var(--mk-hero-media-min-width), 1.02fr);
  gap: var(--mk-layout-gap-wide);
  align-items: center;
}

.mk-hero__content {
  min-width: 0;
  width: var(--mk-hero-content-width);
  margin-inline: var(--mk-hero-content-margin);
  display: grid;
  gap: var(--mk-space-3);
  justify-items: var(--mk-hero-content-justify);
}

.mk-hero__media-cell {
  min-width: 0;
}

.mk-hero__title {
  max-width: var(--mk-hero-copy-max-width);
  margin: 0;
}

.mk-hero__lead {
  max-width: var(--mk-hero-copy-max-width);
  margin: 0;
}

.mk-hero__actions {
  width: var(--mk-hero-actions-width);
  max-width: var(--mk-hero-actions-max-width);
  display: flex;
  flex-direction: var(--mk-hero-actions-direction);
  flex-wrap: wrap;
  align-items: var(--mk-hero-actions-align);
  justify-content: var(--mk-hero-actions-justify);
  gap: var(--mk-space-3);
  margin-top: var(--mk-space-7);
}

.mk-hero__button {
  min-height: var(--mk-button-height-public);
  padding: 0 var(--mk-space-8-5);
  font-size: var(--mk-font-size-base);
  line-height: var(--mk-line-height-base);
}

.mk-hero__media {
  width: 100%;
}

.mk-hero--center {
  --mk-hero-content-width: 100%;
  --mk-hero-content-margin: auto;
  --mk-hero-content-justify: center;
  --mk-hero-copy-max-width: var(--mk-prompt-width);
  --mk-hero-actions-justify: center;
  min-height: auto;
  text-align: center;
}

.mk-hero--compact {
  --mk-hero-title-size: clamp(42px, 4vw, 58px);
  --mk-hero-title-line-height: 1.04;
  padding-top: var(--mk-space-16);
  padding-bottom: var(--mk-space-15);
}

@media (max-width: 1100px) {
  .mk-hero__layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .mk-hero {
    --mk-hero-copy-max-width: min(100%, var(--mk-hero-title-width-sm));
    width: 100%;
    min-height: auto;
    padding: var(--mk-space-11) var(--mk-space-4) var(--mk-space-16);
    overflow: hidden;
  }

  .mk-hero__lead {
    font-size: var(--mk-font-size-sm);
  }

  .mk-hero--compact {
    --mk-hero-title-size: var(--mk-font-size-md);
    --mk-hero-title-line-height: 1.08;
  }

  .mk-hero__actions--stack-mobile {
    --mk-hero-actions-width: 100%;
    --mk-hero-actions-max-width: var(--mk-hero-title-width-sm);
    --mk-hero-actions-direction: column;
    --mk-hero-actions-align: stretch;
  }

  .mk-hero__button--full-mobile {
    width: 100%;
    max-width: none;
  }

  .mk-hero__title,
  .mk-hero__lead {
    overflow-wrap: break-word;
  }
}