/* ============================================================
   Hero premium — brief §14
   Pełny ekran, wyśrodkowana treść, dwa CTA, subtelna zachęta
   do przewinięcia. Zastępuje hero „heroX” z kierunku Kataster,
   który dzielił ekran na wywód prawny i formularz.
   ============================================================ */

.hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: grid;
  place-items: center;
  isolation: isolate;
  text-align: center;
  padding: var(--s-9) var(--gutter) var(--s-10);
  color: #fff;
}

.hero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Selektor musi być mocniejszy niż globalne `img[width][height] { height: auto }`,
   które chroni karty przed rozjechaniem proporcji. Bez tego atrybuty 1600×1200
   dawały tu obraz wysoki na 293 px zamiast wypełnić 608 px hero, a pod spodem
   odsłaniał się pas tła. Specyficzność, nie !important. */
.hero__bg img,
.hero__bg img[width][height] { width: 100%; height: 100%; object-fit: cover; }

/* Zdjęcie bywa jasne w górnej części, a tekst musi mieć kontrast
   niezależnie od kadru. Przyciemnienie jest gradientowe, żeby dół
   fotografii pozostał czytelny jako obraz, a nie płaska plama. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      oklch(0.21 0.008 260 / .62) 0%,
      oklch(0.21 0.008 260 / .48) 45%,
      oklch(0.21 0.008 260 / .70) 100%);
}

.hero__inner { max-width: 60rem; margin-inline: auto; }

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: var(--tr-display);
  font-weight: 700;
  text-wrap: balance;
  margin: 0;
}

.hero__lead {
  margin: var(--s-5) auto 0;
  max-width: 46ch;
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.55;
  color: oklch(1 0 0 / .88);
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
  margin-top: var(--s-7);
}

/* Złoto niesie CTA główne. Tekst na złocie zawsze grafitowy —
   biel daje 2,4:1 i nie przechodzi kontrastu (§105). */
.hero__cta .btn { min-height: 52px; padding-inline: var(--s-6); font-size: 1rem; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--s-6);
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  color: oklch(1 0 0 / .78);
  text-decoration: none;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.hero__scroll:hover { color: #fff; }
.hero__scroll svg { animation: hero-cue 2.4s ease-in-out infinite; }

@keyframes hero-cue {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll svg { animation: none; }
}

/* Na telefonie pełna wysokość ekranu zjada treść pod spodem i każe
   przewijać w ciemno, więc hero zostaje wysoki, ale nie na cały ekran. */
@media (max-width: 639px) {
  .hero { min-height: 72svh; padding-block: var(--s-8) var(--s-9); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* Przycisk dodatkowy na fotografii: obrys, bez wypełnienia, żeby nie
   konkurował ze złotem. Poza hero nie występuje — na białym tle rolę
   przycisku dodatkowego pełni .btn--secondary. */
.hero .btn--ghost {
  background: oklch(1 0 0 / .10);
  color: #fff;
  border: 1px solid oklch(1 0 0 / .60);
}
.hero .btn--ghost:hover {
  background: oklch(1 0 0 / .16);
  border-color: #fff;
}

/* Hero idzie od krawędzi do krawędzi. Promień z warstwy „panel” zostawiał
   nad zdjęciem biały narożnik, który wyglądał jak błąd przycięcia. */
.hero,
.hero__bg,
.hero__bg img { border-radius: 0; }