/* ==========================================
   CARD DO EVENTO
========================================== */

.result-card{
    display:flex;
    align-items:flex-start;
    gap:25px;
    padding:20px;
    background:#FFF;
    border-radius:12px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:all .25s ease;
}

.result-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 35px rgba(0,0,0,.12);
}

/* ==========================================
   IMAGEM
========================================== */

.result-card-image{
    width:150px;
    min-width:150px;
    /*height:190px;*/
    border-radius:10px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

.result-card-image img{
    display:block;
    width:100%;
    border-radius:5px;
}

/* ==========================================
   CORPO
========================================== */

.result-card-body{
    flex:1;
    display:flex;
    flex-direction:column;
}

.result-card-body h3{
    font-size:var(--fs-h3);
    font-weight:var(--fw-bold);
    color:var(--color-primary);
    margin-bottom:15px;
    line-height:1.2;
}

/* ==========================================
   INFORMAÇÕES
========================================== */

.info-divider{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
}

.info{
    color:#666;
    font-size:15px;
}

.info i{
    color:var(--color-primary);
    margin-right:6px;
}

/* ==========================================
   BOTÕES
========================================== */
.result-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:auto;
    padding-top:15px;
    border-top:1px solid #ececec;
    justify-content:flex-start;
}

.btn-resultado,
.btn-inscritos,
.btn-regulamento,
.btn-resultado-empty{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px !important;
    width:auto !important;
    height:auto;
    border:none;
    border-radius:4px;
    text-decoration:none;
    white-space:nowrap;
    color:#FFF;
    transition:.2s;
}

.btn-resultado{
    background:var(--color-primary);
}

.btn-inscritos{
    background:var(--color-secondary,#4a4063);
}

.btn-regulamento{
    background:#6c757d;
}

.btn-resultado-empty{
    background:#9e9e9e;
}

.btn-resultado:hover,
.btn-inscritos:hover,
.btn-regulamento:hover,
.btn-resultado-empty:hover{
    color:#FFF;
    opacity:.9;
}

/* ==========================================
   PAGINAÇÃO
========================================== */

.paginacao-btn{
    background:#FFF;
    border:1px solid var(--color-primary);
    color:var(--color-primary);
    padding:6px 14px;
    border-radius:50%;
    transition:.2s;
        margin: 2px;
}

.paginacao-btn:hover{
   background:var(--primary-30);
}

.paginacao-btn.active{
    background:var(--color-primary);
    color:#FFF;
}

/* ==========================================
   NOTEBOOK
========================================== */

@media (max-width:1200px){
    .result-card-image{
        width:130px;
        min-width:130px;
    }
}

/* ==========================================
   TABLET
========================================== */
@media (max-width:992px){
    .result-card{
        gap:18px;
    }
    .result-card-image{
        width:120px;
        min-width:120px;
    }
    /* imagem só some no celular/tablet quando o config.json do cliente pede (resultados_mobile_com_imagem = false) */
    .result-card-sem-imagem-mobile .result-card-image{
        display:none;
    }

}

/* ==========================================
   SMARTPHONE
========================================== */
@media (max-width:768px){
    .result-card{
        display:block;
        padding:15px;
    }
    /* no celular a imagem fica no topo do card, inteira (sem cortar nem distorcer), até 220px de altura;
       as laterais são preenchidas pela própria imagem ampliada e desfocada (--result-img, definido no JS) */
    .result-card-image{
        position:relative;
        width:100%;
        min-width:0;
        margin-bottom:14px;
        border-radius:8px;
        overflow:hidden;
        background:#e7e5e4;
        isolation:isolate;
    }
    .result-card-image::before{
        content:"";
        position:absolute;
        inset:-24px;
        z-index:-1;
        background-image:var(--result-img);
        background-size:cover;
        background-position:center;
        filter:blur(18px) saturate(1.3) brightness(.9);
    }
    .result-card-image img{
        position:relative;
        height:220px;
        object-fit:contain;
        object-position:center;
        border-radius:0;
        filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));
    }
    .result-card-body{
        width:100%;
    }
    .result-card-body h3{
        font-size:22px;
    }
    .info-divider{
        margin-bottom:15px;
    }
    .result-buttons{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        justify-content:flex-start;
    }
    .btn-resultado,
    .btn-inscritos,
    .btn-regulamento,
    .btn-resultado-empty{
        width:auto !important;
        padding:10px 14px !important;
        font-size:14px;
    }
}