/* ==========================================================================
   SEKCJA: Hero
   --------------------------------------------------------------------------
   Z designu (home:0/1): 1440×780, padding 0 80 72, kolumna, justify flex-end.

   Kolejność warstw od spodu — dokładnie jak w Figmie:
     0  zdjęcie          inset 0, object-fit cover, opacity .55
     1  przenikanie      inset 0, gradient do koloru tła
     2  znak wodny       „FLYPARK", Archivo Black 330px, biel 5%, left -75 top -63
     3  poświata         elipsa 720×720, left 786, top -0.46
     4  treść            blok 1000×388 przyklejony do dołu
     5  wskaźnik slajdów left 80, top 740
   ========================================================================== */

.fc-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 780px;
  padding-bottom: var(--fc-sp-72);
  /* Znak wodny i poświata wystają poza sekcję. */
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   WARSTWY TŁA
   --------------------------------------------------------------------------- */
.fc-hero__media-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fc-hero__media {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fc-transition-slow);
}

.fc-hero__media.is-active {
  opacity: 1;
}

.fc-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}

/* Przenikanie do koloru tła — bez niego dolna krawędź zdjęcia byłaby widoczną
   linią styku z następną sekcją.

   ⚠️ GRADIENT WISI NA CAŁYM STOSIE, NIE NA POJEDYNCZEJ WARSTWIE SLAJDU.

   Był na `.fc-hero__media::after`, czyli wewnątrz warstwy jednego slajdu.
   Przestało to działać, gdy film w tle stał się wspólny dla wszystkich
   slajdów (patrz includes/sections/hero.php): film jest rodzeństwem tych
   warstw i leży NAD nimi, więc gradient zamknięty w warstwie slajdu
   wylądował pod filmem i zniknął z widoku.

   Na wspólnym rodzicu jest ostatni w kolejności malowania — nad zdjęciami
   i nad filmem — czyli tam, gdzie ma być.

   Przy okazji naprawia to drobiazg, którego wcześniej nikt nie zgłosił:
   gradient nie przenika już razem ze slajdami. Dotąd każda warstwa miała
   własną kopię i przy zmianie slajdu obie gasły i zapalały się naraz,
   przez co przyciemnienie na moment drgało. Teraz jest jedno i stoi. */
.fc-hero__media-stack::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(13, 16, 21, 0) 0%,
    rgba(13, 16, 21, .35) 55%,
    #0d1015 100%
  );
}

/* ---------------------------------------------------------------------------
   ZNAK WODNY

   To TEKST, nie obrazek — 330px Archivo Black. Przy `font-display: swap`
   podmiana kroju przesunęłaby go widocznie, dlatego archivo-latin.woff2
   jest preloadowany w <head>.
   --------------------------------------------------------------------------- */
.fc-hero__watermark {
  position: absolute;
  left: -75px;
  top: -63px;
  z-index: 2;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-watermark);
  line-height: var(--fc-lh-auto);
  color: rgba(255, 255, 255, .05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.fc-hero__glow {
  z-index: 3;
  --fc-glow-w: 720px;
  --fc-glow-h: 720px;
  --fc-glow-x: 786px;
  --fc-glow-y: -0.46px;
  --fc-glow-from: rgba(207, 50, 125, .28);
  --fc-glow-mid: rgba(219, 43, 125, .14);
  --fc-glow-to: rgba(230, 35, 124, 0);
}

/* ---------------------------------------------------------------------------
   TREŚĆ
   Blok 1000×388: H1 (1000×276) + gap 28 + rząd (1000×84).
   --------------------------------------------------------------------------- */
.fc-hero__body {
  position: relative;
  z-index: 4;
}

.fc-hero__inner {
  display: none;
}

.fc-hero__inner.is-active {
  display: block;
}

/* Blok treści: 1000 × 388 przyklejony do dołu sekcji. Węższy niż kontener,
   bo nagłówek 96 px ma się łamać w trzech miejscach, a nie w czterech. */
.fc-hero__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--fc-sp-28);
  max-width: 1000px;
}

/*
 * ⚠️ `font-family` MUSI TU STAĆ JAWNIE, choć wygląda na nadmiarowe.
 *
 * Tytuł pierwszego slajdu to `h1`, ale kolejnych — `p` (jeden H1 na stronę,
 * patrz komentarz w includes/sections/hero.php). Krój nagłówkowy przychodzi
 * z selektora `h1, h2, …` w base/typography.css, więc `p` z tą samą klasą
 * spadłby na krój tekstowy i drugi slajd renderowałby się Interem zamiast
 * Archivo. Klasa musi być samowystarczalna.
 */
.fc-hero__title {
  margin: 0;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-display);
  line-height: var(--fc-lh-display);
  letter-spacing: var(--fc-ls-display);
  color: var(--fc-color-text);
}

.fc-hero__row {
  display: flex;
  align-items: center;
  gap: var(--fc-sp-48);
}

.fc-hero__lead {
  width: 480px;
  margin: 0;
  font-size: var(--fc-fs-lead);
  line-height: var(--fc-lh-lead);
  color: var(--fc-color-text-muted);
}

/* ---------------------------------------------------------------------------
   WSKAŹNIK SLAJDÓW
   Trzy elementy wysokości 3px, gap 8: aktywny 40px w akcencie, pozostałe
   16px w bieli 25%. Pozycja: 80 od lewej, 40 od dołu sekcji.
   --------------------------------------------------------------------------- */
.fc-hero__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 37px;
  z-index: 5;
}

/* Bez tego kontener tworzy wiersz tekstu i dokłada pod kreskami miejsce
   na podłużnicę — wskaźnik ląduje wtedy 7 px wyżej, niż powinien. */
.fc-hero__nav .fc-container {
  display: flex;
}

.fc-hero__dots {
  display: inline-flex;
  align-items: center;
  gap: var(--fc-sp-8);
}

.fc-hero__dot {
  position: relative;
  width: 16px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: var(--fc-radius-pill);
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: width var(--fc-transition-slow), background-color var(--fc-transition-slow);
}

.fc-hero__dot.is-active {
  width: 40px;
  background: var(--fc-color-accent);
}

/* Powierzchnia klikalna 16×3 px jest nietrafialna myszą, a na dotyku wręcz
   niemożliwa. Pseudoelement powiększa ją do 40×24 bez zmiany układu. */
.fc-hero__dot::before {
  content: '';
  position: absolute;
  inset: -12px -6px;
}

/* ==========================================================================
   RESPONSYWNOŚĆ — INTERPRETACJA, BRAK W DESIGNIE
   ========================================================================== */

/* Znak wodny stoi w makiecie na −75 px względem RAMKI 1440, a nie względem
   okna. Przy 2560 px zostawał przy lewej krawędzi ekranu, podczas gdy hero
   wyjeżdżało na środek — patrz ta sama korekta dla poświat w components/glow.css.
   Przy 1440 px wychodzi zero, więc zgodność z makietą stoi nienaruszona. */
@media (min-width: 1440px) {
  .fc-hero__watermark {
    left: calc(-75px + (100% - 1440px) / 2);
  }
}

@media (max-width: 899.98px) {
  .fc-hero {
    min-height: 620px;
  }

  .fc-hero__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--fc-sp-24);
  }

  .fc-hero__lead {
    width: auto;
    max-width: 480px;
  }
}

@media (max-width: 599.98px) {
  .fc-hero {
    min-height: 540px;
    padding-bottom: var(--fc-sp-56);
  }

  .fc-hero__watermark {
    left: -20px;
    top: -20px;
  }

  .fc-hero__nav {
    bottom: 24px;
  }
}