/* ================================================================
 * Block: Hero with form — hero_form
 * Design: Figma "Growston NEW" §2 HERO (node 15:34)
 * Tokens: assets/css/growston-tokens.css (--g-*)
 * ================================================================ */

.g-hero {
    padding-block: var(--g-hero-inset);
    padding-inline: max(var(--g-hero-inset), calc((100% - var(--g-content-max)) / 2));
}

.g-hero__wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--g-radius-hero-top) var(--g-radius-hero-top) var(--g-radius-hero-bottom) var(--g-radius-hero-bottom);
    background: var(--g-color-hero-bg);
    padding: var(--g-hero-pad-top) var(--g-hero-pad-x) var(--g-hero-pad-bottom);
}

/* Tło: zdjęcie (luminosity, 70% — Figma) */
.g-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.7;
    mix-blend-mode: luminosity;
    z-index: 0;
}

/* Tło: wideo — naturalne kolory, bez blend luminosity (dotyczy tylko zdjęcia) */
.g-hero__bg--video {
    opacity: 1;
    mix-blend-mode: normal;
}

/* Nakładka gradientowa (dokładnie z Figmy) */
.g-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(117.9deg, rgba(0, 229, 255, 0.3) 9.96%, rgba(255, 255, 255, 0.3) 23.15%, rgba(255, 255, 255, 0.3) 71.35%, rgba(74, 20, 140, 0.3) 85.36%),
        linear-gradient(90deg, rgba(27, 32, 63, 0.67) 0%, rgba(27, 32, 63, 0.67) 100%);
}

.g-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: var(--g-hero-col-gap);
}

/* ── Lewa kolumna ── */
.g-hero__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--g-space-6); /* 30px */
}

.g-hero__kicker {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-medium);
    font-size: var(--g-fs-body);
    line-height: 1;
    color: var(--g-color-cyan);
    margin: 0;
}

.g-hero__heading {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-medium);
    font-size: var(--g-fs-h1);
    line-height: 1;
    color: var(--g-color-white);
    margin: 0;
}

.g-hero__heading-accent {
    color: var(--g-color-cyan);
}

.g-hero__intro {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-regular);
    font-size: var(--g-fs-body);
    line-height: 1.18; /* Figma: Text 22px / 26px (AUTO) */
    color: var(--g-color-white);
}

.g-hero__intro p {
    margin: 0;
}

/* ── Recenzje (3 logotypy + pigułka oceny) ── */
.g-hero__reviews {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--g-space-4); /* 15px */
}

.g-hero__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: var(--g-radius-pill);
    background: var(--g-color-white);
    padding: 7px;
    flex: none;
}

.g-hero__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.g-hero__rating {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 45px;
    border: 1px solid var(--g-color-white);
    border-radius: var(--g-radius-pill);
    padding: 7px 15px;
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-regular);
    font-size: 22px;
    color: var(--g-color-white);
    white-space: nowrap;
}

.g-hero__rating-star {
    width: 30px;
    height: 30px;
    flex: none;
}

.g-hero__rating-accent {
    color: var(--g-color-cyan);
}

/* ── Przyciski CTA ── */
.g-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--g-space-6); /* 30px */
}

/* ── Prawa kolumna ── */
.g-hero__side {
    flex: 0 0 var(--g-hero-card-w); /* 540px */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--g-space-6); /* 30px */
}

.g-hero__card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--g-space-7); /* 50px */
    background: var(--g-color-white-23);
    border-radius: var(--g-radius-card);
    padding: var(--g-space-7) var(--g-space-6); /* 50px 30px */
}

/* Figura (awatar + tekst) */
.g-hero__figure {
    display: flex;
    align-items: flex-start;
    gap: var(--g-space-4); /* 15px */
    width: 100%;
}

.g-hero__figure-photo {
    width: var(--g-icon-avatar);
    height: var(--g-icon-avatar);
    border-radius: var(--g-radius-pill);
    object-fit: cover;
    flex: none;
}

.g-hero__figure-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--g-space-1); /* 5px */
}

.g-hero__figure-name {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-medium);
    font-size: var(--g-fs-body);
    line-height: 1;
    color: var(--g-color-white);
    margin: 0;
}

.g-hero__figure-role {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-regular);
    font-size: var(--g-fs-body);
    line-height: 1;
    color: var(--g-color-white-41);
    margin: 0;
}

.g-hero__figure-quote {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-regular);
    font-style: italic;
    font-size: var(--g-fs-quote);
    line-height: 1.18; /* Figma: 18px / 21px (AUTO) */
    color: var(--g-color-white);
    margin: 0;
}

/* Formularz — Gravity Forms (shortcode form_shortcode, theme orbital) */
.g-hero__form {
    width: 100%;
}

.g-hero__form .gform_wrapper {
    margin: 0;
}

.g-hero__form .gform_wrapper .gform_heading {
    display: none;
}

/* Honeypot GF — ukryj */
.g-hero__form .gform_wrapper .gform_validation_container {
    display: none !important;
}

/* Siatka pól (1 kolumna) */
.g-hero__form .gform_wrapper .gform_fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--g-space-4); /* 15px */
}

.g-hero__form .gform_wrapper .gfield {
    margin: 0;
}

/* Etykiety pól (jak .g-hero__form-label) */
.g-hero__form .gform_wrapper .gfield_label {
    font-family: var(--g-font-body) !important;
    font-weight: var(--g-fw-medium) !important;
    font-size: var(--g-fs-body) !important;
    line-height: 1 !important;
    color: var(--g-color-white) !important;
    margin-bottom: var(--g-space-1) !important; /* 5px */
}

/* Pola (glass pill — jak .g-hero__form-input) */
.g-hero__form .gform_wrapper input[type="text"],
.g-hero__form .gform_wrapper input[type="url"],
.g-hero__form .gform_wrapper input[type="email"],
.g-hero__form .gform_wrapper input[type="tel"],
.g-hero__form .gform_wrapper input[type="number"],
.g-hero__form .gform_wrapper select,
.g-hero__form .gform_wrapper textarea {
    width: 100% !important;
    min-height: 0 !important;
    font-family: var(--g-font-body) !important;
    font-weight: var(--g-fw-medium) !important;
    font-size: var(--g-fs-body) !important;
    line-height: 1.4 !important;
    color: var(--g-color-white) !important;
    background-color: var(--g-color-white-23) !important;
    border: 2px solid var(--g-color-white) !important;
    border-radius: var(--g-radius-pill) !important;
    padding: var(--g-space-4) var(--g-space-6) !important; /* 15px 30px */
    box-shadow: none !important;
    backdrop-filter: blur(51.2px);
    -webkit-backdrop-filter: blur(51.2px);
}

.g-hero__form .gform_wrapper textarea {
    border-radius: var(--g-radius-tile) !important;
}

.g-hero__form .gform_wrapper input::placeholder,
.g-hero__form .gform_wrapper textarea::placeholder {
    color: var(--g-color-white-62) !important;
    opacity: 1 !important;
}

.g-hero__form .gform_wrapper input:focus,
.g-hero__form .gform_wrapper select:focus,
.g-hero__form .gform_wrapper textarea:focus {
    outline: none !important;
    border-color: var(--g-color-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.25) !important;
}

/* Select — biała strzałka na glass, ciemne opcje */
.g-hero__form .gform_wrapper select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23FFFFFF' stroke-width='2' fill='none'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--g-space-5) center !important; /* 20px */
    padding-right: var(--g-space-8) !important; /* 60px — miejsce na strzałkę */
}

.g-hero__form .gform_wrapper select option {
    color: var(--g-color-ink);
    background: var(--g-color-white);
}

/* Etykieta kroku (jak .g-hero__form-step) */
.g-hero__form .gform_wrapper .gf-stepmeta {
    display: block;
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-medium);
    font-size: var(--g-fs-body);
    line-height: 1;
    color: var(--g-color-white-60);
    margin: 0 0 var(--g-space-2);
}

/* Microcopy pod polem */
.g-hero__form .gform_wrapper .gf-microcopy {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-regular);
    font-style: italic;
    font-size: var(--g-fs-quote);
    line-height: 1.35;
    color: var(--g-color-white-41);
    margin: 0;
}

.g-hero__form .gform_wrapper .gf-microcopy p {
    margin: 0;
}

/* Opisy pól */
.g-hero__form .gform_wrapper .gfield_description {
    font-family: var(--g-font-body) !important;
    font-size: var(--g-fs-quote) !important;
    color: var(--g-color-white-41) !important;
}

/* Przyciski: next + submit (fiolet — jak .g-hero__form-cta) */
.g-hero__form .gform_wrapper input[type="submit"],
.g-hero__form .gform_wrapper .gform_button,
.g-hero__form .gform_wrapper .gform_next_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    border: none !important;
    cursor: pointer !important;
    border-radius: var(--g-radius-pill) !important;
    background: var(--g-color-purple) !important;
    color: var(--g-color-white) !important;
    padding: var(--g-space-4) var(--g-space-6) !important; /* 15px 30px */
    font-family: var(--g-font-body) !important;
    font-weight: var(--g-fw-medium) !important;
    font-size: var(--g-fs-body) !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.g-hero__form .gform_wrapper input[type="submit"]:hover,
.g-hero__form .gform_wrapper .gform_button:hover,
.g-hero__form .gform_wrapper .gform_next_button:hover {
    transform: translateY(-2px);
    background: var(--g-color-cyan) !important;
    color: var(--g-color-ink) !important;
}

.g-hero__form .gform_wrapper input[type="submit"]:focus-visible,
.g-hero__form .gform_wrapper .gform_button:focus-visible,
.g-hero__form .gform_wrapper .gform_next_button:focus-visible {
    outline: 2px solid var(--g-color-cyan);
    outline-offset: 2px;
}

/* Przycisk "Previous" — ghost (jak .g-btn--ghost) */
.g-hero__form .gform_wrapper .gform_previous_button {
    background: transparent !important;
    border: 1px solid var(--g-color-white) !important;
    color: var(--g-color-white) !important;
}

.g-hero__form .gform_wrapper .gform_previous_button:hover {
    transform: translateY(-2px);
    background: var(--g-color-white-23) !important;
    color: var(--g-color-white) !important;
}

/* Stopki formularza */
.g-hero__form .gform_wrapper .gform_footer,
.g-hero__form .gform_wrapper .gform_page_footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--g-space-4); /* 15px */
    margin: var(--g-space-2) 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Walidacja + potwierdzenie (na ciemnej szklanej karcie) */
.g-hero__form .gform_wrapper .validation_error {
    font-family: var(--g-font-body);
    font-size: var(--g-fs-quote);
    color: #FFD7D7;
    background: rgba(229, 72, 77, 0.15);
    border: 1px solid rgba(229, 72, 77, 0.5);
    border-radius: var(--g-radius-tile);
    padding: var(--g-space-3) var(--g-space-4);
    margin-bottom: var(--g-space-4);
}

.g-hero__form .gform_wrapper .gfield_error input,
.g-hero__form .gform_wrapper .gfield_error select,
.g-hero__form .gform_wrapper .gfield_error textarea {
    border-color: var(--g-color-red) !important;
}

.g-hero__form .gform_wrapper .gfield_error .gfield_description,
.g-hero__form .gform_wrapper .validation_message {
    font-family: var(--g-font-body);
    font-size: var(--g-fs-quote);
    color: #FFB4B4;
}

.g-hero__form .gform_wrapper .gform_confirmation_message {
    font-family: var(--g-font-body);
    font-size: var(--g-fs-body);
    font-weight: var(--g-fw-medium);
    color: var(--g-color-white);
    text-align: left;
    padding: var(--g-space-4) 0;
}

/* Consent (zgoda) — drobny tekst */
.g-hero__form .gform_wrapper .gfield--type-consent .gfield_label,
.g-hero__form .gform_wrapper .gfield--type-consent .gfield_consent_label {
    font-size: var(--g-fs-quote) !important;
    font-weight: var(--g-fw-regular) !important;
    color: var(--g-color-white-41) !important;
    line-height: 1.4;
}

/* Responsywność formularza */
@media (max-width: 480px) {
    .g-hero__form .gform_wrapper .gform_footer,
    .g-hero__form .gform_wrapper .gform_page_footer {
        flex-direction: column;
        align-items: stretch;
    }
    .g-hero__form .gform_wrapper input[type="submit"],
    .g-hero__form .gform_wrapper .gform_button,
    .g-hero__form .gform_wrapper .gform_next_button,
    .g-hero__form .gform_wrapper .gform_previous_button {
        width: 100% !important;
        justify-content: center;
    }
}

/* ── Bullety pod kartą ── */
.g-hero__bullets {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-6); /* 30px — Figma: itemSpacing prawej kolumny */
    list-style: none;
    margin: 0;
    padding: 0;
}

.g-hero__bullet {
    display: flex;
    align-items: center;
    gap: var(--g-space-4); /* 15px */
}

.g-hero__bullet-icon {
    width: var(--g-icon-bullet);
    height: var(--g-icon-bullet);
    flex: none;
}

.g-hero__bullet span {
    font-family: var(--g-font-body);
    font-weight: var(--g-fw-medium);
    font-size: var(--g-fs-body);
    line-height: 1;
    color: var(--g-color-white);
    white-space: nowrap;
}

/* ── Responsywność ── */
@media (max-width: 1280px) {
    .g-hero__inner {
        flex-direction: column;
        align-items: stretch;
    }
    .g-hero__col {
        width: 100%;
        max-width: 100%;
    }
    .g-hero__side {
        flex-basis: auto;
        width: 100%;
    }
    .g-hero__bullet span {
        white-space: normal;
    }
}

@media (max-width: 768px) {
    .g-hero {
        padding: 0;
    }
    .g-hero__wrapper {
        border-radius: 0;
        padding: var(--g-hero-pad-top) 20px var(--g-space-7); /* 200px 20px 50px */
    }
    .g-hero__buttons {
        flex-direction: column;
        width: 100%;
    }
    .g-hero__buttons .g-btn {
        width: 100%;
    }
    .g-hero__figure {
        flex-direction: column;
    }
}