/* Nowy slider strony glownej (YOOtheme slideshow z klasa zw-hero; na razie tylko strona demo007).
   Zdjecie na cala szerokosc z Ken Burns, cieply gradient zamiast kafla, bez lukow. Rozdzialy 01-04
   z paskiem postepu buduje zewsi-hero.js; na telefonie paski u gory jak w relacjach. */

.zw-hero{--zw-hero-czas:7s;position:relative;z-index:2;margin-bottom:-150px !important} /* nachodzi na kremowy pas z atutami, jak stary slider */
.zw-hero .uk-slideshow-items{border-radius:28px;overflow:hidden;isolation:isolate}
.zw-hero .uk-slideshow-items > *::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(43,10,5,.84) 0%,rgba(43,10,5,.55) 36%,rgba(43,10,5,0) 68%),linear-gradient(0deg,rgba(43,10,5,.55) 0%,rgba(43,10,5,0) 34%)}
.zw-hero .uk-slideshow-items > * > .uk-position-cover.uk-flex{z-index:2;padding:56px 56px 128px}
.zw-hero .el-overlay{max-width:640px;padding:0 !important;background:none !important}
.zw-hero .el-meta{display:flex;align-items:center;gap:12px;margin:0 0 16px !important;font:600 12px/1.2 Inter,system-ui,sans-serif !important;letter-spacing:.18em;text-transform:uppercase;color:#f0c27a !important}
.zw-hero .el-meta::before{content:"";width:34px;height:1px;background:currentColor}
.zw-hero .el-title{margin:0 !important;font-family:"Cormorant Garamond","Cormorant",Georgia,serif !important;font-weight:600 !important;font-size:clamp(38px,5.2vw,70px) !important;line-height:1.02 !important;letter-spacing:-.01em;color:#fff !important;text-wrap:balance}
.zw-hero .el-content{margin-top:18px !important;max-width:520px;font:400 18px/1.6 Inter,system-ui,sans-serif;color:#f3e8e0 !important}
.zw-hero .el-link{display:inline-flex;align-items:center;gap:10px;height:52px;margin-top:6px;padding:0 30px;border:0;border-radius:999px;background:#f0c27a !important;color:#3a1710 !important;font:700 13px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;transition:background .2s,transform .2s}
.zw-hero .el-link::after{content:"→";font-size:16px;letter-spacing:0;transition:transform .2s}
.zw-hero .el-link:hover{background:#fff !important;transform:translateY(-1px)}
.zw-hero .el-link:hover::after{transform:translateX(3px)}

/* rozdzialy */
.zw-hero__rozdzialy{position:absolute;left:56px;right:56px;bottom:32px;z-index:2;display:grid;grid-template-columns:repeat(var(--zw-hero-ile,4),1fr);gap:20px;margin:0;padding:0;list-style:none}
.zw-hero__rozdzial{display:block;width:100%;padding:14px 0 0;border:0;background:none;text-align:left;color:rgba(255,255,255,.62);font:500 13px/1.3 Inter,system-ui,sans-serif;cursor:pointer;position:relative;transition:color .2s}
.zw-hero__rozdzial::before,.zw-hero__rozdzial::after{content:"";position:absolute;left:0;top:0;height:2px;border-radius:2px}
.zw-hero__rozdzial::before{right:0;background:rgba(255,255,255,.28)}
.zw-hero__rozdzial::after{width:0;background:#f0c27a}
.zw-hero__rozdzial b{display:block;margin-bottom:2px;font:600 12px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;color:inherit}
.zw-hero__rozdzial:hover,.zw-hero__rozdzial.is-on{color:#fff}
.zw-hero__rozdzial.is-on::after{animation:zw-hero-postep var(--zw-hero-czas) linear forwards}
.zw-hero__rozdzial.is-done::after{width:100%}
.zw-hero__rozdzial:focus-visible{outline:2px solid #f0c27a;outline-offset:4px}
@keyframes zw-hero-postep{from{width:0}to{width:100%}}

@media (max-width:959px){
  .zw-hero{margin-bottom:-110px !important}
  .zw-hero .uk-slideshow-items{border-radius:22px}
  .zw-hero .uk-slideshow-items > *::after{background:linear-gradient(0deg,rgba(43,10,5,.9) 0%,rgba(43,10,5,.55) 45%,rgba(43,10,5,.1) 75%,rgba(43,10,5,.25) 100%)}
  .zw-hero .uk-slideshow-items > * > .uk-position-cover.uk-flex{padding:56px 24px 30px}
  .zw-hero .el-content{font-size:16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  /* telefon: same paski u gory, jak w relacjach */
  .zw-hero__rozdzialy{top:16px;bottom:auto;left:18px;right:18px;gap:6px}
  .zw-hero__rozdzial{padding:0;height:12px;font-size:0}
  .zw-hero__rozdzial b{display:none}
  .zw-hero__rozdzial::before,.zw-hero__rozdzial::after{height:3px}
}
@media (prefers-reduced-motion:reduce){
  .zw-hero__rozdzial.is-on::after{animation:none;width:100%}
}