/**
 * [mn_blog_grid] — bazowy styl feedu wpisów.
 * Neutralny start do dostrojenia wg WYTYCZNE-DESIGN-PROJEKTU.md.
 * Wszystko na zmiennych --mn-* — nadpisuj w Breakdance (Custom CSS sekcji) lub tutaj.
 */
.mn-blog-grid {
  --mn-cols: 3;
  --mn-gap: 28px;
  --mn-radius: 0;          /* ostre rogi kontenerów */
  --mn-card-bg: #fff;
  --mn-title: var(--bde-headings-color, #1f2a44);
  --mn-text: var(--bde-body-text-color, #5a5a68);
  --mn-accent: var(--bde-brand-primary-color, #1f6f78);

  display: grid;
  grid-template-columns: repeat(var(--mn-cols), minmax(0, 1fr));
  gap: var(--mn-gap);
}

/* Pasek filtrów kategorii (klik = filtruj feed) */
.mn-blog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
/* Filtry = kanciaste przyciski outline: bez tła, szary napis + szary border 2px (kolor „text").
   Aktywny = zielony (napis + border). */
.mn-blog__filters .mn-filter {
  padding: 6px 16px;
  border-radius: 0;
  border: 2px solid var(--mn-mid-grey, #8a8f99);
  background: transparent;
  color: var(--mn-mid-grey, #8a8f99);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.mn-blog__filters .mn-filter:hover {
  color: var(--bde-brand-primary-color, #367a3e);
  border-color: var(--bde-brand-primary-color, #367a3e);
}
.mn-blog__filters .mn-filter.is-active {
  background: transparent;
  color: var(--bde-brand-primary-color, #367a3e);
  border-color: var(--bde-brand-primary-color, #367a3e);
}
.mn-blog__results.is-loading { opacity: .5; transition: opacity .2s ease; }

.mn-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;                  /* kontener z obrysem, padding 24px */
  text-align: left;
  background: var(--mn-card-bg);
  border-radius: var(--mn-radius);
  border: var(--mn-border);       /* 1px szara ramka zamiast cienia */
}

.mn-card__thumb {
  display: block;
  margin: 24px 0;             /* 24px nad i pod obrazem */
  height: 400px;              /* niższy obraz w karcie */
  overflow: hidden;
  background: #eef1f5;
}
.mn-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;   /* kadr wyśrodkowany */
  transition: transform .5s ease;
}
.mn-card:hover .mn-card__img { transform: scale(1.04); }

.mn-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-align: left;
  padding: 24px;             /* równy padding kontenera karty ze wszystkich stron */
}

.mn-card__meta {
  position: relative;
  z-index: 0;
  width: fit-content;        /* szerokość = kategoria + data (żeby pasek sięgał 24px za datę) */
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 10px;
}
/* zielony pasek pod kategorią i datą: rozwija się od lewej krawędzi karty na hover,
   sięga 24px za datę, chowa się po zdjęciu kursora. Tekst na nim robi się biały. */
.mn-card__meta::before {
  content: "";
  position: absolute;
  top: -4px; bottom: -4px;
  left: -24px;               /* wychodzi z lewej krawędzi karty (padding body = 24px), bez wcięcia */
  right: -24px;              /* 24px za datą */
  background: var(--bde-brand-primary-color, #367a3e);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
  z-index: -1;
}
.mn-card:hover .mn-card__meta::before { transform: scaleX(1); }

.mn-card__cat {
  position: relative;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--mn-accent);
  text-decoration: none;
  transition: color .25s ease;
}
.mn-card__date {
  position: relative;
  color: var(--mn-text);
  opacity: .7;
  transition: color .25s ease, opacity .25s ease;
}
/* hover karty -> kategoria i data białe (wyższa specyficzność niż .breakdance a) */
.mn-card:hover .mn-card__cat,
.mn-card:hover .mn-card__date { color: #fff; opacity: 1; }

/* .mn-card ... — wyższa specyficzność niż globalne .breakdance h3, żeby rozmiar S zadziałał */
.mn-card .mn-card__title {
  margin: 0;                  /* nagłówek na górze; odstęp daje margines obrazu */
  text-align: center;         /* wyśrodkowany nad obrazem */
  /* rozmiar/waga = preset „Heading M Normal" (ten sam rozmiar, lżejszy — Lora 400) */
  font-size: var(--preset-id-efab0463-3aed-40bd-a581-b03b8217a29b-font-size);
  font-weight: var(--preset-id-efab0463-3aed-40bd-a581-b03b8217a29b-font-weight);
  line-height: 1.3;
}
/* .mn-card ... — podniesiona specyficzność: kolor „heading dark" z Breakdance,
   bez zielonego hovera linku Breakdance */
.mn-card .mn-card__title a,
.mn-card .mn-card__title a:hover {
  color: var(--bde-headings-color, #363636);
  text-decoration: none;
}

.mn-card__excerpt {
  margin: 0 0 auto;        /* auto spycha przycisk na dół karty */
  color: var(--mn-text);
  font-size: 1.0625rem;    /* większa zajawka (~17px) */
  line-height: 1.7;
}

/* „Czytaj więcej" = przycisk PRIMARY prosto z Breakdance (klasy button-atom button-atom--primary).
   BEZ własnych nadpisań wyglądu — tylko pozycja: 12px nad przyciskiem, wyrównanie do dołu karty. */
.mn-card a.mn-card__more {
  align-self: flex-start;
  margin-top: 24px;
}

.mn-card__img--placeholder { display: block; width: 100%; height: 100%; }

/* Paginacja */
.mn-pagination { margin-top: 40px; }
.mn-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mn-pagination .page-numbers li a,
.mn-pagination .page-numbers li span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--bde-headings-color, #1f2a44);
  background: #fff;
  border: var(--mn-border);
}
.mn-pagination .page-numbers li .current {
  background: var(--bde-brand-primary-color, #1f6f78);
  color: #fff;
}

/* Responsywność — breakpointy Breakdance (1119 / 767 / 479) */
@media (max-width: 1119px) { .mn-blog-grid { --mn-cols: 2; } } /* tablet poziomo */
@media (max-width: 767px)  { .mn-blog-grid { --mn-cols: 2; } } /* tablet pionowo */
@media (max-width: 479px)  { .mn-blog-grid { --mn-cols: 1; } } /* telefon */