/* ==========================================================================
   SEKCJA 08: Aktualności
   --------------------------------------------------------------------------
   Z designu (home:0/10): 1440×888, padding 80, kolumna, gap 48.
     marker  22
     H2      48   (700 szerokości)
     lead    28   (760 szerokości)
     karty  386   (3 × 400, gap 40)
     przycisk 52  (wyśrodkowany)
   ========================================================================== */

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

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

/*
 * ⚠️ JEDYNE MIEJSCE NA STRONIE, GDZIE RENDER FIGMY NIE ZGADZA SIĘ Z DANYMI.
 *
 * Rozmiar (750×380), kolor i krycie 27 % potwierdzają wszystkie źródła.
 * Spór dotyczy POZYCJI I OBROTU:
 *
 *   zrzut drzewa    róg (−180, 100), bez obrotu
 *   ramka z Figmy   834.74 × 613.60 → elipsa 750×380 obrócona o 20°
 *   render          poświata ≈184 px wyżej, praktycznie bez obrotu
 *
 * Sprawdzone pomiarem (glow-fit.js): przy 20° różnica wobec makiety rośnie
 * do 17.05 %, przy wartościach poniżej spada do 13.61 % (z 19.11 %).
 * Stoi więc to, co widać w renderze — bo render jest tym, co ogląda klient.
 *
 * Reszta różnicy tej sekcji to kadry zdjęć, nie poświata.
 */
.fc-news__glow {
  --fc-glow-w: 750px;
  --fc-glow-h: 380px;
  --fc-glow-x: -139.6px;
  --fc-glow-y: -71px;
  --fc-glow-rotate: -2deg;
  --fc-glow-from: var(--fc-glow-orange);
  --fc-glow-mid: rgba(249, 167, 52, .5);
  --fc-glow-to: rgba(249, 167, 52, 0);
  --fc-glow-opacity: .27;
}

.fc-news__title {
  width: 700px;
  max-width: 100%;
  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-news__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);
}

/* ---------------------------------------------------------------------------
   SIATKA
   auto-fill, bo liczba wpisów zmienia się sama — przy dwóch wpisach karty
   mają zostać w swojej szerokości, a nie rozciągnąć się na pół ekranu.
   --------------------------------------------------------------------------- */
.fc-news__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--fc-sp-40);
  /* Tytuły mają różną długość — karty równamy górą, nie środkiem. */
  align-items: start;
}

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

/* ---------------------------------------------------------------------------
   OBRAZEK — 380 px przy kolumnie 400 px

   Asymetria jest CELOWA. Realizujemy ją prawym marginesem 20 px, a NIE
   procentem: przy innej szerokości kolumny procent dałby inną wartość
   i detal z makiety by zniknął.
   --------------------------------------------------------------------------- */
.fc-news__media {
  display: block;
  height: 220px;
  margin-right: var(--fc-sp-20);
  overflow: hidden;
  border: var(--fc-border-width) solid var(--fc-color-hairline);
  border-radius: var(--fc-radius-xl);
  background: var(--fc-color-night-alt);
}

.fc-news__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--fc-transition-hover);
}

/* INTERPRETACJA — brak w designie. */
.fc-news__card:hover .fc-news__img {
  transform: scale(1.03);
}

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

.fc-news__date {
  /* Data huguje do treści — reszta kolumny rozciąga się na pełne 400 px. */
  align-self: flex-start;
  margin: 0;
  font-weight: var(--fc-fw-medium);
  font-size: var(--fc-fs-caption);
  line-height: var(--fc-lh-caption);
  letter-spacing: var(--fc-ls-caption);
  color: var(--fc-color-accent);
}

.fc-news__title-card {
  margin: 0;
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-card-title);
  line-height: var(--fc-lh-card-title);
  letter-spacing: 0;
}

.fc-news__title-card a {
  text-decoration: none;
  transition: color var(--fc-transition-hover);
}

/* INTERPRETACJA — brak w designie. */
.fc-news__title-card a:hover {
  color: var(--fc-color-accent-alt);
}

/* Zajawki ucinamy na trzech wierszach, żeby siatka nie skakała przy
   wpisach o bardzo różnej długości. */
.fc-news__excerpt {
  margin: 0;
  font-size: var(--fc-fs-body);
  line-height: var(--fc-lh-body);
  color: var(--fc-color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

/* ==========================================================================
   RESPONSYWNOŚĆ — INTERPRETACJA, BRAK W DESIGNIE
   ========================================================================== */
@media (max-width: 899.98px) {
  .fc-news {
    padding-block: var(--fc-sp-56);
  }

  .fc-news__inner {
    gap: var(--fc-sp-32);
  }

  .fc-news__grid {
    grid-template-columns: 1fr;
    gap: var(--fc-sp-32);
  }

  .fc-news__media {
    margin-right: 0;
  }
}