/* ==========================================================================
   SEKCJA 02: Dwa modele FlyPark
   --------------------------------------------------------------------------
   Z designu (home:0/3): 1440×661, padding 80/80/60, kolumna, gap 56.
     marker    22
     H2        48   (1 wiersz, 1280 szerokości)
     karty    231   (2 × 620, gap 40)
     przycisk  52   (wyśrodkowany)
   ========================================================================== */

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

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

.fc-models__glow {
  --fc-glow-w: 539px;
  --fc-glow-h: 539px;
  --fc-glow-x: 960px;
  --fc-glow-y: 0px;
  --fc-glow-from: var(--fc-glow-orange);
  /* Przystanek końcowy ma INNY kolor — patrz komentarz w components/glow.css. */
  --fc-glow-mid: rgba(148, 87, 60, .5);
  --fc-glow-to: rgba(47, 7, 67, 0);
  --fc-glow-opacity: .67;
}

.fc-models__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);
}

/* ---------------------------------------------------------------------------
   KARTY
   Zawartość jest `hug`, więc karta zwęża się bez łamania układu: przy trzech
   kartach wychodzi po 400 px i wszystko nadal działa.
   --------------------------------------------------------------------------- */
.fc-models__grid {
  display: flex;
  gap: var(--fc-sp-40);
  align-items: stretch;
}

.fc-models__card {
  flex: 1 1 0;
  /* Przy jednej karcie nie rozciągamy jej na całą szerokość kontenera. */
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-20);
  padding: var(--fc-sp-44);
}

.fc-models__card-title {
  margin: 0;
  font-weight: var(--fc-fw-extrabold);
  font-size: var(--fc-fs-h4);
  line-height: var(--fc-lh-h4);
  letter-spacing: 0;
}

.fc-models__card-sub {
  margin: 0;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-semibold);
  font-size: var(--fc-fs-btn);
  line-height: var(--fc-lh-auto);
  color: var(--fc-color-accent);
}

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

.fc-models__actions {
  display: flex;
  justify-content: center;
}

/* INTERPRETACJA — brak w designie. Podkreślenie istniejącego języka
   gradientowych obramowań, nie nowy motyw. */
.fc-models__card {
  transition: transform var(--fc-transition-hover);
}

.fc-models__card:hover {
  transform: translateY(-2px);
}

/* Przesunięcie to ruch — patrz komentarz przy trybie ograniczonego ruchu
   w base/variables.css. */
@media (prefers-reduced-motion: reduce) {
  .fc-models__card:hover {
    transform: none;
  }
}

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

/* Padding 44 px jest z karty 620 px. Przy dwóch kartach po ~398 px zjadał
   22 % szerokości i zostawiał na tekst 310 px. */
@media (max-width: 1199.98px) {
  .fc-models__grid {
    gap: var(--fc-sp-32);
  }

  .fc-models__card {
    padding: var(--fc-sp-32);
  }
}

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

  .fc-models__inner {
    gap: var(--fc-sp-40);
  }

  .fc-models__grid {
    flex-direction: column;
  }

  .fc-models__card {
    max-width: none;
    padding: var(--fc-sp-32);
  }
}