/**
 * Bravo Press Cards — Estilos
 * ============================================================================
 * Todos los selectores estan prefijados con .bravo-press-wrapper para evitar
 * cualquier colision con Elementor, el tema, u otros plugins.
 * Ningun selector global (*, body, article, p, a) se usa sin el prefijo.
 * ============================================================================
 */

/* ============================================================
   WRAPPER — contenedor general del modulo
   ============================================================ */
.bravo-press-wrapper {
    width: 100%;
}


/* ============================================================
   GRID — contenedor de las cards
   ============================================================ */
.bravo-press-wrapper .bravo-press-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 40px;
}


/* ============================================================
   CARD — cada tarjeta individual
   ============================================================
   Altura fija 240px como en la pagina actual.
   Flexbox column: logo arriba (fijo), texto al centro (flex-grow),
   boton abajo (fijo). overflow hidden evita que textos largos rompan.
   ============================================================ */
.bravo-press-wrapper .bravo-press-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 320px;
    min-width: 240px;
    flex: 1 1 280px;

    height: 240px;
    min-height: 240px;
    max-height: 240px;
    overflow: hidden;

    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    padding: 20px 10px 10px 10px;
    box-sizing: border-box;
}


/* ============================================================
   ICON / LOGO — logo del medio en la parte superior
   ============================================================ */
.bravo-press-wrapper .bravo-card-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 8px;
    max-height: 50px;
    overflow: hidden;
}

.bravo-press-wrapper .bravo-card-icon img {
    max-height: 50px;
    max-width: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* ============================================================
   BODY — area de texto (centro de la card)
   ============================================================
   flex: 1 ocupa el espacio disponible.
   -webkit-line-clamp recorta el texto con ... si es muy largo,
   manteniendo siempre los 240px de altura.
   ============================================================ */
.bravo-press-wrapper .bravo-card-body {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    padding: 0 4px;
}

.bravo-press-wrapper .bravo-card-text {
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #201D49;
    margin: 0;
    padding: 0;

    /* Recorte graceful con puntos suspensivos */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}


/* ============================================================
   LINK / BOTON — "Go to article >"
   ============================================================ */
.bravo-press-wrapper .bravo-card-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #43B9CD;
    text-decoration: underline;
    background: transparent;
    border: none;
    padding: 8px 4px 4px 4px;
    margin-top: auto;
    cursor: pointer;
    line-height: 1.5;

    -webkit-tap-highlight-color: transparent;
}

.bravo-press-wrapper .bravo-card-link:hover,
.bravo-press-wrapper .bravo-card-link:focus {
    color: #3AA6B8;
}

.bravo-press-wrapper .bravo-card-chevron {
    flex-shrink: 0;
}


/* ============================================================
   PAGINATION — controles de paginacion (solo mobile)
   ============================================================
   Oculta por defecto. El JS la muestra en mobile (<= 767px).
   Diseno basado en el Figma: botones 40x40, borde #D1D5DB, bg #F9FAFB.
   ============================================================ */
.bravo-press-wrapper .bravo-press-pagination {
    display: none;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    overflow: hidden;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.bravo-press-wrapper .bravo-page-numbers {
    display: flex;
    align-items: center;
}

.bravo-press-wrapper .bravo-page-btn,
.bravo-press-wrapper .bravo-page-num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #F9FAFB;
    border: none;
    border-right: 1px solid #D1D5DB;
    cursor: pointer;
    padding: 0;
    margin: 0;

    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #201D49;
    line-height: 1;

    transition: background-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.bravo-press-wrapper .bravo-page-num:last-child {
    border-right: none;
}

.bravo-press-wrapper .bravo-page-btn {
    color: #201D49;
}

.bravo-press-wrapper .bravo-page-btn:last-child {
    border-right: 1px solid #D1D5DB;
}

/* Estados hover / active */
.bravo-press-wrapper .bravo-page-btn:not(:disabled):hover,
.bravo-press-wrapper .bravo-page-num:not(.bravo-page-active):hover {
    background: #E5E7EB;
}

.bravo-press-wrapper .bravo-page-active {
    background: #201D49;
    color: #FFFFFF;
}

.bravo-press-wrapper .bravo-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ============================================================
   RESPONSIVE — Mobile (<= 767px)
   ============================================================
   El grid sigue siendo flex pero las cards ocupan mas ancho.
   La paginacion se controla via JS (matchMedia), no solo con CSS.
   ============================================================ */
@media (max-width: 767px) {
    .bravo-press-wrapper .bravo-press-grid {
        gap: 24px;
    }

    .bravo-press-wrapper .bravo-press-card {
        flex: 0 0 100%;
        max-width: 340px;
        min-width: unset;
    }

    .bravo-press-wrapper .bravo-card-text {
        -webkit-line-clamp: 4;
    }
}