> ## Documentation Index
> Fetch the complete documentation index at: https://docs.karpatokforrasa.hu/llms.txt
> Use this file to discover all available pages before exploring further.

# Szekció-layout rendszer

> Az oldalszekciók grid-, container- és spacing-rendszere

## Szekció alapja

Minden szekció a `kf-section` osztályból indul:

```css theme={null}
.kf-section {
  padding: clamp(60px, 8vw, 100px) 0;
  border-bottom: 1px solid var(--kf-border);
}
```

***

## Szekció variánsok

| Osztály                           | Háttér                              | Mikor                        |
| --------------------------------- | ----------------------------------- | ---------------------------- |
| `kf-section`                      | Átlátszó (oldal háttér látszódik)   | Alap szekció                 |
| `kf-section kf-dark`              | `var(--kf-surface)` + bottom border | Kiemelt / sötétebb szekciók  |
| `kf-section kf-hero`              | Speciális gradiens hero háttér      | Csak a nyitóblokknál         |
| `kf-section kf-instagram-section` | Pink/zöld radial gradiens           | Csak az Instagram szekciónál |

***

## Container

```css theme={null}
.kf-container {
  width: min(1180px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}
```

***

## Elrendezési módosítók

### Középre igazított (`kf-center`)

```css theme={null}
.kf-center {
  text-align: center;
}

.kf-center .kf-section-text {
  margin-left: auto;
  margin-right: auto;
}
```

Szekciócím, kicker, szöveg és tartalom középen.

***

### Kétoszlopos split (`kf-split`)

```css theme={null}
.kf-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

@media (max-width: 860px) {
  .kf-split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
```

Használat: Merch szekció, Közösségi jelenlét szekció.

***

### Hero grid (`kf-hero-grid`)

```css theme={null}
.kf-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  min-height: calc(100vh - 80px);
  padding: clamp(60px, 8vw, 100px) 0;
}

@media (max-width: 860px) {
  .kf-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: center;
  }
}
```

***

### Kártyarács (`kf-cards`)

```css theme={null}
.kf-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

@media (max-width: 860px) {
  .kf-cards { grid-template-columns: 1fr; }
}
```

***

### Programrács (`kf-program-grid`)

```css theme={null}
.kf-program-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
  text-align: left;
}

@media (max-width: 640px) {
  .kf-program-grid { grid-template-columns: 1fr; }
}
```

***

## Szekció-sorrend a főoldalon

```
kf-hero          ← Átlátszó, min-height 100vh
kf-dark          ← Küldetés + kártyák
kf-section       ← Programok
kf-dark          ← Merch & Támogatás
kf-section       ← Közösségi jelenlét
kf-instagram     ← Instagram feed
kf-dark          ← Támogatás + adatok
```

A sötét és átlátszó szekciók váltakoznak — ez adja a vizuális ritmust görgetés közben.

***

## Spacing skála

| Token                     | Érték                 | Felhasználás                  |
| ------------------------- | --------------------- | ----------------------------- |
| `clamp(60px, 8vw, 100px)` | Szekció padding Y     | Minden `kf-section`           |
| `48px`                    | Kártyarács margin-top | Kártyák a szekciócím alatt    |
| `24px`                    | Kártyarács gap        | `kf-cards`, `kf-program-grid` |
| `20px`                    | Programrács gap       | `kf-program-grid`             |
| `clamp(32px, 6vw, 80px)`  | Split gap             | `kf-split`                    |