/* Estilos do hub /conteudos (item 2.22 do plano).
   Este CSS morava num <style> dentro do <head> da pagina. Fora do arquivo
   ele nao tinha cache proprio nem fingerprint: viajava inteiro em cada
   visita ao hub, dentro do HTML, que e a resposta com cache mais curto do
   site. Aqui ele entra na regra de um ano do _headers e no ?v= por hash do
   build, como o resto do CSS.
   Escopo: a grade de cards do hub. Os componentes de LEITURA dos artigos
   ficam em /assets/css/editorial.css. */

  /* ── Página "Conteúdos" (hub), escopo próprio, herda tokens globais ── */
  [data-page="conteudos-hub"] {
    --acc: #22d3ee; --acc-2: #2dd4bf; --acc-line: rgba(34,211,238,.34); --acc-soft: rgba(34,211,238,.12);
    --panel: rgba(255,255,255,.045); --panel-2: rgba(255,255,255,.075); --hair: rgba(255,255,255,.09); --hair-2: rgba(255,255,255,.17);
    background:
      radial-gradient(1100px 620px at 88% -6%, rgba(34,211,238,.10), transparent 60%),
      radial-gradient(900px 600px at 0% 10%, rgba(47,130,220,.07), transparent 55%),
      var(--bg-0);
  }
  /* Item de nav ativo */
  [data-page="conteudos-hub"] .nav a[aria-current="page"] { color: var(--txt-1); position: relative; }
  [data-page="conteudos-hub"] .nav a[aria-current="page"]::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--acc), var(--acc-2)); box-shadow: 0 0 10px rgba(34,211,238,.6);
  }

  /* Aviso de rascunho */
  .cx-draft { display: none; }
  html.is-draft .cx-draft {
    display: block; position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 250; max-width: calc(100vw - 24px);
  }
  html.is-draft .cx-draft span {
    display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 999px;
    background: rgba(20,16,6,.82); backdrop-filter: blur(10px); border: 1px solid rgba(255,180,80,.4); color: #ffcf94;
    font-size: .8rem; font-weight: 600; box-shadow: var(--shadow-2);
  }
  html.is-draft .cx-draft svg { width: 15px; height: 15px; color: #ffb454; }

  /* Hero */
  [data-page="conteudos-hub"] .page-hero { padding: clamp(122px,15vh,158px) 0 clamp(30px,5vw,52px); }
  .cx-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px;
    background: var(--acc-soft); border: 1px solid var(--acc-line); color: var(--acc);
    font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px;
  }
  .cx-eyebrow svg { width: 15px; height: 15px; }

  /* Seção de listagem */
  .cx-section { padding: clamp(8px,2vw,20px) 0 clamp(56px,8vw,96px); }
  .cx-grid { display: grid; gap: clamp(20px,3vw,28px); }

  /* Card destaque */
  .cx-card {
    position: relative; display: block; border-radius: var(--radius-xl); overflow: hidden;
    border: 1px solid var(--acc-line); background: var(--bg-2); min-height: clamp(300px,38vw,384px);
    box-shadow: var(--shadow-2), 0 0 40px rgba(34,211,238,.10); isolation: isolate;
    transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  }
  .cx-card:hover { transform: translateY(-4px); border-color: rgba(34,211,238,.6); box-shadow: var(--shadow-2), 0 0 60px rgba(34,211,238,.22); }
  /* Link estendido: o <a> ficou só em volta do título, para o leitor de tela
     voltar a ler resumo, minutos, autor e data (o aria-label do card inteiro
     substituía tudo isso). O ::after devolve a área de clique ao card, senão
     o alvo encolheria para o tamanho do título. */
  .cx-card-link::after { content: ''; position: absolute; inset: 0; }
  /* O anel de foco sai do título e passa a contornar o card inteiro, no mesmo
     verde do :focus-visible global do site. */
  .cx-card-link:focus-visible { outline: none; }
  .cx-card:focus-within { outline: 2px solid var(--green-neon); outline-offset: 3px; }
  .cx-card-media { position: absolute; inset: 0; z-index: -1; background-color: #071018; }
  .cx-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
  .cx-card-media::after {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, var(--bg-1) 6%, rgba(7,14,28,.92) 34%, rgba(7,14,28,.35) 66%, rgba(7,14,28,.15) 100%),
      linear-gradient(0deg, rgba(5,10,21,.55), transparent 40%);
  }
  /* Card sem foto, motivo "blueprint" BIM autocontido (grade + wireframe SVG) */
  .cx-card-media--bim {
    background:
      radial-gradient(680px 460px at 88% 24%, rgba(34,211,238,.20), transparent 60%),
      repeating-linear-gradient(0deg, rgba(34,211,238,.06) 0 1px, transparent 1px 42px),
      repeating-linear-gradient(90deg, rgba(34,211,238,.06) 0 1px, transparent 1px 42px),
      #071018;
  }
  .cx-card-media--bim .cx-bp { position: absolute; top: 50%; right: clamp(18px,7vw,92px); transform: translateY(-50%); width: min(40%,340px); height: auto; opacity: .95; filter: drop-shadow(0 0 18px rgba(34,211,238,.35)); }
  @media (max-width: 900px) { .cx-card-media--bim .cx-bp { right: 7%; width: 54%; opacity: .42; } }
  /* Sem position aqui de propósito: o inset:0 do ::after precisa se medir pelo
     .cx-card, e um position:relative neste bloco encolheria a área de clique
     para a coluna de texto. A mídia continua atrás pelo z-index:-1 dentro do
     isolation:isolate do card, não por empilhamento do corpo. */
  .cx-card-body { max-width: 600px; padding: clamp(28px,4vw,54px); display: flex; flex-direction: column; height: 100%; justify-content: center; }
  .cx-tag {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
    background: var(--acc-soft); border: 1px solid var(--acc-line); color: var(--acc);
    font-family: var(--font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px;
  }
  .cx-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
  .cx-card-title { font-size: clamp(1.7rem,3.4vw,2.55rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; color: var(--txt-1); max-width: 14ch; }
  .cx-card-desc { margin-top: 14px; color: var(--txt-2); font-size: clamp(1rem,1.4vw,1.1rem); line-height: 1.55; max-width: 46ch; }
  .cx-card-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 26px; }
  .cx-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; min-height: 48px;
    background: linear-gradient(135deg, var(--acc), var(--acc-2)); color: #042028; font-weight: 800; font-size: .98rem;
    box-shadow: 0 0 30px rgba(34,211,238,.28); transition: transform var(--t-fast), box-shadow var(--t-fast);
  }
  .cx-card:hover .cx-btn { transform: translateX(2px); box-shadow: 0 0 46px rgba(34,211,238,.45); }
  .cx-btn svg { width: 18px; height: 18px; }
  .cx-read { display: inline-flex; align-items: center; gap: 8px; color: var(--txt-3); font-size: .88rem; font-weight: 600; }
  .cx-read svg { width: 16px; height: 16px; color: var(--acc); }
  /* Autoria e data de publicação: cada card mostra a data real do conteúdo */
  .cx-meta {
    margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    font-family: var(--font-mono); font-size: .88rem; letter-spacing: .02em; color: var(--txt-3);
  }
  .cx-meta .cx-dot { opacity: .5; }
  /* Selo "Novo no site": sinaliza a inclusão recente sem alterar a data real */
  .cx-new {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
    padding: 6px 13px; border-radius: 999px; background: rgba(57,233,131,.12); border: 1px solid rgba(57,233,131,.42);
    color: var(--green-neon); font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
  }
  /* Motivo abstrato do card de IA: a arte já vem pronta, só muda o enquadramento */
  /* Ancorado no topo: a calculadora erguida pelo robô encosta na borda
     superior da arte; se o card ficar mais largo que 2,29:1, o corte extra
     sai por baixo (livros), nunca por cima. */
  .cx-card-media--ia img { object-position: 78% 0; }
  /* Card na proporção exata das artes (1900x830): as três foram compostas
     com a esquerda vazia e entram inteiras, sem recorte nem ampliação. */
  @media (min-width: 901px) {
    .cx-card { aspect-ratio: 1900 / 830; min-height: 0; }
  }

  /* Bloco final "Continue por aqui" (itens 5.22, 8.7, 8.9 e 8.21). Os cards
     "Em breve" sairam; o CSS deles (.cx-soon) saiu junto para nao ficar orfao. */
  .cx-more { margin-top: clamp(40px,6vw,72px); }
  .cx-more-h { display: flex; align-items: center; gap: 11px; font-size: clamp(1.3rem,2.4vw,1.7rem); font-weight: 800; letter-spacing: -.02em; color: var(--txt-1); }
  .cx-more-h svg { width: 24px; height: 24px; color: var(--acc); }
  .cx-more-sub { margin-top: 8px; color: var(--txt-3); font-size: 1rem; }
  .cx-next-grid { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,22px); }
  .cx-next {
    position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 24px; border-radius: var(--radius-l);
    background: var(--panel); border: 1px solid var(--hair-2); color: var(--txt-2);
    transition: border-color var(--t-fast), background var(--t-fast);
  }
  .cx-next:hover { border-color: var(--acc-line); background: var(--panel-2); }
  .cx-next:focus-within { outline: 2px solid var(--green-neon); outline-offset: 3px; }
  .cx-next-ic { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--acc-line); color: var(--acc); background: var(--acc-soft); }
  .cx-next-ic svg { width: 22px; height: 22px; }
  .cx-next-t { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--txt-1); margin-bottom: 4px; }
  .cx-next-link { color: inherit; }
  /* Mesmo link estendido dos cards de conteudo: o card inteiro clica, e o nome
     acessivel continua sendo so o titulo. */
  .cx-next-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
  .cx-next-link:focus-visible { outline: none; }
  .cx-next p { font-size: .94rem; line-height: 1.5; color: var(--txt-3); }

  @media (max-width: 900px) {
    .cx-card-media img { object-position: 72% center; }
    .cx-card-media::after { background: linear-gradient(0deg, var(--bg-1) 22%, rgba(7,14,28,.9) 55%, rgba(7,14,28,.5) 100%); }
    .cx-card-body { max-width: 100%; justify-content: flex-end; min-height: clamp(360px,80vw,460px); }
    .cx-next-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 520px) {
    .cx-card-title { max-width: 100%; }
    .cx-btn { width: 100%; justify-content: center; }
  }
  /* Escala tipografica do celular, item 7.10 do plano.
     MEDIDO com getComputedStyle em 390 px ANTES desta regra: .cx-read e
     .cx-meta (autor e data) 14,08 px, .cx-soon p 14,08 px, .cx-tag e .cx-new
     10,88 px, .cx-eyebrow 11,52 px. O piso do projeto e 16 px para texto de
     leitura, 15 px para apoio e 13 px para rotulo monoespacado em caixa alta:
     seis seletores estavam abaixo, e o hub nao tinha nenhuma regra de corpo
     no celular (os valores acima valiam identicos em 390 e em 700 px).
     .cx-meta inteiro, e nao so o <time> que o item cita: o nome do autor
     divide a mesma linha com a data, e subir so uma das duas deixaria os
     dois pedacos da mesma frase em corpos diferentes.
     .cx-eyebrow perde parte do espacamento entre letras junto: a .16em e um
     floreio de desktop que, a 13 px, empurra o rotulo para duas linhas
     dentro da pilula. */
  @media (max-width: 900px) {
    .cx-next p { font-size: 1rem; }
    .cx-read, .cx-meta { font-size: .9375rem; }
    .cx-tag, .cx-new { font-size: .8125rem; }
    .cx-eyebrow { font-size: .8125rem; letter-spacing: .1em; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cx-card, .cx-btn, .cx-next { transition: none; }
    html { scroll-behavior: auto; }
  }
