/* DSG Rotator layout - portalowy hero + kolejka kart. Szerokosc = kontener (content). */
.dsg-rotator{
  /* Jasna paleta = tokeny sklepu (surface #f7f6f3, karty biale, brass, tekst ink). */
  --dsg-rot-accent:#b08d57; --dsg-rot-accent-text:#8a6b3d; --dsg-rot-ink:#1b1a18;
  --dsg-rot-bg:#f7f6f3; --dsg-rot-card:#fff; --dsg-rot-media:#efece6;
  --dsg-rot-line:#e6e2da; --dsg-rot-muted:#6f6a61;
  display:grid; grid-template-columns:1.7fr 1fr; gap:26px; width:100%;
  max-width:1300px; margin-inline:auto;
  background:var(--dsg-rot-bg);
  border-radius:14px; padding:30px; color:var(--dsg-rot-ink); overflow:hidden;
  border:1px solid var(--dsg-rot-line);
  box-shadow:0 1px 2px rgba(27,26,24,.04), 0 8px 30px rgba(27,26,24,.06); box-sizing:border-box;
}
.dsg-rotator *{box-sizing:border-box;}
.dsg-rotator-data{display:none;}
/* wpautop (strona glowna) potrafi wstrzyknac pusty <p>/<br> jako dziecko -> staje sie grid-itemem
   i rozwala kolumny. Nie uzywamy p/br bezposrednio w rotatorze, wiec je chowamy. */
.dsg-rotator > p, .dsg-rotator > br{display:none !important;}

/* HERO - wspolny uklad: tekst z lewej (wysrodkowany pionowo), kwadratowe okno z prawej.
   Ten sam layout dla zdjecia i konfiguratora 3D => rzeczy sa na tej samej wysokosci. */
/* min-width:0 na komorkach grida - inaczej domyslne min-width:auto rozpycha kolumne do
   max-content tytulu (jedna linia, przyciety przez overflow:hidden). */
.dsg-rotator-hero,.dsg-rotator-queue{min-width:0;}
.dsg-rotator-hero{min-height:340px; transition:opacity .35s ease; display:flex;}
.dsg-rotator-hero.is-fading{opacity:0;}
.dsg-rotator-hero .dsg-rot-hero-link,
.dsg-rotator-hero .dsg-rot-hero-inner{
  color:var(--dsg-rot-ink); text-decoration:none; display:flex; flex-direction:row-reverse; align-items:center;
  gap:30px; width:100%; min-height:inherit;
}
/* Kwadratowe okno z zaokragleniem jak karty sklepu (14px) - zdjecie i embed identyczne. */
.dsg-rotator-hero .dsg-rot-hero-media,
.dsg-rotator-hero .dsg-rot-hero-media--embed{
  flex:0 0 auto; width:320px; height:320px; border-radius:14px; overflow:hidden;
  border:1px solid var(--dsg-rot-line); box-shadow:0 10px 30px rgba(27,26,24,.10); background:var(--dsg-rot-media);
}
.dsg-rotator-hero .dsg-rot-hero-media img,
.dsg-rotator-hero .dsg-rot-hero-media video,
.dsg-rotator-hero .dsg-rot-hero-media--embed img,
.dsg-rotator-hero .dsg-rot-hero-media--embed iframe{width:100%; height:100%; object-fit:cover; display:block; border:0;}
.dsg-rotator-hero .dsg-rot-hero-content{flex:1 1 auto; min-width:0; max-width:none;}
.dsg-rotator-hero .dsg-rot-badge{
  display:inline-block; background:var(--dsg-rot-accent); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:6px; margin-bottom:14px;
}
.dsg-rotator .dsg-rotator-hero .dsg-rot-title{
  font-size:clamp(1.5rem,2.2vw,2.2rem); line-height:1.14; font-weight:800; margin:0 0 14px;
  color:var(--dsg-rot-ink); text-wrap:balance; padding:0;
}
.dsg-rotator-hero .dsg-rot-sub{color:var(--dsg-rot-muted); font-size:14px; line-height:1.45; margin:0 0 18px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.dsg-rotator-hero .dsg-rot-cta{display:inline-flex; align-items:center; gap:6px; color:var(--dsg-rot-accent-text); font-weight:700; font-size:13px; text-decoration:none;}
a.dsg-rot-cta:hover{color:var(--dsg-rot-accent);}

/* Plakietka 3D na miniaturze konfiguratora w kolejce */
.dsg-rotator-card .dsg-rot-thumb{position:relative;}
.dsg-rot-3d{position:absolute; top:5px; left:5px; background:var(--dsg-rot-accent); color:#fff;
  font-size:9px; font-weight:800; letter-spacing:.05em; padding:2px 6px; border-radius:5px; line-height:1; z-index:2;}
.dsg-rot-vid{padding:2px 5px; font-size:8px; border-radius:50%; letter-spacing:0;}

/* KOLEJKA - 3 karty rownej wysokosci wypelniaja wysokosc hero. Maska tylko gdy przewija (>3). */
.dsg-rotator-queue{position:relative; height:340px; overflow:hidden;}
.dsg-rotator-queue.has-overflow{
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent); mask-image:linear-gradient(to bottom,#000 88%,transparent);}
.dsg-rotator-track{display:flex; flex-direction:column; gap:14px; will-change:transform;}
.dsg-rotator-track.is-anim{transition:transform .55s cubic-bezier(.4,0,.2,1);}
.dsg-rotator-card{
  display:flex; align-items:center; gap:14px; height:104px; background:var(--dsg-rot-card); border:1px solid var(--dsg-rot-line);
  border-radius:14px; padding:12px; cursor:pointer; text-decoration:none; color:inherit; flex:0 0 auto;
  box-shadow:0 1px 2px rgba(27,26,24,.04);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.dsg-rotator-card:hover{border-color:var(--dsg-rot-accent); box-shadow:0 6px 18px rgba(27,26,24,.10); transform:translateX(-2px);}
.dsg-rotator-card .dsg-rot-thumb{width:80px; height:80px; border-radius:10px; overflow:hidden; flex:0 0 auto; background:var(--dsg-rot-media);}
.dsg-rotator-card .dsg-rot-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.dsg-rotator-card .dsg-rot-info{display:flex; flex-direction:column; justify-content:center; min-width:0;}
.dsg-rotator-card .dsg-rot-cbadge{font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--dsg-rot-accent-text); margin-bottom:4px;}
.dsg-rotator-card .dsg-rot-ctitle{font-size:14px; font-weight:700; line-height:1.25; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* PASEK POSTEPU autoplay (dol rotatora) - widoczny tylko gdy autoplay realnie leci (.is-autoplay). */
.dsg-rot-progress{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(27,26,24,.07); display:none; z-index:3;}
.dsg-rotator.is-autoplay .dsg-rot-progress{display:block;}
.dsg-rot-progress span{display:block; height:100%; width:0; background:var(--dsg-rot-accent); border-radius:0 2px 2px 0;}

/* PRZYCISK PAUZY/WZNOW (WCAG 2.2.2) - w DOM tylko gdy autoplay + ustawienie pause_btn ON. */
.dsg-rot-toggle{position:absolute; left:16px; bottom:14px; z-index:4; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--dsg-rot-line); background:var(--dsg-rot-card); color:var(--dsg-rot-accent-text);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 2px 8px rgba(27,26,24,.10); transition:background .2s, border-color .2s, color .2s;}
.dsg-rot-toggle:hover{border-color:var(--dsg-rot-accent); color:var(--dsg-rot-accent);}
.dsg-rot-toggle svg{fill:currentColor; display:block;}
.dsg-rot-toggle .dsg-rot-ic--play{display:none;}
.dsg-rot-toggle--paused .dsg-rot-ic--pause{display:none;}
.dsg-rot-toggle--paused .dsg-rot-ic--play{display:block;}

/* MOBILE: okno pelna szerokosc na gorze, tekst pod spodem; kolejka = kafle obok siebie.
   Skompresowane, zeby CALY rotator miescil sie na pierwszym ekranie telefonu. */
@media (max-width:820px){
  .dsg-rotator{grid-template-columns:1fr; gap:12px; padding:14px; border-radius:14px;}
  .dsg-rotator-hero{min-height:0; display:block;}
  .dsg-rotator-hero .dsg-rot-hero-link,
  .dsg-rotator-hero .dsg-rot-hero-inner{flex-direction:column; align-items:stretch; gap:10px; width:100%;}
  .dsg-rotator-hero .dsg-rot-hero-content{width:100%; min-width:0;}
  .dsg-rotator-hero .dsg-rot-badge{margin-bottom:8px; padding:4px 10px; font-size:10px;}
  .dsg-rotator .dsg-rotator-hero .dsg-rot-title{overflow-wrap:anywhere; font-size:1.35rem; line-height:1.12; margin:0 0 8px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .dsg-rotator-hero .dsg-rot-sub{font-size:12.5px; line-height:1.35; margin:0 0 10px; -webkit-line-clamp:2;}
  .dsg-rotator-hero .dsg-rot-hero-media,
  .dsg-rotator-hero .dsg-rot-hero-media--embed{width:100%; height:165px;}
  .dsg-rotator-queue{height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none;}
  .dsg-rotator-queue.has-overflow{-webkit-mask-image:none; mask-image:none;}
  .dsg-rotator-track{flex-direction:row; overflow-x:auto; gap:10px; scroll-snap-type:x mandatory;
    padding-bottom:4px; transform:none !important; transition:none !important; -webkit-overflow-scrolling:touch;}
  .dsg-rotator-card{flex:0 0 74%; max-width:300px; height:auto; gap:10px; padding:8px; scroll-snap-align:start;}
  .dsg-rotator-card .dsg-rot-thumb{width:56px; height:56px;}
  .dsg-rotator-card .dsg-rot-ctitle{font-size:13px; -webkit-line-clamp:2;}
  .dsg-rotator-card .dsg-rot-cbadge{font-size:9px; margin-bottom:2px;}
  /* przycisk pauzy mniejszy, blizej rogu */
  .dsg-rot-toggle{width:28px; height:28px; left:12px; bottom:10px;}
}
@media (max-width:480px){
  .dsg-rotator-card{flex-basis:82%;}
  .dsg-rotator-hero .dsg-rot-hero-media,
  .dsg-rotator-hero .dsg-rot-hero-media--embed{height:150px;}
}