/* ==========================================================================
   SEKCJA 01 + 02: O FlyConcept / O FlyPark
   --------------------------------------------------------------------------
   Z designu (home 2:92, v6): 1440×2140, padding 120/80/80, kolumna, gap 56.
     marker 01                22
     treść (gap 100)         882  = rząd 396 + 100 + blok „O FlyPark” 386
     galeria                 240
     „Elastyczny model”      166
     zapowiedź nad kartami    20
     karty konceptów         330

   Sześć bloków, jeden odstęp 56 px — stąd kolumna flex z `gap`, a nie
   zestaw marginesów dobieranych blok po bloku.
   ========================================================================== */

.fc-about {
  padding-block: var(--fc-sp-120) var(--fc-sp-80);
  overflow: hidden;
}

.fc-about__inner {
  position: relative;
  z-index: var(--fc-z-base);
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-56);
}

.fc-about__glow {
  --fc-glow-w: 900px;
  --fc-glow-h: 500px;
  --fc-glow-x: -472.8px;
  --fc-glow-y: 20.8px;
  --fc-glow-rotate: 18deg;
  --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: .57;
}

/* Rząd górny (396) → blok „O FlyPark” (386): w makiecie 100 px, nie 120.
   Pierwszy rząd urósł o przycisk „Dowiedz się więcej” i odstęp zjechał. */
.fc-about__body {
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-100);
}

/* Marker 02 → rząd z logotypem FlyPark: 60 px (makieta 86:20). */
.fc-about__flypark {
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-60);
}

.fc-about__row {
  display: flex;
  gap: var(--fc-sp-80);
}

.fc-about__row--lead { align-items: flex-start; }
.fc-about__row--side { align-items: center; }

/* ---------------------------------------------------------------------------
   KOLUMNA TEKSTU (górny rząd) — 839 px
   --------------------------------------------------------------------------- */
.fc-about__col {
  flex: 0 0 839px;
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-20);
}

.fc-about__title {
  margin: 0;
  font-weight: var(--fc-fw-extrabold);
  font-size: var(--fc-fs-h2);
  line-height: var(--fc-lh-h2);
  letter-spacing: var(--fc-ls-h2);
}

.fc-about__text {
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-20);
}

.fc-about__text p {
  margin: 0;
  font-size: var(--fc-fs-lead);
  line-height: var(--fc-lh-lead);
  color: var(--fc-color-text-muted);
}

/* Drugi akapit jest w makiecie przygaszony — świadome stopniowanie ważności. */
.fc-about__text p:nth-child(2) {
  opacity: .8;
}

/* ---------------------------------------------------------------------------
   KARTY Z LOGOTYPAMI — tor przewijany poziomo

   Tor ma 361 px (1280 − 839 − 80), więc mieści dokładnie jedną kartę 360 px.
   Druga i każda następna są poza kadrem — dokładnie jak w makiecie — ale
   w przeciwieństwie do makiety da się do nich dojechać.
   --------------------------------------------------------------------------- */
/*
 * `align-self: stretch` — karta z logotypem ma w makiecie wysokość CAŁEGO
 * rzędu (396 px), którą wyznacza kolumna tekstu z przyciskiem, a nie własną
 * treść. Rząd zostaje przy `flex-start`, bo to jego domyślne wyrównanie
 * w makiecie; rozciąga się tylko tor kart.
 */
.fc-about__cards {
  flex: 1 1 0;
  align-self: stretch;
  display: flex;
  gap: var(--fc-sp-80);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Karty mają obramowanie 1px, które przy overflow bywa przycinane. */
  padding-block: 1px;
  margin-block: -1px;
}

.fc-about__cards::-webkit-scrollbar {
  display: none;
}

.fc-about__card,
.fc-about__side-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fc-sp-10);
  padding: var(--fc-sp-56) var(--fc-sp-40);
  scroll-snap-align: start;
}

/* Wysokość idzie z toru (patrz `align-self` wyżej); 304 px to podłoga
   z makiety poprzedniej wersji — trzyma kartę na telefonie, gdzie tor
   nie ma się od czego rozciągnąć. */
.fc-about__card {
  flex: 0 0 360px;
  min-height: 304px;
}

.fc-about__side-card {
  flex: 0 0 360px;
  height: 304px;
}

/* Rozmiar podaje sekcja zmiennymi `--fc-card-img-*` — uzasadnienie stoi przy
   `$fc_card_media` w includes/sections/about-flyconcept.php. */
.fc-about__card-img {
  width: var(--fc-card-img-w, auto);
  height: var(--fc-card-img-h, auto);
  max-width: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   KOLUMNA TEKSTU (dolny rząd) — 760 px, wyśrodkowana w pionie
   --------------------------------------------------------------------------- */
.fc-about__side-col {
  flex: 0 0 760px;
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-16);
}

/* Jedyne miejsce w designie z Archivo Black w podnagłówku. */
.fc-about__side-title {
  margin: 0;
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-h3);
  line-height: var(--fc-lh-h3);
  letter-spacing: var(--fc-ls-h3);
}

/* Jedyne miejsce w designie z Interem Medium w akapicie. */
.fc-about__side-text {
  margin: 0;
  font-weight: var(--fc-fw-medium);
  font-size: var(--fc-fs-lead);
  line-height: var(--fc-lh-lead);
  color: var(--fc-color-text-muted);
}

/* Przycisk stoi w kolumnie tekstu jako czwarty element z tym samym gapem
   20 px co akapity — dlatego opakowanie, a nie margines. `flex-start`
   pilnuje, żeby nie rozciągnął się na 839 px kolumny. */
.fc-about__actions {
  display: flex;
  align-items: flex-start;
}

/* ==========================================================================
   „Elastyczny model. Wiele możliwości." — makieta 86:22
   Archivo Black 34/40, akapity 18/28 w kolumnie 1066 px, odstęp 14.
   ========================================================================== */

.fc-about__flex {
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-14);
}

.fc-about__flex-title {
  margin: 0;
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-h3-sm);
  line-height: var(--fc-lh-h3-sm);
}

.fc-about__flex-text {
  max-width: 1066px;
}

/* Dwa akapity biegną w makiecie bez przerwy — to jedno pole tekstowe
   z twardym przełamaniem, więc między nimi NIE MA odstępu. */
.fc-about__flex-text p {
  margin: 0;
  font-size: var(--fc-fs-lead);
  line-height: var(--fc-lh-lead);
  color: var(--fc-color-text-muted);
}

/*
 * ⚠️ INTERLINIA MNIEJSZA NIŻ STOPIEŃ PISMA — TAK JEST W MAKIECIE.
 * Ramka tekstu 108:99 ma 20 px wysokości przy foncie 24 px. Jeden wiersz,
 * więc nadmiar nie ma gdzie się ujawnić, a odstęp 56 px do kart się zgadza.
 */
.fc-about__concepts-lead {
  max-width: 1066px;
  margin: 0;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-h5);
  line-height: var(--fc-lh-h5-tight);
  color: var(--fc-color-text);
}

/* ==========================================================================
   GALERIA — proporcje 2 : 1 : 1 : 2
   --------------------------------------------------------------------------
   Proporcje są celowe, nie zamieniaj ich na równy grid.

   Szerokości liczymy w „jednostkach": cztery kafle to 6 jednostek i 3 odstępy
   po 16 px, czyli jednostka = (100% − 48px) / 6 = 205.333 px przy torze 1280.
   Kafel szeroki to 2 jednostki (410.667 px). Dzięki temu przy N ≠ 4 wzorzec
   się powtarza, a nadmiar wychodzi poza tor i daje się przewinąć strzałkami.
   ========================================================================== */

.fc-gallery {
  position: relative;
}

.fc-gallery__track {
  display: flex;
  gap: var(--fc-sp-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.fc-gallery__track::-webkit-scrollbar {
  display: none;
}

.fc-gallery__item {
  --fc-gallery-unit: calc((100% - 3 * var(--fc-sp-16)) / 6);

  flex: 0 0 var(--fc-gallery-unit);
  height: 240px;
  margin: 0;
  overflow: hidden;
  border: var(--fc-border-width) solid var(--fc-color-hairline);
  border-radius: var(--fc-radius-lg);
  scroll-snap-align: start;
}

/* Wzorzec 2-1-1-2, powtarzany co cztery kafle. */
.fc-gallery__item:nth-child(4n + 1),
.fc-gallery__item:nth-child(4n) {
  flex-basis: calc(2 * var(--fc-gallery-unit));
}

/* Przycisk powiększenia wypełnia kafel co do piksela, więc zdjęcie stoi
   dokładnie tam, gdzie stało, gdy było jedynym dzieckiem <figure>.
   Wygląd przycisku zdejmuje już base/reset.css (bez tła, obrysu i paddingu),
   więc zostaje sam układ i kursor. */
.fc-gallery__zoom {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.fc-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.fc-gallery__btn {
  position: absolute;
  top: 100px;
  z-index: var(--fc-z-raised);
}

.fc-gallery__btn--prev { left: var(--fc-sp-16); }
.fc-gallery__btn--next { right: var(--fc-sp-16); }

/* ==========================================================================
   RESPONSYWNOŚĆ — INTERPRETACJA, BRAK W DESIGNIE
   ========================================================================== */
/* ---------------------------------------------------------------------------
   1024–1440 px: KARTA MA SIĘ MIEŚCIĆ W CAŁOŚCI, A NIE W POŁOWIE

   Rząd górny jest w makiecie wypełniony CO DO PIKSELA: 839 (tekst) + 80
   (odstęp) + 360 (karta) = 1279 przy kontenerze 1280. Wystarczy więc, żeby
   kontener zwęził się o jeden piksel, a karta nie ma dokąd wejść — a że
   sekcja ma `overflow: hidden`, wychodzi z tego logotyp ucięty pionowo.
   Na laptopie 1366 px brakowało 139 px, czyli grubo ponad jedną trzecią karty
   (zgłoszenie klienta: „pół zdjęcia z prawej jest ucięte").

   Kolumna tekstu dostaje więc prawo do zwężenia się na całym paśmie poniżej
   1440 px. `flex: 0 0 360px` na torze kart pilnuje, żeby cały ubytek wziął
   na siebie tekst, który ma z czego oddać — karta zostaje w rozmiarze
   z makiety. Przy 1440 px nic się nie zwęża, bo tam suma się mieści.

   `min-width: 0` jest obowiązkowe: domyślne `min-width: auto` na elemencie
   flex nie pozwala zejść poniżej najdłuższego nierozrywalnego słowa, więc
   bez niego kolumna oddałaby mniej, niż trzeba, i karta i tak by wystawała.
   --------------------------------------------------------------------------- */
@media (max-width: 1439.98px) {
  .fc-about__col,
  .fc-about__side-col {
    flex: 1 1 auto;
    min-width: 0;
  }

  .fc-about__cards {
    flex: 0 0 360px;
  }

  /* Odstęp 80 px między kolumnami jest z makiety 1440. Poniżej tej szerokości
     to on jest pierwszą rzeczą do oddania — 40 px zostawia kolumnie tekstu
     o 40 px więcej na akapit, a karta nie musi oddać ani piksela. */
  .fc-about__row {
    gap: var(--fc-sp-40);
  }
}

/* ---------------------------------------------------------------------------
   PONIŻEJ 1024 px: RZĘDY SKŁADAJĄ SIĘ DO KOLUMNY

   INTERPRETACJA - BRAK W DESIGNIE. Na komputerach (laptop i mały monitor)
   klient chce układu z makiety: logotyp raz z prawej (01), raz z lewej (02).
   Karta nie jest już ucinana, bo od 1440 px w dół zwęża się kolumna tekstu,
   nie karta (reguła wyżej) - więc dwie kolumny mogą zostać na całym pasmie
   komputerowym.

   Dlaczego 1024: to najwęższy ekran, który jeszcze traktujemy jak komputer
   (i poziomy tablet). Przy 1024 px kontener ma 960 px (padding 32),
   więc kolumnie tekstu zostaje 960 − 40 − 360 = 560 px - ok. 60 znaków
   akapitu 18 px, czyli wciąż wygodny wiersz. Niżej kolumna robi się wąskim
   słupem obok karty i rząd przechodzi w kolumnę z kartą wyśrodkowaną pod
   tekstem, w pełnym rozmiarze 360 px.

   Historia progu: 899.98 px (karta ucięta na laptopie) → 1379.98 px (cały
   laptop w kolumnie, logotypy „na środku") → 1023.98 px.
   --------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {

  /*
   * ⚠️ PO ZMIANIE NA KOLUMNĘ `align-items` STERUJE OSIĄ POZIOMĄ.
   *
   * Tu siedział rozjazd kart. Rząd A ma w makiecie `flex-start`, rząd B
   * `center` — na desktopie to wyrównanie PIONOWE i różnica jest zamierzona.
   * Po przełączeniu na kolumnę te same dwie wartości zaczęły sterować
   * SZEROKOŚCIĄ: tor kart zwężał się do szerokości treści (~220 px), a karta
   * FlyPark środkowała się na własnych ~338 px. Dwie karty tego samego
   * komponentu, dwie różne szerokości, żadna zgodna z 360 px z makiety.
   *
   * W kolumnie oba rzędy mają zajmować pełną szerokość — o rozmiarze karty
   * decyduje wtedy sama karta, a nie przypadkowa wartość odziedziczona
   * z wyrównania pionowego.
   */
  .fc-about__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--fc-sp-40);
  }

  .fc-about__cards {
    flex: 0 0 auto;
    width: 100%;
    gap: var(--fc-sp-20);
  }

  /*
   * ŚRODKOWANIE LOGOTYPÓW (zgłoszenie klienta) — MARGINESAMI, NIE
   * `justify-content`.
   *
   * Tor kart jest przewijany poziomo (`overflow-x: auto`). `justify-content:
   * center` na kontenerze z przewijaniem obcina PIERWSZY element, gdy treść
   * przestaje się mieścić — nadmiar ucieka w ujemny obszar, do którego pasek
   * przewijania nie sięga. Marginesy `auto` dają ten sam obraz przy jednej
   * i dwóch kartach, a przy nadmiarze rozwiązują się do zera i tor wraca do
   * zwykłego przewijania od lewej.
   */
  .fc-about__card:first-child { margin-inline-start: auto; }
  .fc-about__card:last-child  { margin-inline-end: auto; }

  /*
   * Karta wypełnia tor w całości, nie w 80 %. Podglądanie następnej zza
   * krawędzi ma sens przy karuzeli — a od kiedy została jedna karta,
   * zostawiało tylko zwężoną kartę z przyciętym logotypem. Przy dwóch
   * i więcej kartach wychodzi z tego zwykła karuzela po jednej na ekran,
   * z zachowanym `scroll-snap`.
   */
  .fc-about__card {
    flex: 0 0 100%;
    max-width: 360px;
  }

  /*
   * Karta boczna stoi w kolumnie, więc jej oś główna jest PIONOWA i
   * `flex-basis` sterowałby wysokością, nie szerokością. Stąd jawne `width`.
   * `margin-inline: auto` środkuje logotyp FlyPark — sekcja 02 z tego samego
   * zgłoszenia co karty wyżej.
   */
  .fc-about__side-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  /* Wysokość idzie za szerokością, a `contain` nigdy nie przycina: przy
     288 px karty na telefonie logotyp FlyPark (258 px) i tak nie mieści się
     w polu treści, więc ma się pomniejszyć, a nie zostać obcięty. */
  .fc-about__card-img {
    height: auto;
    object-fit: contain;
  }
}

@media (max-width: 1199.98px) {
  /*
   * Zapowiedź nad kartami przestaje się mieścić w jednym wierszu, a wtedy
   * interlinia 20/24 z makiety nakłada wiersze na siebie. Poniżej 1200 px
   * wraca normalna interlinia nagłówkowa — makieta tego przypadku nie ma.
   */
  .fc-about__concepts-lead {
    line-height: var(--fc-lh-h5);
  }
}

@media (max-width: 899.98px) {
  .fc-about {
    padding-block: var(--fc-sp-72) var(--fc-sp-56);
  }

  .fc-about__body {
    gap: var(--fc-sp-64);
  }

  /* Układ rzędów, rozmiar kart i środkowanie logotypów siedzą w progu
     1023.98 px wyżej — tutaj zostaje wyłącznie rytm pionowy i galeria. */

  /* Przy dwóch kolumnach kafli wzorzec 2-1-1-2 przestaje mieć sens. */
  .fc-gallery__item,
  .fc-gallery__item:nth-child(4n + 1),
  .fc-gallery__item:nth-child(4n) {
    flex-basis: calc((100% - var(--fc-sp-16)) / 2);
    height: 200px;
  }
}

@media (max-width: 599.98px) {
  .fc-gallery__item,
  .fc-gallery__item:nth-child(4n + 1),
  .fc-gallery__item:nth-child(4n) {
    flex-basis: 80%;
  }

  .fc-gallery__btn {
    top: 50%;
    margin-top: -20px;
  }
}