/* ============================================================
   Golden Key Africa — hero fotograficzny z formularzem
   Wzorzec strukturalny: wtajlandii.pl

   Co bierzemy: zdjęcie na pełną szerokość, nawigacja na zdjęciu,
   trzy punkty dowodowe nad linią zgięcia, formularz zapytania
   od razu w hero, opcja katalogu jako checkbox w tym samym formularzu.

   Czego nie bierzemy: „Gwarancja ROI od 7 do 13%”. Gwarantowanie zwrotu
   bez umownego pokrycia to ryzyko nieuczciwej praktyki rynkowej, więc
   nasze trzy punkty to fakty sprawdzalne, a nie obietnice.
   ============================================================ */

.heroX {
  position: relative;
  isolation: isolate;
  color: var(--bg);
  min-height: min(92vh, 60rem);
  display: flex;
  align-items: center;
  padding-block: clamp(2rem, 1rem + 5vw, 5rem);
}

.heroX__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.heroX__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Scrim, nie „przyciemnienie na oko”: gradient jest mocniejszy po lewej,
   gdzie leży tekst, i słabszy po prawej, gdzie i tak przykrywa go karta.
   Dzięki temu zdjęcie zostaje widoczne, a kontrast tekstu policzalny. */
.heroX__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      oklch(0.22 0.010 260 / .92) 0%,
      oklch(0.22 0.010 260 / .80) 38%,
      oklch(0.22 0.010 260 / .45) 68%,
      oklch(0.22 0.010 260 / .30) 100%);
}

.heroX__grid { display: grid; gap: var(--s-7); width: 100%; align-items: center; }
@media (min-width: 1000px) {
  .heroX__grid { grid-template-columns: minmax(0, 1.08fr) minmax(24rem, 0.92fr); gap: var(--s-8); }
}

.heroX__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.8rem + 4.6vw, 6rem);
  line-height: .95;
  font-weight: 700;
  max-width: 14ch;
  color: var(--bg);
  text-wrap: balance;
}
/* Drugi wiersz w antykwie: ten sam zabieg co u wzorca, ale u nas serif
   niesie znaczenie — tym krojem składamy treści prawne na całej stronie. */
.heroX__title em {
  display: block;
  font-family: var(--font-doc);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.heroX__title, .heroX__lead, .proof3__k { text-shadow: 0 1px 24px oklch(0.15 0.010 260 / .55); }
.heroX__lead {
  margin-top: var(--s-5);
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 44ch;
  color: oklch(0.93 0.010 260);
}

/* --- Trzy punkty dowodowe --------------------------------------- */
.proof3 {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-7);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  max-width: 46rem;
}
.proof3__item { display: grid; gap: var(--s-2); align-content: start; }
.proof3__item svg { color: var(--accent); }
.proof3__k {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.1;
  font-weight: 700;
  margin-top: var(--s-2);
}
.proof3__v { font-size: 0.9375rem; line-height: 1.5; color: oklch(0.88 0.010 260); }
.proof3__src {
  font-size: 0.75rem; line-height: 1.4;
  color: oklch(0.86 0.010 260);
  padding-top: var(--s-2);
  border-top: 1px solid oklch(0.85 0.010 260 / .28);
}

.heroX__cue {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-7);
  color: var(--bg); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
  min-height: 44px;
}
.heroX__cue svg { transition: transform var(--dur-ui, 180ms) var(--ease-out-quart, ease); }
.heroX__cue:hover svg { transform: translateY(3px); }

.heroX__credit {
  position: absolute; right: 0; bottom: 0;
  margin: 0;
  padding: var(--s-2) var(--gutter);
  font-size: 0.75rem;
  color: oklch(0.92 0.010 260);
  background: oklch(0.22 0.010 260 / .62);
  z-index: 1;
}

/* --- Karta formularza -------------------------------------------- */
.heroform {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-4);
  box-shadow: 0 24px 60px -30px oklch(0.15 0.010 260 / .7);
}
.heroform h2 { font-size: 1.375rem; line-height: 1.2; margin: 0; max-width: none; font-family: var(--font-ui); font-weight: 700; }
.heroform__sub { font-size: 0.9375rem; line-height: 1.5; color: var(--muted); margin: 0; }
.heroform .form { gap: var(--s-3); }
.heroform .field label { font-size: 0.875rem; }
.heroform .field input, .heroform .field textarea, .heroform .field select { min-height: 44px; }
.heroform .field textarea { min-height: 84px; }

/* Opcja katalogu: druga konwersja bez drugiego kroku. Miniatura pokazuje,
   co dokładnie przyjdzie na maila, zamiast obiecywać „materiały”. */
.heroform__catalog {
  display: grid;
  grid-template-columns: 22px 1fr 76px;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.heroform__catalog input { width: 22px; height: 22px; margin: 0; }
.heroform__catalog span { font-size: 0.875rem; line-height: 1.4; }
.heroform__catalog img { width: 76px; height: 56px; object-fit: cover; border: 1px solid var(--border); }

/* --- Nagłówek nad panelem ------------------------------------------ */
/* Poprzednia wersja pozycjonowała pasek nawigacji absolutnie, żeby leżał
   na zdjęciu. Miało to dwie wady: przykrywało pasek górny i wymagało
   zgadywania jego wysokości. Warstwa `panel.css` prowadzi teraz oba paski
   w normalnym przepływie na kolorowym podłożu, więc te reguły znikają.
   Zostawiam ślad w komentarzu, bo bez niego ktoś doda je z powrotem. */

@media (max-width: 999px) {
  .heroX { min-height: 0; flex-wrap: wrap; }
  .heroX__bg::after {
    background: linear-gradient(180deg,
      oklch(0.22 0.010 260 / .86) 0%,
      oklch(0.22 0.010 260 / .78) 55%,
      oklch(0.22 0.010 260 / .90) 100%);
  }
  .heroX__credit {
    position: static;
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: var(--s-4);
    padding-inline: var(--gutter);
    background: transparent;
  }
}