/* 🎨 6. Styling (CSS): Front-end Voting Form
   Atualizado para cards de tamanho uniforme e responsivo
*/

/* Variáveis úteis */
:root {
  --bav-thumb-size-mobile: 120px;
  --bav-thumb-size-tablet: 108px;
  --bav-thumb-size-desktop: 130px;
  --bav-gap-mobile: 15px;
  --bav-gap-desktop: 25px;
  --bav-card-min-height: 230px; /* altura base dos cards (ajustável) */
}

/* ======================================= */
/* ESTILOS BASE (Móvel Primeiro) */
/* ======================================= */

.bav-voting-form {
    max-width: 900px;
    margin: 0;
    padding: 15px;
    color: #ffffff;
    border-radius: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    min-height: 100vh;
}

/* Categoria */
.bav-category-block {
    margin-bottom: 25px;
    padding: 10px;
    border-radius: 5px;
}

.bav-category-block h2 {
    color: #fff;
    padding: 8px 0;
    margin-top: 0;
    font-size: 1.5em;
    background: #ff8200;
    text-align: center;
    border-radius: 10px;
    font-weight: bold;
}

/* GRID (mobile-first) */
.bav-participants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* mobile: colunas pequenas e fluidas */
    gap: var(--bav-gap-mobile);
    margin-top: 10px;
    justify-content: center;
    align-items: start;
}

/* Cada participante / "card" */
.bav-participant {
    position: relative;
    text-align: center;
}

/* Tornar o label um "card" flexbox vertical pra controlar altura e rodapé */
.bav-participant-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    padding: 12px;
    border: 2px solid #1d78c1;
    border-radius: 10px;
    transition: all 0.28s ease;
    background-color: #f2f2f2;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    min-height: var(--bav-card-min-height); /* garante altura uniforme */
    box-sizing: border-box;
}

/* Hover */
.bav-participant-label:hover {
    border-color: #ff8200;
    background-color: rgba(255, 136, 0, 0.12);
}

/* Wrapper que cria a proporção 1:1 para a imagem */
.bav-image-wrapper {
    width: var(--bav-thumb-size-mobile);
    height: var(--bav-thumb-size-mobile);
    position: relative;
    margin-bottom: 8px;
    flex: 0 0 auto;
}

/* Imagem circular com object-fit para cobrir o contêiner sem distorcer */
.bav-participant-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    transition: border-color 0.28s ease, transform 0.28s ease;
    border: 3px solid transparent; /* espaço para borda de seleção sem mudar layout */
}

/* Nome / título */
.bav-participant-name {
    display: block;
    color: #000000;
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1.2;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    /* limita a cerca de 2 linhas e evita cards diferentes por texto grande */
    max-height: 2.6em;
    overflow: hidden;
    word-break: break-word;
}

/* Radio invisível (já estava assim) */
.bav-participant input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Estado selecionado: aplica destaque sem alterar o tamanho do card */
.bav-participant input[type="radio"]:checked + .bav-participant-label {
    border-color: #fc8106;
    background-color: #ffefdb;
    box-shadow: 0 6px 20px rgba(252,129,6,0.12);
}

/* Destacar borda da imagem quando selecionado */
.bav-participant input[type="radio"]:checked + .bav-participant-label .bav-participant-image {
    border-color: #fc8106;
    transform: translateY(-2px);
}

/* Footer do card (se tiver elementos embaixo) — empurra pro final */
.bav-participant-label .card-footer {
    margin-top: auto;
    width: 100%;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    padding-top: 8px;
    box-sizing: border-box;
}

/* Botão de submit */
.bav-submit-button {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    font-size: 1.3em;
    font-weight: 700;
    color: #0b1c2c;
    background-color: #1d78c1;
    border: 2px solid #1d78c1;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.28s ease;
    text-transform: uppercase;
}

/* Hover/Focus no submit */
.bav-submit-button:hover,
.bav-submit-button:focus {
    background-color: #ff4757;
    border-color: #ff4757;
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 25, 250, 0.12);
}

/* Mensagem de sucesso */
.bav-success-message {
    padding: 15px 20px;
    margin: 20px 0;
    background-color: #1d78c1;
    color: #ffffff;
    border-radius: 4px;
    font-size: 1.1em;
    font-weight: bold;
    border-left: 5px solid #ff4757;
}

/* ======================================= */
/* MEDIA QUERY PARA TABLETS E DESKTOPS (>=768px) */
/* ======================================= */

@media (min-width: 768px) {
    .bav-voting-form {
        margin: 40px auto;
        padding: 30px;
        border-radius: 8px;
    }

    .bav-category-block h2 {
        font-size: 1.8em;
    }

    /* Usa grid com colunas responsivas no desktop para manter uniformidade
       e permitir múltiplas colunas — ajuste minmax pra controlar quantos cabem */
    .bav-participants-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: var(--bav-gap-desktop);
        align-items: start;
    }

    /* Tamanho do item (cada card) — controla quantas colunas cabem visualmente */
    .bav-participant {
        min-width: 150px;
    }

    /* Ajusta o tamanho da miniatura no tablet/desktop */
    .bav-image-wrapper {
        width: var(--bav-thumb-size-desktop);
        height: var(--bav-thumb-size-desktop);
    }

    .bav-participant-name {
        font-size: 1em;
    }

    .bav-submit-button {
        padding: 15px;
        margin-top: 30px;
        font-size: 1.5em;
    }
}

/* Ajustes finos para telas muito pequenas */
@media (max-width: 420px) {
    :root { --bav-thumb-size-mobile: 92px; }
    .bav-participants-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; }
    .bav-participant-label { padding: 10px; min-height: 200px; }
    .bav-participant-name { font-size: 0.88em; max-height: 2.4em; }
}

/* Acessibilidade: foco visível nos labels */
.bav-participant-label:focus-within {
  outline: 3px solid rgba(45, 120, 190, 0.18);
  outline-offset: 3px;
}

/* Pequeno polimento para a rolagem horizontal (caso a grid vire uma única linha) */
.bav-participants-grid::-webkit-scrollbar {
  height: 8px;
}
.bav-participants-grid::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 8px;
}

/* FIM */