/* ================================================================
   LISTAGEM DE ATLETAS / CATÁLOGO
   ---------------------------------------------------------------
   Este CSS estiliza a página de listagem de atletas, incluindo:
   - Cards individuais
   - Imagens
   - Overlays com nome/cargo
   - Botão "Ver perfil"
   - Grid principal
   ================================================================ */


/* ================================================================
   TÍTULO DA PÁGINA
   ================================================================ */

/* Estiliza o título principal (h1) da listagem */
.atletas-index h1 {
    font-weight: 700; /* destaque e presença visual */
}


/* ================================================================
   GRID DE CARDS
   ================================================================ */

.player-grid {
    /* margem opcional caso queira afastar o grid do topo */
    /* margin-top: .25rem; */
}


/* ================================================================
   CARD DO ATLETA
   Estrutura base do card exibido na listagem
   ================================================================ */

.player-card {
    border-radius: 18px;              /* cantos arredondados premium */
    overflow: hidden;                 /* garante que imagem/overlay não escapem */
    transition: transform .25s ease,
                box-shadow .25s ease; /* animação suave no hover */
    background-color: #222529;        /* fundo escuro elegante */
}

/* Permite que todo o card seja clicável */
.player-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* ================================================================
   ÁREA DA IMAGEM DO ATLETA
   ---------------------------------------------------------------
   - aspect-ratio: mantém proporção uniforme entre todos os cards
   - height: define altura fixa para padronização do recorte
   - background: gradiente escuro para efeito de profundidade
   ================================================================ */

.player-card-media {
    aspect-ratio: 3 / 4;                    /* proporção vertical */
    height: 320px;                          /* controla o recorte visível */
    background: radial-gradient(
        circle at top,
        #20232a,
        #050608
    );                                      /* leve vinheta no topo */
}


/* ================================================================
   IMAGEM DO ATLETA
   ---------------------------------------------------------------
   - object-fit: cover → recorta a imagem sem distorcer
   - object-position: controla qual área da foto aparece
   - scale: dá leve zoom para efeito mais moderno
   ================================================================ */

.player-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;            /* preenche o container mantendo proporção */
    object-position: center 5%;   /* controla a parte visível da foto */
    transform: scale(1.02);       /* leve zoom inicial */
    transition: transform .4s ease;
}


/* ================================================================
   OVERLAY (NOME + POSIÇÃO)
   ---------------------------------------------------------------
   Fica sobre a imagem na parte inferior, com gradiente para legibilidade
   ================================================================ */

.player-card-overlay {
    position: absolute;
    inset: auto 0 0 0;          /* fixa o overlay no rodapé da imagem */
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: linear-gradient(
        to top,
        rgba(34, 37, 41, 0.85),
        rgba(34, 37, 41, 0.0)
    );                          /* gradiente para ajudar na leitura */
    color: #fff;
    z-index: 2;                 /* garante que fique acima da imagem */
}

/* Nome do atleta no overlay */
.player-card-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);  /* aumenta contraste no escuro */
}

/* Posição do atleta (VOLANTE, ALA, etc.) */
.player-card-position {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    opacity: 0.9;
}


/* ================================================================
   CORPO E RODAPÉ DO CARD
   ================================================================ */

/* Container inferior (quando existe texto além da imagem) */
.player-card .card-body {
    background: #111319;
    color: #d0d4df;
}

/* Rodapé do card (contém o "Ver perfil") */
.player-card .card-footer {
    background: #111319;
}

/* Link "Ver perfil" */
.player-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    color: #4da3ff;
}

/* Ícone do CTA com leve animação */
.player-card-cta-icon {
    transition: transform .25s ease;
}


/* ================================================================
   HOVER — ANIMAÇÕES INTERATIVAS
   ================================================================ */

.player-card:hover {
    transform: translateY(-4px);             /* sobe suavemente */
    box-shadow: 0 16px 35px rgba(0,0,0,0.35); /* sombra elegante */
}

/* Zoom extra na imagem ao passar o mouse */
.player-card:hover .player-card-img {
    transform: scale(1.07);
}

/* Ícone do CTA desliza um pouco para a direita */
.player-card:hover .player-card-cta-icon {
    transform: translateX(3px);
}

/* =======================================================
   Home – limitar atletas no mobile
   Em telas pequenas, mostrar apenas 4 atletas
   (o controller ainda manda 5, mas o 5º some no layout)
   ======================================================= */
@media (max-width: 575.98px) { /* breakpoint ~ Bootstrap sm */
  .players-row > .col:nth-child(n+6) {
    display: none !important;
  }
}