/* ==========================================================================
   KING ENERGY HEMP · COMPOSICAO DA CAPA
   Arquivo exclusivo da home. Nao e sistema — e composicao.
   O sistema (tokens, zonas, tipografia) vive em keh.css e nao se toca aqui.
   --------------------------------------------------------------------------
   Direcao: capa de revista soldada a um terminal de dados.
   O portal afirma "dado antes de promessa" — a pagina precisa PARECER isso,
   nao so dizer. Dai a densidade em mono contra a escala do serif.
   ========================================================================== */

/* ============================ 1. CAPA ==================================== */
/* A capa antiga punha o titulo em col-8 com um aside ao lado: o titulo nunca
   chegava a ser grande. Aqui ele ocupa a largura e o resto se organiza sob ele. */

.capa { min-height: 88svh; }
.capa__corpo { padding-block: var(--e-10) 0; position: relative; }

.capa__kicker {
  display: flex; align-items: center; gap: var(--e-4);
  color: var(--ouro-sobre-escuro);
}
.capa__kicker::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(to right, currentColor, transparent);
  opacity: .5;
}

.capa__titulo {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--t-capa); line-height: .96;
  letter-spacing: var(--ls-capa);
  margin-top: var(--e-5); max-width: 16ch;
}
.capa__titulo em {
  font-style: italic; font-weight: 400;
  color: var(--ouro-sobre-escuro);
}

/* o deck nao fica sozinho no meio do vazio: senta ao lado de um filete
   vertical, como legenda de capa */
.capa__base {
  display: grid; gap: var(--e-5);
  margin-top: var(--e-7); padding-bottom: var(--e-8);
}
@media (min-width: 900px) {
  .capa__base { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--e-8); }
}
.capa__deck {
  font-size: var(--t-corpo-g); line-height: 1.5; color: var(--creme-64);
  max-width: 46ch;
  border-left: var(--filete-grosso) solid var(--ouro-sobre-escuro);
  padding-left: var(--e-5);
}
.capa__deck b { color: var(--creme); font-weight: 600; }

.capa__atalhos { display: flex; flex-direction: column; gap: 0; align-self: end; }
.capa__atalho {
  display: flex; align-items: baseline; gap: var(--e-4);
  padding-block: var(--e-3);
  border-top: 1px solid rgba(243,236,220,.16);
  font-family: var(--f-dado); font-size: var(--t-meta);
  letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: var(--creme-64); text-decoration: none;
  transition: color .25s, padding-left .25s, border-color .25s;
}
.capa__atalho:last-child { border-bottom: 1px solid rgba(243,236,220,.16); }
.capa__atalho span { flex: 1 1 auto; }
.capa__atalho::after { content: "\2192"; color: var(--ouro-sobre-escuro); }
.capa__atalho:hover {
  color: var(--creme); padding-left: var(--e-3);
  border-color: var(--ouro-sobre-escuro);
}

/* ---- 1.2 INDICE VIVO ----------------------------------------------------
   O elemento-assinatura da pagina. Barra densa, tabular, soldada ao pe da
   capa. E a unica coisa aqui que parece instrumento e nao editorial — e e
   exatamente esse contraste que faz a pagina parar de ser generica. */

.indice {
  border-top: 1px solid rgba(243,236,220,.22);
  background: rgba(7,7,7,.55);
  backdrop-filter: blur(6px);
}
.indice__grade { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .indice__grade { grid-template-columns: repeat(4, 1fr); } }

.indice__cel {
  padding: var(--e-5) var(--e-4);
  border-left: 1px solid rgba(243,236,220,.14);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.indice__cel:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 759px) {
  .indice__cel:nth-child(3) { border-left: 0; padding-left: 0; }
  .indice__cel:nth-child(n+3) { border-top: 1px solid rgba(243,236,220,.14); }
}
.indice__n {
  font-family: var(--f-dado); font-weight: 500;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1;
  color: var(--creme); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.indice__n small {
  font-size: .42em; letter-spacing: var(--ls-meta);
  color: var(--ouro-sobre-escuro); margin-left: .5em; vertical-align: .35em;
}
.indice__r {
  font-family: var(--f-dado); font-size: var(--t-micro);
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--creme-40);
}

/* ============================ 2. MANIFESTO =============================== */
/* Antes: max-width 30ch — uma tira de 290px encalhada a esquerda de uma tela
   de 1870px. O texto nao estava errado; a medida estava. */

.mf { position: relative; }
@media (min-width: 1100px) {
  .mf { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--e-8); }
}

/* trilho vertical: ocupa a margem esquerda em vez de deixa-la morta */
.mf__trilho { display: none; }
@media (min-width: 1100px) {
  .mf__trilho {
    display: block; position: relative;
    border-right: 1px solid rgba(243,236,220,.18);
  }
  .mf__trilho span {
    position: sticky; top: var(--e-8); display: block;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--f-dado); font-size: var(--t-micro);
    letter-spacing: var(--ls-micro); text-transform: uppercase;
    color: var(--creme-40); white-space: nowrap;
  }
}

/* medida curta + corpo grande: o manifesto é a voz da marca, não texto de
   apoio. Em tela larga ele preenche o canvas pela ESCALA, não esticando a
   linha — esticar passaria de 90ch e viraria ilegível.

   ATENÇÃO: a fonte precisa estar NESTE elemento, não só nos <p>. A unidade
   `ch` resolve no font-size do próprio elemento — com 17px herdados do body,
   46ch dava 448px em vez dos ~990px pretendidos. */
.mf__texto {
  font-family: var(--f-titulo);
  font-size: clamp(20px, 2.9vw, 38px);
  max-width: 24ch;
}
@media (min-width: 700px)  { .mf__texto { max-width: 40ch; } }
@media (min-width: 1100px) { .mf__texto { max-width: 45ch; } }

.mf-linha {
  font-family: inherit; font-weight: 400;
  font-size: inherit; line-height: 1.32;
  color: var(--creme-64);
  margin-bottom: var(--e-6);
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.2,.7,.3,1),
              transform .8s cubic-bezier(.2,.7,.3,1), color .8s;
}
.mf-linha.on { opacity: 1; transform: none; }
.mf-linha b { color: var(--creme); font-weight: 600; }
.mf-linha i { font-style: italic; color: var(--ouro-sobre-escuro); }

/* o fecho rompe a medida: e o climax de escala da secao */
.mf-linha--fecho {
  margin-top: var(--e-8); margin-bottom: 0;
  font-size: var(--t-1); line-height: var(--lh-apertada);
  letter-spacing: var(--ls-titulo);
  font-weight: 600; color: var(--creme);
  padding-top: var(--e-6);
  border-top: 1px solid rgba(243,236,220,.18);
}
/* o fecho usa a largura inteira do bloco: um climax mais estreito que o
   corpo leria como recuo, nao como virada */

@media (prefers-reduced-motion: reduce) {
  .mf-linha { opacity: 1; transform: none; transition: none; }
}

/* ============================ 3. FRENTES ================================= */
/* Antes: filete de 1300px com resumo de 430px embaixo. Agora cada frente e
   uma linha de verdade — numero, texto e imagem — com filetes verticais
   separando as colunas. As 18 capas do acervo finalmente entram na pagina. */

.frentes { border-top: var(--filete-medio) solid var(--regra-forte); }

.frente {
  display: grid; gap: var(--e-4) var(--e-5);
  grid-template-columns: auto minmax(0, 1fr);
  padding-block: var(--e-6);
  border-bottom: 1px solid var(--regra);
  position: relative;
}
@media (min-width: 900px) {
  .frente {
    grid-template-columns: 5.5rem minmax(0, 1fr) 20rem;
    gap: var(--e-6); align-items: start;
    padding-block: var(--e-7);
  }
}
@media (min-width: 1200px) {
  .frente { grid-template-columns: 6.5rem minmax(0, 1fr) 24rem; gap: var(--e-7); }
}

/* faixa de acento que cresce da esquerda no hover: da vida sem virar card */
.frente::before {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 0; height: 2px; background: var(--acento);
  transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.frente:hover::before { width: 100%; }

.frente__n {
  font-family: var(--f-dado); font-weight: 500;
  font-size: clamp(28px, 3.4vw, 46px); line-height: .9;
  color: var(--regra); font-variant-numeric: tabular-nums;
  transition: color .35s;
}
.frente:hover .frente__n { color: var(--acento); }

.frente__meio { min-width: 0; }
.frente__tags {
  font-family: var(--f-dado); font-size: var(--t-micro);
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--texto-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3);
}
.frente__tags b { color: var(--acento); font-weight: 500; }

.frente__t { font-size: var(--t-2); margin-top: var(--e-3); }
.frente__t a { color: inherit; text-decoration: none; }
.frente:hover .frente__t a { color: var(--acento); }

.frente__d {
  color: var(--texto-2); font-size: var(--t-corpo);
  line-height: 1.6; margin-top: var(--e-3); max-width: 68ch;
}

/* A coluna da direita NÃO leva miniatura. As "capas" do acervo sao posters
   de rede social com tipografia condensada e numeros embutidos sem fonte —
   usa-las aqui brigaria com o serif da pagina e reforcaria exatamente a
   aparencia de material gerado por IA que estamos combatendo. No lugar vai
   conteudo de verdade: as ultimas manchetes daquela editoria. Preenche a
   largura com informacao, nao com enfeite, e cria porta de entrada. */
.frente__ult {
  display: none; min-width: 0;
  border-left: 1px solid var(--regra); padding-left: var(--e-5);
}
@media (min-width: 900px) { .frente__ult { display: block; } }

.frente__ult-r {
  font-family: var(--f-dado); font-size: var(--t-micro);
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--texto-3); display: block; margin-bottom: var(--e-3);
}
.frente__ult ol { list-style: none; margin: 0; padding: 0; }
.frente__ult li { padding-block: var(--e-3); border-top: 1px solid var(--regra); }
.frente__ult li:first-child { border-top: 0; padding-top: 0; }
.frente__ult a {
  font-family: var(--f-titulo); font-size: 15px; font-weight: 600;
  line-height: 1.3; letter-spacing: var(--ls-titulo);
  color: var(--texto); text-decoration: none;
  display: block;
}
.frente__ult a:hover { color: var(--acento); }
.frente__ult time {
  display: block; margin-top: var(--e-2);
  font-family: var(--f-dado); font-size: var(--t-micro);
  letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--texto-3);
}
.frente__ult p {
  font-family: var(--f-dado); font-size: var(--t-micro);
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--texto-3); line-height: 1.7;
}

/* "estreia em breve" nao pode usar o quadradinho do selo: dentro de texto
   mono ele le como glifo faltando (a caixa do print). Vira etiqueta. */
.frente__breve {
  border: 1px dashed currentColor; padding: 2px var(--e-2);
  color: var(--texto-3); letter-spacing: var(--ls-micro);
}
.frente__breve::before { content: none; }

/* ============================ 4. ULTIMAS ================================= */
/* Antes: uma grade uniforme. Agora tem hierarquia — uma manchete com capa
   grande e o resto em lista densa ao lado, separados por filete vertical. */

.ultimas { display: grid; gap: var(--e-7); }
@media (min-width: 900px) {
  .ultimas { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--e-8); }
}

/* sem capa (mesma razao das frentes): a manchete se impoe pela ESCALA
   tipografica, que e o recurso certo num portal editorial */
.manchete { min-width: 0; }
.manchete__t {
  font-size: var(--t-1); line-height: var(--lh-apertada);
  margin-top: var(--e-4);
}
.manchete__t a { color: inherit; text-decoration: none; }
.manchete:hover .manchete__t a { color: var(--acento); }
.manchete__d {
  color: var(--texto-2); margin-top: var(--e-5);
  font-size: var(--t-corpo-g); line-height: 1.55; max-width: 46ch;
}

.fila { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 900px) {
  .fila { border-left: 1px solid var(--regra); padding-left: var(--e-6); }
}
.fila__i {
  padding-block: var(--e-4);
  border-top: 1px solid var(--regra);
  display: grid; grid-template-columns: 3.5rem minmax(0,1fr); gap: var(--e-4);
  align-items: baseline;
}
.fila__i:first-child { border-top: 0; padding-top: 0; }
.fila__n {
  font-family: var(--f-dado); font-size: var(--t-micro);
  letter-spacing: var(--ls-micro); color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}
.fila__t {
  font-family: var(--f-titulo); font-size: var(--t-4);
  font-weight: 600; line-height: 1.25; letter-spacing: var(--ls-titulo);
}
.fila__t a { color: inherit; text-decoration: none; }
.fila__i:hover .fila__t a { color: var(--acento); }
.fila__m {
  font-family: var(--f-dado); font-size: var(--t-micro);
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--texto-3); margin-top: var(--e-2);
}