/* =======================================================
   FRC SPORTS – Estilos específicos para notícias
   Escopo:
   - Home (cards em grid)
   - Página de listagem (/noticias)
   - Página de notícia individual (/noticia/{id})
   Arquivo: /assets/css/news.css
   ======================================================= */


/* =======================================================
   1. Container geral de notícias (HOME)
   ======================================================= */

/**
 * .news-section
 * -------------
 * Bloco opcional para envolver a seção de notícias na home.
 *
 * Exemplo de uso:
 * <section class="news-section py-4">
 *   ... grid de cards ...
 * </section>
 *
 * A cor de fundo pode ser controlada via CSS custom property:
 *  --frc-bg
 */
.news-section {
  background: var(--frc-bg, #ffffff);
}


/* =======================================================
   2. Card de notícia (layout e hover) – HOME
   ======================================================= */

/**
 * .news-card
 * ----------
 * Card base usado na home para cada notícia.
 * Aqui optamos por um visual com FUNDO ESCURO fixo,
 * independente de modo claro/escuro do sistema, para manter
 * consistência entre desktop e mobile.
 */
.news-card {
  border-radius: 18px;
  background: #151515;      /* fundo escuro fixo */
  color: #f9fafb;           /* texto claro */
  border: 0;
  overflow: hidden;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

/* Efeito de destaque ao passar o mouse no card */
.news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 35px rgba(0,0,0,0.35);
}

/**
 * .news-card-link
 * ---------------
 * Link que envolve todo o conteúdo do card de notícia, para
 * que o card inteiro seja clicável.
 *
 * - display:flex / flex-direction: column → permite que a
 *   imagem e o corpo do card se comportem como um layout
 *   vertical fluido.
 */
.news-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}


/* =======================================================
   3. Mídia (imagem + overlays) – HOME
   ======================================================= */

/**
 * .news-card-media
 * ----------------
 * Container da imagem da notícia na HOME.
 *
 * - position: relative → necessário para posicionar:
 *     • badge de data (.news-date)
 *     • overlay de título (.news-title-overlay)
 * - overflow: hidden → evita que zoom/overlays escapem
 *   do card.
 */
.news-card-media {
  position: relative;
  overflow: hidden;
}

/**
 * Imagem padrão dentro do container .ratio (Bootstrap).
 *
 * Regras:
 * - width/height 100% → preenche totalmente o container 16:9
 * - object-fit: cover → mantém a proporção da imagem, cortando
 *   apenas o excedente (sem distorcer).
 * - object-position: center 35% → posição NEUTRA:
 *      • centraliza na horizontal (center)
 *      • puxa levemente para cima na vertical (35%)
 *
 * Esse valor neutro funciona bem para a maioria das fotos:
 * - reduz o risco de cortar a cabeça do atleta/jogador
 * - mantém parte do tronco/corpo visível.
 */
.news-card-media .ratio > img,
.news-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* -------------------------------------------------------
   3.1 Presets de enquadramento da imagem
   -------------------------------------------------------
   Use estas classes extras no <img> para ajustar o recorte
   conforme o tipo de foto.

   Exemplos de uso no HTML:
   ---------------------------------------------
   <!-- Foto de busto / aproximação -->
   <img class="w-100 h-100 object-fit-cover news-img-closeup" ...>

   <!-- Foto de corpo inteiro -->
   <img class="w-100 h-100 object-fit-cover news-img-fullbody" ...>
   ---------------------------------------------
*/

/**
 * .news-img-closeup
 * -----------------
 * Para fotos mais "de perto" (busto, meio corpo), nas quais
 * a cabeça está muito próxima da borda superior da imagem.
 *
 * - Puxa a imagem mais para cima (25%), de forma que:
 *   → a cabeça apareça melhor
 *   → o título/overlay não cubra partes importantes.
 */
.news-card-media img.news-img-closeup {
  object-position: center 25%;
}

/**
 * .news-img-fullbody
 * ------------------
 * Para fotos de corpo inteiro, quando se deseja mostrar
 * mais pernas/campo e não apenas a parte superior.
 *
 * - Puxa a imagem para baixo (10%), de forma que:
 *   → apareça mais da parte inferior (pernas, gramado)
 *   → ainda se preserve boa parte do tronco.
 */
.news-card-media img.news-img-fullbody {
  object-position: center 10%;
}


/* =======================================================
   4. Data da notícia (badge sobre a imagem) – HOME
   ======================================================= */

/**
 * .news-date
 * ----------
 * Badge com a data da notícia, exibido no canto superior
 * esquerdo da imagem na HOME.
 */
.news-date {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2;

  background: rgba(0, 0, 0, 0.8);
  color: #fff;

  font-size: 1.00rem;
  text-transform: uppercase;
  letter-spacing: .08em;

  padding: 4px 10px;
  border-radius: 999px; /* efeito “pílula” */
}


/* =======================================================
   5. Overlay do título sobre a imagem – HOME
   ======================================================= */

/**
 * .news-title-overlay
 * -------------------
 * Bloco que aparece na parte inferior da imagem, contendo
 * o título da notícia. Usa gradiente para garantir boa
 * legibilidade do texto sobre fundos claros/variados.
 */
.news-title-overlay {
  position: absolute;
  inset: auto 0 0 0; /* gruda na base da imagem */
  z-index: 1;
  padding: 10px 14px;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85),
    rgba(0, 0, 0, 0.0)
  );
  color: #fff;
}

/**
 * .news-title (HOME – sobre a imagem)
 * -----------------------------------
 * IMPORTANTE:
 * Esta sombra de texto é usada apenas no título que fica
 * SOBRE a imagem na HOME, para reforçar o contraste.
 */
.news-title-overlay .news-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}


/* =======================================================
   6. Corpo do card (resumo, autor, "Leia mais") – HOME
   ======================================================= */

/* Parágrafos de resumo dentro do corpo do card */
.news-card .card-body p {
  font-size: 0.9rem;
  /* texto levemente mais claro pra fundo escuro */
  color: rgba(255, 255, 255, 0.78);
}

/**
 * .news-meta
 * ----------
 * Linha inferior do card na HOME e/ou listagem
 * (contém "LEIA MAIS", autor, data resumida etc.).
 */
.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
}

/**
 * .news-more
 * ----------
 * Link “LEIA MAIS” com pequeno ícone setinha.
 */
.news-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  font-weight: 500;
  font-size: 0.85rem;
  color: #0d6efd; /* azul padrão bootstrap/logotipo */
}

/* Ícone “›” do LEIA MAIS */
.news-more-icon {
  display: inline-block;
  transition: transform .2s ease;
}

/* Ao passar o mouse no card, a setinha se move levemente */
.news-card:hover .news-more-icon {
  transform: translateX(3px);
}

/* Autor da notícia (quando exibido) */
.news-author {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.72);
}


/* =======================================================
   7. Estados vazios (home/listagem)
   ======================================================= */

/**
 * .news-empty
 * -----------
 * Mensagem mostrada quando não há notícias cadastradas.
 */
.news-empty {
  font-size: 0.95rem;
  color: var(--frc-text-muted, #6c757d);
}


/* =======================================================
 * 8. Página de LISTAGEM de notícias (noticias/index.php)
 * ======================================================= */

/**
 * .noticias-index
 * ----------------
 * Wrapper geral da página de listagem.
 * Pode ter largura limitada se desejado.
 */
.noticias-index {
  /* Exemplo:
  max-width: 960px;
  */
}

/**
 * .news-card-main
 * ----------------
 * Card principal que envolve o destaque da listagem.
 * Normalmente herda estilos de um "soft-card" global.
 */
.news-card-main {
  /* herda .soft-card do tema base */
}


/* ---------------- Destaque (primeira notícia) ---------------- */

/**
 * .news-featured
 * --------------
 * Bloco de destaque da primeira notícia da listagem.
 * Usa leve gradiente e borda para parecer "card especial".
 */
.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)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

/* Efeito hover no destaque da listagem */
.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)
  );
}

/* Kicker / rótulo do destaque (ex.: "Em destaque") */
.news-featured-kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  opacity: 0.85;
}

/**
 * .news-featured-title
 * --------------------
 * Título da notícia em destaque na LISTAGEM.
 * Aqui não há sombra, para manter o texto limpo.
 */
.news-featured-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  text-shadow: none;
}

/* Meta reduzido do destaque (data, categoria etc.) */
.news-featured-meta {
  font-size: 0.78rem;
}


/* ---------------- Lista das demais notícias ---------------- */

/**
 * .news-list
 * ----------
 * Contêiner da lista com as notícias subsequentes, em formato
 * de linhas clicáveis.
 */
.news-list {
  border-top: 1px solid rgba(148, 163, 184, 0.35);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}

/**
 * .news-item
 * ----------
 * Cada linha (item) da listagem de notícias.
 */
.news-item {
  padding: 0.55rem 0.35rem;
  border-radius: 0.6rem;
  transition:
    background-color 0.15s ease,
    transform 0.15s ease;
}

/* Hover: leve deslocamento lateral e fundo sutil */
.news-item:hover {
  background-color: rgba(148, 163, 184, 0.12);
  transform: translateX(2px);
}

/**
 * .news-title (LISTAGEM)
 * ----------------------
 * Título das notícias na listagem.
 * Aqui NÃO usamos sombra de texto de propósito.
 */
.news-title {
  font-size: 0.96rem;
  font-weight: 500;
  text-shadow: none;
}

/* Ícone que aparece ao lado do título nas linhas (se houver) */
.news-icon {
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.6;
  display: flex;
  align-items: center;
}


/* =======================================================
   9. Responsividade (HOME + LISTAGEM)
   ======================================================= */

@media (max-width: 768px) {
  /* Título sobre a imagem na HOME pode ficar um pouco menor */
  .news-title-overlay .news-title {
    font-size: 0.95rem;
  }

  .news-date {
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  .news-card .card-body {
    padding: 0.75rem 0.9rem 0.9rem;
  }
}

@media (max-width: 576px) {
  .news-featured {
    padding: 0.8rem 0.85rem;
  }

  .news-featured-title {
    font-size: 1rem;
  }

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


/* =======================================================
   10. Dark mode (ajustes finos, sem mudar fundo do card)
   ======================================================= */

@media (prefers-color-scheme: dark) {
  /* No dark mode reforçamos só sombra e contrastes;
     o fundo escuro do card já é padrão. */
  .news-card {
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
  }

  .news-card .card-body p,
  .news-author {
    color: rgba(255,255,255,0.78);
  }

  .news-more {
    color: #4da3ff;
  }

  .news-featured {
    border-color: rgba(255, 255, 255, 0.12);
  }

  .news-list .news-item:hover {
    background-color: rgba(148, 163, 184, 0.18);
  }
}

/**
 * Segurança extra:
 * ----------------
 * Dentro da listagem (/noticias), garante que NENHUM título
 * receba sombra de texto por engano (inclusive o destaque).
 */
.noticias-index .news-title,
.noticias-index .news-featured-title {
  text-shadow: none;
}


/* =======================================================
   11. Página de notícia individual (noticias/show.php)
   ======================================================= */

/**
 * .noticias-article
 * -----------------
 * Wrapper central da página da notícia individual.
 * Limita a largura do conteúdo e centraliza.
 */
.noticias-article {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/**
 * .news-article
 * -------------
 * Card geral do artigo individual.
 * Normalmente herda visual de "soft-card" global.
 */
.news-article {
  border-radius: 18px;
}

/**
 * .article-hero-img
 * -----------------
 * Imagem principal da notícia.
 * O HTML já define object-fit: cover via classes utilitárias.
 * Ajustes finos podem ser feitos aqui se necessário.
 */
.article-hero-img {
  /* ajuste adicional pode ser feito aqui, se necessário */
}

/**
 * .article-hero-caption
 * ---------------------
 * Legenda opcional abaixo da imagem principal.
 */
.article-hero-caption {
  font-size: 0.9rem;
  color: #6c757d;       /* similar ao text-muted */
  text-align: center;
}

/**
 * .article-meta
 * -------------
 * Linha de metadados (data, categoria, etc.) logo acima do título.
 */
.article-meta {
  letter-spacing: 0.08em;
}

/**
 * .article-title
 * --------------
 * Título principal da notícia individual.
 * Sem sombra, com bom contraste em fundo claro.
 */
.article-title {
  font-size: 2rem;
  line-height: 1.3;
  color: #111;
  text-shadow: none;
}

/**
 * .article-body
 * -------------
 * Corpo do texto da notícia, com tipografia confortável.
 */
.article-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--frc-text, #212529);
}

.article-body p {
  margin-bottom: 1rem;
}

.article-body h2,
.article-body h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.article-body ul,
.article-body ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.article-body li {
  margin-bottom: 0.25rem;
}

/**
 * .source-block-inner
 * -------------------
 * Bloco para exibir a “fonte original” da notícia.
 * O HTML já usa bg-light + border-start; ajustes finos
 * podem ser feitos aqui se necessário.
 */
.source-block-inner {
  /* customizações opcionais */
}

/**
 * .article-nav
 * ------------
 * Navegação inferior da página (ex.: botão "Voltar").
 */
.article-nav .btn {
  border-radius: 999px;
}

/* Thumb da notícia (lista) */
.noticias-index .news-item-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
}

.noticias-index .news-item-thumb img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  border-radius: 8px;
}

/* Thumb da notícia destacada */
.news-featured-img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 10px;
}

/* Ajustes responsivos na página individual */
@media (max-width: 768px) {
  .news-article {
    border-radius: 14px;
  }

  .article-title {
    font-size: 1.6rem;
  }
}