/* Zegger Slider Pro - Front (subtelny monochrom) */

.zgs{
  --zgs-text:#111827;
  --zgs-muted:rgba(17,24,39,.58);
  --zgs-border:rgba(17,24,39,.12);
  --zgs-border-strong:rgba(17,24,39,.18);
  --zgs-surface:rgba(17,24,39,.03);
  --zgs-surface-2:rgba(17,24,39,.05);
  --zgs-shadow:0 10px 26px rgba(17,24,39,.08);
  --zgs-shadow-soft:0 6px 16px rgba(17,24,39,.06);

  --zgs-radius:18px;
  --zgs-radius-sm:6px;
  --zgs-gap:16px;

  --zgs-cols:4;
  --zgs-cols-md:2;
  --zgs-cols-effective:var(--zgs-cols);

  --zgs-card-h:380px;
  --zgs-media-h:170px;

  --zgs-font-title:13px;
  --zgs-font-desc:12px;
  --zgs-font-meta:10.5px;
  --zgs-font-badge:9px;
  --zgs-font-cta:11px;

  width:100%;
  max-width:100%;
}

.zgs, .zgs *{ box-sizing:border-box; }

.zgs .zgs-shell{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
}

/* TOP (opcjonalny) */
.zgs .zgs-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 0 10px 0;
  flex-wrap:wrap;
}
.zgs .zgs-heading{
  margin:0;
  font-size:18px;
  font-weight:800;
  color:var(--zgs-text);
}
.zgs .zgs-all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:rgba(17,24,39,.78);
  font-size:13px;
  font-weight:650;
}
.zgs .zgs-all-ic{
  width:10px; height:10px;
  border-right:2px solid rgba(17,24,39,.55);
  border-bottom:2px solid rgba(17,24,39,.55);
  transform:rotate(-45deg);
  margin-top:-1px;
}

/* HEAD */
.zgs .zgs-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin:0 0 10px 0;
  flex-wrap:wrap;
}

.zgs .zgs-head > *{ min-width:0; }
.zgs .zgs-head-right{ margin-left:auto; }

.zgs .zgs-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  min-width:0;
}

.zgs .zgs-chip-sep{
  width:1px;
  height:22px;
  background:rgba(17,24,39,.12);
  margin:0 2px;
}

/* CHIP (aktywny jasny, nieaktywny wyszarzony) */
.zgs .zgs-chip{
  appearance:none;
  border:1px solid var(--zgs-border) !important;
  background:var(--zgs-surface) !important;
  color:rgba(17,24,39,.45) !important;
  border-radius:var(--zgs-radius-sm) !important;
  padding:7px 10px !important;
  font-size:12px !important;
  font-weight:650 !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  cursor:pointer !important;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
  user-select:none;
}

.zgs .zgs-chip::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(17,24,39,.22);
}

/* tagi w chipach jako # (zamiast kropki) */
.zgs .zgs-chip[data-kind="tag"]{ gap:6px !important; }
.zgs .zgs-chip[data-kind="tag"]::before{
  content:"#";
  width:auto;
  height:auto;
  border-radius:0;
  background:transparent;
  font-weight:800;
  font-size:12px;
  line-height:1;
  color:rgba(17,24,39,.28);
  margin-top:-1px;
}
.zgs .zgs-chip.is-active[data-kind="tag"]::before{ color:rgba(17,24,39,.55); }


/* doty typu - zapalone tylko gdy active */
.zgs .zgs-chip.is-active[data-kind="type"][data-tag="aktualnosci"]::before{ background:#22c55e; }
.zgs .zgs-chip.is-active[data-kind="type"][data-tag="porady"]::before{ background:#3b82f6; }

.zgs .zgs-chip.is-active{
  background:rgba(255,255,255,.70) !important;
  color:rgba(17,24,39,.92) !important;
  border-color:var(--zgs-border-strong) !important;
  box-shadow:0 1px 0 rgba(17,24,39,.04) !important;
  opacity:1 !important;
}

.zgs .zgs-chip:not(.is-active){
  opacity:.75;
}

/* prawy blok: kropki + nav */
.zgs .zgs-head-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.zgs .zgs-dots{
  display:flex;
  align-items:center;
  gap:6px;
  max-width:260px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.zgs .zgs-dots::-webkit-scrollbar{ display:none; }

.zgs .zgs-dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(17,24,39,.25);
  border:0;
  padding:0;
  cursor:pointer;
  transition:width .18s ease, background .18s ease, opacity .18s ease;
  opacity:.8;
}

.zgs .zgs-dot.is-active{
  width:18px;
  background:rgba(17,24,39,.48);
  opacity:1;
}

.zgs .zgs-topnav{
  display:flex;
  align-items:center;
  gap:8px;
}

.zgs .zgs-nav{
  width:44px;
  height:34px;
  border-radius:10px;
  border:1px solid var(--zgs-border);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 0 0 2px rgba(255,255,255,.55), 0 10px 22px rgba(17,24,39,.10);
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
}

.zgs .zgs-nav[disabled]{
  opacity:.35;
  cursor:default;
  box-shadow:0 0 0 2px rgba(255,255,255,.35), 0 8px 18px rgba(17,24,39,.07);
}

.zgs .zgs-nav-ic{
  width:10px;
  height:10px;
  border-right:2px solid rgba(17,24,39,.62);
  border-bottom:2px solid rgba(17,24,39,.62);
}

.zgs .zgs-ic-left{ transform:rotate(135deg); margin-left:2px; }
.zgs .zgs-ic-right{ transform:rotate(-45deg); margin-right:2px; }

/* BODY + SCRIM */
.zgs .zgs-body{ position:relative; }
.zgs .zgs-body::before,
.zgs .zgs-body::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:36px;
  pointer-events:none;
  z-index:1;
}
.zgs .zgs-body::before{
  left:0;
  background:linear-gradient(to right, rgba(255,255,255,.85), rgba(255,255,255,0));
}
.zgs .zgs-body::after{
  right:0;
  background:linear-gradient(to left, rgba(255,255,255,.85), rgba(255,255,255,0));
}

/* VIEWPORT */
.zgs .zgs-viewport{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding-left:16px;
  scroll-padding-right:16px;
  padding:16px 16px 18px 16px;
}

/* hide scrollbar */
.zgs .zgs-viewport{ scrollbar-width:none; }
.zgs .zgs-viewport::-webkit-scrollbar{ display:none; }

.zgs .zgs-track{
  display:flex;
  gap:var(--zgs-gap);
  align-items:stretch;
}

/* CARD */
.zgs .zgs-card{
  flex:0 0 calc((100% - (var(--zgs-gap) * (var(--zgs-cols-effective) - 1))) / var(--zgs-cols-effective));
  min-width:240px;
  height:var(--zgs-card-h);
  border:1px solid var(--zgs-border);
  border-radius:var(--zgs-radius);
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:var(--zgs-shadow-soft);
  overflow:hidden;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
}

@media (max-width:980px){
  .zgs{ --zgs-cols-effective:var(--zgs-cols-md); --zgs-card-h:360px; --zgs-media-h:160px; }
  .zgs .zgs-card{ flex-basis:calc((100% - (var(--zgs-gap) * 1)) / 2); }
}
@media (max-width:640px){
  /* Mobile: więcej "oddechu" + stabilniejszy layout */
  .zgs{
    --zgs-cols-effective:1;
    --zgs-gap:14px;
    --zgs-card-h:420px;
    --zgs-media-h:180px;

    --zgs-font-title:15px;
    --zgs-font-desc:13px;
    --zgs-font-meta:11px;
    --zgs-font-badge:10px;
    --zgs-font-cta:12px;
  }

  /* karta prawie na pełną szerokość (z lekkim "peek" następnej) */
  .zgs .zgs-card{ flex-basis:92%; min-width:0; }

  /* scrim węższy na telefonie */
  .zgs .zgs-body::before,
  .zgs .zgs-body::after{ width:20px; }
  .zgs .zgs-body::before{
    background:linear-gradient(to right, rgba(255,255,255,.65), rgba(255,255,255,0));
  }
  .zgs .zgs-body::after{
    background:linear-gradient(to left, rgba(255,255,255,.65), rgba(255,255,255,0));
  }

  /* większe paddingi viewportu - nie jest "ściśnięte" */
  .zgs .zgs-viewport{
    padding:16px 14px 18px 14px;
    scroll-padding-left:14px;
    scroll-padding-right:14px;
  }

  /* układ główki */
  .zgs .zgs-head{ flex-direction:column; align-items:stretch; }
  .zgs .zgs-topnav{ justify-content:flex-end; }
  .zgs .zgs-chip{ padding:8px 11px !important; font-size:13px !important; }
  .zgs .zgs-chip[data-kind="tag"]::before{ font-size:13px; }
  .zgs .zgs-chips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .zgs .zgs-chips::-webkit-scrollbar{ display:none; }
  .zgs .zgs-dots{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .zgs .zgs-dots::-webkit-scrollbar{ display:none; }

  /* content bardziej czytelny */
  .zgs .zgs-content{ padding:12px 14px 14px 14px; }
  .zgs .zgs-cta{ padding:11px 12px; }
}

@media (max-width:380px){
  .zgs .zgs-card{ flex-basis:94%; }
  .zgs .zgs-nav{ width:42px; }
}

.zgs .zgs-media{
  height:var(--zgs-media-h) !important;
  min-height:var(--zgs-media-h) !important;
  max-height:var(--zgs-media-h) !important;
  background:rgba(17,24,39,.04);
  overflow:hidden;
}

.zgs .zgs-media img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block;
  transform:scale(1.02);
}

.zgs .zgs-media-placeholder{
  width:100%;
  height:100%;
  background:linear-gradient(135deg, rgba(17,24,39,.06), rgba(17,24,39,.02));
}

/* CONTENT */
.zgs .zgs-content{
  padding:10px 12px 12px 12px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}

.zgs .zgs-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 8px 0;
}

.zgs .zgs-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 7px;
  border-radius:var(--zgs-radius-sm) !important;
  border:1px solid rgba(17,24,39,.10);
  background:rgba(255,255,255,.70);
  font-size:var(--zgs-font-badge) !important;
  font-weight:650;
  color:rgba(17,24,39,.72);
  line-height:1;
}

.zgs .zgs-badge.is-type{
  background:rgba(17,24,39,.06);
  color:rgba(17,24,39,.70);
}

.zgs .zgs-badge.is-tag::before{
  content:"#";
  margin-right:4px;
  opacity:.55;
}

.zgs .zgs-title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:0 0 6px 0;
}

.zgs .zgs-title{
  margin:0;
  font-size:var(--zgs-font-title) !important;
  font-weight:700;
  color:var(--zgs-text) !important;
  line-height:1.15;
}

.zgs .zgs-date{
  font-size:var(--zgs-font-meta) !important;
  color:rgba(17,24,39,.48) !important;
  white-space:nowrap;
}

.zgs .zgs-desc{
  margin:0;
  font-size:var(--zgs-font-desc) !important;
  color:rgba(17,24,39,.62) !important;
  line-height:1.35;
  flex:1 1 auto;
}

/* CTA (jasne, subtelne) */
.zgs .zgs-cta{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  color:rgba(17,24,39,.85);
  border:1px solid var(--zgs-border);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-radius:12px;
  padding:10px 12px;
  font-size:var(--zgs-font-cta) !important;
  font-weight:750;
  box-shadow:0 0 0 2px rgba(255,255,255,.45), 0 10px 22px rgba(17,24,39,.08);
}

.zgs .zgs-cta-ic{
  width:10px;
  height:10px;
  border-right:2px solid rgba(17,24,39,.55);
  border-bottom:2px solid rgba(17,24,39,.55);
  transform:rotate(-45deg);
  margin-top:-1px;
}

/* Drag UX */
.zgs .zgs-viewport.is-grabbing{ cursor:grabbing; }
.zgs .zgs-viewport.is-grabbing *{ user-select:none; }



/* filtrowanie */
.zgs .zgs-card.is-hidden{ display:none !important; }


@media (max-width:740px) and (min-width:641px){
  .zgs .zgs-dots{ max-width:100%; }
  .zgs .zgs-head-right{ width:100%; display:flex; justify-content:flex-end; }
  .zgs .zgs-dots{ overflow-x:auto; scrollbar-width:none; }
  .zgs .zgs-dots::-webkit-scrollbar{ display:none; }
}

@media (max-width:640px){
  /* Mobile: 1 karta na ekran, większa czytelność, więcej "oddechu" */
  .zgs{
    --zgs-gap:12px;

    /* zwiększ przestrzeń - żeby nie było efektu upchnięcia */
    --zgs-card-h:420px;
    --zgs-media-h:180px;

    /* mobilne fonty większe i czytelniejsze */
    --zgs-font-title:15px;
    --zgs-font-desc:13px;
    --zgs-font-meta:11px;
    --zgs-font-badge:10px;
    --zgs-font-cta:12px;
  }

  .zgs .zgs-head{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  /* filtry: poziomy scroll + większy hitbox */
  .zgs .zgs-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 0 6px 0;
    gap:10px;
  }
  .zgs .zgs-chips::-webkit-scrollbar{ display:none; }

  .zgs .zgs-chip{
    padding:9px 12px !important;
    font-size:13px !important;
  }

  /* prawa strefa: kropki + strzałki w jednym wierszu, bez ścisku */
  .zgs .zgs-head-right{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .zgs .zgs-dots{
    max-width:none;
    flex:1 1 auto;
  }
  .zgs .zgs-topnav{
    flex:0 0 auto;
    justify-content:flex-end;
  }
  .zgs .zgs-nav{
    width:48px;
    height:38px;
  }

  /* scrim węższy na mobile (optycznie mniej zabiera miejsca) */
  .zgs .zgs-body::before,
  .zgs .zgs-body::after{
    width:18px;
    opacity:.75;
  }

  /* viewport: większe paddingi + poprawione scroll-padding */
  .zgs .zgs-viewport{
    padding:14px 14px 18px 14px;
    scroll-padding-left:14px;
    scroll-padding-right:14px;
  }

  /* klucz: pełna szerokość karty na mobile */
  .zgs .zgs-card{
    flex:0 0 100%;
    min-width:0; /* usuwa problem w ciasnych kolumnach Divi */
  }

  /* content: większy oddech, mniej "ścisku" */
  .zgs .zgs-content{
    padding:12px 14px 14px 14px;
  }
  .zgs .zgs-badges{ margin:0 0 10px 0; }
  .zgs .zgs-title-row{ margin:0 0 8px 0; }
  .zgs .zgs-desc{ line-height:1.42; }

  .zgs .zgs-cta{
    padding:12px 14px;
    border-radius:12px;
  }
}