/* ================================================================
 * Growston NEW — wspólny nagłówek sekcji (Default section header)
 * Struktura 1:1 z Figmy "Growston NEW" (file MKCcworawve3oTcnVM3Qbn):
 *
 *   Default section header   (.g-section-head)          — gap 50px
 *   ├─ Eyebrow header wrapper (.g-section-head__eyebrow-wrap) — gap 5px
 *   │  ├─ Kicker              (.g-section-head__kicker)  — 22px Medium #00E5FF
 *   │  └─ H2                  (.g-section-head__heading) — 70px Medium #0C365C
 *   ├─ Text (opcjonalny)      (.g-section-head__text)    — 22px Regular #1A1F3A
 *   └─ Linia (opcjonalna)     (.g-section-head__line)    — 1px #DADADA
 *
 * WSZYSTKIE wartości pochodzą z tokenów --g-head-* (growston-tokens.css).
 * Każdy blok używa tych samych klas — identyczny wygląd nagłówka.
 * ================================================================ */

.g-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--g-head-gap); /* 50px — H2 ↔ text ↔ linia ↔ treść */
    width: 100%;
}

/* Eyebrow header wrapper — kicker + H2 (Figma: gap 5px) */
.g-section-head__eyebrow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--g-head-gap-kicker); /* 5px */
    width: 100%;
}

/* ── Kicker (eyebrow) ── */
.g-section-head__kicker {
    font-family: var(--g-font-body);
    font-weight: var(--g-head-kicker-fw);
    font-size: var(--g-head-kicker-fs);
    line-height: var(--g-head-kicker-lh);
    color: var(--g-head-kicker-color);
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0;
}

/* ── H2 ── */
.g-section-head__heading {
    font-family: var(--g-font-body);
    font-weight: var(--g-head-fw);
    font-size: var(--g-head-fs);
    line-height: var(--g-head-lh);
    color: var(--g-head-color);
    max-width: var(--g-head-max);
    margin: 0;
}

.g-section-head__heading p {
    margin: 0;
}

/* ── Text pod H2 ── */
.g-section-head__text,
.g-section-head__text p {
    font-family: var(--g-font-body);
    font-weight: var(--g-head-text-fw);
    font-size: var(--g-head-text-fs);
    line-height: var(--g-head-text-lh);
    color: var(--g-head-text-color);
}

.g-section-head__text {
    max-width: var(--g-head-max);
    margin: 0;
}

.g-section-head__text p {
    margin: 0;
}

/* ── Linia horyzontalna ── */
.g-section-head__line {
    width: 100%;
    height: 1px;
    background: var(--g-head-line-color);
}

/* ── Wariant ciemny (sekcje na granatowym tle) ── */
.g-section-head--dark .g-section-head__heading {
    color: var(--g-head-color-dark);
}

.g-section-head--dark .g-section-head__text,
.g-section-head--dark .g-section-head__text p {
    color: var(--g-head-text-color-dark);
}

/* ── Wariant wyrównany do lewej (np. form_cta — dwukolumnowy) ── */
.g-section-head--left,
.g-section-head--left .g-section-head__eyebrow-wrap {
    align-items: flex-start;
    text-align: left;
}