/* Vertical Images — layout completo (funciona no editor e no frontend).
   Desktop: abre no hover. Mobile: abre por toque (classe .wvi-aberto via JS).
   Valores dinâmicos por widget vêm de custom properties (--wvi-*). */

.wvi-wrap { width: 100%; }

.wvi-grid {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 8px;
    height: 500px;
}

.wvi-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    cursor: pointer;
    background: #111827;
    border-radius: 10px;
    transition: flex var(--wvi-vel, 500ms) ease;
}

/* ── Abertura (desktop = hover; mobile = classe .wvi-aberto) ── */
.wvi-grid:hover .wvi-card { flex: 1 1 0; }
.wvi-grid .wvi-card:hover { flex: var(--wvi-flex, 5) 1 0; }
.wvi-grid:not(:hover) .wvi-card.wvi-ativo { flex: var(--wvi-flex, 5) 1 0; }
.wvi-card.wvi-aberto { flex: var(--wvi-flex, 5) 1 0 !important; }

/* Imagem de fundo — preenche o card inteiro (vence limites do tema) */
.wvi-card img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 100% !important;
    object-fit: cover !important;
    transform: scale(1.1);
    filter: var(--wvi-filtro, grayscale(1));
    transition: transform var(--wvi-vel, 500ms) ease, filter var(--wvi-vel, 500ms) ease;
}
.wvi-grid:not(:hover) .wvi-card.wvi-ativo img,
.wvi-card:hover img,
.wvi-card.wvi-aberto img { transform: scale(1); filter: grayscale(0); }

/* Overlay escuro */
.wvi-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 100%);
}

/* Conteúdo do card ABERTO */
.wvi-conteudo {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--wvi-gap-itens, 8px);
    padding: 18px;
}

/* Container do rótulo do card FECHADO */
.wvi-conteudo-label {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 18px;
    pointer-events: none;
    transition: opacity var(--wvi-vel, 500ms) ease;
}

.wvi-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,.85);
    white-space: nowrap;
    opacity: 1;
    transition: opacity var(--wvi-vel, 500ms) ease;
}
.wvi-wrap.wvi-label-vertical   .wvi-label { writing-mode: vertical-rl; transform: rotate(180deg); }
.wvi-wrap.wvi-label-horizontal .wvi-label { writing-mode: horizontal-tb; transform: none; }

/* Ao abrir, some o rótulo fechado */
.wvi-grid:not(:hover) .wvi-card.wvi-ativo .wvi-label,
.wvi-card:hover .wvi-label,
.wvi-card.wvi-aberto .wvi-label { opacity: 0; }
.wvi-grid:not(:hover) .wvi-card.wvi-ativo .wvi-conteudo-label,
.wvi-card:hover .wvi-conteudo-label,
.wvi-card.wvi-aberto .wvi-conteudo-label { opacity: 0; }

/* Conteúdo revelado ao abrir */
.wvi-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--wvi-vel, 500ms) ease, transform var(--wvi-vel, 500ms) ease;
}
.wvi-grid:not(:hover) .wvi-card.wvi-ativo .wvi-reveal,
.wvi-card:hover .wvi-reveal,
.wvi-card.wvi-aberto .wvi-reveal { opacity: 1; transform: none; }

.wvi-titulo { margin: 0; font-weight: 700; font-size: 20px; line-height: 1.2; }
.wvi-sub    { margin: 0; font-size: 15px; line-height: 1.3; }
.wvi-desc   { margin: 0; font-size: 14px; max-width: 320px; }
.wvi-icone  { display: block; line-height: 1; }

/* Benefícios */
.wvi-ben { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wvi-ben-item { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.3; }
.wvi-ben-check { flex: 0 0 auto; }

/* ── Botões CTA (estilo motion-button) ── */
.wvi-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* Reset agressivo para vencer bordas/contornos do tema */
.wvi-ctas .wvi-btn,
.wvi-ctas .wvi-btn:link,
.wvi-ctas .wvi-btn:visited,
.wvi-ctas .wvi-btn:focus,
.wvi-ctas .wvi-btn:hover,
.wvi-ctas .wvi-btn:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-image: none !important;
}
.wvi-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 6px;
    border-radius: 999px;
    cursor: pointer;
    background: var(--wvi-btn-bg, #ffffff);
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    line-height: 1;
}
/* Círculo com a seta centralizada por flexbox (sempre no meio) */
.wvi-btn .wvi-btn-circle {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--wvi-btn-circle, #0066ff);
    color: var(--wvi-btn-seta, #ffffff);
    flex: 0 0 auto;
    transition: width .45s ease, background .3s ease, left .45s ease, height .45s ease;
}
.wvi-btn .wvi-btn-circle svg { display: block; }
/* Texto ao lado do círculo */
.wvi-btn .wvi-btn-txt {
    position: relative;
    z-index: 2;
    padding-right: 14px;
    white-space: nowrap;
    font-weight: 600;
    color: var(--wvi-btn-cor, #111827);
    transition: color .35s ease;
}
/* Hover: o círculo cresce e cobre o botão; texto vira claro */
.wvi-btn:hover .wvi-btn-circle {
    position: absolute;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    justify-content: flex-start;
    padding-left: 14px;
}
.wvi-btn:hover .wvi-btn-txt { color: var(--wvi-btn-cor-hover, #ffffff); }
.wvi-btn:active { transform: scale(.98); }

/* Botão 2 (variação de cores) */
.wvi-btn.wvi-btn-2 { background: var(--wvi-btn2-bg, #ffffff); }
.wvi-btn.wvi-btn-2 .wvi-btn-circle { background: var(--wvi-btn2-circle, #111827); color: var(--wvi-btn2-seta, #ffffff); }
.wvi-btn.wvi-btn-2 .wvi-btn-txt { color: var(--wvi-btn2-cor, #111827); }
.wvi-btn.wvi-btn-2:hover .wvi-btn-txt { color: var(--wvi-btn2-cor-hover, #ffffff); }


.wvi-titulo-mob { display: none; }
.wvi-card > a.wvi-full { position: absolute; inset: 0; z-index: 3; }
/* Quando há botões, o link full não cobre eles */
.wvi-card.wvi-tem-cta .wvi-full { display: none; }

.wvi-titulo, .wvi-sub, .wvi-desc, .wvi-btn-txt { font-family: inherit !important; }
.wvi-card:focus-visible { outline: 2px solid #0066ff; outline-offset: -2px; }

/* ═══ MOBILE: empilha; toque abre o card ═══ */
@media (max-width: 767px) {
    .wvi-grid { flex-direction: column; height: auto; }
    .wvi-card { flex: none; height: 90px; transition: height var(--wvi-vel, 500ms) ease; }
    /* Card aberto no mobile cresce em ALTURA (não em flex) */
    .wvi-card.wvi-aberto { height: var(--wvi-altura-mob, 420px); flex: none !important; }
    /* Fecha: mostra só o título; abre: mostra conteúdo */
    .wvi-conteudo { justify-content: flex-end; }
    .wvi-conteudo-label { display: none; }
    .wvi-titulo-mob {
        display: flex;
        position: absolute;
        inset: 0;
        z-index: 2;
        margin: 0;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 12px;
        font-weight: 700;
        font-size: 22px;
        line-height: 1.15;
        color: #fff;
        transition: opacity var(--wvi-vel, 500ms) ease;
    }
    /* Ao abrir no mobile, o título-mobile some e o conteúdo aparece */
    .wvi-card.wvi-aberto .wvi-titulo-mob { opacity: 0; pointer-events: none; }
    .wvi-card:not(.wvi-aberto) .wvi-conteudo { opacity: 0; pointer-events: none; }
    .wvi-card.wvi-aberto img { filter: grayscale(0); transform: scale(1); }
}