/* Páginas-hub do redesign (Aprenda, Labs, Sobre). Depende de arena-ds.css.
   Esta folha é carregada antes de arena-ds.css: onde o sistema define a mesma
   propriedade, a regra daqui leva .hub-page para vencer pela especificidade,
   sem depender da ordem dos <link>. */

.hub-page main { background: var(--ds-night); }
.hub-page .ds-section { scroll-margin-top: calc(var(--ds-header-h) + 16px); }

/* Grade de cartões: um destaque em faixa larga + três menores lado a lado */
.hub-grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.hub-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.hub-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.hub-grid--feature { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hub-grid--feature .hub-card--feature { grid-column: 1 / -1; }

.ds-card.hub-card { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; min-height: 220px; }
.hub-card .ds-label { margin: 6px 0 0 !important; color: var(--ds-ink-3) !important; }
.hub-card h3 { margin: 0 !important; }
.hub-card > p:not(.ds-label) { margin: 0; }
.hub-card .ds-link { align-self: end; margin-top: 14px; }
.hub-icon { width: 40px; height: 40px; color: var(--ds-cyan); }
/* Destaque: mesmo padding dos outros cartões (o texto não pula de margem no
   celular). No desktop vira faixa: ícone | texto, com o link logo abaixo do texto,
   à esquerda, como nos cartões menores (o olho não atravessa a faixa atrás da ação). */
.ds-card.hub-card--feature { grid-template-rows: auto auto auto 1fr auto; min-height: 0; background: linear-gradient(160deg, var(--ds-night-3), var(--ds-night-2) 60%); border-color: var(--ds-line-strong); }
@media (min-width: 721px) {
  .ds-card.hub-card--feature { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: clamp(20px, 3vw, 40px); align-items: start; }
  .hub-card--feature .hub-icon { grid-column: 1; grid-row: 1 / span 4; }
  .hub-card--feature > :is(.ds-label, h3, p, .ds-link) { grid-column: 2; }
  .hub-card--feature > .ds-link { justify-self: start; white-space: nowrap; }
}
.hub-card--feature .hub-icon { width: 56px; height: 56px; }
.hub-card--feature .ds-label { color: var(--ds-cyan) !important; }
.hub-page main .hub-card--feature h3 { font-size: var(--ds-h2) !important; line-height: 1.08 !important; }
.hub-card--feature > p:not(.ds-label) { font-family: var(--ds-font-serif) !important; font-size: 18px !important; max-width: 40ch; }
/* A partir de 900 px, o destaque ganha uma terceira coluna com o que ele abre, separada
   por um fio, como o "Por que importa" do destaque de Notícias: as três trilhas de
   leitura do guia (Aprenda) e três das 12 situações do laboratório (IA e Dados).
   Abaixo disso o cartão já é estreito, e a lista some. */
.hub-feature__more { display: none; }
@media (min-width: 900px) {
  .ds-card.hub-card--feature:has(.hub-feature__more) { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); }
  .hub-card--feature .hub-feature__more { display: grid; grid-column: 3; grid-row: 1 / span 4; align-self: center; margin: 0; padding: 0 0 0 clamp(28px, 3vw, 44px); border-left: 1px solid var(--ds-line); list-style: none; }
  .hub-feature__more li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ds-line); }
  .hub-feature__more li:first-child { padding-top: 4px; border-top: 0; }
  .hub-feature__more li:last-child { padding-bottom: 4px; }
  .hub-feature__more b { color: var(--ds-ink); font-size: 16px; font-weight: 650; }
  .hub-feature__more span { color: var(--ds-ink-3); font-size: 14px; white-space: nowrap; }
}
.hub-card:hover { border-color: var(--ds-cyan); }

/* Trilha numerada (Ilhas) */
.hub-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.hub-split__head { position: sticky; top: calc(var(--ds-header-h) + 24px); margin: 0; }
.hub-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ds-line); counter-reset: none; }
.hub-steps li { border-bottom: 1px solid var(--ds-line); }
.hub-step { display: grid; grid-template-columns: 56px minmax(0, 1fr) 32px; gap: 16px; align-items: center; padding: 20px 8px; color: inherit; text-decoration: none; transition: background-color .18s ease; }
.hub-step:hover { background: var(--ds-night-2); }
.hub-step__n { font-family: var(--ds-font-display); font-stretch: 74%; font-weight: 800; font-size: 28px; color: var(--ds-ink-3); }
.hub-step__body { display: grid; gap: 4px; }
.hub-step__body small { color: var(--ds-cyan); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
/* Trilhas em grupos (Clássicas, Versão Star Wars): o subtítulo diz a versão uma vez */
.hub-tracks { display: grid; }
/* Mesmo corpo, peso e espaçamento do rótulo "Trilhas interativas" (.ds-label), em cinza */
.hub-page .hub-tracks__group { margin: 0 0 14px !important; font: 500 12px/1.3 var(--ds-font-mono) !important; letter-spacing: .07em !important; text-transform: uppercase !important; color: var(--ds-ink-2); }
/* O rótulo da cabeça perde a margem de cima que .ds-sectionhead p dá aos parágrafos e sai da
   linha de texto (inline-flex herdava a entrelinha do bloco): assim "Trilhas interativas" e
   "Clássicas" ficam na mesma linha de base */
.hub-page .hub-split__head .ds-label { display: flex; margin: 0 0 14px; }
.hub-page .hub-steps + .hub-tracks__group { margin-top: clamp(28px, 3vw, 40px) !important; }
/* Entrelinha justa: um título de duas linhas não parece dois itens; linhas equilibradas
   ("Ataque e defesa / em movimento", sem palavra sozinha embaixo) */
.hub-step__body b { font-size: 18px; line-height: 1.3; color: var(--ds-ink); text-wrap: balance; }
.hub-step__body > span { color: var(--ds-ink-2); font-size: 16px; }
.hub-step__go { color: var(--ds-cyan); font-size: 22px; transition: transform .18s ease; }
.hub-step:hover .hub-step__go { transform: translateX(4px); }
.hub-step:hover .hub-step__n { color: var(--ds-ink); }

/* E-book */
.hub-ebook { display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hub-ebook img { width: 100%; height: auto; border-radius: var(--ds-radius); box-shadow: var(--ds-shadow); }
.hub-ebook h2 { margin: 0 0 12px; }
.hub-ebook p { max-width: 52ch; color: var(--ds-ink-2); }
.hub-ebook__price { margin: 16px 0 24px; }
.hub-ebook__price b { color: var(--ds-ink); font-size: 22px; }

/* Links compactos (Labs) */
.hub-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.hub-links li { border-top: 1px solid var(--ds-line); }
.hub-links a { display: grid; gap: 4px; padding: 18px 0; color: inherit; text-decoration: none; }
.hub-links b { color: var(--ds-ink); font-family: var(--ds-font-serif); font-size: 18px; font-weight: 600; }
.hub-links b::after { content: " →"; color: var(--ds-cyan); }
.hub-links span { color: var(--ds-ink-3); font-size: 14px; }
.hub-links a:hover b { color: var(--ds-cyan); }
.hub-page .hub-truth { margin-top: 28px; }
.hub-truth b { color: var(--ds-ink-2); }

/* Missão, visão e propósito: lista com fio, como "Valores" (não são cartões clicáveis) */
.hub-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0 clamp(24px, 3vw, 40px); margin: 0; }
.hub-pillars > article { padding: 20px 0 24px; border-top: 1px solid var(--ds-line); }
.hub-pillars .ds-label { margin: 0 0 10px; color: var(--ds-ink-3); }
.hub-pillars h3 { margin: 0 0 8px !important; }
/* Rótulo, título e texto em linhas comuns às três colunas: um título de duas linhas ("Visão")
   não empurra só o próprio texto para baixo */
@supports (grid-template-rows: subgrid) {
  .hub-pillars > article { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
}
.hub-pillars p:not(.ds-label) { margin: 0; color: var(--ds-ink-2); font-size: 16px; line-height: 1.55; }

/* Valores, contrato, números */
.hub-values__title { margin: clamp(32px, 3vw, 44px) 0 16px !important; }
.hub-values, .hub-contract__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 24px; margin: 0; }
.hub-values > div, .hub-contract__list > div { padding: 18px 0; border-top: 1px solid var(--ds-line); }
.hub-values dt, .hub-contract__list dt { font-family: var(--ds-font-serif) !important; font-size: 18px !important; font-weight: 600 !important; color: var(--ds-ink); margin-bottom: 6px; }
.hub-values dd, .hub-contract__list dd { margin: 0; color: var(--ds-ink-2); font-size: 16px; line-height: 1.5; }
.hub-contract { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
/* Título na largura da coluna, em linhas equilibradas: "o que" e "E também" não ficam soltos no fim da linha */
.hub-contract h2 { margin: 0; text-wrap: balance; }
/* Uma frase por linha (no celular, cada frase se equilibra nas suas próprias linhas) */
.hub-contract h2 .hub-contract__line { display: block; text-wrap: balance; }
/* Rótulo de seção em cinza, como "Quem escreve", "Trilhas interativas" e "E-book" */
.hub-contract .ds-label { color: var(--ds-ink-2); }
.hub-contract__list { grid-template-columns: 1fr 1fr; }

.hub-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; }
.hub-stats > div { padding-top: 20px; border-top: 2px solid var(--ds-line-strong); }
.hub-stats dt { font-family: var(--ds-font-display) !important; font-stretch: 74%; font-weight: 800; font-size: var(--ds-num) !important; line-height: 1; color: var(--ds-ink); }
/* Nota do número em 16 px e ink-2, como as dos valores e do contrato (era 14 px em ink-3, a mais apagada da página) */
.hub-stats dd { display: grid; gap: 6px; margin: 12px 0 0; color: var(--ds-ink-2); font-size: 16px; line-height: 1.5; }
.hub-stats dd b { color: var(--ds-ink-2); font: 500 12px/1.3 var(--ds-font-mono); letter-spacing: .07em; text-transform: uppercase; }

/* Sobre: respiro de 72 px por seção no computador e 48 px no celular (eram 104 e 64). O vazio entre
   dois blocos cai de 208 para 144 px e a página continua editorial, com as colunas abertas. */
.hub-sobre { --ds-section: clamp(48px, 5vw, 72px); }

/* Assinatura no topo da página: foto, rótulo e nome levam à página do autor */
.hub-byline { display: inline-grid; grid-template-columns: 48px auto; align-items: center; column-gap: 14px; padding-block: 2px; color: inherit; text-decoration: none; }
.hub-byline img { display: block; width: 48px; height: 48px; border: 1px solid var(--ds-line-strong); border-radius: 50%; object-fit: cover; }
.hub-byline > span { display: grid; gap: 2px; }
.hub-byline__label { color: var(--ds-ink-3); font: 500 12px/1.3 var(--ds-font-mono); letter-spacing: .07em; text-transform: uppercase; }
.hub-byline__name { color: var(--ds-ink); font: 600 18px/1.3 var(--ds-font-serif); }
.hub-byline__name::after { content: "→"; content: "→" / ""; display: inline-block; margin-left: 8px; color: var(--ds-cyan); font-family: var(--ds-font-ui); transition: transform .18s ease; }
@media (hover: hover) {
  .hub-byline:hover .hub-byline__name { color: var(--ds-cyan); }
  .hub-byline:hover .hub-byline__name::after { transform: translateX(3px); }
}
.hub-byline:focus-visible { outline: 2px solid var(--ds-cyan); outline-offset: 4px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .hub-byline__name::after { transition: none; } }

/* Autor */
.hub-author { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hub-author img { width: 100%; height: auto; border-radius: var(--ds-radius); }
.hub-author h2 { margin: 0 0 12px; }
.hub-author p { max-width: 60ch; color: var(--ds-ink-2); }
.hub-author__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 20px 0 24px; }
.hub-ext::after { content: "↗" !important; }

/* Responsivo */
@media (max-width: 1080px) {
  .hub-split, .hub-contract { grid-template-columns: 1fr; }
  .hub-split__head { position: static; }
  .hub-stats { grid-template-columns: 1fr 1fr; }
}
/* Entre 721 e 899 px, três colunas deixavam os cartões menores com cerca de 220 px
   (rótulo e link quebrados em duas linhas): uma coluna só, e cada cartão em faixa,
   como o destaque (ícone | texto), com o texto de todos começando no mesmo x. */
@media (min-width: 721px) and (max-width: 899px) {
  .hub-grid--feature { grid-template-columns: 1fr; }
  .hub-grid--feature .ds-card.hub-card { min-height: 0; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: clamp(20px, 3vw, 40px); align-items: start; }
  .hub-grid--feature .hub-card .hub-icon { grid-column: 1; grid-row: 1 / span 4; justify-self: center; }
  .hub-grid--feature .hub-card > :is(.ds-label, h3, p, .ds-link) { grid-column: 2; }
  .hub-grid--feature .hub-card > .ds-link { justify-self: start; }
}
@media (max-width: 720px) {
  .hub-grid--feature { grid-template-columns: 1fr; }
  .ds-card.hub-card { min-height: 0; }
  .hub-ebook, .hub-author { grid-template-columns: 1fr; }
  .hub-ebook img { max-width: 200px; }
  /* Foto do autor na largura da coluna, como na home */
  .hub-author img { max-width: none; }
  .hub-contract__list { grid-template-columns: 1fr; }
  .hub-step { grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 12px; padding: 16px 4px; }
  .hub-step__n { font-size: 22px; }
}
@media (max-width: 420px) {
  .hub-stats { grid-template-columns: 1fr; }
}