/* ==========================================================================
   Dzikie Ptaki - Hero Slider (dp/hero-slider)
   Wygląd bazowy: działa bez motywu klienta (wartości zapasowe), a motyw DP podaje kolory
   i font swoimi tokenami (--dp-contrast, --dp-on-accent, --dp-pasek, --dp-font, --dp-max, --dp-gutter).
   Kolory tylko w zmiennych --dp-hs-* na .dp-hs; reguły niżej używają wyłącznie var().
   Minimum: Chrome 109. Slajdy w jednej komórce grid (nie absolute) → wysokość rośnie z tekstem na telefonie.
   ========================================================================== */
.dp-hs{
  --dp-hs-accent:var(--dp-contrast, #ff6e02);
  --dp-hs-on-accent:var(--dp-on-accent, #000000);
  --dp-hs-white:#ffffff;
  --dp-hs-ink:#000000; /* tekst na białym tle przycisku po najechaniu (niezależny od akcentu) */
  --dp-hs-bg:var(--dp-ciemny, #0d0d0d);
  --dp-hs-sub-color:#d6d6d6;
  --dp-hs-place-color:rgba(255,255,255,.6);
  --dp-hs-stripe:var(--dp-pasek, linear-gradient(90deg, #02bfa5 0 25%, #3e5bfe 25% 50%, #ff6e02 50% 75%, #ff1746 75% 100%));
  --dp-hs-shade-rgb:0,0,0;
  --dp-hs-max:var(--dp-max, 1320px);
  --dp-hs-gutter:var(--dp-gutter, 48px);
  --dp-hs-font:var(--dp-font, inherit);
  --dp-hs-radius:var(--dp-radius, 4px);
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--dp-hs-bg);
  color:var(--dp-hs-white);
  font-family:var(--dp-hs-font);
}
.dp-hs.alignfull, .dp-hs.alignleft, .dp-hs.alignright{float:none;clear:both;margin-left:0;margin-right:0;max-width:none}

.dp-hs__track{display:grid}
.dp-hs__slide{grid-area:1 / 1;position:relative;z-index:0;isolation:isolate;display:flex;min-height:calc(var(--dp-hs-h, 600) * 1px);opacity:0;visibility:hidden;transition:opacity .9s ease, visibility 0s linear .9s}
.dp-hs__slide.is-active{opacity:1;visibility:visible;z-index:1;transition:opacity .9s ease, visibility 0s}

.dp-hs__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-2}
.dp-hs__img--top{object-position:center top}
.dp-hs__img--bottom{object-position:center bottom}
.dp-hs__img--left{object-position:left center}
.dp-hs__img--right{object-position:right center}

/* Przyciemnienie (wzorzec: .82 → .5 → .22 przy 50%). */
.dp-hs__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg, rgba(var(--dp-hs-shade-rgb), calc(var(--dp-hs-o, .5) + .32)) 0%, rgba(var(--dp-hs-shade-rgb), var(--dp-hs-o, .5)) 55%, rgba(var(--dp-hs-shade-rgb), calc(var(--dp-hs-o, .5) * .45)) 100%)}
.dp-hs--center .dp-hs__shade, .dp-hs--shade-even .dp-hs__shade{background:rgba(var(--dp-hs-shade-rgb), var(--dp-hs-o, .5))}

.dp-hs__inner{position:relative;width:100%;max-width:var(--dp-hs-max);margin:0 auto;padding:0 var(--dp-hs-gutter);box-sizing:border-box;display:flex;align-items:center}
.dp-hs__content{max-width:760px;padding:72px 0 88px}
.dp-hs--center .dp-hs__inner{justify-content:center;text-align:center}
.dp-hs--center .dp-hs__content{margin:0 auto}
.dp-hs--center .dp-hs__actions{justify-content:center}
.dp-hs--center .dp-hs__kicker{justify-content:center}

/* Napisy: wielkość z atrybutu (px na szerokim ekranie), proporcjonalnie mniejsza na wąskim, do minimum.
   Prefiks .dp-hs → (0,2,0), wygrywa z typografią motywu typu „main h1” (0,1,1). */
.dp-hs .dp-hs__kicker, .dp-hs .dp-hs__title, .dp-hs .dp-hs__sub, .dp-hs .dp-hs__place{margin:0;font-family:var(--dp-hs-font)}
.dp-hs .dp-hs__kicker{--min:.85;font-size:clamp(calc(var(--dp-hs-kicker) * var(--min) * 1px), calc(var(--dp-hs-kicker) * .0715vw), calc(var(--dp-hs-kicker) * 1px))}
.dp-hs .dp-hs__title{--min:.62;max-width:760px;font-size:clamp(calc(var(--dp-hs-title) * var(--min) * 1px), calc(var(--dp-hs-title) * .0715vw), calc(var(--dp-hs-title) * 1px))}
.dp-hs .dp-hs__sub{--min:.9;font-size:clamp(calc(var(--dp-hs-sub) * var(--min) * 1px), calc(var(--dp-hs-sub) * .0715vw), calc(var(--dp-hs-sub) * 1px))}
.dp-hs .dp-hs__place{--min:.92;font-size:clamp(calc(var(--dp-hs-place) * var(--min) * 1px), calc(var(--dp-hs-place) * .0715vw), calc(var(--dp-hs-place) * 1px))}

/* Styl „hasło” (wzorzec 4Values): etykieta z paskiem 4-kolorowym, hasło 700, opis, 2 przyciski, dopisek. */
.dp-hs.dp-hs--haslo .dp-hs__kicker{display:flex;align-items:center;gap:14px;margin:0 0 22px;font-weight:600;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--dp-hs-white)}
.dp-hs.dp-hs--haslo .dp-hs__kicker::before{content:"";display:block;flex:0 0 44px;width:44px;height:3px;background:var(--dp-hs-stripe)}
.dp-hs.dp-hs--haslo .dp-hs__title{font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--dp-hs-white)}
.dp-hs.dp-hs--haslo .dp-hs__sub{margin-top:20px;max-width:680px;font-weight:400;line-height:1.65;color:var(--dp-hs-sub-color)}
.dp-hs.dp-hs--center .dp-hs__sub{margin-left:auto;margin-right:auto}
.dp-hs.dp-hs--haslo .dp-hs__place{margin-top:32px;font-weight:400;line-height:1.5;color:var(--dp-hs-place-color)}

.dp-hs__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:34px}
.dp-hs__btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:var(--dp-hs-font);font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;border-radius:var(--dp-hs-radius);transition:background-color .2s ease, color .2s ease, border-color .2s ease}
.dp-hs__btn--primary{padding:17px 32px;background:var(--dp-hs-accent);color:var(--dp-hs-on-accent)}
.dp-hs__btn--ghost{padding:15.5px 28px;border:1.5px solid var(--dp-hs-white)}
/* Selektor z „a” wygrywa z kolorem linków motywu (main a{color:…}). */
.dp-hs a.dp-hs__btn--primary{color:var(--dp-hs-on-accent)}
.dp-hs a.dp-hs__btn--ghost{color:var(--dp-hs-white)}
.dp-hs a.dp-hs__btn:hover, .dp-hs a.dp-hs__btn:focus-visible{background:var(--dp-hs-white);border-color:var(--dp-hs-white);color:var(--dp-hs-ink)}
.dp-hs__btn:focus-visible, .dp-hs__dot:focus-visible, .dp-hs__arrow:focus-visible{outline:2px solid var(--dp-hs-white);outline-offset:3px}

/* Wejście tekstu przy zmianie slajdu (wzorzec: 8px w górę + przenikanie). */
@media (prefers-reduced-motion:no-preference){
  .dp-hs.is-ready .dp-hs__slide .dp-hs__content{opacity:0;transform:translateY(8px);transition:opacity .6s ease .25s, transform .7s cubic-bezier(.2,.7,.2,1) .25s}
  .dp-hs.is-ready .dp-hs__slide.is-active .dp-hs__content{opacity:1;transform:none}
}

/* Paginacja: paski w prawym dolnym rogu (aktywny 40 px, pozostałe 28 px i przygaszone). */
.dp-hs__dots{position:absolute;right:var(--dp-hs-gutter);bottom:36px;z-index:3;display:flex;align-items:center;gap:8px}
.dp-hs__dot{--dp-hs-dot-w:28px;position:relative;width:var(--dp-hs-dot-w);height:3px;padding:0;margin:0;border:0;border-radius:2px;background:var(--dp-hs-white);opacity:.35;cursor:pointer;transition:width .4s ease, opacity .4s ease;box-shadow:none}
.dp-hs__dot::before{content:"";position:absolute;left:-4px;right:-4px;top:-14px;bottom:-14px} /* większy obszar kliknięcia */
.dp-hs__dot:hover{opacity:.7;background:var(--dp-hs-white)}
.dp-hs__dot.is-active, .dp-hs__dot.is-active:hover{--dp-hs-dot-w:40px;opacity:1;background:var(--dp-hs-white)}

/* Strzałki (opcjonalne). */
.dp-hs__arrow{position:absolute;top:50%;z-index:3;width:48px;height:48px;margin-top:-24px;padding:0;background:rgba(var(--dp-hs-shade-rgb), .35);border:1px solid rgba(255,255,255,.3);border-radius:var(--dp-hs-radius);color:var(--dp-hs-white);cursor:pointer;transition:background-color .2s ease}
.dp-hs__arrow:hover{background:rgba(var(--dp-hs-shade-rgb), .6)}
.dp-hs__arrow--prev{left:clamp(12px,2vw,28px)}
.dp-hs__arrow--next{right:clamp(12px,2vw,28px)}
.dp-hs__arrow span{position:absolute;left:50%;top:50%;width:10px;height:10px;border-top:1.5px solid currentColor;border-left:1.5px solid currentColor}
.dp-hs__arrow--prev span{transform:translate(-30%,-50%) rotate(-45deg)}
.dp-hs__arrow--next span{transform:translate(-70%,-50%) rotate(135deg)}

@media (max-width:767px){
  .dp-hs{--dp-hs-gutter:var(--dp-gutter, 20px)}
  .dp-hs__slide{min-height:min(calc(var(--dp-hs-h, 600) * 1px), 560px)}
  .dp-hs__content{padding:56px 0 72px}
  /* Na telefonie tekst zajmuje całą szerokość: przyciemnienie pionowe, równe pod tekstem. */
  .dp-hs__shade{background:linear-gradient(180deg, rgba(var(--dp-hs-shade-rgb), calc(var(--dp-hs-o, .5) + .1)) 0%, rgba(var(--dp-hs-shade-rgb), calc(var(--dp-hs-o, .5) + .28)) 100%)}
  .dp-hs__arrow{display:none}
  .dp-hs__dots{left:var(--dp-hs-gutter);right:auto;bottom:28px}
}
@media (max-width:520px){
  .dp-hs__actions{flex-direction:column;align-items:stretch}
}

/* Edytor: pełna szerokość płótna, paski bez reakcji na klik (podgląd wybiera panel slajdu). */
.editor-styles-wrapper .dp-hs.alignfull{width:100%;max-width:100%;margin-left:0}
.editor-styles-wrapper .dp-hs__arrow, .editor-styles-wrapper .dp-hs__dot, .editor-styles-wrapper .dp-hs__btn{pointer-events:none}