/* ds_banners front */
.ds-banners-group{position:relative;margin:0 auto 16px;overflow:hidden}
.ds-banners-track{display:flex;transition:transform .4s ease}
.ds-banners-single .ds-banners-track,.ds-banners-newest .ds-banners-track,.ds-banners-random .ds-banners-track{display:block}
.ds-banners-grid .ds-banners-track{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(var(--ds-banners-min,180px),1fr))}
.ds-banners-grid[data-ds-grid-mode="columns"] .ds-banners-track{grid-template-columns:repeat(var(--ds-banners-cols,3),1fr)}
.ds-banners-grid[data-ds-feature-first="1"] .ds-banners-slide:first-child{grid-column:span 2}
.ds-banners-slide{position:relative;flex:0 0 100%}
.ds-banners-img{display:block;width:100%;height:auto}
.ds-banners-link{display:block;text-decoration:none;color:inherit}
.ds-banners-caption{position:absolute;left:0;bottom:0;padding:14px 18px;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;width:100%;box-sizing:border-box}
.ds-banners-title{display:block;font-size:18px;font-weight:700}
.ds-banners-btn{display:inline-block;margin-top:8px;background:#e74c3c;color:#fff;padding:8px 18px;border-radius:4px;font-size:13px}
/* 2.8.0: wyrównanie przycisku slajdu (pole „Wyrównanie przycisku”). */
.ds-banners-caption--btn-center .ds-banners-btn,.ds-banners-caption--btn-right .ds-banners-btn{display:table}
.ds-banners-caption--btn-center .ds-banners-btn{margin-left:auto;margin-right:auto}
.ds-banners-caption--btn-right .ds-banners-btn{margin-left:auto}
/* 2.9.0: położenie tekstu i przycisku (pole „Położenie tekstu i przycisku”). */
.ds-banners-caption--pos-center{text-align:center}
.ds-banners-caption--pos-right{text-align:right}
/* 2.10.0: tekst i przycisk tylko na komputerze / tylko na telefonie (pole „Tekst i przycisk na grafice”). */
@media (max-width:767px){.ds-banners-caption--only-desktop{display:none}}
@media (min-width:768px){.ds-banners-caption--only-mobile{display:none}}
.ds-banners-video iframe,.ds-banners-video video{width:100%;aspect-ratio:16/9;border:0;display:block}
.ds-banners-prev,.ds-banners-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);color:#fff;border:0;font-size:26px;line-height:1;width:40px;height:48px;cursor:pointer;z-index:2}
.ds-banners-prev{left:0}.ds-banners-next{right:0}
.ds-banners-dots{position:absolute;bottom:8px;left:0;right:0;text-align:center;z-index:2}
.ds-banners-dots span{display:inline-block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.6);margin:0 4px;cursor:pointer}
.ds-banners-dots span.active{background:#fff}
.ds-banners-popup{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9999;max-width:90vw;box-shadow:0 8px 40px rgba(0,0,0,.4);background:#fff}
.ds-banners-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.2)}
.ds-banners-close{position:absolute;top:6px;right:8px;background:rgba(0,0,0,.5);color:#fff;border:0;width:28px;height:28px;border-radius:50%;font-size:18px;cursor:pointer;z-index:3}

/* --- Szerokość sekcji (Z-009) -------------------------------------------------
   Domyślnie sekcja siedzi w .container motywu i dziedziczy jego marginesy.
   Tryb "full" to świadomy pas hero: bez kontenera, ale i bez sztuczek typu
   100vw + ujemne marginesy (te dają poziomy scroll przy widocznym pasku). */
.ds-banners-section{margin:0 0 24px}
.ds-banners-section--full{margin-left:0;margin-right:0;width:100%;overflow-x:clip}
.ds-banners-section--full .ds-banners-group{max-width:none}


/* --- DN-2 pkt 4 i 5 -----------------------------------------------------------

   `auto-fill` → `auto-fit`: `auto-fill` TWORZY PUSTE TORY, żeby wypełnić wiersz, więc
   trzy banery wyglądały, jakby brakowało trzech kolejnych („3 banery, a wygląda jakby
   miało być 6"). `auto-fit` puste tory zwija. Do tego tryb kolumnowy — dla redaktorów,
   którzy myślą „chcę trzy w rzędzie", a nie „chcę tory po 260 px".

   `--ds-banners-height` pochodzi z pola „Wysokość (px)", które do 2.1.4 zapisywało się
   do bazy i NIGDY nie było czytane przez front. Działa jako maksymalna wysokość kadru,
   a nie sztywna: `object-fit: cover` przycina obraz zamiast go rozciągać.
   ------------------------------------------------------------------------------ */
.ds-banners-group[style*="--ds-banners-height"] .ds-banners-img,
.ds-banners-group[style*="--ds-banners-height"] .ds-banners-video iframe,
.ds-banners-group[style*="--ds-banners-height"] .ds-banners-video video{
    max-height:var(--ds-banners-height);
    height:var(--ds-banners-height);
    object-fit:cover;
}

/* Pasek przyklejony: krawędź i szerokość z konfiguracji grupy. Wcześniej było na sztywno
   `left:0;right:0;bottom:0`, stąd zgłoszenie „rozciągnięte na cały ekran, ale wyrównuje
   do dołu" — bez możliwości wyboru. */
.ds-banners-section--sticky{margin:0}
.ds-banners-section--sticky .ds-banners-sticky{position:fixed;z-index:9998;background:#fff}
.ds-banners-section--bottom .ds-banners-sticky{bottom:0;top:auto;box-shadow:0 -2px 12px rgba(0,0,0,.2)}
.ds-banners-section--top .ds-banners-sticky{top:0;bottom:auto;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.ds-banners-section--bar .ds-banners-sticky{left:0;right:0;max-width:none}
.ds-banners-section--boxed .ds-banners-sticky{left:50%;right:auto;transform:translateX(-50%);width:min(720px,calc(100% - 24px));border-radius:6px}
.ds-banners-section--boxed.ds-banners-section--bottom .ds-banners-sticky{bottom:16px}
.ds-banners-section--boxed.ds-banners-section--top .ds-banners-sticky{top:16px}

/* Ukrycie startowe popupu i paska. Klasa przychodzi Z SERWERA (widget.tpl), a JavaScript
   ją ZDEJMUJE, gdy baner ma się pokazać — nigdy odwrotnie. Nakładanie ukrycia dopiero
   z JS-a zawsze jest za późno: przeglądarka zdąży narysować klatkę i zamknięty popup
   miga przy każdym wczytaniu strony (DN-7 pkt 5 i 6).
   `visibility`, nie `display`, żeby układ nie przeskakiwał w chwili pokazania. */
.ds-banners--czeka{visibility:hidden}

/* 2.3.0 (Z-042): nagłówek sekcji i <picture> z wariantem WebP. */
.ds-banners-heading{margin:0 0 12px;font-size:1.5rem;font-weight:700;line-height:1.25}
.ds-banners-link picture{display:block}

/* 2.4.0 (DN-7 runda 2 pkt 4): popup / pasek z kilkoma banerami = karuzela w oknie.
   Okno ma stałą szerokość (slajdy mają po 100%), inaczej zapadłoby się do zera. */
.ds-banners-popup.ds-banners-multi{width:min(90vw,640px)}
.ds-banners-multi .ds-banners-track{touch-action:pan-y}
.ds-banners-multi .ds-banners-dots span{box-shadow:0 0 0 1px rgba(0,0,0,.35)}

/* 2.4.1: podpis slajdu nie wchodzi pod strzałki ani kropki (odbiór demo, motyw dynamite).
   Strzałki mają 40 px i leżą na środku wysokości, kropki przy dolnej krawędzi. */
.ds-banners-text{display:block}
/* 2.7.0: akapity edytora w tytule (span.dsb-line) i w tekście slajdu */
.ds-banners-title .dsb-line{display:block}
.ds-banners-text p{margin:0}
.ds-banners-carousel .ds-banners-caption,.ds-banners-multi .ds-banners-caption{padding:14px 52px 34px}
@media (max-width:480px){
  .ds-banners-carousel .ds-banners-caption,.ds-banners-multi .ds-banners-caption{padding:10px 46px 30px}
  .ds-banners-carousel .ds-banners-title,.ds-banners-multi .ds-banners-title{font-size:16px}
  .ds-banners-carousel .ds-banners-text,.ds-banners-multi .ds-banners-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px}
  .ds-banners-carousel .ds-banners-btn,.ds-banners-multi .ds-banners-btn{margin-top:6px;padding:6px 14px}
  /* wąski ekran: obraz bywa niski (np. 110 px), podpis nakładany na niego byłby ucięty —
     podpis przechodzi pod obraz, na ciemne tło */
  .ds-banners-carousel .ds-banners-caption,.ds-banners-multi .ds-banners-caption{position:static;background:#232a35}
  .ds-banners-prev,.ds-banners-next{width:36px}
}