/* ============================================================
   Destaque Flex – Workmedia Blocos | v1.0.0
   Dois modos: texto (stat/contador) e logo (imagem)
   ============================================================ */

/* ── Root ─────────────────────────────────────────────────── */
.wdf2-root {
    width:      100%;
    box-sizing: border-box;
    position:   relative;
}

/* ── Setas ────────────────────────────────────────────────── */
.wdf2-setas {
    display:       flex;
    gap:           8px;
    margin-bottom: 16px;
}

/* Setas laterais flutuantes */
.wdf2-setas-laterais .wdf2-setas {
    position:        absolute;
    top:             50%;
    left:            0;
    right:           0;
    transform:       translateY(-50%);
    justify-content: space-between;
    pointer-events:  none;
    margin-bottom:   0;
    z-index:         10;
    padding:         0 4px;
}
.wdf2-setas-laterais .wdf2-setas .wdf2-seta {
    pointer-events: all;
}

.wdf2-seta {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   50%;
    border:          1px solid #e5e7eb;
    background:      #ffffff;
    color:           #111827;
    cursor:          pointer;
    flex-shrink:     0;
    transition:      background .2s, color .2s, border-color .2s;
    padding:         0;
}

.wdf2-seta:hover {
    background:   #111827;
    color:        #ffffff;
    border-color: #111827;
}

.wdf2-seta.swiper-button-disabled {
    opacity:        .35;
    pointer-events: none;
}

.wdf2-seta svg {
    width:          16px;
    height:         16px;
    display:        block;
    fill:           none;
    stroke:         currentColor;
    stroke-width:   2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Swiper ───────────────────────────────────────────────── */
.wdf2-swiper {
    overflow: hidden;
    width:    100%;
}
.wdf2-swiper .swiper-wrapper { align-items: stretch; }
.wdf2-swiper .swiper-slide   { height: auto; }

/* ── Grade (modo não carrossel) ───────────────────────────── */
.wdf2-grade {
    display: grid;
    width:   100%;
}

/* ── Item ─────────────────────────────────────────────────── */
.wdf2-item {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         20px 24px;
    box-sizing:      border-box;
    height:          100%;
    text-decoration: none;
    color:           inherit;
    transition:      background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    position:        relative;
}

/* Separador vertical entre itens */
.wdf2-item.wdf2-sep + .wdf2-item.wdf2-sep::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        15%;
    height:     70%;
    width:      1px;
    background: #e5e7eb;
}

/* ── Modo texto ───────────────────────────────────────────── */
.wdf2-valor {
    /* font-size e font-weight controlados via Elementor Typography */
    color:        #111827;
    line-height:  1.1;
    margin-bottom: 6px;
    display:      block;
}

.wdf2-rotulo {
    /* font-size controlado via Elementor Typography */
    color:       #6b7280;
    line-height: 1.4;
    display:     block;
}

/* ── Modo logo ────────────────────────────────────────────── */
.wdf2-logo {
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   8px;
}

.wdf2-logo img {
    /* Dimensões controladas via Elementor (logo_altura, logo_largura_max) */
    height:      60px;
    width:       auto;       /* SEMPRE auto para manter proporção */
    max-width:   100%;       /* fallback seguro */
    object-fit:  contain;    /* nunca distorce */
    object-position: center;
    opacity:     0.7;
    transition:  opacity .2s ease, filter .2s ease;
    display:     block;
    margin:      0 auto;     /* centraliza horizontalmente */
}

.wdf2-item:hover .wdf2-logo img {
    opacity: 1;
}

/* ── Responsivo ───────────────────────────────────────────── */
/* Font sizes controlled via Elementor Typography responsive controls */
@media (max-width: 767px) {
    .wdf2-grade {
        /* columns controlled via inline scoped CSS per widget */
    }
}