/* ============================================================
   Botão Stick – Workmedia Blocos  |  v1.2.0

   Modos:
   ─ Grade   → .wbs-wrap > .wbs-grid > .wbs-btn-wrap > .wbs-btn
   ─ Carrossel → .wbs-wrap.wbs-mode-carousel > .wbs-swiper (Swiper)

   Hover via CSS custom properties (--wbs-*).
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────────────── */
.wbs-wrap {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════
   MODO GRADE
   ══════════════════════════════════════════════════════════ */
.wbs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: row dense; /* preenche lacunas quando há posicionamento manual */
    grid-auto-rows: auto;      /* linhas crescem conforme conteúdo */
    width: 100%;
    box-sizing: border-box;
}

.wbs-btn-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════
   BOTÃO — CSS custom properties
   Nunca defina border-radius aqui; o Elementor escreve via selectors.
   ══════════════════════════════════════════════════════════ */
.wbs-btn {
    --wbs-btn-bg:           #0000ee;
    --wbs-btn-hover-bg:     var(--wbs-btn-bg);
    --wbs-icon-color:       #ffffff;
    --wbs-icon-hover-color: var(--wbs-icon-color);
    --wbs-text-color:       #ffffff;
    --wbs-text-hover-color: var(--wbs-text-color);

    display:         flex;
    align-items:     stretch;
    flex:            1;
    text-decoration: none !important;
    outline:         none;
    cursor:          pointer;
    user-select:     none;
    background-color: var(--wbs-btn-bg);
    min-height:      130px;
    padding:         16px;
    box-sizing:      border-box;
    transition: background-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
    will-change: transform, background-color;
}

.wbs-btn.wbs-has-link:hover,
.wbs-btn.wbs-has-link:focus-visible {
    background-color: var(--wbs-btn-hover-bg);
    text-decoration:  none !important;
}

.wbs-btn.wbs-has-link:focus-visible {
    outline: 3px solid rgba(0, 0, 238, 0.4);
    outline-offset: 2px;
}

/* cursor padrão para botões sem link */
.wbs-btn:not(.wbs-has-link) {
    cursor: default;
}

/* ── Inner ────────────────────────────────────────────────── */
.wbs-inner {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    gap:             10px;
}

/* ── Posição do ícone ─────────────────────────────────────── */
.wbs-icon-top    .wbs-inner { flex-direction: column; }
.wbs-icon-bottom .wbs-inner { flex-direction: column-reverse; }
.wbs-icon-left   .wbs-inner { flex-direction: row; }
.wbs-icon-right  .wbs-inner { flex-direction: row-reverse; }

/* ── Ícone ────────────────────────────────────────────────── */
.wbs-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    line-height:     1;
    font-size:       30px;
    color:           var(--wbs-icon-color);
    transition:      color 250ms ease;
}
.wbs-btn.wbs-has-link:hover .wbs-icon { color: var(--wbs-icon-hover-color); }

.wbs-icon i, .wbs-icon i::before {
    font-size: inherit; color: inherit; display: block; line-height: 1;
}
.wbs-icon > span, .wbs-icon span.e-font-icon-svg {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: inherit; color: inherit; line-height: 1;
}
.wbs-icon svg, .wbs-icon > span svg, .wbs-icon span.e-font-icon-svg svg {
    display: block; width: 1em; height: 1em; max-width: 100%; max-height: 100%;
    fill: currentColor; color: inherit; flex-shrink: 0;
}

/* ── Label ────────────────────────────────────────────────── */
.wbs-label {
    display:     block;
    font-size:   13px;
    font-weight: 600;
    line-height: 1.3;
    color:       var(--wbs-text-color);
    transition:  color 250ms ease;
    margin:      0;
}
.wbs-btn.wbs-has-link:hover .wbs-label { color: var(--wbs-text-hover-color); }

/* ══════════════════════════════════════════════════════════
   MODO CARROSSEL
   ══════════════════════════════════════════════════════════ */
.wbs-mode-carousel {
    display: block;
    position: relative;
}

/* Swiper ocupa 100%; padding lateral para caber as setas */
.wbs-swiper {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Slide = wrapper do botão */
.wbs-swiper .wbs-btn-wrap {
    height: auto;
    box-sizing: border-box;
}

/* Botão preenche o slide inteiro */
.wbs-swiper .wbs-btn {
    height: 100%;
}

/* ── Setas ────────────────────────────────────────────────── */
.wbs-nav-prev,
.wbs-nav-next {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         10;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background-color: #ffffff;
    color:           #0000ee;
    cursor:          pointer;
    box-shadow:      0 2px 8px rgba(0,0,0,.15);
    transition:      background-color .2s ease, color .2s ease, box-shadow .2s ease;
    user-select:     none;
}
.wbs-nav-prev { left: -20px; }
.wbs-nav-next { right: -20px; }

.wbs-nav-prev:hover,
.wbs-nav-next:hover {
    background-color: #0000ee;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,238,.3);
}

.wbs-nav-prev.swiper-button-disabled,
.wbs-nav-next.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

.wbs-nav-prev i, .wbs-nav-next i {
    font-size: 14px;
    line-height: 1;
    display: block;
}

/* ── Dots ─────────────────────────────────────────────────── */
.wbs-dots {
    display:         flex;
    justify-content: center;
    align-items:     center;
    flex-wrap:       wrap;
    margin-top:      20px;
    line-height:     1;
}

.wbs-dots .swiper-pagination-bullet {
    width:            8px;
    height:           8px;
    border-radius:    50%;
    background:       #c0c9db;
    opacity:          1;
    margin:           0 6px;
    cursor:           pointer;
    transition:       background .2s ease, transform .2s ease;
    display:          inline-block;
}

.wbs-dots .swiper-pagination-bullet-active {
    background:  #0000ee;
    transform:   scale(1.3);
}

/* ── Responsivo (grade padrão) ───────────────────────────── */
/* Elementor sobrescreve via selectors; isso é apenas fallback */
@media (max-width: 1024px) {
    .wbs-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .wbs-grid { grid-template-columns: repeat(2, 1fr); }
}