/* ==========================================================================
   NK — Aktualności (lista wpisów)

   Karty są tu zdefiniowane od zera, celowo nie dziedziczą po .post-card
   ze style-glowna.css: tamten arkusz ładuje się wyłącznie na stronie głównej.
   Prefiks nk-blog-* chroni też przed kolizją z .post-content, które w single.php
   oznacza sekcję układu, a nie kartę.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sekcja listy — tło i kontekst układania

   .header-big jest position:fixed, więc zostaje pod całą treścią i prześwituje
   przez każdą sekcję bez własnego tła. Stąd komplet trzech deklaracji, ten sam
   co w .nk-karty-pracy-section, .nk-filmy czy sekcjach wsparcia:

   background — zasłania niebieski header,
   position   — bez pozycjonowania z-index nie ma żadnego efektu,
   z-index    — wypycha sekcję nad fixed header (tak samo jak stopka).
   -------------------------------------------------------------------------- */

.nk-blog-section {
  background: var(--color-sand);
  position: relative;
  z-index: 5;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Lista
   -------------------------------------------------------------------------- */

.nk-blog-intro {
  margin-bottom: 45px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(var(--color-blue-dark-rgb), 1);
}

.nk-blog-intro p:last-child {
  margin-bottom: 0;
}

/* --- Tablica: dwie kolumny ---------------------------------------------
   Karty w duchu posta na tablicy, ale ułożone w dwóch kolumnach.

   align-items: start jest tu kluczowe: bez tego siatka rozciąga obie karty
   w wierszu do wysokości wyższej z nich i pod krótszym wpisem zostaje pusty
   biały pas. Z tym ustawieniem każda karta ma własną, naturalną wysokość.

   Świadomie NIE używam column-count, mimo że ładniej wypełnia przestrzeń —
   układałby wpisy pionowo w kolumnach, więc najnowszy i drugi w kolejności
   trafiałyby jeden pod drugim zamiast obok siebie. Przy aktualnościach
   kolejność od lewej do prawej jest ważniejsza niż równy dół.
   ---------------------------------------------------------------------- */

.nk-blog-feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /*
   * stretch, nie start. Przy "start" każda karta miała wysokość własnej
   * treści, więc wpis z dwuliniowym tytułem był wyższy od sąsiada.
   * "stretch" wyrównuje karty w wierszu do najwyższej z nich.
   */
  align-items: stretch;
  gap: 28px;

  /*
   * Bez własnego max-width — szerokość dyktuje standardowy kontener strony
   * (.page-content → .page-content-narrow), ten sam co na pozostałych
   * podstronach. Dzięki temu blog trzyma się drabinki 1750/1280/1024/768
   * i nie trzeba go poprawiać przy każdej zmianie layoutu motywu.
   */
  width: 100%;
}

/*
 * Punkt łamania celowo ustawiony na 1024px, czyli tam, gdzie .page-content
 * schodzi do 768px. Dwie kolumny w kontenerze tej szerokości dawałyby karty
 * po ~370px — za ciasno na tytuł, zajawkę i kadr 16:9.
 */
@media (max-width: 1024px) {
  .nk-blog-feed {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /*
   * Jedna kolumna — nie ma z czym wyrównywać, więc rezerwowanie miejsca tylko
   * dodawałoby pustkę pod krótkim tytułem. Przycinanie zostaje, żeby karty
   * wyglądały tak samo na obu układach.
   */
  .nk-blog-card__title,
  .nk-blog-card__excerpt {
    min-height: 0;
  }
}

/* --- Karta --- */

.nk-blog-card {
  background: var(--color-white);
  border: 1px solid rgba(var(--color-blue-dark-rgb), 0.08);
  border-radius: 14px;
  overflow: hidden; /* przycina obrazek do zaokrąglonych rogów */
  box-shadow: 0 1px 3px rgba(var(--color-blue-dark-rgb), 0.08);
  transition: var(--default-transition);
  /*
   * Kolumna flex, żeby nadmiarową wysokość z "align-items: stretch" dało się
   * kontrolować. Bez tego karta rozciąga się, ale treść zostaje przyklejona
   * do góry, a stopka z ramką ląduje w połowie białego pola.
   */
  display: flex;
  flex-direction: column;
}

.nk-blog-card:hover {
  box-shadow: 0 6px 18px rgba(var(--color-blue-dark-rgb), 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .nk-blog-card {
    transition: none;
  }
}

/* --- Treść: data, tytuł, zajawka --- */

.nk-blog-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 22px 16px;
}

.nk-blog-card__date {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--color-grey-dark-rgb), 1);
}

/* --------------------------------------------------------------------------
   Rezerwacja miejsca na tytuł i zajawkę

   Samo wyrównanie kart do wspólnej wysokości nie wystarcza: jeśli jeden tytuł
   ma jedną linię, a drugi dwie, kadry 16:9 startują na różnej wysokości i
   karty dalej wyglądają na rozjechane.

   Dlatego tytuł zajmuje ZAWSZE dwie linie, a zajawka ZAWSZE cztery —
   min-height dosypuje miejsce krótszym, a line-clamp przycina dłuższe.
   Wysokości są w "em", więc liczą się od własnego font-size elementu i nie
   trzeba ich przeliczać przy zmianie skali typografii.
   -------------------------------------------------------------------------- */

.nk-blog-card__title {
  font-size: 1.35rem;
  line-height: 1.35;
  margin: 0;

  width: 100%;
  min-height: 2.7em; /* 2 wiersze × line-height 1.35 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nk-blog-card__title a {
  text-decoration: none;
  color: rgba(var(--color-blue-dark-rgb), 1);
  transition: var(--default-transition);
}

.nk-blog-card__title a:hover,
.nk-blog-card__title a:focus-visible {
  color: var(--color-orange);
}

.nk-blog-card__excerpt {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin: 0;

  width: 100%;
  min-height: 6.4em; /* 4 wiersze × line-height 1.6 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Obrazek: pełna szerokość karty, zawsze 16:9 -----------------------
   aspect-ratio trzyma kadr niezależnie od proporcji pliku źródłowego,
   a object-fit: cover dokadrowuje go bez zniekształcania.
   ---------------------------------------------------------------------- */

/*
 * Proporcje trzyma KONTENER, nie obrazek — i to jest tu istotne.
 *
 * WordPress wstawia do <img> atrybuty width i height. Przeglądarka traktuje je
 * jak reguły CSS o zerowej specyficzności: nasze `width: 100%` nadpisuje width,
 * ale jeśli nie podamy wysokości, atrybut height zostaje i przypina obrazek do
 * sztywnej liczby pikseli. A `aspect-ratio` działa tylko wtedy, gdy przynajmniej
 * jeden wymiar jest automatyczny — przy dwóch ustalonych jest po prostu
 * ignorowane. Stąd kadry wyższe niż 16:9 i przycięte boki.
 *
 * Przeniesienie aspect-ratio na zwykły element blokowy omija ten problem
 * całkowicie: obrazek dostaje height: 100% i wypełnia ramkę o stałych
 * proporcjach, niezależnie od tego, co WordPress wpisze w atrybuty.
 */
.nk-blog-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  background: rgba(var(--color-sand-rgb), 1);
  overflow: hidden;
}

.nk-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--default-transition);
}

.nk-blog-card:hover .nk-blog-card__media img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .nk-blog-card__media img,
  .nk-blog-card:hover .nk-blog-card__media img {
    transition: none;
    transform: none;
  }
}

/* Zastępnik dla wpisu bez obrazka — wypełnia tę samą ramkę 16:9 co zdjęcie. */
.nk-blog-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 35%, rgba(var(--color-orange-rgb), 0.18) 0 18%, transparent 18%),
    radial-gradient(circle at 70% 65%, rgba(var(--color-magenta-rgb), 0.15) 0 14%, transparent 14%),
    rgba(var(--color-sand-rgb), 1);
}

/* --- Stopka karty --- */

.nk-blog-card__footer {
  padding: 16px 22px 20px;
  border-top: 1px solid rgba(var(--color-blue-dark-rgb), 0.06);
  /*
   * Spycha stopkę na dół karty. Gdy sąsiad w wierszu jest wyższy, nadmiar
   * wysokości ląduje NAD stopką, a nie pod przyciskiem — dzięki temu
   * przyciski CZYTAJ stoją w obu kartach na tej samej linii.
   */
  margin-top: auto;
}

.nk-blog-card .boxed-link.nk-blog-card__link {
  height: 10px;
  padding: 20px;
  font-size: 0.7rem;
  margin: 0;
}

@media (max-width: 600px) {
  .nk-blog-card__body {
    padding: 18px 18px 14px;
  }

  .nk-blog-card__footer {
    padding: 14px 18px 18px;
  }

  .nk-blog-card__title {
    font-size: 1.2rem;
  }
}

/* --- Paginacja --- */

.nk-blog-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 50px;
}

.nk-blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(var(--color-orange-rgb), 0.35);
  border-radius: 50px;
  text-decoration: none;
  font-size: 0.9rem;
  color: rgba(var(--color-blue-dark-rgb), 1);
  background: var(--color-white);
  transition: var(--default-transition);
}

.nk-blog-pagination a.page-numbers:hover,
.nk-blog-pagination a.page-numbers:focus-visible {
  background: rgba(var(--color-orange-rgb), 0.12);
  border-color: var(--color-orange);
  color: var(--color-orange);
}

.nk-blog-pagination .page-numbers.current {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
  font-weight: 700;
}

.nk-blog-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

.nk-blog-pagination .prev,
.nk-blog-pagination .next {
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

@media (max-width: 600px) {
  .nk-blog-pagination .prev,
  .nk-blog-pagination .next {
    width: 100%;
    order: 1;
  }
}

/* --------------------------------------------------------------------------
   Animacja wejścia karty

   Stan początkowy obowiązuje tylko wewnątrz .nk-blog-feed--anim, a szablon
   zdejmuje go znacznikiem <noscript> — dzięki temu bez JavaScriptu wpisy są
   po prostu widoczne, a przy włączonym JS nie ma mignięcia treści.

   transition-delay ustawia skrypt indywidualnie dla każdej karty, co daje
   kaskadę zamiast jednoczesnego pojawienia się całej partii.
   -------------------------------------------------------------------------- */

.nk-blog-feed--anim .nk-blog-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out,
    box-shadow 0.3s ease-in-out;
}

.nk-blog-feed--anim .nk-blog-card.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .nk-blog-feed--anim .nk-blog-card,
  .nk-blog-feed--anim .nk-blog-card.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Wartownik doczytywania --- */

.nk-blog-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  margin-top: 40px;
}

.nk-blog-sentinel.is-done {
  display: none;
}

.nk-blog-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(var(--color-orange-rgb), 0.25);
  border-top-color: var(--color-orange);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.nk-blog-sentinel.is-loading .nk-blog-spinner {
  opacity: 1;
  animation: nk-blog-spin 0.7s linear infinite;
}

@keyframes nk-blog-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nk-blog-sentinel.is-loading .nk-blog-spinner {
    animation: none;
  }
}

.nk-blog-status {
  text-align: center;
  font-size: 0.9rem;
  color: rgba(var(--color-grey-dark-rgb), 1);
  margin: 10px 0 0;
  min-height: 1.2em;
}

/* ==========================================================================
   POJEDYNCZY WPIS

   single.php odwzorowuje układ single-filmy_edukacyjne.php i korzysta z jego
   arkusza (style-filmy.css). Tutaj są wyłącznie różnice wynikające z treści:
   obrazek wyróżniający w miejscu odtwarzacza i nagłówek h1 zamiast span.
   ========================================================================== */

/*
 * Szablon filmu ma w nagłówku <span class="main-title">, więc reguła
 * span.main-title na wpis z <h1> nie zadziała. Powielamy jej wygląd i wygrywamy
 * z .header-big h1 (4rem) wyższą specyficznością — również w wersji mobilnej.
 */
.header-big h1.main-title {
  color: var(--color-white);
  font-size: 2.2rem;
  line-height: 1.25;
  margin: 0;
}

@media (max-width: 768px) {
  .header-big h1.main-title {
    font-size: 1.7rem;
  }
}

/* Ramka obrazka wyróżniającego — proporcje i zaokrąglenie jak w .responsive-video. */
.nk-post-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 30px;
  overflow: hidden;
  margin-bottom: 10px;
  background: #000;
  z-index: 1;
}

.nk-post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Zastępnik miniatury w sidebarze, gdy wpis nie ma obrazka. */
.nk-post-cover__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 35%, rgba(var(--color-orange-rgb), 0.25) 0 18%, transparent 18%),
    radial-gradient(circle at 70% 65%, rgba(var(--color-magenta-rgb), 0.2) 0 14%, transparent 14%),
    var(--color-blue-dark);
}

/* Trzeci element w nawigacji (powrót do listy) — środek belki. */
.vod-navigation .nav-blog-back {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Sidebar "ZOBACZ TEŻ" na pojedynczym wpisie

   Układ pionowy: obrazek, pod nim data, tytuł i zajawka. Kolejne pozycje
   rozdzielają poziome linie — dlatego odstęp z .sidebar-stack schodzi do zera,
   a przestrzeń robią paddingi, żeby kreska biegła w równej odległości od
   sąsiadujących kafelków.
   -------------------------------------------------------------------------- */

.sidebar-stack--posts {
  gap: 0;
}

.nk-side-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 22px 0;
  border-bottom: 1px solid rgba(var(--color-blue-dark-rgb), 0.14);
}

.nk-side-card:first-child {
  padding-top: 0;
}

.nk-side-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.nk-side-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-blue-dark);
  margin-bottom: 12px;
}

.nk-side-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: var(--default-transition);
}

.nk-side-card:hover .nk-side-card__media img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .nk-side-card__media img,
  .nk-side-card:hover .nk-side-card__media img {
    transition: none;
    transform: none;
  }
}

.nk-side-card__date {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--color-grey-dark-rgb), 1);
  margin-bottom: 6px;
}

.nk-side-card__title {
  font-size: 1rem;
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--color-blue-dark);
  transition: var(--default-transition);
}

.nk-side-card:hover .nk-side-card__title,
.nk-side-card:focus-visible .nk-side-card__title {
  color: var(--color-orange);
}

.nk-side-card__excerpt {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #555;
}

/* --- Stan pusty --- */

.nk-blog-empty {
  text-align: center;
  font-size: 1.05rem;
  color: rgba(var(--color-grey-dark-rgb), 1);
  padding: 60px 20px;
}