/*
 * Hero — section
 *
 * Above-the-fold page region for landing pages. Per v1-master-diff §2.1
 * with the answered design question (start with Hero + CTA in v1.0):
 * four authored patterns via data-pattern.
 *
 *   <section class="hero" data-pattern="standard">
 *     <div class="hero__eyebrow">v1.0 launch</div>
 *     <h1 class="hero__title">A semantic design system.</h1>
 *     <p class="hero__lede">For humans and AI agents.</p>
 *     <div class="hero__actions">
 *       <a href="#" class="button -primary">Get started</a>
 *       <a href="#" class="button -ghost">Read the manifesto</a>
 *     </div>
 *   </section>
 *
 * Patterns:
 *   standard  — eyebrow + title + lede + actions, left-aligned (default)
 *   centered  — same, center-aligned
 *   split     — content on one side, slot for visual on the other; the
 *               grid auto-collapses to a single column on narrow viewports
 *               via auto-fit + a hero-split-min tier-3 token.
 *   minimal   — title only, large display typography
 */

@layer malevich.components {
  .hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-gap-elements-m);

    padding-block: var(--space-inset-section-l);
    padding-inline: var(--space-inset-section-m);

    background-color: var(--color-surface-canvas);
    color: var(--color-ink-strong);

    inline-size: 100%;
    box-sizing: border-box;
  }

  .hero > * {
    max-inline-size: var(--hero-max-content);
  }

  .hero__eyebrow {
    color: var(--color-accent);
    font-family: var(--font-overline-family);
    font-size: var(--font-overline-size);
    font-weight: var(--font-overline-weight);
    line-height: var(--font-overline-line-height);
    letter-spacing: var(--font-overline-letter-spacing);
    text-transform: uppercase;
  }

  .hero__title {
    margin: 0;
    color: var(--color-ink-strong);

    /* Uses heading-hero typography. v0.2.0 will introduce a
     * dedicated display.hero fluid token (clamp); until then we
     * consume the heading-hero size which is the closest semantic.
     */
    font-family: var(--font-display-hero-family);
    font-size: var(--font-display-hero-size);
    font-weight: var(--font-display-hero-weight);
    line-height: var(--font-display-hero-line-height);
    letter-spacing: var(--font-display-hero-letter-spacing);
  }

  .hero__lede {
    margin: 0;
    color: var(--color-ink-regular);
    font-family: var(--font-body-lead-family);
    font-size: var(--font-body-lead-size);
    font-weight: var(--font-body-lead-weight);
    line-height: var(--font-body-lead-line-height);
    letter-spacing: var(--font-body-lead-letter-spacing);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-gap-elements-s);
    margin-block-start: var(--space-gap-elements-s);
  }

  .hero__visual {
    inline-size: 100%;
  }

  /* Patterns */

  .hero[data-pattern="centered"] {
    align-items: center;
    text-align: center;
  }

  .hero[data-pattern="centered"] > * {
    margin-inline: auto;
  }

  .hero[data-pattern="centered"] .hero__actions {
    justify-content: center;
  }

  .hero[data-pattern="split"] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--hero-split-min), 1fr));
    gap: var(--space-gap-blocks-l);
    align-items: center;
  }

  .hero[data-pattern="split"] > * {
    max-inline-size: none;
  }

  .hero[data-pattern="minimal"] {
    align-items: flex-start;
    gap: var(--space-gap-elements-s);
  }

  /* On-surface variants */

  .hero.-on-accent {
    background-color: var(--color-accent);
    color: var(--color-ink-inverse);
  }
  .hero.-on-accent .hero__title,
  .hero.-on-accent .hero__lede,
  .hero.-on-accent .hero__eyebrow {
    color: var(--color-ink-inverse);
  }

  .hero.-on-inverse {
    background-color: var(--color-ink-strong);
    color: var(--color-ink-inverse);
  }
  .hero.-on-inverse .hero__title,
  .hero.-on-inverse .hero__lede {
    color: var(--color-ink-inverse);
  }
}

This component is pure CSS — no JavaScript required.

# Hero — AGENTS.md

> Auto-generated from `hero.docs.md` + the modifier applicability matrix.
> Edit those source files; this file regenerates on build.

## Identity

- **Component:** `hero`
- **Layer:** sections
- **Status:** stable
- **Last updated:** 2026-05-19

## Summary

(no summary)

## Variants

| Pattern    | data-pattern        | Use for                                |
|------------|---------------------|----------------------------------------|
| Standard   | (default / none)    | Most landing pages — left-aligned      |
| Centered   | `centered`          | Marketing pages, announcements         |
| Split      | `split`             | Two-column: content + visual           |
| Minimal    | `minimal`           | Title-only, tight vertical rhythm      |

The Split pattern collapses to a single column on narrow viewports
via `auto-fit` + the `--hero-split-min` token (default `20rem`).

## Modifier applicability

Per ADR-0007. Modifiers attach via `data-{category}="value"` attributes.

| Category | Accepts |
|---|---|
| `background` | any value |
| `surface` | any value |
| `effect` | any value |
| `shader` | any value |
| `rhythm` | any value |
| `motion` | any value |
| `behavior` | — |

## Anatomy

```html
<section class="hero">
  <div class="hero__eyebrow">v1.0 launch</div>
  <h1 class="hero__title">A semantic design system.</h1>
  <p class="hero__lede">Rooted in suprematism. Built for humans and AI agents.</p>
  <div class="hero__actions">
    <a href="#" class="button -primary">Get started</a>
    <a href="#" class="button -ghost">Read the manifesto</a>
  </div>
</section>

<!-- Split with visual slot -->
<section class="hero" data-pattern="split">
  <div>
    <h1 class="hero__title">A semantic design system.</h1>
    <p class="hero__lede">For humans and AI agents.</p>
    <div class="hero__actions">
      <a class="button -primary">Get started</a>
    </div>
  </div>
  <div class="hero__visual">
    <img class="image -rounded -shadow" src="hero.jpg" alt="…" />
  </div>
</section>

<!-- On accent background -->
<section class="hero -on-accent" data-pattern="centered">
  <h1 class="hero__title">Ship faster.</h1>
  <p class="hero__lede">A design system for the AI-native era.</p>
  <a class="button -secondary">Get started</a>
</section>
```

Every part is optional except `.hero__title`. Authors compose what
the page needs.

## Tokens consumed

### From semantic tier
- `--color-surface-canvas` — default background
- `--color-accent` — eyebrow + on-accent background
- `--color-ink-strong`, `--color-ink-regular`, `--color-ink-inverse`
- `--space-inset-section-{m,l}` — block / inline padding
- `--space-gap-elements-{s,m}` — internal gaps
- `--space-gap-blocks-l` — split-pattern gutter
- `--font-overline-*` — eyebrow
- `--font-display-hero-*` — title (v0.2.0 will swap to
  `display.hero` per ADR-0009)
- `--font-body-lead-*` — lede

### Component-tier (generated)
- `--hero-max-content` — measure cap for text content (default
  `56rem`)
- `--hero-split-min` — collapse threshold for split pattern (default
  `20rem`)

## Accessibility contract

- Wrap in `<section>` so it appears as a landmark when paired with an
  outer `<main>`.
- The title is the page's primary heading — use `<h1>` (or `<h2>` if
  another section already takes `<h1>`).
- The eyebrow is decorative — use `<div>` (or `<p>` if it conveys a
  brief sentence); avoid headings here so the page outline stays
  clean.
- `.hero__visual` should carry an `alt` attribute on its `<img>`.

## Guidance

### Do

- Pick the pattern that matches the page intent before writing markup.
- Keep titles concise — Hero is a visual moment, not a paragraph.
- Use `Image` (or a Spinner placeholder during async load) inside
  `.hero__visual`.

### Don't

- Don't put three or more buttons in `.hero__actions`. Use a primary
  + secondary, or primary + ghost.
- Don't override the title's font via inline styles. Use the
  pattern variants or wait for the v0.2.0 display.hero token.
- Don't nest Hero inside Hero.