/*
 * Split-layout — section
 *
 * Two-panel layout that collapses to a single column when the
 * container width falls below the panel-min threshold. Container-
 * aware via grid auto-fit + minmax — no global @media queries.
 *
 *   <section class="split-layout">
 *     <div>Left panel</div>
 *     <div>Right panel</div>
 *   </section>
 *
 *   <section class="split-layout" data-ratio="1:2">
 *     <div>Narrow side</div>
 *     <div>Wide side</div>
 *   </section>
 */

@layer malevich.components {
  .split-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--split-layout-panel-min), 1fr));
    gap: var(--space-gap-blocks-l);

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

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

  /* Ratio variants — once both panels fit, the second token controls
   * the split. Below the panel-min threshold, auto-fit + minmax(1fr)
   * collapses; above it, the explicit ratio takes effect via the
   * declared columns.
   */

  .split-layout[data-ratio="1:1"] {
    grid-template-columns: repeat(auto-fit, minmax(var(--split-layout-panel-min), 1fr));
  }

  .split-layout[data-ratio="1:2"] {
    grid-template-columns: minmax(var(--split-layout-panel-min), 1fr)
                           minmax(var(--split-layout-panel-min), 2fr);
  }

  .split-layout[data-ratio="2:1"] {
    grid-template-columns: minmax(var(--split-layout-panel-min), 2fr)
                           minmax(var(--split-layout-panel-min), 1fr);
  }

  .split-layout[data-ratio="1:3"] {
    grid-template-columns: minmax(var(--split-layout-panel-min), 1fr)
                           minmax(var(--split-layout-panel-min), 3fr);
  }

  .split-layout[data-ratio="3:1"] {
    grid-template-columns: minmax(var(--split-layout-panel-min), 3fr)
                           minmax(var(--split-layout-panel-min), 1fr);
  }

  /* Alignment */
  .split-layout.-center {
    align-items: center;
  }

  .split-layout.-stretch {
    align-items: stretch;
  }

  .split-layout.-baseline {
    align-items: baseline;
  }
}

This component is pure CSS — no JavaScript required.

# Split-Layout — AGENTS.md

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

## Identity

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

## Summary

- Two-column landing sections (content + visual).

## Variants

| Variant | Class / data | Behavior |
|---------|--------------|----------|
| Default | `.split-layout` | 1:1 ratio, auto-collapse |
| 1:1 | `data-ratio="1:1"` | Equal panels |
| 1:2 / 2:1 | `data-ratio="1:2"` / `2:1` | Narrow + wide |
| 1:3 / 3:1 | `data-ratio="1:3"` / `3:1` | Very asymmetric |
| Center align | `.-center` | Vertically centered |
| Stretch | `.-stretch` | Panels stretch to row height |
| Baseline | `.-baseline` | Align to text baseline |

## Modifier applicability

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

| Category | Accepts |
|---|---|
| `background` | — |
| `surface` | — |
| `effect` | — |
| `shader` | — |
| `rhythm` | `compact`, `regular`, `spacious` |
| `motion` | any value |
| `behavior` | — |

## Anatomy

```html
<section class="split-layout">
  <div>
    <h2>Left panel content</h2>
    <p>Text or controls.</p>
  </div>
  <div>
    <img class="image -rounded" src="…" alt="…" />
  </div>
</section>

<!-- Asymmetric -->
<section class="split-layout" data-ratio="1:2">
  <div>Sidebar</div>
  <div>Main content</div>
</section>
```

## Tokens consumed

- `--space-gap-blocks-l` — gap between panels
- `--space-inset-section-m` — outer padding

### Component-tier (generated)
- `--split-layout-panel-min` (20rem) — minimum panel width before
  collapse

## Accessibility contract

Use `<section>` or appropriate landmark. The grid auto-collapse means
mobile users see the panels stacked in source order — keep the source
order matching reading order.