/* Web Story (stories da home) — BARRA. Entra no render_home.css (php/classes/tema/fullbox.style.php) quando o tema tem box
   webstory ativo; editou aqui = limpar o cache do CSS. HTML: php/classes/fullhp/webstory.class.php. Visualizador: webstory.css.
   Tamanhos fixos (sem CLS): círculo 90px + 10 + título 20px = 120px (75px = 105px no celular); card 118x190 (90x160). */
.ws{position:relative}
.ws__vp{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.ws__vp::-webkit-scrollbar{display:none}
.ws__vp.is-drag{cursor:grabbing;scroll-behavior:auto}
.ws__vp.is-drag .ws__item{pointer-events:none}
.ws__track{display:flex;gap:15px;width:max-content;min-width:100%;justify-content:center}
.ws__item{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:0;box-shadow:none;margin:0;padding:0;font:inherit;color:inherit;letter-spacing:normal;text-transform:none;cursor:pointer;flex:0 0 auto;display:block;-webkit-tap-highlight-color:transparent;transition:transform .25s ease}
.ws__item>*{pointer-events:none}
.ws__item:focus{outline:0}
.ws__item:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* skeleton até a imagem pintar (o webstory.js tira a animação no load) */
.ws__ring img,.ws__cover img,.ws__avatar img{background:#dce0e5 linear-gradient(90deg,#dce0e5,#f0f2f4,#dce0e5);background-size:200% 100%;animation:ws-sk 1s infinite reverse}
.ws img.is-ok{animation:none;background:none}
@keyframes ws-sk{0%{background-position:-100% 0}to{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.ws__ring img,.ws__cover img,.ws__avatar img{animation:none}}

/* modelo 1: círculos (instagram) */
.ws--ins .ws__item{width:90px;text-align:center}
.ws--ins .ws__item:active{transform:scale(.95)}
.ws__ring{display:block;width:90px;height:90px;margin-bottom:10px;padding:3px;border-radius:50%;box-sizing:border-box;background:linear-gradient(45deg,var(--ws-ring1,#e6683c) 25%,var(--ws-ring2,#bc1888) 100%)}
/* anel = fundo em gradiente (3px) + folga branca de 2px = borda da foto (sem mask: não depende de prefixo nem do fundo do box) */
.ws__ring img{display:block;width:100%;height:100%;max-width:none;box-sizing:border-box;border:2px solid var(--ws-gap,#fff);border-radius:50%;object-fit:cover}
.ws--ins .ws__title{display:block;height:20px;font-size:14px;line-height:20px;color:var(--ws-txt,#000);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* modelo 2: cards (facebook) */
.ws--fb .ws__vp{margin:-3px}
.ws--fb .ws__track{padding:3px}
.ws--fb .ws__item{position:relative;width:118px;height:190px;overflow:hidden;border-radius:7px;box-shadow:0 1px 2px rgba(0,0,0,.2);text-align:left}
.ws--fb .ws__item:active{transform:scale(.98)}
.ws--fb .ws__item:after{content:"";position:absolute;inset:0;z-index:10;border-radius:7px;background-image:linear-gradient(0deg,rgba(0,0,0,.4),transparent)}
.ws__cover{position:absolute;inset:0}
.ws__cover img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.ws__avatar{position:absolute;top:12px;left:12px;z-index:20;width:40px;height:40px;overflow:hidden;border-radius:50%}
.ws__avatar img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.ws--fb .ws__title{position:absolute;left:12px;right:12px;bottom:12px;z-index:20;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:15px;line-height:1.3;color:#fff;word-break:break-word}

/* setas (o JS mostra quando há rolagem para aquele lado) */
.ws__nav{position:absolute;top:50%;z-index:10;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;min-height:0;margin-top:-15px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 0 5px 2px rgba(0,0,0,.1);cursor:pointer;font-size:0}
.ws__nav[hidden]{display:none}
.ws__nav:hover,.ws__nav:focus{background:#fff;outline:0}
.ws__nav svg{width:25px;height:25px;fill:#000;pointer-events:none}
.ws__nav--prev{left:5px}
.ws__nav--next{right:5px}

@media (max-width:575px){
  .ws--ins .ws__item,.ws__ring{width:75px}
  .ws__ring{height:75px}
  .ws--fb .ws__item{width:90px;height:160px}
}