/* ============================================================
   Dock Flex – Workmedia Blocos  |  v2.2.0

   Estrutura:
   .wdf-box              ← A CAIXA (overflow:visible para o triângulo)
     ├── .wdf-inner      ← overflow:hidden para clipar itens no border-radius
     │     └── .wdf-grid
     │           └── .wdf-column
     │                 └── .wdf-item-wrap.elementor-repeater-item-{id}
     │                       └── .wdf-item  ← CSS vars definidas aqui
     └── .wdf-triangle   ← triângulo (fora do wdf-inner!)

   Hover: todas as cores de hover são CSS custom properties (--wdf-*)
   definidas no .wdf-item via seletores Elementor SEM :hover.
   O :hover fica apenas neste CSS estático — nunca no CSS gerado
   pelo Elementor, que pode não ser aplicado dependendo do cache/otimização.
   ============================================================ */

/* ── A CAIXA ──────────────────────────────────────────────── */
.wdf-box {
    position: relative;   /* left/top dos controles X/Y funcionam aqui */
    overflow: visible;    /* nunca hidden — o triângulo sai das bordas */
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-sizing: border-box;
    /* vars do triângulo */
    --wdf-tri-color: #ffffff;
    --wdf-tri-half:  20px;
    --wdf-tri-h:     14px;
}

/* ── Inner (overflow:hidden para clipar conteúdo) ─────────── */
.wdf-inner {
    overflow: hidden;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Grid ─────────────────────────────────────────────────── */
.wdf-grid {
    display: grid;
    flex: 1;
}
.wdf-cols-1 { grid-template-columns: 1fr; }
.wdf-cols-2 { grid-template-columns: repeat(2, 1fr); }
.wdf-cols-3 { grid-template-columns: repeat(3, 1fr); }
.wdf-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Breakpoint responsivo automático ────────────────────────
   Quando a caixa fica estreita demais, as colunas empilham.
   O Elementor pode sobrescrever via selectors no PHP.
   Threshold padrão: abaixo de 480px empilha tudo em 1 coluna.
   Usar min() para não quebrar em desktop largo.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .wdf-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Coluna ───────────────────────────────────────────────── */
.wdf-column {
    display: flex;
    flex-direction: column;
}

/* ── Wrap do item (carrega a classe repeater) ─────────────── */
.wdf-item-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ────────────────────────────────────────────────────────────
   ITEM — CSS custom properties com fallback
   Valores padrão garantem que sem configuração nada quebra.
   Elementor define as vars sem :hover → nunca tem problema de cache.
   O :hover aqui no CSS estático lê as vars hover e aplica.
   ─────────────────────────────────────────────────────────── */
.wdf-item {
    /* ── vars de fundo do item ── */
    --wdf-item-bg:        transparent;
    --wdf-item-hover-bg:  var(--wdf-item-bg);

    /* ── vars do ícone ── */
    --wdf-icon-color:       inherit;
    --wdf-icon-hover-color: var(--wdf-icon-color);
    --wdf-icon-bg:          transparent;
    --wdf-icon-hover-bg:    var(--wdf-icon-bg);

    /* ── vars de título ── */
    --wdf-title-color:       #111827;
    --wdf-title-hover-color: var(--wdf-title-color);

    /* ── vars de descrição ── */
    --wdf-desc-color:       #6b7280;
    --wdf-desc-hover-color: var(--wdf-desc-color);

    /* ── layout ── */
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    color: inherit;
    text-decoration: none !important;
    flex: 1;
    box-sizing: border-box;
    background-color: var(--wdf-item-bg);
    transition: background-color .2s ease;
}
.wdf-item--link { cursor: pointer; }

/* Hover do item — lê as vars hover definidas pelo Elementor */
.wdf-item--link:hover {
    background-color: var(--wdf-item-hover-bg);
}

/* ── Ícone ────────────────────────────────────────────────── */
.wdf-icon-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    line-height: 1;
    overflow: hidden;
    /* Cor e fundo via CSS vars do item pai */
    color:            var(--wdf-icon-color);
    background-color: var(--wdf-icon-bg);
    transition: background-color .2s ease, color .2s ease;
}
.wdf-item--link:hover .wdf-icon-wrap {
    color:            var(--wdf-icon-hover-color);
    background-color: var(--wdf-icon-hover-bg);
}

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

/* ── Conteúdo ─────────────────────────────────────────────── */
.wdf-content { flex: 1; min-width: 0; }

/* ── Título + Badge ───────────────────────────────────────── */
.wdf-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.wdf-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 !important;
    color: var(--wdf-title-color);
    transition: color .2s ease;
}
.wdf-item--link:hover .wdf-title {
    color: var(--wdf-title-hover-color);
}

/* ── Badge ────────────────────────────────────────────────── */
.wdf-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background-color: #0066ff;
    color: #ffffff;
    white-space: nowrap;
    line-height: 1.5;
    flex-shrink: 0;
}

/* ── Descrição ────────────────────────────────────────────── */
.wdf-description {
    font-size: 13px;
    line-height: 1.55;
    margin: 0 !important;
    color: var(--wdf-desc-color);
    transition: color .2s ease;
}
.wdf-item--link:hover .wdf-description {
    color: var(--wdf-desc-hover-color);
}

/* ── Seta — DENTRO do item, empurrada para a direita ─────── */
.wdf-arrow {
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 50%;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #6b7280;
    box-sizing: border-box;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.wdf-arrow i   { display: block; line-height: 1; font-size: 11px; }
.wdf-arrow svg { display: block; }
.wdf-item--link:hover .wdf-arrow {
    transform: scale(1.1);
    /* Lê as vars definidas pelo Elementor em .wdf-item sem :hover */
    color:            var(--wdf-arrow-hover-color, inherit);
    background-color: var(--wdf-arrow-hover-bg, inherit);
}

/* ============================================================
   TRIÂNGULO — ancorado em .wdf-box, fora do .wdf-inner
   CSS vars --wdf-tri-* definidas em .wdf-box pelo Elementor
   Hover via :has() referencia o item mais próximo de cada posição
   ============================================================ */
.wdf-triangle {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 10;
    transition: border-color .2s ease;
}

/* ↓ Base */
.wdf-tri-bottom .wdf-triangle {
    bottom: 0;
    left: calc(50% + var(--wdf-tri-offset-x, 0px));
    top: auto;
    transform: translateX(-50%) translateY(calc(100% + var(--wdf-tri-offset-y, 0px)));
    border-left:   var(--wdf-tri-half) solid transparent;
    border-right:  var(--wdf-tri-half) solid transparent;
    border-top:    var(--wdf-tri-h)    solid var(--wdf-tri-color);
    border-bottom: none;
}

/* ↑ Topo */
.wdf-tri-top .wdf-triangle {
    top: 0;
    left: calc(50% + var(--wdf-tri-offset-x, 0px));
    transform: translateX(-50%) translateY(calc(-100% + var(--wdf-tri-offset-y, 0px)));
    border-left:   var(--wdf-tri-half) solid transparent;
    border-right:  var(--wdf-tri-half) solid transparent;
    border-bottom: var(--wdf-tri-h)    solid var(--wdf-tri-color);
    border-top:    none;
}

/* ← Esquerda */
.wdf-tri-left .wdf-triangle {
    left: 0;
    top: calc(50% + var(--wdf-tri-offset-y, 0px));
    transform: translateY(-50%) translateX(calc(-100% + var(--wdf-tri-offset-x, 0px)));
    border-top:    var(--wdf-tri-half) solid transparent;
    border-bottom: var(--wdf-tri-half) solid transparent;
    border-right:  var(--wdf-tri-h)    solid var(--wdf-tri-color);
    border-left:   none;
}

/* → Direita */
.wdf-tri-right .wdf-triangle {
    right: 0;
    top: calc(50% + var(--wdf-tri-offset-y, 0px));
    transform: translateY(-50%) translateX(calc(100% + var(--wdf-tri-offset-x, 0px)));
    border-top:    var(--wdf-tri-half) solid transparent;
    border-bottom: var(--wdf-tri-half) solid transparent;
    border-left:   var(--wdf-tri-h)    solid var(--wdf-tri-color);
    border-right:  none;
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1024px) {
    .wdf-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .wdf-cols-3,
    .wdf-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
    .wdf-cols-2,
    .wdf-cols-3,
    .wdf-cols-4 { grid-template-columns: 1fr; }
}