/* ==========================================================================
   SEKCJA: nagłówek „O nas" ze zdjęciem w tle
   --------------------------------------------------------------------------
   Z makiety 137:776: 1440×640, treść na x 80 / y 268, szerokość 900, gap 22.

   Padding 268 / 80 / 82 zamiast pozycji bezwzględnej — uzasadnienie stoi
   w nagłówku includes/sections/about-hero.php. Suma odtwarza 640 px z makiety
   przy nagłówku łamiącym się na dwa wiersze (268 + 290 + 82 = 640).
   ========================================================================== */

.fc-about-hero {
  padding-block: 268px 82px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   TŁO — trzy warstwy, wszystkie POD treścią
   --------------------------------------------------------------------------- */
.fc-about-hero__bg,
.fc-about-hero__veil {
  position: absolute;
  inset: 0;
  z-index: var(--fc-z-glow);
  pointer-events: none;
}

.fc-about-hero__bg {
  opacity: .15;
}

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

/*
 * Przesłona jest w makiecie gradientem PIONOWYM z trzema przystankami:
 * przezroczysty → 30 % tła na 55 % wysokości → pełne tło na dole.
 * Bez środkowego przystanku dolna krawędź zdjęcia byłaby widoczna jako
 * ostra linia styku z sekcją poniżej.
 */
.fc-about-hero__veil {
  background: linear-gradient(
    180deg,
    rgba(13, 16, 21, 0) 0%,
    rgba(13, 16, 21, .3) 55%,
    var(--fc-color-bg) 100%
  );
}

/* Elipsa 900×606, bez obrotu — koło z gradientem nie ma czego obracać.
   Krycie 73 % pochodzi wprost z eksportu SVG węzła 137:779. */
.fc-about-hero__glow {
  --fc-glow-w: 900px;
  --fc-glow-h: 606px;
  --fc-glow-x: 1163px;
  --fc-glow-y: -15.46px;
  --fc-glow-from: var(--fc-glow-purple);
  --fc-glow-mid: rgba(127, 0, 145, .5);
  --fc-glow-to: rgba(127, 0, 145, 0);
  --fc-glow-opacity: .73;
}

/* ---------------------------------------------------------------------------
   TREŚĆ
   --------------------------------------------------------------------------- */
.fc-about-hero__inner {
  position: relative;
  z-index: var(--fc-z-base);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fc-sp-22);
}


.fc-about-hero__title {
  width: 900px;
  max-width: 100%;
  margin: 0;
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-h1-hero);
  line-height: var(--fc-lh-h1-hero);
  letter-spacing: var(--fc-ls-h1-hero);
}

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

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

/* 268 px odstępu od góry to w makiecie miejsce na nagłówek serwisu (136)
   plus oddech. Na telefonie, gdzie nagłówek ma 96 px, tyle samo zostawiałoby
   pusty ekran przed pierwszym słowem. */
@media (max-width: 1199.98px) {
  .fc-about-hero {
    padding-block: 200px 64px;
  }
}

@media (max-width: 899.98px) {
  .fc-about-hero {
    padding-block: 140px 56px;
  }
}