@charset "UTF-8";
/* ==========================================================================
   Blok: Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;

  /*
   * width: 100% MUSI tu być razem z aspect-ratio.
   *
   * Bez jawnej szerokości proporcja działa w obie strony: przy ekranie 900 px
   * chce 375 px wysokości, min-height podnosi ją do 468 px, a wtedy przeglądarka
   * odtwarza proporcję ROZCIĄGAJĄC SZEROKOŚĆ do 468 × 2,4 = 1123 px. Sekcja
   * wystawała poza ekran i cała strona jechała w bok. Jawna szerokość zamyka
   * ten kierunek: proporcja liczy już tylko wysokość.
   */
  width: 100%;
  aspect-ratio: 1920 / 800;            /* proporcja banera 2.4:1 */
  min-height: clamp(26rem, 55vh, 800px); /* podłoga — by tekst zawsze się mieścił */
  padding-top: var(--sec-pt, var(--space-8));
  padding-bottom: var(--sec-pb, var(--space-8));
  overflow: hidden;
  isolation: isolate;

  /* Zdjęcie tła — URL wstrzykiwany przez --hero-bg w render.php.
     Kolor pod spodem można nadpisać w akordeonie „Zaawansowane" (--sec-bg). */
  background-color: var(--sec-bg, var(--dark-2));
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Gradient/scrim dla kontrastu — od lewej (desktop), od dołu (mobile).
   Siłę steruje pole „overlay” przez zmienną --hero-overlay (0–1). */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  --o: var(--hero-overlay, 0.88);
  background:
    linear-gradient(
      90deg,
      rgba(26, 35, 34, var(--o)) 0%,
      rgba(26, 35, 34, calc(var(--o) * 0.9)) 34%,
      rgba(26, 35, 34, 0.25) 68%,
      rgba(26, 35, 34, 0) 100%
    );
}
/* delikatne dociemnienie u dołu — spina kompozycję */
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 27, 26, 0.45) 0%, rgba(20, 27, 26, 0) 40%);
}

.hero--no-image { background-color: var(--dark); }
.hero--no-image .hero__scrim { display: none; }

/* min-width: 0 jest kluczowe — element siatki/flexa domyślnie nie zwęża się
   poniżej szerokości swojej treści, co potrafi rozepchnąć stronę w bok. */
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Bez max-width! Ograniczenie szerokości daje klasa .container.
     min-width: 0 pozwala elementowi zwęzić się poniżej szerokości treści. */
  min-width: 0;
}

.hero__content { max-width: min(40rem, 100%); min-width: 0; }

.hero__kicker {
  font-size: 1.125rem;   /* hero zachowuje większą skalę niż sekcje contentowe */
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}

.hero__title {
  font-size: var(--fs-display);
  line-height: 1.04;
  color: var(--on-dark);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.hero__lead {
  color: var(--on-dark-muted);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.55rem);
  line-height: 1.55;
  margin-bottom: var(--space-7);
  max-width: var(--measure-narrow);
}
.hero__lead p:last-child { margin-bottom: 0; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* Przyciski hero — większe dla czytelności i łatwego kliknięcia */
.hero__btn {
  font-size: 1.125rem;
  padding: 1em 1.9em;
}

@media (max-width: 700px) {
  .hero {
    /* Na wąskim ekranie baner 2,4:1 nie ma sensu — o wysokości decyduje
       treść i min-height, nie proporcja. */
    aspect-ratio: auto;
    min-height: clamp(24rem, 78vh, 38rem);
    padding-top: var(--sec-pt-m, var(--sec-pt, var(--space-8)));
    padding-bottom: var(--sec-pb-m, var(--sec-pb, var(--space-8)));
  }
  /* na wąskich ekranach scrim ma kryć całość — tekst nad zdjęciem */
  .hero__scrim {
    background:
      linear-gradient(
        180deg,
        rgba(26, 35, 34, calc(var(--o) * 0.75)) 0%,
        rgba(26, 35, 34, var(--o)) 55%,
        rgba(20, 27, 26, var(--o)) 100%
      );
  }
  .hero__scrim::after { display: none; }
  .hero__btn { font-size: 1rem; padding: 0.95em 1.4em; }
  .hero__actions .hero__btn { flex: 1 1 auto; text-align: center; }
}

/* Poniżej tej szerokości dwa przyciski obok siebie łamałyby tekst — układamy je
   jeden pod drugim na pełną szerokość. */
@media (max-width: 560px) {
  .hero__actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .hero__actions .hero__btn { width: 100%; }
}