/* ==========================================================================
   SEKCJA 04: Podkręć swój FlyPark
   --------------------------------------------------------------------------
   Z designu (home:0/5): 1440×602, padding 0/80/80, kolumna, gap 40.
   Panel 1280×460, promień 32, padding 56, rząd, gap 72, align center.
   ========================================================================== */

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

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

.fc-podkrecone__glow {
  --fc-glow-w: 1046.45px;
  --fc-glow-h: 420px;
  --fc-glow-x: 940.3px;
  --fc-glow-y: 217.4px;
  --fc-glow-rotate: 34.5deg;
  --fc-glow-from: var(--fc-glow-crimson);
  --fc-glow-mid: rgba(222, 33, 74, .5);
  --fc-glow-to: rgba(222, 33, 74, 0);
  --fc-glow-opacity: .64;
}

.fc-podkrecone__panel {
  display: flex;
  align-items: center;
  gap: var(--fc-sp-72);
  padding: var(--fc-sp-56);
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   ZDJĘCIE TŁA
   W makiecie ma 1280×460, czyli dokładnie rozmiar panelu. Leży pod treścią
   z kryciem 45%; `.fc-panel > *` podnosi rodzeństwo na z-index 1, więc tło
   zostaje na 0.
   --------------------------------------------------------------------------- */
.fc-podkrecone__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

.fc-podkrecone__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .45;
}

/* ---------------------------------------------------------------------------
   LEWA KOLUMNA — 560 px
   --------------------------------------------------------------------------- */
.fc-podkrecone__col {
  flex: 0 0 560px;
  display: flex;
  flex-direction: column;
  /* Nagłówek i akapit mają w makiecie pełne 560 px — łamią się na tej
     szerokości, nie na własnej. Przycisk hugujemy osobno. */
  align-items: stretch;
  gap: var(--fc-sp-24);
}

.fc-podkrecone__col .fc-btn {
  align-self: flex-start;
}

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

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

/* ---------------------------------------------------------------------------
   SIATKA ATRAKCJI — 460×348, elementy 130×100, 3 w rzędzie

   Liczba atrakcji jest dowolna. Przy 6 albo 9 siatka wypełni się równo;
   przy 7 (jak w makiecie) siódma stoi sama w trzecim rzędzie. Nie wymuszaj
   konkretnej liczby w CSS.
   --------------------------------------------------------------------------- */
.fc-podkrecone__grid {
  flex: 0 0 460px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: var(--fc-sp-20);
  row-gap: var(--fc-sp-24);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fc-podkrecone__item {
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-sp-12);
  height: 100px;
}

.fc-podkrecone__icon {
  display: block;
  width: 72px;
  height: 72px;
  color: var(--fc-color-text);
}

/*
 * Ikona wgrana przez redaktora (pole `icon_image`) zamiast ikony z motywu.
 * Wpisujemy ją w to samo pudełko 72×72, żeby siatka nie zmieniła rytmu.
 */
.fc-podkrecone__icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fc-podkrecone__label {
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-semibold);
  font-size: var(--fc-fs-activity);
  line-height: var(--fc-lh-auto);
  color: var(--fc-color-accent);
  text-align: center;
}

/* ==========================================================================
   RESPONSYWNOŚĆ — INTERPRETACJA, BRAK W DESIGNIE
   ========================================================================== */
/*
 * Kolumna 560 + odstęp 72 + siatka 460 = 1092, a wnętrze panelu ma 1168 tylko
 * przy 1440 px. Poniżej maleje — przy 1280 px zostaje 1088, przy 1200 px już
 * 1008 — a `flex: 0 0` nie pozwalał żadnemu z bloków ustąpić, więc siatka
 * wychodziła poza panel (o 4 px przy 1280, o 84 px przy 1200).
 *
 * Od 1439.98 px w dół oba bloki zachowują podstawę z makiety, ale wolno im
 * się kurczyć proporcjonalnie. Przy 1440 px nic się nie kurczy, bo tam suma
 * mieści się z zapasem — zgodność z makietą stoi nienaruszona.
 */
@media (max-width: 1439.98px) {
  .fc-podkrecone__col {
    flex: 1 1 560px;
  }

  /*
   * `min-width` pilnuje rzędu trzech atrakcji: 3 × 130 + 2 × 20 = 430. Bez
   * niego siatka kurczyła się przy 1200 px do 422 px — o osiem pikseli za
   * mało — i spadała na dwie kolumny, zostawiając w panelu pustą prawą trzecią.
   * Z ograniczeniem całe zwężenie bierze na siebie kolumna tekstu, która ma
   * z czego oddać.
   */
  .fc-podkrecone__grid {
    flex: 0 1 460px;
    min-width: 430px;
  }
}

/*
 * Siatka atrakcji miała `flex: 0 0 460px` bez prawa do ustąpienia, więc przy
 * 900 px kolumnie tekstu zostawały 224 px — na nagłówek 34 px za mało, łamał
 * się po jednym wyrazie. Teraz oba bloki mają podstawę i mogą się dzielić
 * resztą, a `flex-wrap` na panelu jest wentylem bezpieczeństwa: gdy suma
 * podstaw przestanie się mieścić, siatka zjeżdża pod tekst zamiast go ściskać.
 *
 * 300 px jako podstawa siatki to dwie atrakcje w rzędzie (2 × 130 + 20).
 */
@media (max-width: 1199.98px) {
  .fc-podkrecone__panel {
    flex-wrap: wrap;
    gap: var(--fc-sp-40);
  }

  .fc-podkrecone__col {
    flex: 1 1 320px;
  }

  /* `min-width` z progu 1440 musi ustąpić — poniżej 1200 px siatka ma prawo
     zejść do dwóch atrakcji w rzędzie, bo panel nie ma już czym płacić. */
  .fc-podkrecone__grid {
    flex: 1 1 300px;
    min-width: 0;
  }
}

@media (max-width: 899.98px) {
  .fc-podkrecone {
    padding-bottom: var(--fc-sp-56);
  }

  .fc-podkrecone__panel {
    flex-direction: column;
    align-items: stretch;
    padding: var(--fc-sp-32);
  }

  .fc-podkrecone__grid {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/*
 * TRZY ATRAKCJE W RZĘDZIE TAKŻE NA TELEFONIE — INTERPRETACJA, BRAK W DESIGNIE.
 *
 * Stały tu dwie w rzędzie (`50% - 10`), bo kafel z makiety ma 130 px i przy
 * węższym ekranie trzeci nie miał dokąd wejść. Zgłoszenie klienta: rytm 3 × 3
 * z makiety ma zostać, kosztem odstępów i rozmiaru ikon.
 *
 * ARYTMETYKA NAJWĘŻSZEGO PRZYPADKU (360 px, najczęstszy telefon):
 *   360 − 2 × 20 (--fc-container-pad) = 320 px kontenera
 *   320 − 2 × 24 (padding panelu niżej) = 272 px na siatkę
 *   272 − 2 × 10 (column-gap) = 252, czyli 84 px na kafel
 * Ikona 56 px mieści się w tym z 14 px luzu z każdej strony, a podpis
 * („Shuffle board" to najdłuższy) łamie się na dwa wiersze i nie wystaje.
 *
 * `height: auto` na kafelku jest obowiązkowe: stałe 100 px z makiety liczyło
 * się przy jednowierszowym podpisie, a przy dwóch wierszach tekst wychodził
 * poza kafel i wchodził w kolejny rząd.
 */
@media (max-width: 599.98px) {
  .fc-podkrecone__panel {
    padding: var(--fc-sp-24);
  }

  .fc-podkrecone__grid {
    column-gap: var(--fc-sp-10);
    row-gap: var(--fc-sp-20);
  }

  .fc-podkrecone__item {
    flex: 0 0 calc((100% - 2 * var(--fc-sp-10)) / 3);
    gap: var(--fc-sp-8);
    height: auto;
  }

  .fc-podkrecone__icon {
    width: 56px;
    height: 56px;
  }
}

/*
 * Poniżej 400 px zostaje 288 px kontenera, 240 px siatki i 73 px na kafel —
 * ikona schodzi do 48 px, żeby podpis miał gdzie stanąć. Odstęp panelu tnie
 * się razem z `--fc-container-pad`, który na tym progu też schodzi (16 px).
 */
@media (max-width: 399.98px) {
  .fc-podkrecone__panel {
    padding: var(--fc-sp-20);
  }

  .fc-podkrecone__icon {
    width: 48px;
    height: 48px;
  }
}