/* =======================================================================
   ESTILOS ESPECÍFICOS DA PÁGINA DO JOGADOR
   -----------------------------------------------------------------------
   - Tudo escopado em .jogador-show para não vazar para outras páginas
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. CARDS GERAIS
   ----------------------------------------------------------------------- */

/* Cards suaves com sombra leve */
.jogador-show .soft-card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Card principal (container do conteúdo do jogador) */
.jogador-show .player-main-card {
  background: #f8f9fa;
  color: inherit;
}

/* Conteúdo interno do card principal */
.jogador-show .player-card-inner {
  min-height: 220px;
}

/* -----------------------------------------------------------------------
   2. FOTO DO JOGADOR (CARD + OVERLAY DE NOME)
   ----------------------------------------------------------------------- */

/* Card que contém a foto do jogador */
.jogador-show .player-photo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;            /* fundo discreto caso a foto tenha transparência */
  border-radius: 16px;
  position: relative;
  padding: 1rem;
}

/* Imagem do jogador:
   - ocupa bem o espaço sem cortar (contain)
   - bordas arredondadas padronizadas */
.jogador-show .hero-photo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 16px;
  display: block;
  z-index: 1;
}

/* Nome do jogador sobreposto na foto (overlay inferior) */
.jogador-show .player-photo-name {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px 16px;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0)
  );

  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);

  z-index: 5;
}

/* -----------------------------------------------------------------------
   3. CABEÇALHO / NOME / ESCUDO / POSIÇÃO
   ----------------------------------------------------------------------- */

/* Nome do jogador (texto principal) */
.jogador-show .player-name {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Linha com clube atual / info complementar */
.jogador-show .player-club {
  font-size: 0.95rem;
  color: #6c757d;
}

/* Nome do clube em destaque dentro da linha de clube */
.jogador-show .player-club-name {
  font-weight: 500;
}

/* Escudo padrão (pequeno) */
.jogador-show .club-badge {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Escudo grande usado ao lado do nome do jogador */
.jogador-show .club-badge-lg {
  width: 125px;
  height: 125px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}

/* Posição do jogador em destaque (ex.: Atacante, Zagueiro) */
.jogador-show .player-position {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0d6efd;
}

/* -----------------------------------------------------------------------
   4. PÍLULAS DE INFORMAÇÃO (IDADE, ALTURA, PESO, PÉ, REDES SOCIAIS, etc.)
   ----------------------------------------------------------------------- */

/* Container individual de cada pílula */
.jogador-show .player-info-pills .pill-item {
  background: #f9fafb;
  border-radius: 0.9rem;
  padding: 0.5rem 0.85rem;
/*  border: 1px solid rgba(148, 163, 184, 0.25); */
  border: 1px solid rgba( 33,  37,  41, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Label da pílula (título pequeno em caixa alta) */
.jogador-show .pill-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #9ca3af;
  margin-bottom: 0.05rem;
}

/* Valor da pílula (texto principal) */
.jogador-show .pill-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: #111827;

  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* -----------------------------------------------------------------------
   5. BIO / PERFIL DO JOGADOR
   ----------------------------------------------------------------------- */

.jogador-show .player-bio {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 0.75rem 1rem;
}

.jogador-show .player-bio-text {
  font-size: 0.9rem;
  font-weight: 500;
}

/* -----------------------------------------------------------------------
   6. LINK SOCIAL (INSTAGRAM) – USANDO BOOTSTRAP ICONS
   ----------------------------------------------------------------------- */

/*
  Estrutura HTML esperada dentro da pílula de "Redes Sociais":

  <a href="<?= Security::safeHtml($instaUrl) ?>"
     target="_blank"
     rel="noopener"
     class="social-link-pill"
     aria-label="Instagram do atleta">
    <i class="bi bi-instagram"></i>
    @handle
  </a>
*/

/* Link principal (pílula de rede social) */
.jogador-show .social-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  font-size: 0.95rem;
  font-weight: 600;
  color: #e1306c; /* cor do @handle */
  text-decoration: none;
}

.jogador-show .social-link-pill:hover {
  opacity: 0.85;
  text-decoration: underline;
}

/* Ícone do Instagram (Bootstrap Icons) dentro da pílula */
.jogador-show .social-link-pill .bi-instagram {
  font-size: 1.2rem; /* aumenta/diminui o tamanho do ícone aqui */
  line-height: 1;
  color: #e1306c;   /* mesma cor do texto para manter coerência */
}

/* (Opcional) Link social genérico fora da pílula, se usado em outro lugar */
.jogador-show .social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  color: #e1306c;
}

.jogador-show .social-link:hover {
  opacity: 0.85;
}

/* -----------------------------------------------------------------------
   7. CAMPO TÁTICO (WIDGET DO CAMPO)
   ----------------------------------------------------------------------- */

/* Wrapper que centraliza o campo dentro do card */
.jogador-show .campo-widget {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Ajuste de espaçamento ao redor do campo */
.jogador-show .campo-widget .pitch-wrap {
  padding: 6px 0;
}

/* -----------------------------------------------------------------------
   8. SEÇÃO DE NOTÍCIAS DO JOGADOR
   ----------------------------------------------------------------------- */

/* Card geral que agrupa as notícias do jogador */
.jogador-show .player-news-card {
  /* A sombra principal já vem de .soft-card,
     então aqui deixamos neutro para não duplicar. */
}

/* Bloco de destaque (primeira notícia) */
.jogador-show .player-news-featured {
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
/*
  background: linear-gradient(
    135deg,
    rgba(13, 110, 253, 0.08),
    rgba(13, 202, 240, 0.08)
  );
*/
  background: linear-gradient(
    135deg,
    rgba(108, 117, 125, 0.08),  /* cinza bootstrap #6c757d */
    rgba(173, 181, 189, 0.08)   /* cinza claro #adb5bd */
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.jogador-show .player-news-featured:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.25);
/*  background: linear-gradient(
    135deg,
    rgba(13, 110, 253, 0.12),
    rgba(13, 202, 240, 0.12)
  );*/
  background: linear-gradient(
    135deg,
    rgba(108, 117, 125, 0.14),  /* cinza mais intenso no hover */
    rgba(173, 181, 189, 0.14)
  );
}

/* Subtítulo tipo "Destaque", "Últimas notícias" */
.jogador-show .player-news-featured-kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  opacity: 0.85;
}

/* Título da notícia em destaque */
.jogador-show .player-news-featured-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Lista das demais notícias abaixo da destacada */
.jogador-show .player-news-list {
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}

/* Item individual de notícia na lista */
.jogador-show .player-news-item {
  padding: 0.55rem 0.35rem;
  border-radius: 0.6rem;
  margin-bottom: 0.15rem;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

.jogador-show .player-news-item:hover {
  background-color: rgba(148, 163, 184, 0.12);
  transform: translateX(2px);
}

/* Título das notícias na lista */
.jogador-show .player-news-title {
  font-size: 0.92rem;
  font-weight: 500;
}

/* Metadados da notícia (data, categoria, etc.) */
.jogador-show .player-news-meta {
  font-size: 0.78rem;
}

/* Ícone decorativo ao lado das notícias (se usado) */
.jogador-show .player-news-icon {
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.6;
  display: flex;
  align-items: center;
}

/* -----------------------------------------------------------------------
   9. SEÇÃO DE PARCEIROS/PATROCINADORES
   ----------------------------------------------------------------------- */
   
.partner-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}


/* -----------------------------------------------------------------------
   10. RESPONSIVIDADE
   ----------------------------------------------------------------------- */

/* Em telas menores que 992px, o conteúdo do card principal fica em coluna */
@media (max-width: 991.98px) {
  .jogador-show .player-card-inner {
    flex-direction: column;
  }
}

/* Ajustes finos para telas muito pequenas (ex.: smartphones) */
@media (max-width: 576px) {
  .jogador-show .player-news-featured {
    padding: 0.8rem 0.85rem;
  }

  .jogador-show .player-news-title {
    font-size: 0.9rem;
  }
}