/* public/css/blog.css
 *
 * Estilos da listagem /blog (busca, chips de categoria, "carregar mais", clamp da
 * descrição, folga do topnav, bolinha decorativa). Antes injetados por JS
 * (injectCss em blog.js) — agora servidos por <link> pela rota app/blog/page.tsx,
 * o que mata o flash de conteúdo sem estilo (FOUC) e separa estilo de comportamento.
 *
 * Cores de marca referenciam os tokens do skin (femtov1.webflow.css :root):
 * --black (#011222) e --high-blue (#178398). As variantes com transparência
 * (rgba(1,18,34,.X)) seguem literais — o skin não define tokens com canal alpha.
 */
.blog-search {
  display: block;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  margin: 0 0 18px;
  border: 1px solid rgba(1, 18, 34, 0.18);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 15px;
  font-family: 'Nunito Sans', sans-serif;
  color: var(--black);
}
.blog-search:focus {
  outline: none;
  border-color: var(--high-blue);
}
.blog-search::placeholder {
  color: rgba(1, 18, 34, 0.45);
}
.blog-categories-list-item {
  cursor: pointer;
}
.blog-categories-list-item .label {
  transition: background 0.12s, color 0.12s;
}
.blog-categories-list-item.is-active .label {
  background: var(--black);
}
.blog-categories-list-item.is-active .label-text {
  color: #fff;
}
.blog-loadmore-wrap {
  width: 100%;
  text-align: center;
  margin: 40px 0 8px;
}
.blog-loadmore {
  background: var(--black);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 30px;
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s;
}
.blog-loadmore:hover {
  background: var(--high-blue);
}
.blog-noresults {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px;
  color: rgba(1, 18, 34, 0.6);
  padding: 24px 0;
}
.post-preview-date {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(1, 18, 34, 0.5);
  margin-bottom: 8px;
}
/* Trunca a descrição dos cards em 3 linhas (os resumos do CMS variam de ~200 a ~500
   caracteres e deixavam a grade com alturas muito desiguais). */
.post-preview .text-size-medium {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* O navbar é overlay absoluto sobre o topo da página. Com o hero full-bleed de imagem,
   ele flutua SOBRE a imagem escura do hero (como no /hub-de-startups) — a folga de topo
   do navbar passa a ser o padding interno do próprio hero (.blog-header). Por isso aqui
   zeramos o padding-top que o skin empurra acima do hero. */
.section-blog-posts .page-padding,
.section-blog-posts .padding-top.blog {
  padding-top: 0;
}
/* Bolinha preta decorativa sobre cada imagem de card: é uma .label.primary com binding
   de CMS vazio (w-dyn-bind-empty), resíduo do template Arkitect. Sem conteúdo, vira só
   um ponto preto no canto. Esconde o wrapper. */
.post-preview .div-block-8 {
  display: none;
}

/* ——— Post em destaque (mais recente) ———
   Card largo acima da grade: imagem à esquerda, conteúdo à direita (empilha no
   mobile). Título e imagem maiores que os cards da grade. O blog.js controla a
   visibilidade (some ao filtrar/buscar). */
.blog-featured {
  width: 100%;
  margin-bottom: 48px;
}
.blog-featured .post-preview-content::before {
  content: 'Em destaque';
  display: inline-block;
  font-family: Oswald, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--high-blue);
  margin-bottom: 10px;
}
.blog-featured .post-preview-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
}
/* Destaque permite 4 linhas de resumo (a grade usa 3). */
.blog-featured .text-size-medium {
  -webkit-line-clamp: 4;
}
.blog-featured .heading-h3.blog {
  font-size: 26px;
  line-height: 1.18;
}
/* Resumo do destaque: maior que o card da grade (17px), mas longe dos 22px do skin. */
.blog-featured .text-size-medium {
  font-size: 17px;
  line-height: 1.55;
  color: var(--high-gray);
  -webkit-line-clamp: 3;
}
/* Lado a lado só a partir de 992px — abaixo disso a coluna de conteúdo ficava
   estreita e o título quebrava em 4–5 linhas, então o destaque empilha (imagem em
   cima, texto embaixo). */
@media (min-width: 992px) {
  .blog-featured .post-preview {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
  }
  /* a coluna da imagem perde a margem inferior (vira lado a lado) */
  .blog-featured .post-preview > .margin-bottom {
    margin-bottom: 0;
  }
  .blog-featured .heading-h3.blog {
    font-size: 40px;
    line-height: 1.12;
  }
}

/* ——— Densidade e escala da GRADE de cards (revisão UX 2026-06-09) ———
   A listagem reusava a escala de leitura de artigo: imagem quase quadrada (~486px de
   altura), título 32px, resumo 22px e padding interno de 48px — cards de ~794px,
   ~1 linha por tela, títulos quebrando em 5–6 linhas quando a grade ficava 3-col
   apertada. Aqui reescalamos SÓ os cards da grade (.blog-posts-grid .post-preview),
   sem tocar no skin global nem no destaque (que fica fora da grade). */

/* Colunas previsíveis: 3 só com espaço de verdade (≥1101), 2 em tablet/intermediário,
   1 no celular. Substitui o 3-col-fixo-até-991 do skin (que apertava a ~1040px). */
.blog-posts-grid.w-dyn-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column-gap: 28px;
  grid-row-gap: 44px;
}
@media (max-width: 1100px) {
  .blog-posts-grid.w-dyn-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .blog-posts-grid.w-dyn-items {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Imagem landscape 3:2 (era ~quadrada e altíssima) — corta a altura do card quase
   pela metade — e cantos menos exagerados (3rem → 14px). */
.blog-posts-grid .post-preview-image-wrapper {
  border-radius: 14px;
}
.blog-posts-grid .post-preview-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

/* Texto do card encostado na imagem (o skin metia 48px de padding lateral). */
.blog-posts-grid .post-preview-content {
  padding-left: 0;
  padding-right: 0;
}

/* Tipografia do card: hierarquia mais separada e própria de varredura.
   Título 32 → 21; resumo 22 → 15 (cinza de apoio, 2 linhas). */
.blog-posts-grid .post-preview .heading-h3.blog {
  font-size: 21px;
  line-height: 1.25;
}
.blog-posts-grid .post-preview .text-size-medium {
  font-size: 15px;
  line-height: 1.5;
  color: var(--high-gray);
  -webkit-line-clamp: 2;
  margin-top: 6px;
}
.blog-posts-grid .post-preview-date {
  margin-bottom: 6px;
}

/* ——— HERO da listagem — banner full-bleed com imagem (espelha o Hub) ———
   O inject-blog separa o cabeçalho em .blog-header (hero) e .blog-filterbar (busca +
   chips), e monta dentro do .blog-header: imagem de fundo + overlay escuro + badge +
   <h1> "Blog" + subtítulo (::after). O hero rompe os containers do skin (100vw) e
   encosta no topo, com o navbar overlay flutuando sobre a imagem. */
.blog-header {
  position: relative;
  /* "tela" inset 16px em cada lado (o gutter navy do <body> aparece em volta), espelhando
     o hero do Hub — que tem ~1408px de largura num viewport de 1440 e cantos arredondados. */
  width: calc(100vw - 32px);
  margin-left: calc(50% - 50vw + 16px);
  margin-right: calc(50% - 50vw + 16px);
  min-height: clamp(360px, 48vh, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  /* cantos superiores arredondados (look "iPhone"/Dynamic Island), iguais ao radius da
     .main-wrapper.content (6rem) — a imagem (overflow:hidden) é recortada por eles, e o
     navy do <body> aparece nos cantos. */
  border-radius: 6rem 6rem 0 0;
  padding: 132px 24px 64px; /* topo limpa o navbar overlay; imagem fica atrás dele */
  margin-bottom: 40px;
  color: #fff;
}
.blog-hero-bg {
  position: absolute;
  inset: 0;
  display: block;
}
.blog-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-hero-overlay {
  position: absolute;
  inset: 0;
  /* escurece a foto p/ o texto branco ficar legível (a foto tem céu claro no topo) */
  background: linear-gradient(180deg, rgba(1, 18, 34, 0.55) 0%, rgba(1, 18, 34, 0.74) 100%);
}
.blog-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
}
.blog-hero-badge {
  display: inline-block;
  margin-bottom: 20px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(1, 18, 34, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blog-header .heading-h1 {
  font-size: 56px;
  line-height: 1.02;
  margin: 0;
  text-align: center;
  color: #fff;
}
.blog-header .heading-h1::after {
  /* Subtítulo (kicker). Texto provisório — fácil de reescrever aqui. */
  content: 'Ideias e práticas de design, UX e inovação.';
  display: block;
  margin: 14px auto 0;
  max-width: 560px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(255, 255, 255, 0.86);
}
/* O radius dos cantos do hero acompanha o da .main-wrapper.content em cada breakpoint do
   skin (6 → 4 → 3 → 2rem), e o gutter cai de 16px para 8px abaixo de 479px (igual ao
   .body), p/ os cantos do hero coincidirem sempre com os da "tela" arredondada. */
@media (max-width: 991px) {
  .blog-header {
    border-radius: 4rem 4rem 0 0;
  }
}
@media (max-width: 767px) {
  .blog-header {
    border-radius: 3rem 3rem 0 0;
  }
}
@media (max-width: 479px) {
  .blog-header {
    border-radius: 2rem 2rem 0 0;
    width: calc(100vw - 16px);
    margin-left: calc(50% - 50vw + 8px);
    margin-right: calc(50% - 50vw + 8px);
  }
}

/* ——— Seção de FILTRO (busca + chips), abaixo do hero ———
   Barra à esquerda, separada do hero por um fio sutil. Busca à esquerda + chips
   logo ao lado (alinhados à esquerda, não mais serrilhados à direita). */
.blog-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 0 0 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(1, 18, 34, 0.08);
}
.blog-filterbar .blog-search {
  margin: 0;
  flex: 0 1 340px;
}
.blog-filterbar .blog-categories-wrapper {
  flex: 1 1 auto;
  min-width: 0; /* permite encolher e conter a faixa rolável dos chips (não estoura) */
}
.blog-categories-list {
  justify-content: flex-start; /* era flex-end (serrilhado à direita) */
  gap: 10px;
}
@media (max-width: 680px) {
  .blog-header {
    min-height: 320px;
    padding: 108px 20px 48px; /* topo limpa o navbar (hambúrguer) */
    margin-bottom: 28px;
  }
  .blog-header .heading-h1 {
    font-size: 38px;
  }
  .blog-header .heading-h1::after {
    font-size: 16px;
  }
  .blog-hero-badge {
    margin-bottom: 16px;
    font-size: 12px;
  }
  .blog-filterbar {
    padding-top: 18px;
    margin-bottom: 28px;
  }
  .blog-filterbar .blog-search {
    flex-basis: 100%;
  }
  .blog-filterbar .blog-categories-wrapper {
    flex-basis: 100%;
  }
  /* No celular os chips viram uma faixa de rolagem horizontal em vez de quebrar em
     4 linhas — mantém a barra compacta. */
  .blog-categories-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .blog-categories-list::-webkit-scrollbar {
    display: none;
  }
  .blog-categories-list .blog-categories-list-item {
    flex: 0 0 auto;
  }
}