.wst{
    --wst-card-width:380px;
    /* Proporção do card. Numerador/denominador como variáveis separadas
       pra dar pra usar nos cálculos das setas (calc() não opera em valores
       compostos tipo "3/4"). Default 3/4 mantém compatibilidade. */
    --wst-card-aspect-w:3;
    --wst-card-aspect-h:4;
    --wst-gap:20px;
    --wst-arrow-w:48px;
    font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;
    width:100%;box-sizing:border-box;position:relative;
}
.wst *,.wst *::before,.wst *::after{box-sizing:border-box}

/* Section heading */
.wst__heading{
    font-size:1.4rem;font-weight:800;color:#1a1e2a;
    margin:0 0 1.2rem;letter-spacing:-0.02em;
}

/* Viewport: arrows on sides, track in center */
.wst__viewport{
    display:flex;align-items:flex-start;gap:8px;
    position:relative;
}

/* Track area — scrollable */
.wst__track-area{
    flex:1;min-width:0;overflow:hidden;
}
.wst__track{
    display:flex;gap:var(--wst-gap);
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding:4px 0;
}
.wst__track::-webkit-scrollbar{display:none}

/* Slide = card image + info below.
 * Largura FIXA via --wst-card-width (controle Elementor responsivo). Container
 * mais largo => cabem mais cards do mesmo tamanho, sem stretch. Se a quantidade
 * de cards exceder o container, overflow-x:auto do track entrega scroll. */
.wst__slide{
    flex:0 0 var(--wst-card-width);
    min-width:0;
    scroll-snap-align:start;
    overflow:hidden;
}

/* Card (image only — or with overlay info inside) */
.wst__card{
    display:block;
    width:100%;
    aspect-ratio: var(--wst-card-aspect-w) / var(--wst-card-aspect-h);
    border-radius:20px;
    overflow:hidden;position:relative;
    text-decoration:none;
}
/* Position rules — sempre aplicam */
.wst__card .wst__info--overlay{
    position:absolute;left:0;right:0;
    padding:1rem;box-sizing:border-box;
    color:#fff;z-index:2;
}
.wst__card .wst__info--top{top:0}
.wst__card .wst__info--bottom{bottom:0}
.wst__card .wst__info--middle{top:50%;transform:translateY(-50%);text-align:center}
.wst__card .wst__info--overlay .wst__title{color:inherit;margin:0 0 0.25rem}
.wst__card .wst__info--overlay .wst__desc{color:inherit;margin:0;-webkit-line-clamp:3}

/* Fallback pra setups antigos sem overlay_preset salvo (especificidade 1 classe).
 * Setups novos passam pelas regras abaixo com .wst--overlay-* (2 classes) que ganham. */
.wst__info--overlay{background:rgba(0,0,0,0.45)}

/* Presets de overlay (gradient pra leitura do texto sem esconder a foto inteira).
 * A classe modificadora vem do widget via overlay_preset. Especificidade 2 classes
 * pra sobrescrever o fallback acima sem perder pra {{WRAPPER}} .wst__info--overlay
 * que o Elementor emite quando o usuário escolhe preset="custom" e configura Fundo.
 *
 * O gradient final dos presets de scrim é gerado em PHP pelo widget
 * (WidgetStories::build_overlay_gradient) e injetado como custom property
 * --wst-overlay-bg no wrapper .wst. Vantagem: o PHP controla a unit (deg, %) e
 * o clamp dos valores, evitando que valores parciais do Elementor produzam
 * gradient sintaticamente inválido que faria o background sumir.
 *
 * Fallback nos defaults do var() garante que mesmo se --wst-overlay-bg não for
 * injetada (caso o widget esteja rodando uma versão antiga), o preset ainda
 * renderiza com look próximo do original. */
.wst--overlay-solid-soft .wst__info--overlay{
    background:rgba(0,0,0,0.45);
}
.wst--overlay-scrim-bottom .wst__info--overlay{
    background: var(--wst-overlay-bg,
        linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 80%));
}
.wst--overlay-scrim-bottom-strong .wst__info--overlay{
    background: var(--wst-overlay-bg,
        linear-gradient(0deg, rgba(0,0,0,0.95) 0%, transparent 90%));
}
/* Diagonais — mesmo padrão usado no Loop Grid da página /cultura/. */
.wst--overlay-scrim-diagonal .wst__info--overlay{
    background: var(--wst-overlay-bg,
        linear-gradient(30deg, #000000 0%, transparent 45%));
}
.wst--overlay-scrim-diagonal-strong .wst__info--overlay{
    background: var(--wst-overlay-bg,
        linear-gradient(20deg, #000000 0%, transparent 55%));
}
/* preset=custom não tem regra aqui — fica sob controle do Group_Control_Background
 * do Elementor, que emite seletor {{WRAPPER}} .wst__info--overlay (especificidade alta). */
.wst__media{
    position:absolute;inset:0;width:100%;height:100%;
    max-width:100%;max-height:100%;
    object-fit:cover;
    margin:0;padding:0;border:0;
    pointer-events:none;
    transition:transform 0.4s ease;
}
.wst__card:hover .wst__media{transform:scale(1.04)}
video.wst__media{object-fit:cover;transition:transform 0.4s ease}

/* Info below image */
.wst__info{
    padding:0.75rem 0.2rem 0;
}
.wst__title{
    font-size:1rem;font-weight:700;margin:0 0 0.2rem;
    color:#1a1e2a;line-height:1.25;
}
.wst__title a{color:inherit;text-decoration:none}
.wst__title a:hover{text-decoration:underline}
.wst__desc{
    font-size:0.82rem;font-weight:400;margin:0;
    color:#7a8294;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Arrows — base (default sólido branco/translúcido; sobrescrevível pelo
 * controle "Fundo" do Elementor com classic + gradient). */
.wst__arrow{
    flex-shrink:0;
    width:var(--wst-arrow-w);height:var(--wst-arrow-w);
    background:rgba(255,255,255,0.9);
    border:1px solid rgba(0,0,0,0.06);border-radius:50%;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
    transition:box-shadow 0.15s;
}
.wst__arrow:hover{box-shadow:0 4px 16px rgba(0,0,0,0.12)}
.wst__arrow:disabled{opacity:0.25;cursor:default;pointer-events:none}

/* Outside (default) — flex item ao lado da track, vertical-centralizado
 * pela altura derivada da largura do card. height = width × (h/w) do aspect.
 * Vars vêm do widget Elementor (ex: 9/16 → seta no centro vertical de card 9:16). */
.wst__viewport--arrows-outside .wst__arrow{
    position:relative;
    margin-top:calc((var(--wst-card-width) * var(--wst-card-aspect-h) / var(--wst-card-aspect-w) - var(--wst-arrow-w)) / 2);
}

/* Inside (overlay) — setas absolute sobre os cards, V-centralizadas. */
.wst__viewport--arrows-inside{position:relative}
.wst__viewport--arrows-inside .wst__track-area{flex:1 1 100%}
.wst__viewport--arrows-inside .wst__arrow{
    position:absolute;top:50%;
    transform:translateY(-50%);
    margin:0;z-index:5;
}
.wst__viewport--arrows-inside .wst__arrow--prev{left:8px}
.wst__viewport--arrows-inside .wst__arrow--next{right:8px}

/* Chevron pulse >, >>, >>> */
.wst__chevron{
    font-size:1.4rem;font-weight:800;line-height:1;
    color:#1a1e2a;position:absolute;
    animation:wst-pulse 1.5s ease-in-out infinite;
}
.wst__arrow--next .wst__chevron:nth-child(1){animation-delay:0s;left:calc(50% - 6px)}
.wst__arrow--next .wst__chevron:nth-child(2){animation-delay:0.2s;left:calc(50% - 2px)}
.wst__arrow--next .wst__chevron:nth-child(3){animation-delay:0.4s;left:calc(50% + 2px)}
.wst__arrow--prev .wst__chevron:nth-child(1){animation-delay:0.4s;right:calc(50% - 6px);left:auto}
.wst__arrow--prev .wst__chevron:nth-child(2){animation-delay:0.2s;right:calc(50% - 2px);left:auto}
.wst__arrow--prev .wst__chevron:nth-child(3){animation-delay:0s;right:calc(50% + 2px);left:auto}
@keyframes wst-pulse{
    0%,100%{opacity:0.15;transform:translateX(0)}
    50%{opacity:1;transform:translateX(2px)}
}
.wst__arrow--prev .wst__chevron{animation-name:wst-pulse-left}
@keyframes wst-pulse-left{
    0%,100%{opacity:0.15;transform:translateX(0)}
    50%{opacity:1;transform:translateX(-2px)}
}

/* Mobile — só comportamento (setas escondidas, padding lateral). Largura
 * dos slides agora vem do controle responsivo "Cards por linha" do Elementor.
 * Defaults: 3 desktop / 2 tablet / 1 mobile. */
@media(max-width:768px){
    .wst__arrow{display:none}
    .wst__viewport{gap:0}
    .wst__track{padding:4px 1rem}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
    .wst__chevron{animation:none;opacity:0.5}
    .wst__media{transition:none}
}