/* ========== Layout & filtry ========== */
.mon-wrap { width: 100%; }
.mon-filters { display:flex; gap:.5rem; flex-wrap:wrap; margin:0 0 1rem; }
.mon-filter { border:1px solid #ddd; background:#fff; border-radius:999px; padding:.4rem .8rem; cursor:pointer; }
.mon-filter.is-active { background:#111; color:#fff; border-color:#111; }
.mon-grid.mon-cols-2 { grid-template-columns: repeat(2,1fr); }
.mon-grid.mon-cols-3 { grid-template-columns: repeat(3,1fr); }
.mon-grid.mon-cols-4 { grid-template-columns: repeat(4,1fr); }
.mon-grid.mon-cols-5 { grid-template-columns: repeat(5,1fr); }
/* ========== GRID ========== */
.mon-grid { display:grid; gap:24px; }
@media (max-width:1024px){ .mon-grid.mon-cols-4,.mon-grid.mon-cols-3,.mon-grid.mon-cols-5 { grid-template-columns: repeat(2,1fr) !important; }.mon-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .mon-grid { grid-template-columns:1fr; } .mon-card { width:100%; } .mon-thumb-wrap{ height:200px !important; } }

/* ========== SLIDER: wrapper + tor przewijania ========== */
.mon-wrap.mon-slider { position:relative; } /* miejsce na strzałki */

.mon-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  cursor:grab;
  scrollbar-width:none;            /* Firefox – ukryj */
}
.mon-track::-webkit-scrollbar { display:none; } /* WebKit – ukryj */
.mon-track.is-dragging{ cursor:grabbing; }

/* Karty w sliderze */
.mon-track .mon-card{
  min-width:320px; width:320px; flex:0 0 auto;
  scroll-snap-align:start;
}

/* ========== KARTA ========== */
.mon-card{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #eee; border-radius:16px;
  box-shadow:0 3px 12px rgba(0,0,0,.05);
  text-decoration:none; color:inherit; overflow:hidden;
  width: 100%; margin-right: 20px;
}
.mon-thumb-wrap{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:#f5f5f7; }
.mon-thumb{ width:100%; height:100%; object-fit:cover; display:block; }

.mon-body{ padding:16px 16px 32px 16px; }
.mon-title{ font-size:18px; line-height:1.3; margin:0 0 10px; }
.mon-desc{ font-size:14px; color:#444; margin:0 0 8px; }
.mon-source{ font-size:13px; color:#666; }
.mon-type{ margin-top:10px; display:flex; gap:6px; align-items:center; font-size:13px; color:#333; }
.mon-type svg{ width:18px; height:18px; }

/* CTA (różowy narożnik) */
.mon-cta{
  position:absolute; right:0; bottom:0;
  display:inline-flex; align-items:center; justify-content:center;
  pointer-events:none;
}

/* ========== Filtr ========== */
.mon-card.is-hidden{ display:none !important; }
.mon-track.no-snap{ scroll-snap-type:none !important; }

/* ========== STRZAŁKI ========== */
.mon-arrow{
  position:absolute; top:58%; transform:translateY(-58%);
  z-index:5;
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid #e5e5e5;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.mon-arrow:hover{ box-shadow:0 3px 10px rgba(0,0,0,.12); }
.mon-prev{ left:-15px; }
.mon-next{ right:-15px; }

/* użyj icomoon jak w slicku; ukryj SVG w środku (jeśli było) */
.mon-arrow svg{ display:none; }
.mon-arrow::before{
  font-family:'icomoon';
  font-size:12px; line-height:1;
  color:#173b5b;
  content:"\43";                 /* ta sama ikona co w slick-next::before */
}
.mon-prev::before{ transform:rotate(180deg); display:inline-block; }

/* Na szerokich ekranach wysuń lekko poza wrapper */
@media (min-width:1025px){
  .mon-prev{ left:-60px !important; }
  .mon-next{ right:-60px !important; }
}

/* ========== Mobile touch ========== */
@media (hover:none) and (pointer:coarse){
  .mon-track{ touch-action:pan-x pan-y !important; scroll-snap-type:x proximity; }
}
.mon-fb-hidden {display:none;}