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

.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;

  /* Desktop: 3 boksy. PHP capuje też columns max=3, więc UI jest spójne niezależnie od shortcode. */
  --zgs-cols:3;
  --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;
}

/* Mobile nav pod boxem (DOM istnieje zawsze, pokazujemy tylko na mobile) */
.zgs .zgs-bottomnav{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:8px;
  padding:0 10px 12px 10px;
}

/* Mobile: lżejsze przyciski przełączania pod boxem */
.zgs[data-bp="sm"] .zgs-bottomnav .zgs-nav{
  width:54px;
  height:40px;
  border-radius:12px;
  box-shadow:none;
  background:rgba(255,255,255,.84);
}

.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 potrafi powodować ucinanie na wąskich viewportach, gdy breakpoint nie zaskoczy (cache/viewport). */
  min-width:0;
  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:767px){
  /* Mobile: 1 boks + maksymalne uproszczenie UI */
  .zgs{
    --zgs-cols-effective:1;
    --zgs-card-h:auto;
    --zgs-media-h:165px;
    --zgs-gap:12px;
  }
  .zgs .zgs-card{ flex:0 0 100%; min-width:0; }
  .zgs .zgs-body::before,
  .zgs .zgs-body::after{ display:none; }
  .zgs .zgs-viewport{
    padding:10px 10px 12px 10px;
    scroll-padding-left:10px;
    scroll-padding-right:10px;
  }
  .zgs .zgs-head{ flex-direction:column; align-items:stretch; gap:10px; }

  /* Uproszczenie: chowamy nawigację i kropki, zostaje swipe/scroll */
  .zgs .zgs-head-right{ display:none !important; }

  /* Na mobile pokazujemy strzałki pod boxem */
  .zgs .zgs-bottomnav{ display:flex; }

  /* Wyłącz przyciski hashtagów (tagi) na mobile */
  .zgs .zgs-chip[data-kind="tag"]{ display:none !important; }

  /* Filtry w jednym rzędzie (scroll poziomy), bez zawijania i bez separatorów */
  .zgs .zgs-chips{
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
    gap:8px;
  }
  .zgs .zgs-chips::-webkit-scrollbar{ display:none; }
  .zgs .zgs-chip{ flex:0 0 auto; white-space:nowrap; }
  .zgs .zgs-chip-sep{ display:none; }

  /* CTA ma być „bezpieczne” - pełna szerokość, brak ryzyka nachodzenia */
  .zgs .zgs-cta{ width:100%; }

  /* Mobile minimal: chowamy tag-badge, zostawiamy tylko typ */
  .zgs .zgs-badge.is-tag{ display:none; }
}

/*
  Breakpointy oparte o szerokość kontenera (JS ustawia data-bp).
  Cel: niezależnie od cache / brakującego viewport meta / osadzenia w wąskiej kolumnie,
  slider ma się przełączać na 2/1 kolumny i nie ucinać kart.
*/
.zgs[data-bp="md"]{
  --zgs-cols-effective:var(--zgs-cols-md);
  --zgs-card-h:360px;
  --zgs-media-h:160px;
}

.zgs[data-bp="sm"]{
  --zgs-cols-effective:1;
  --zgs-card-h:auto;
  --zgs-media-h:165px;
  --zgs-gap:12px;
}

/* Mobile: wymuś 1 boks bez ryzyka "ucięcia" przez flex-basis w śliskich układach */
.zgs[data-bp="sm"] .zgs-card{ flex:0 0 100%; }

/* Mobile minimal: ciaśniejszy head */
.zgs[data-bp="sm"] .zgs-head{ margin-bottom:6px; }
.zgs[data-bp="sm"] .zgs-chip{ padding:6px 9px !important; }

.zgs[data-bp="sm"] .zgs-body::before,
.zgs[data-bp="sm"] .zgs-body::after{ display:none; }

.zgs[data-bp="sm"] .zgs-viewport{
  padding:10px 10px 12px 10px;
  scroll-padding-left:10px;
  scroll-padding-right:10px;
}

.zgs[data-bp="sm"] .zgs-head{ flex-direction:column; align-items:stretch; gap:10px; }
.zgs[data-bp="sm"] .zgs-head-right{ display:none !important; }

/* Mobile: strzałki pod boxem + wyłącz hashtagi w filtrach */
.zgs[data-bp="sm"] .zgs-bottomnav{ display:flex; }
.zgs[data-bp="sm"] .zgs-chip[data-kind="tag"]{ display:none !important; }
.zgs[data-bp="sm"] .zgs-badge.is-tag{ display:none; }

.zgs[data-bp="sm"] .zgs-chips{
  flex-wrap:nowrap !important;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
  gap:8px;
}
.zgs[data-bp="sm"] .zgs-chips::-webkit-scrollbar{ display:none; }
.zgs[data-bp="sm"] .zgs-chip{ flex:0 0 auto; white-space:nowrap; }
.zgs[data-bp="sm"] .zgs-chip-sep{ display:none; }
.zgs[data-bp="sm"] .zgs-cta{ width:100%; }

.zgs[data-bp="sm"] .zgs-desc{ -webkit-line-clamp:3; }


.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;
}

/* Mobile: obraz ma się skalować poprawnie (bez deformacji) - aspect ratio 1429x775 */
.zgs[data-bp="sm"] .zgs-media{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:1429/775;
}

@media (max-width:767px){
  .zgs .zgs-media{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:1429/775;
  }
}

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

/* Mobile minimal: bez powiększenia (żeby nie wyglądało jak przycięte) */
.zgs[data-bp="sm"] .zgs-media img{ transform:none; }

/* Mobile minimal: lżejsza karta */
.zgs[data-bp="sm"] .zgs-card{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
}
.zgs[data-bp="sm"] .zgs-content{ padding:10px 12px 12px 12px; }
.zgs[data-bp="sm"] .zgs-desc{ -webkit-line-clamp:2; }
.zgs[data-bp="sm"] .zgs-date{ display:none; }


.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:flex-start;
  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;
  /* anti-overlap: tytuł max 2 linie */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

.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;
  /* anti-overlap: opis jest clampowany żeby nie wchodził pod CTA */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}

@media (max-width:767px){
  .zgs .zgs-desc{ -webkit-line-clamp:3; }
}

/* 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; }



/*
  PHONE OVERRIDES (hard mobile mode)
  Cel: wymusić poprawny mobile UI nawet gdy:
  - brakuje meta viewport (layout viewport ~980px)
  - JS jest opóźniony przez optymalizator
  - cache serwuje desktopowe HTML
  Wpływ: TYLKO mobile (urządzenia dotykowe / małe device-width).
*/
@media (max-device-width: 767px), (hover: none) and (pointer: coarse) and (max-device-width: 1024px){
  .zgs{
    --zgs-cols-effective:1;
    --zgs-card-h:auto;
    --zgs-media-h:165px;
    --zgs-gap:12px;
    max-width:100vw;
    overflow-x:hidden;
  }

  .zgs .zgs-shell,
  .zgs .zgs-body{ overflow-x:hidden; }

  /* blokujemy globalny horizontal scroll strony, ale wewnętrzny scroll slidera zostaje */
  .zgs .zgs-viewport{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:10px 10px 12px 10px;
    scroll-padding-left:10px;
    scroll-padding-right:10px;
  }

  .zgs .zgs-track{ max-width:100% !important; }

  .zgs .zgs-card{
    flex:0 0 100% !important;
    max-width:100% !important;
    min-width:0 !important;
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
  }

  .zgs .zgs-body::before,
  .zgs .zgs-body::after{ display:none !important; }

  /* tylko strzałki pod boxem */
  .zgs .zgs-head-right{ display:none !important; }
  .zgs .zgs-bottomnav{ display:flex !important; width:100%; }

  /* filtry: tylko typy, bez hashtagów */
  .zgs .zgs-chip[data-kind="tag"]{ display:none !important; }
  .zgs .zgs-chip-sep{ display:none !important; }
  .zgs .zgs-chips{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .zgs .zgs-chips::-webkit-scrollbar{ display:none; }
  .zgs .zgs-chip{ flex:0 0 auto; white-space:nowrap; }

  /* minimalizm w karcie */
  .zgs .zgs-badge.is-tag{ display:none !important; }
  .zgs .zgs-date{ display:none !important; }
  .zgs .zgs-desc{ -webkit-line-clamp:2; }

  /* obraz: bez deformacji i bez "ucięcia" przez sztuczne powiększenie */
  .zgs .zgs-media{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:1429/775;
  }
  .zgs .zgs-media img{ transform:none !important; }
}