/* =========================
   FONTES GLOBAIS
========================= */
:root {
  --font-noto-sans: 'Noto Sans';
}

.font-noto-sans {
  font-family: var(--font-noto-sans);
}

/* =========================
   EFEITO DE ZOOM NOS CARDS
========================= */
.card-zoom-effect {
  transition: transform 0.3s ease-in-out;
}

.card-zoom-effect:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Cards pequenos (desktop) */
.card-custom {
  height: 155px;
}

/* Card grande (desktop) */
.card-custom-big {
  height: 100%;
  min-height: 310px;
}

/* Centralização do texto */
.card-content-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Imagens dos cards de notícia */
.noticia-card-img { 
  width: 100%; 
  height: auto; 
  display: block; 
}

/* Estrutura flex dos cards */
.row {
  display: flex;
  align-items: stretch;
}
.col-md {
  display: flex;
}
.br-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* =========================
   CAROUSEL FULL WIDTH/HEIGHT
========================= */

/* 1. Define uma altura para o container principal no Desktop 
   (Opcional: ajuste 600px para a altura que você usou no fill-1400x600) 
*/
.br-carousel .carousel-stage {
  height: 600px; /* Garante que o container tenha altura para a imagem preencher */
}

/* 2. Remove restrições do wrapper gerado pela tag Python */
.carousel-content .carousel-title {
  width: 100%;
  height: 100%;
  margin: 0;       /* Remove margem padrão do h3 */
  padding: 0;
  display: block;  /* Remove comportamento de texto */
  font-weight: normal; 
}

/* 3. Garante que o link (se houver) também ocupe tudo */
.carousel-content .carousel-title a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

/* 4. A Mágica: Força a imagem a preencher tudo e cortar o excesso (crop) */
.carousel-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* Estica a imagem para cobrir a área sem distorcer */
  object-position: center;
  display: block;
}

/* =========================
   RICHTEXT (vídeos responsivos)
========================= */
.richtext-video iframe,
.richtext-video embed,
.richtext-video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
}

/* =========================
   RESPONSIVIDADE (mobile)
========================= */
@media (max-width: 767px) {
  /* Cards no mobile */
  .card-custom,
  .card-custom-big {
    height: 150px;
    min-height: auto;
  }

  .row > .col-md-6:last-of-type .card-custom-big {
    margin-top: 1rem;
  }
}

@media (max-width: 768px) {
  /* Carousel no mobile */
  .br-carousel {
    height: 400px !important;
    min-height: 0 !important;
  }

  .carousel-content {
    height: 100% !important;
    width: 100%;
  }

  .carousel-content .carousel-title,
  .carousel-content a {
    height: 100%;
    margin: 0;
    display: block;
  }

  .carousel-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
}

/* Carousel de notícias */
.br-carousel.noticia-carousel {
    --carousel-min-height: 508px;
}

/* =========================
   GRID DE CARDS (LAYOUT SEGURO)
   Este bloco contém todas as correções de layout, 
   mas aplica APENAS ao container .cards-grid
========================= */

/* 1. O Container Principal */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas fixas */
  gap: 24px; 
  width: 100%;
  margin-bottom: 2rem;
}

/* 2. O Card (Somente quando estiver dentro do Grid) */
.cards-grid .card-zoom-effect {
  width: 100%;
  height: 100%; 
  display: flex;
  flex-direction: column;
  
  /* Restaura o fundo branco e corrige comportamento de link */
  background-color: white; 
  text-decoration: none;
  color: inherit;
  
  /* Arredondamento e Transição */
  border-radius: 8px; 
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* 3. Componente br-card (Somente dentro do Grid) 
   Isso impede que afete os carrosséis ou outras seções */
.cards-grid .card-zoom-effect > .br-card {
  flex-grow: 1;         /* Faz o conteúdo esticar */
  width: 100%;
  margin: 0 !important; /* Remove margem nativa apenas aqui */
  display: flex;
  flex-direction: column;
}

/* 4. Hover Específico do Grid */
.cards-grid .card-zoom-effect:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* --- Responsividade do Grid --- */

/* Tablets (iPad, etc): 2 colunas */
@media (max-width: 992px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Celulares: 1 coluna */
@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================
   VARIAÇÃO PARA BASIC PAGE (Compacta)
   Atualizado com correção de texto
========================= */

.cards-grid.cards-grid--compact {
  /* Mantém o grid restrito */
  grid-template-columns: repeat(2, minmax(0, 1fr)); 
  gap: 16px;
  max-width: 100%;
}

/* 1. Resetar largura mínima do Flexbox */
/* Isso é crucial: diz ao flex container interno que ele PODE ser menor que seu conteúdo */
.cards-grid.cards-grid--compact .br-card,
.cards-grid.cards-grid--compact .br-card > div, /* Pega containers internos diretos */
.cards-grid.cards-grid--compact .card-content {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 2. Forçar quebra de texto */
/* Aplica a qualquer texto dentro do card compactado */
.cards-grid.cards-grid--compact .br-card * {
  white-space: normal !important;   /* Força quebra de linha normal */
  overflow-wrap: anywhere !important; /* Quebra palavras longas se necessário */
  word-break: break-word;           /* Compatibilidade extra */
}

/* Responsividade para Mobile */
@media (max-width: 1200px) {
  .cards-grid.cards-grid--compact {
    grid-template-columns: 1fr;
  }
}

/* Força a exibição da paginação em telas menores que 576px */
@media (max-width: 575.98px) {
    .br-pagination.d-none.d-sm-flex {
        display: flex !important; /* O !important é necessário para vencer a classe do Bootstrap */
        justify-content: center;  /* Centraliza para ficar bonito no mobile */
        flex-wrap: wrap;          /* Quebra linha se os números não couberem */
    }
}

/* Força bruta para garantir que o input preencha a coluna */
.br-select.w-100, 
.br-select.w-100 .br-input {
    width: 100% !important;
    max-width: 100% !important;
}