/* ==========================================================================
   Moduł Blog — sekcja wpisów (siatka / karuzela).
   Bazuje na markupie .br-know-* i .br-sec-* z motywu BAURAD
   (theme/baurad/css/home.css, css/general.css) — dokładnie takim, jaki ma
   sekcja "4. WISSEN" na stronie głównej. Ten plik tylko:
     - konfiguruje liczbę kolumn siatki (--mod-blog-cols) oraz liczbę wpisów
       widocznych na raz w karuzeli (--mod-blog-per),
     - neutralizuje opakowanie modułu z motywu (elements/modules.html),
     - dokłada wartości zapasowe, gdy strona nie dołącza css/home.css.
   Tokeny BAURAD z wartościami zapasowymi — działa też w motywie bez tokenów.
   ========================================================================== */

.mod-blog {
  --mod-blog-gap: var(--space-4, 2rem);
  --mod-blog-cols: 3;
  --mod-blog-per: 3;
}

.mod-blog .br-sec-head__row { align-items: flex-end; }

/* --- Siatka -------------------------------------------------------------- */
.mod-blog.is-grid .br-know-grid {
  display: grid;
  grid-template-columns: repeat(var(--mod-blog-cols), minmax(0, 1fr));
  gap: var(--mod-blog-gap);
}
.mod-blog.is-grid .br-know-grid > * { min-width: 0; }

/* --- Karuzela ------------------------------------------------------------ */
.mod-blog.is-carousel .mod-blog__wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mod-blog.is-carousel .mod-blog__wrap::-webkit-scrollbar { display: none; }
.mod-blog.is-carousel .mod-blog__track {
  display: flex;
  gap: var(--mod-blog-gap);
}
.mod-blog.is-carousel .br-know-card {
  width: calc((100% - (var(--mod-blog-per) - 1) * var(--mod-blog-gap)) / var(--mod-blog-per));
  flex: 0 0 auto;
}
.mod-blog .br-feat-arrows { margin-left: auto; }

/* --- Kafle (wartości zapasowe, gdy brak css/home.css) -------------------- */
.mod-blog .br-know-card { min-width: 0; }
.mod-blog .br-know-card__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card-lg, 1rem);
  overflow: hidden;
  background-color: var(--color-surface, #F5F3F0);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* --- Opakowanie modułu w motywie (elements/modules.html) ----------------- */
/* Motyw opakowuje każdy moduł w kartę z nagłówkiem (nazwa instancji). Sekcja
   wpisów jest blokiem własnym, więc opakowanie neutralizujemy, a nazwę
   instancji ukrywamy. Selektor :has() — w starszych przeglądarkach nazwa
   instancji pozostanie widoczna (wpis kosmetyczny). */
section.module:has(> .module-body > .mod-blog) {
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
section.module:has(> .module-body > .mod-blog) > .neon-card-title { display: none; }

/* --- Responsywność ------------------------------------------------------- */
/* Układ z konfiguracji obowiązuje na desktopie; na mniejszych ekranach
   ograniczamy liczbę kolumn / widocznych wpisów (jak makieta i home.css). */
@media (max-width: 1024px) {
  .mod-blog.is-grid .br-know-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mod-blog.is-carousel .br-know-card { width: calc((100% - 2 * var(--mod-blog-gap)) / 3); }
}
@media (max-width: 900px) {
  .mod-blog.is-grid .br-know-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3, 1.5rem); }
  .mod-blog.is-carousel .br-know-card { width: calc((100% - var(--mod-blog-gap)) / 2); }
}
@media (max-width: 640px) {
  .mod-blog.is-grid .br-know-grid { grid-template-columns: minmax(0, 1fr); }
  .mod-blog.is-carousel .br-know-card { width: 100%; }
}

/* --- Redukcja ruchu ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mod-blog.is-carousel .mod-blog__wrap { scroll-behavior: auto; }
}