/* -- Hero (marketing) ---------------------------------------------
   Centered headline + description + CTAs. Copy-only by design — pair it
   with the Product Showcase block for video. Layout switches on container
   width, not viewport — the block renders correctly inside a preview box. */

@layer components {
  .mk-hero {
    container: mk-hero / inline-size;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .mk-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    text-align: center;
  }

  .mk-hero-badge {
    border: 1px solid var(--border);
    background: var(--background);
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
  }

  .mk-hero-title {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  .mk-hero-desc {
    margin: 0;
    max-width: 36rem;
    color: var(--muted-foreground);
    font-size: 1.125rem;
    text-wrap: pretty;
  }

  .mk-hero-actions { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }

  /* the section itself is the query container — a container cannot query
     itself, so responsive rules target the copy child (descendant) */
  @container mk-hero (min-width: 30rem) {
    .mk-hero-title { font-size: 3.75rem; }
    .mk-hero-actions { flex-direction: row; width: fit-content; }
  }
}