/* ==========================================================================
   SEKCJA 07: Nagrody i wyróżnienia
   --------------------------------------------------------------------------
   Z designu (home:0/9): 1440×628, padding 96/80, kolumna, gap 40.
     marker  22
     H       42   (36/42, 900 szerokości)
     lead    84   (18/28, 820 szerokości, wymuszone łamanie)
     karty  168   (2 × 620, gap 40)
   ========================================================================== */

.fc-awards {
  padding-block: var(--fc-sp-96);
  overflow: hidden;
}

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

.fc-awards__title {
  width: 900px;
  max-width: 100%;
  margin: 0;
  font-weight: var(--fc-fw-extrabold);
  font-size: var(--fc-fs-h3);
  line-height: var(--fc-lh-h3);
  letter-spacing: var(--fc-ls-h3);
}

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

/* ---------------------------------------------------------------------------
   KARTY
   Przy trzech i więcej nagrodach siatka przechodzi na auto-fit, żeby nie
   ściskać kart poniżej czytelnej szerokości.
   --------------------------------------------------------------------------- */
.fc-awards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--fc-sp-40);
}

.fc-awards__card {
  display: flex;
  align-items: center;
  gap: var(--fc-sp-24);
  /* Karta ma 168 px przy dwóch linijkach opisu. Dłuższy opis ma ją
     rozepchnąć, a nie zostać przycięty. */
  min-height: 168px;
  padding: var(--fc-sp-36);
}

.fc-awards__media {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--fc-awards-media-w, 164px);
  height: 96px;
  overflow: hidden;
  border: var(--fc-border-width) solid var(--fc-color-hairline);
  border-radius: var(--fc-radius-xl);
  background: var(--fc-awards-media-bg, var(--fc-color-media-bg));
}

/* Logotypy mają w makiecie własne rozmiary — jeden wystaje poza ramkę
   i jest przycinany, drugi siedzi w środku z marginesem. `contain`
   plus rozmiar z danych obsługuje oba przypadki jedną regułą. */
.fc-awards__logo {
  max-width: none;
  object-fit: contain;
}

/*
 * 380 px, choć w karcie zostaje na tekst tylko 360 (620 − 72 paddingu −
 * 164 ramki − 24 odstępu). Tak jest w makiecie: designer poszerzył ramkę
 * tekstu o 20 px w prawy padding. Oba opisy mają wymuszone łamanie linii,
 * więc na zawijanie to nie wpływa — pilnujemy tylko zgodności pomiaru.
 */
.fc-awards__body {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-8);
  width: 380px;
}

.fc-awards__name {
  margin: 0;
  font-weight: var(--fc-fw-bold);
  font-size: var(--fc-fs-award);
  line-height: var(--fc-lh-award);
  letter-spacing: 0;
}

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

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

/*
 * ⚠️ TU BYŁA AWARIA. Wypuszczenie ramki tekstu o 20 px w prawy padding jest
 * z makiety i ma sens WYŁĄCZNIE przy kolumnie 620 px (620 − 72 paddingu −
 * 164 ramki − 24 odstępu = 360, a tekst ma 380).
 *
 * Poniżej 1440 px siatka daje węższe kolumny, a `flex: none` nie pozwalał
 * tekstowi ustąpić — przy 1200 px karta wylewała się poza własny obrys o ~90 px.
 * Od 1439.98 px w dół szerokość niesie więc kolumna, nie stała z makiety.
 */
@media (max-width: 1439.98px) {
  .fc-awards__body {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

@media (max-width: 899.98px) {
  .fc-awards {
    padding-block: var(--fc-sp-64);
  }

  .fc-awards__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 599.98px) {
  .fc-awards__card {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--fc-sp-24);
  }
}

/* ==========================================================================
   WARIANT „page" — podstrona „O nas", makieta 137:905
   --------------------------------------------------------------------------
   Karty, odstępy i padding są identyczne co do piksela. Różni się wyłącznie
   nagłówek: etykieta w gradiencie zamiast markera z numerem (podstrona nie
   ma numerowanych sekcji) i tytuł 34/40 zamiast 36/42.

   Odstęp etykieta → tytuł wynosi w makiecie 28, a nie 40 jak reszta kolumny;
   dlatego ujemny margines, a nie osobna wartość `gap` na całym bloku.
   ========================================================================== */

/* Wygląd etykiety niesie components/eyebrow.css — tu zostaje wyłącznie
   korekta odstępu, bo jest właściwością TEJ sekcji, nie komponentu. */
.fc-awards--page .fc-awards__eyebrow {
  margin-bottom: calc(var(--fc-sp-28) - var(--fc-sp-40));
}

.fc-awards--page .fc-awards__title {
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-h3-sm);
  line-height: var(--fc-lh-h3-sm);
  letter-spacing: 0;
}