/*
 * wpeventlist — Estilos complementares v1.4.0
 * Próxima data, local exato, touch-peek tooltip + fixes mobile
 * v1.4.0: ajustes finos de grid, espaçamento e alinhamento dos cards
 */

/* ============================================================
   Grid — consistência de altura e alinhamento
   ============================================================ */
.wpecards {
    align-items: stretch; /* cards da mesma linha com altura igual */
}

/* Card como coluna para empurrar "próxima data" para o fim */
.wpecard {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Imagem: não cresce, não encolhe */
.wpecard .imagem-espetaculo {
    flex: 0 0 auto;
}

/* ============================================================
   Título do espetáculo — margem controlada
   ============================================================ */
h2.espetaculo {
    margin: 12px 0 0 !important;
    line-height: 1.25;
}

/* ============================================================
   Bloco cidade — espaçamento e alinhamento do ícone de pin
   ============================================================ */
.wpecard .cidade {
    margin-top: 10px;
}

/* Flex na h3: alinha verticalmente o ícone de pin com o texto */
.wpecard .cidade h3 {
    display: flex !important;
    align-items: center;
    gap: 5px;
}

/* Pin SVG: não cresce, base fixa */
.wpecard .wpeiconcidade {
    flex: 0 0 12px;
    display: block;
}

/* ============================================================
   Local exato (venue) abaixo do nome da cidade
   Indent = largura do ícone (12px) + gap (5px) = 17px
   ============================================================ */
.wpe-nome-local {
    margin: 3px 0 0 17px !important;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #444 !important;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 17px);
}

/* ============================================================
   Indicador "Próxima data" — empurrado para o fim do card
   ============================================================ */
.wpe-proxima-data {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin: auto 0 0 !important; /* empurra para o fundo do card */
    padding-top: 10px;
    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #999;
    line-height: 1.4;
}

.wpe-prox-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #bbb;
    white-space: nowrap;
}

/* ============================================================
   Tooltip de datas (hover desktop) — quebra de linha correta
   ============================================================ */
.wpe-tooltip-content {
    white-space: normal !important;
}

p.datas-tooltip {
    margin-bottom: 8px !important;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(60, 60, 60, .15);
}

/* ============================================================
   Mobile — specificity alta para vencer o CSS inline do Elementor
   (.wpecards .wpeimg = 0-2-0 > .wpeimg = 0-1-0)
   ============================================================ */
@media (max-width: 767px) {

    /* Card: full-width e box-sizing correto */
    .wpecards .wpecard {
        flex-basis: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        width: 100% !important;
    }

    /* Imagem: fluida, sem largura fixa */
    .wpecards .wpeimg {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
    }

    /* Container do grid sem gap lateral desnecessário */
    .wpecards {
        column-gap: 0 !important;
        row-gap: 16px !important;
    }

    /* Imagem dentro do card não vaza */
    .wpecards .imagem-espetaculo {
        width: 100% !important;
        overflow: hidden;
    }

    /* Tooltip hover: em touch use tap (JS .wpe-tap-active) — mantém a ideia de peek */
    .wpecards .wpe-tooltip-content {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .2s ease, visibility .2s ease;
    }

    /* Tap-to-peek: JS adiciona wpe-tap-active no card */
    .wpecard.wpe-tap-active .wpe-tooltip-content {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
    }

    /* Local exato: levemente menor no mobile */
    .wpe-nome-local {
        font-size: 9px;
    }

    /* Próxima data no mobile */
    .wpe-proxima-data {
        font-size: 12px;
    }
}

/* ============================================================
   Tablet (768px – 1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {

    .wpe-tooltip-content {
        font-size: 0.85rem !important;
        line-height: 1.5;
    }

    p.datas-tooltip {
        font-size: 16px !important;
    }
}