/* public/css/hub-startups.css
 *
 * Ajustes de design ESCOPADOS ao Hub de Startups (tudo sob .section_startups).
 * Não altera as classes globais do "skin" (.heading-5, .label, .text-size-regular)
 * fora desta seção — as demais páginas seguem idênticas. A especificidade é
 * elevada de propósito (prefixo .section_startups + cadeia) para vencer o CSS do
 * Webflow sem precisar de !important, exceto no estado ativo do filtro.
 */

/* 1) Identidade do card = LOGO ------------------------------------------ */
/* O nome em texto sai do corpo do card: os logos são wordmarks (já trazem o
   nome), então mostrar logo + nome era redundante. O nome segue no HTML
   (display:none preserva o SEO) e é anunciado a leitores de tela pelo alt do
   logo. */
.section_startups .collection-item .heading-5 {
  display: none;
}
/* Descrição em cinza de apoio. */
.section_startups .container_description .text-size-regular {
  color: var(--high-gray);
  line-height: 1.55;
}

/* 2) Grid responsivo que NUNCA estoura a largura da página --------------- */
/* O template alternava 1/2/3/4 colunas por breakpoint e, no desktop largo,
   forçava 4 colunas fixas que não cabiam (os cards ultrapassavam a borda).
   auto-fill + minmax acomoda quantas colunas couberem, sempre dentro do
   container; o min(240px,100%) evita estourar em telas estreitas. */
.section_startups .collection-list.startups-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
}

/* 3) Chip de categoria: PÍLULA, porém menor ----------------------------- */
/* Mantém o aspecto de pílula (fundo claro, cantos arredondados), mas compacta
   e discreta. white-space:normal deixa o texto longo quebrar dentro da pílula
   em vez de forçar a largura do card (o que antes estourava o grid). */
.section_startups .container_label {
  height: auto;
}
.section_startups .container_label .label.primary {
  display: inline-block;
  background: #eef0f2;
  border-color: transparent;
  padding: 0.28rem 0.7rem;
  white-space: normal;
  overflow: visible;
  text-align: left;
  transform: none !important; /* trava qualquer transform do IX2 na pílula */
  transition: none !important;
}
.section_startups .container_label .label-inner {
  height: auto;
  overflow: visible;
  text-align: left; /* alinha o texto do chip à esquerda (era center) */
  transform: none !important;
  transition: none !important;
}
.section_startups .container_label .label-text-hover {
  display: none; /* remove o segundo texto do "roll" de hover */
}
/* Mata a animação de "roll" do hover: o IX2 (webflow.js) aplica um transform
   inline ao passar o mouse — o texto subia e deixava a pílula vazia. O
   !important vence o estilo inline do IX2. */
.section_startups .container_label .label-text {
  color: var(--high-gray);
  font-size: 0.62rem; /* ~10px, menor que antes */
  letter-spacing: 0.4px;
  line-height: 1.3;
  text-align: left;
  transform: none !important;
  transition: none !important;
}

/* 3b) Espaçamento interno do card -------------------------------------- */
/* O card era um grid com grid-row-gap: 2rem entre TODAS as faixas (chip, logo,
   nome/descrição, link) + alturas fixas — daí o excesso de respiro no topo e os
   "buracos" desiguais. Ritmo mais compacto e proporcional. */
.section_startups .collection-item {
  grid-row-gap: 0.9rem;
  padding: 1.5rem 1.5rem 1.35rem;
}
/* nome um tiquinho mais perto da descrição */
.section_startups .container_description {
  grid-row-gap: 0.5rem;
}

/* Logo = identidade do card: cor restaurada (o skin aplicava grayscale) e
   altura normalizada (~40px) para a grade ficar uniforme; alinhado à esquerda. */
.section_startups .container_logo {
  justify-content: flex-start;
  height: 44px;
}
.section_startups .container_logo .logo_startup {
  filter: none;
  width: auto;
  height: auto;
  max-height: 40px;
  max-width: 150px;
}

/* 4) Chips de filtro (sob a busca): menores e mais compactos ------------- */
.section_startups .categorias_container {
  grid-column-gap: 0.6rem;
  grid-row-gap: 0.6rem;
}
.section_startups .categorias_container .filter-button {
  padding: 0.4rem 0.85rem;
}
.section_startups .categorias_container .filter-button .label-text,
.section_startups .categorias_container .filter-button .label-text-hover {
  font-size: 0.72rem;
  letter-spacing: 0.3px;
}

/* Estado ativo do filtro na cor da marca (teal), no lugar do cinza neutro. */
.section_startups .filter-button.filter-active {
  background-color: var(--high-blue) !important;
  color: #fff !important;
}
.section_startups .filter-button.filter-active .label-text,
.section_startups .filter-button.filter-active .label-text-hover {
  color: #fff !important;
}

/* 5) Botão "Ver mais / Ver menos" -------------------------------------- */
.section_startups .hub-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.section_startups .hub-load-more-wrap[hidden] {
  display: none;
}
.section_startups .hub-load-more {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--black);
  background: #fff;
  border: 1px solid var(--light-gray);
  border-radius: 500px;
  padding: 0.85rem 2rem;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.section_startups .hub-load-more:hover {
  border-color: var(--high-blue);
  color: var(--high-blue);
}