/*
Theme Name: GameDrop
Theme URI: https://gamedrop.com.br
Author: Jean Carlo Olsen
Author URI: https://gamedrop.com.br
Description: Tema escuro minimalista para portal de noticias de games. Layout editorial com destaque, grade de noticias, secoes por categoria e espacos nativos para anuncios AdSense.
Version: 2.3.1
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gamedrop
Tags: dark, news, blog, custom-menu, featured-images, translation-ready, accessibility-ready
*/

:root{
  --gd-bg:#0b0d10;
  --gd-bg-soft:#0f1319;
  --gd-surface:#12161d;
  --gd-surface-2:#171d26;
  --gd-border:#212a36;
  --gd-border-soft:#1a222c;
  --gd-text:#e8ecf3;
  --gd-text-2:#aeb8c7;
  --gd-muted:#7c8798;
  --gd-accent:#8b5cf6;
  --gd-accent-2:#c4b5fd;
  --gd-radius:14px;
  --gd-radius-sm:9px;
  --gd-max:1200px;
  --gd-gap:24px;
  --gd-font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Display face aprovada no mockup da revisao de UI (17/09/2026): titulos com personalidade. */
  --gd-font-display:'Chakra Petch',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Coral de recencia: a unica cor quente do tema, usada so para "isto e novo". */
  --gd-live:#ff6b6b;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--gd-bg);color:var(--gd-text);
  font-family:var(--gd-font);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gd-text);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--gd-accent-2)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gd-accent);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{line-height:1.22;margin:0 0 .5em;letter-spacing:-.02em;font-weight:750}
h1{font-size:clamp(1.9rem,4.4vw,2.9rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.22rem}
p{margin:0 0 1.1em}
hr{border:0;border-top:1px solid var(--gd-border);margin:2rem 0}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
code{background:var(--gd-surface-2);padding:.15em .4em;border-radius:5px}
pre{background:var(--gd-surface);border:1px solid var(--gd-border);padding:1rem;border-radius:var(--gd-radius-sm);overflow:auto}
blockquote{margin:1.6rem 0;padding:.4rem 0 .4rem 1.2rem;border-left:3px solid var(--gd-accent);color:var(--gd-text-2)}
table{width:100%;border-collapse:collapse;margin:1.4rem 0}
th,td{border-bottom:1px solid var(--gd-border);padding:.6rem .7rem;text-align:left}
th{color:var(--gd-text-2);font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}

/* ---------- utilitários ---------- */
.gd-wrap{width:100%;max-width:var(--gd-max);margin:0 auto;padding:0 20px}
.gd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gd-skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--gd-accent);color:#fff;padding:.7rem 1rem;border-radius:0 0 8px 0}
.gd-skip:focus{left:0}
.gd-sec{margin:56px 0}
.gd-sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--gd-border);padding-bottom:12px;margin-bottom:26px}
.gd-sec__title{font-size:1.25rem;margin:0;text-transform:uppercase;letter-spacing:.1em}
.gd-sec__title span{color:var(--gd-accent)}
.gd-sec__more{font-size:.86rem;color:var(--gd-muted);white-space:nowrap}
.gd-sec__more:hover{color:var(--gd-accent-2)}

/* ---------- cabeçalho ---------- */
.gd-header{position:sticky;top:0;z-index:60;background:rgba(11,13,16,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--gd-border)}
.gd-header__inner{display:flex;align-items:center;gap:22px;min-height:68px}
.gd-brand{display:flex;align-items:center;gap:10px;font-size:1.34rem;font-weight:800;letter-spacing:-.03em;flex:0 0 auto}
.gd-brand__mark{width:12px;height:12px;border-radius:4px;background:linear-gradient(135deg,var(--gd-accent),#22d3ee);box-shadow:0 0 18px rgba(139,92,246,.65)}
.gd-brand em{font-style:normal;color:var(--gd-accent-2)}
.gd-nav{margin-left:auto}
.gd-nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.gd-nav a{display:block;padding:.5rem .78rem;border-radius:8px;font-size:.93rem;font-weight:600;color:var(--gd-text-2)}
.gd-nav a:hover{background:var(--gd-surface-2);color:#fff}
.gd-nav .current-menu-item>a,.gd-nav .current_page_item>a{color:#fff;background:var(--gd-surface-2)}
.gd-nav .menu-item-has-children{position:relative}
.gd-nav .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:210px;background:var(--gd-surface);border:1px solid var(--gd-border);border-radius:var(--gd-radius-sm);padding:8px;flex-direction:column;align-items:stretch}
.gd-nav .menu-item-has-children:hover .sub-menu,.gd-nav .menu-item-has-children:focus-within .sub-menu{display:flex}
.gd-search{display:flex;align-items:center}
.gd-search input[type=search]{width:170px;background:var(--gd-surface);border:1px solid var(--gd-border);color:var(--gd-text);border-radius:999px;padding:.48rem .9rem;font-size:.9rem}
.gd-search input[type=search]::placeholder{color:var(--gd-muted)}
/* UX-10 (medido pela revisao): era 42x38px, abaixo do minimo de 44x44 para toque. */
.gd-burger{display:none;background:var(--gd-surface);border:1px solid var(--gd-border);color:var(--gd-text);width:44px;height:44px;border-radius:9px;cursor:pointer;font-size:1.1rem}

/* ---- Navegacao por jogo e genero (spec da revisao de UI, 17/09/2026) ----
   Desktop: painel ancorado, sem empurrar o layout. Mobile: acordeao dentro do
   hamburguer (a barra de 69px nao engorda — foi ali que se fecharam os 3 titulos
   acima da dobra). O gatilho e botao, nunca link com hover. */
.gd-navt{position:relative}
.gd-navt__trilho{display:flex;align-items:center;gap:6px;min-height:44px;padding:.5rem .78rem;background:none;border:0;border-radius:8px;font:600 .93rem/1 var(--gd-font);color:var(--gd-text-2);cursor:pointer}
.gd-navt__trilho:hover,.gd-navt__trilho[aria-expanded=true]{background:var(--gd-surface-2);color:#fff}
.gd-navt__seta{font-size:.7em;line-height:1;transition:transform .18s ease}
.gd-navt__trilho[aria-expanded=true] .gd-navt__seta{transform:rotate(180deg)}
.gd-navt__painel{position:absolute;top:calc(100% + 16px);left:0;z-index:80;width:330px;max-height:64vh;overflow:auto;padding:12px;background:var(--gd-surface);border:1px solid var(--gd-border);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.gd-navt__painel[hidden]{display:none}
/* O campo de busca do tema e o input branco padrao do navegador sobre tema escuro
   (achado A-5). Aqui ele nasce escuro e com 44px de altura. */
.gd-navt__busca{width:100%;min-height:44px;padding:.6rem .8rem;background:var(--gd-bg);border:1px solid var(--gd-border);border-radius:9px;color:var(--gd-text);font-size:.88rem}
.gd-navt__busca::placeholder{color:var(--gd-muted)}
.gd-navt__busca:focus{outline:2px solid var(--gd-accent);outline-offset:1px}
/* Especificidade 0,2,1 de proposito: o tema tem `.gd-nav ul{display:flex;flex-wrap:wrap}`
   e ela vencia a minha — a lista virava linha centralizada e os itens saiam a direita. */
.gd-nav .gd-navt__lista{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px;margin:10px 0 0;padding:0;list-style:none}
.gd-navt__item--extra{display:none}
.gd-nav .gd-navt__lista a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:.5rem .6rem;border-radius:8px;font-size:.9rem;font-weight:600;color:var(--gd-text-2);overflow-wrap:anywhere}
.gd-nav .gd-navt__lista a:hover{background:var(--gd-surface-2);color:#fff}
/* A contagem e o que faz o leitor decidir se vale o toque (requisito de UX). */
.gd-navt__n{flex:0 0 auto;font-size:.75rem;color:var(--gd-muted);font-variant-numeric:tabular-nums}
/* Contador vindo do atributo (nao e texto do link): mantem a ancora limpa para o rastreador. */
.gd-nav .gd-navt__lista a::after{content:attr(data-n);flex:0 0 auto;font-size:.75rem;color:var(--gd-muted);font-variant-numeric:tabular-nums}
.gd-navt__vazio{margin:10px 0 0;padding:.5rem .6rem;font-size:.86rem;color:var(--gd-muted)}
.gd-navt__todos{display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--gd-border);font-size:.84rem;font-weight:700;color:var(--gd-accent-2)}

/* Cabecalho das paginas-indice (/jogos/ e /generos/). */
.gd-arquivo__cabeca{margin:34px 0 20px}
.gd-arquivo__cabeca h1{margin:0 0 8px;font-size:clamp(1.7rem,4vw,2.4rem)}
.gd-arquivo__cabeca p{margin:0;max-width:62ch}

/* ---------- destaque (hero) ---------- */
.gd-hero{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--gd-gap);margin:32px 0 8px}
.gd-hero--solo{grid-template-columns:1fr}
.gd-hero--solo .gd-lead{min-height:440px}
.gd-lead{position:relative;overflow:hidden;border-radius:var(--gd-radius);border:1px solid var(--gd-border);background:var(--gd-surface);min-height:400px;display:flex;align-items:flex-end}
.gd-lead__img{position:absolute;inset:0}
.gd-lead__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .6s ease}
.gd-lead:hover .gd-lead__img img{transform:scale(1.07)}
.gd-lead__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,16,.30) 0%,rgba(11,13,16,.62) 38%,rgba(11,13,16,.90) 70%,rgba(11,13,16,.97) 100%)}
.gd-lead__body{position:relative;padding:30px 30px 28px;width:100%}
.gd-lead__title{font-size:clamp(1.5rem,2.7vw,2.15rem);margin:.5rem 0 .5rem}
.gd-lead__title a{color:#fff}
.gd-lead__excerpt{color:var(--gd-text-2);margin:0;font-size:.98rem;max-width:62ch}
.gd-lead--empty{background:linear-gradient(135deg,#151b25,#0d1117)}

.gd-side{display:flex;flex-direction:column;gap:var(--gd-gap)}
.gd-mini{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;background:var(--gd-surface);border:1px solid var(--gd-border);border-radius:var(--gd-radius);padding:12px;transition:border-color .2s ease,transform .2s ease}
.gd-mini:hover{border-color:var(--gd-accent);transform:translateY(-2px)}
.gd-mini__thumb{aspect-ratio:1/1;border-radius:var(--gd-radius-sm);overflow:hidden;background:var(--gd-surface-2)}
.gd-mini__thumb img{width:100%;height:100%;object-fit:cover}
.gd-mini__title{margin:0;font-size:1rem;line-height:1.35}

/* ---------- selo de categoria ---------- */
.gd-badge{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gd-accent-2);background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.32);padding:.24rem .6rem;border-radius:999px}
.gd-badge--solid{background:var(--gd-accent);border-color:var(--gd-accent);color:#fff}
/* Genero no destaque: contorno, nao preenchido — o jogo e a identidade, o genero e apoio. */
.gd-badge--ghost{background:rgba(11,13,16,.55);border-color:rgba(255,255,255,.34);color:#fff}
.gd-lead__body .gd-badge+.gd-badge{margin-left:6px}

/* ---------- meta ---------- */
.gd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;color:var(--gd-muted);font-size:.83rem}
.gd-meta span+span::before{content:"•";margin-right:.55rem;opacity:.55}
.gd-meta a{color:var(--gd-muted)}
.gd-meta a:hover{color:var(--gd-accent-2)}

/* ---------- grade de cards ---------- */
.gd-grid{display:grid;gap:var(--gd-gap);grid-template-columns:repeat(3,1fr)}
.gd-grid--4{grid-template-columns:repeat(4,1fr)}
.gd-card{display:flex;flex-direction:column;background:var(--gd-surface);border:1px solid var(--gd-border);border-radius:var(--gd-radius);overflow:hidden;transition:border-color .2s ease,transform .2s ease}
.gd-card:hover{border-color:var(--gd-accent);transform:translateY(-3px)}
.gd-card__thumb{aspect-ratio:16/9;background:var(--gd-surface-2);overflow:hidden;position:relative}
.gd-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gd-card:hover .gd-card__thumb img{transform:scale(1.05)}
.gd-card__thumb .gd-badge{position:absolute;top:12px;left:12px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(11,13,16,.82);backdrop-filter:blur(6px)}
/* Nome de jogo e longo ("Age of Empires II: Definitive Edition"): corta com reticencias
   em vez de estourar a largura do card. */
.gd-card__thumb{overflow:hidden}
.gd-card__body{padding:18px;display:flex;flex-direction:column;gap:.5rem;flex:1}
.gd-card__title{margin:0;font-size:1.08rem}
.gd-card__title a{color:var(--gd-text)}
.gd-card:hover .gd-card__title a{color:#fff}
.gd-card__excerpt{color:var(--gd-text-2);font-size:.92rem;margin:0}
.gd-card__foot{margin-top:auto;padding-top:.6rem;border-top:1px solid var(--gd-border-soft)}

/* ---------- anúncios ---------- */
.gd-ad{margin:34px 0;text-align:center;border-radius:var(--gd-radius);overflow:hidden}
.gd-ad ins{display:block}
.gd-ad figcaption,.gd-ad>span{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gd-muted);margin-bottom:8px}
.gd-ad--placeholder{border:1px dashed var(--gd-border);background:var(--gd-surface);padding:26px 16px;color:var(--gd-muted)}
.gd-ad--placeholder small{display:block;font-size:.75rem;opacity:.75;margin-top:6px}
.gd-sidebar .gd-ad{margin:0}
/* Correcao A-4 (review UI/UX 17/09): reserva de altura para o anuncio nao empurrar o
   conteudo quando carrega (CLS). Enquanto o AdSense nao decidiu, o <ins> reserva altura;
   se o Google responder "unfilled", a reserva some sozinha para nao deixar buraco no
   meio do texto. O AdSense marca data-ad-status="filled"/"unfilled" no proprio <ins>. */
.gd-ad--reserva ins.adsbygoogle{min-height:250px}
.gd-ad ins.adsbygoogle[data-ad-status="unfilled"]{min-height:0}

/* ---------- layout com barra lateral ---------- */
.gd-layout{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:44px;margin:36px 0}
/* Correcao A-1 (review UI/UX 17/09): a fonte era impressa como URL crua
   (https://steamcommunity.com/... = 676px, string sem ponto de quebra) e o item de grid,
   sem min-width:0, forcava a coluna a 675,766px -> overflow horizontal de 306px no mobile
   (scrollWidth 696 numa tela de 390). min-width:0 faz o grid respeitar o container.
   IMPORTANTE: NAO usar grid-template-columns:minmax(0,1fr) global aqui — isso colapsaria
   a sidebar de 328px no desktop (validado em 360/390/768/1366 pela revisao). */
.gd-layout>*{min-width:0}
/* UI-7: a linha de meta tinha um <span> vazio, o que gerava um bullet '•' orfao
   ("17/09/2026 • • 3 min de leitura"). Um span vazio agora nao renderiza. */
.gd-meta span:empty{display:none}
/* Chips de JOGO e GENERO na materia (pedido de produto 17/09/2026).
   O jogo vem cheio no acento — e a identidade da noticia; o genero vem em contorno,
   para nao competir com ele. Os dois sao clicaveis e levam ao arquivo do jogo/genero.
   Altura 36px: acima disso deixa de parecer chip e vira botao. */
.gd-taxchips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.gd-chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;
  font-size:.8rem;font-weight:600;letter-spacing:.02em;text-decoration:none;line-height:1.2;
  min-height:36px;transition:background .2s ease,border-color .2s ease,color .2s ease}
/* Contraste (achado MEDIDO pela revisao de UI, 17/09/2026): branco sobre o acento
   #8b5cf6 da 4,23:1 — abaixo do minimo AA de 4,5:1 para texto normal. Troquei SO o
   preenchimento para #7c3aed (branco = 5,7:1). O #8b5cf6 continua valendo para
   brilho/destaque em texto grande; muda so o fundo do chip. */
.gd-chip--jogo{background:#7c3aed;color:#fff;border:1px solid #7c3aed}
.gd-chip--jogo:hover{background:var(--gd-accent-2);border-color:var(--gd-accent-2);color:#150a2b}
.gd-chip--genero{background:transparent;color:var(--gd-text-2);border:1px solid var(--gd-border)}
.gd-chip--genero:hover{border-color:var(--gd-accent);color:var(--gd-accent-2)}
.gd-chip:focus-visible{outline:2px solid var(--gd-accent-2);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.gd-chip{transition:none}}
/* UX-10 / acessibilidade: em tela de toque o chip precisa de >=44px de altura.
   No desktop com mouse mantem 36px, que e o que da o desenho de chip. */
@media (pointer:coarse){.gd-chip{min-height:44px}}
.gd-content a,.gd-article a{overflow-wrap:anywhere;word-break:break-word}
.gd-sidebar{display:flex;flex-direction:column;gap:26px;align-self:start;position:sticky;top:92px}
.gd-widget{background:var(--gd-surface);border:1px solid var(--gd-border);border-radius:var(--gd-radius);padding:20px}
.gd-widget__title{font-size:.85rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gd-text-2);border-bottom:1px solid var(--gd-border);padding-bottom:10px;margin-bottom:16px}
.gd-widget ul{list-style:none;margin:0;padding:0}
.gd-widget li{padding:.55rem 0;border-bottom:1px solid var(--gd-border-soft);font-size:.95rem}
.gd-widget li:last-child{border-bottom:0}
.gd-rank{display:flex;gap:12px;align-items:flex-start}
.gd-rank__n{font-weight:800;font-size:1.1rem;color:var(--gd-accent);min-width:22px}

/* ---------- artigo ---------- */
.gd-article{max-width:none}
.gd-article__head{margin-bottom:26px}
.gd-article__title{margin:.6rem 0 .8rem}
.gd-article__feature{border-radius:var(--gd-radius);overflow:hidden;border:1px solid var(--gd-border);margin:0 0 30px}
.gd-article__feature figcaption{font-size:.8rem;color:var(--gd-muted);padding:10px 14px;background:var(--gd-surface);border-top:1px solid var(--gd-border)}
.gd-content{font-size:1.06rem;max-width:74ch}
.gd-article__head{max-width:74ch}
.gd-article__feature{max-width:920px}
.gd-content h2{margin-top:1.9rem}
.gd-content h3{margin-top:1.5rem}
.gd-content img{border-radius:var(--gd-radius-sm);margin:1.4rem 0}
.gd-content ul,.gd-content ol{padding-left:1.3rem}
.gd-content li{margin-bottom:.5rem}
.gd-tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0}
.gd-tags a{font-size:.82rem;background:var(--gd-surface-2);border:1px solid var(--gd-border);padding:.28rem .7rem;border-radius:999px;color:var(--gd-text-2)}
.gd-tags a:hover{border-color:var(--gd-accent);color:var(--gd-accent-2)}
.gd-author{display:flex;gap:14px;align-items:center;background:var(--gd-surface);border:1px solid var(--gd-border);border-radius:var(--gd-radius);padding:18px;margin:30px 0}
.gd-author img{border-radius:50%}
.gd-navlinks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0}
.gd-navlinks a{display:block;background:var(--gd-surface);border:1px solid var(--gd-border);border-radius:var(--gd-radius);padding:16px;font-size:.95rem}
.gd-navlinks a:hover{border-color:var(--gd-accent)}
.gd-navlinks span{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gd-muted);margin-bottom:6px}

/* ---------- listagem / arquivo ---------- */
.gd-head{margin:38px 0 10px}
.gd-head__title{margin:.3rem 0 .5rem}
.gd-head__desc{color:var(--gd-text-2);max-width:70ch}
.gd-list{display:grid;gap:var(--gd-gap);grid-template-columns:repeat(3,1fr);margin:34px 0 50px}

/* ---------- paginação ---------- */
.gd-pager{display:flex;justify-content:center;gap:8px;margin:44px 0}
.gd-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;background:var(--gd-surface);border:1px solid var(--gd-border);border-radius:10px;font-size:.92rem;font-weight:600;color:var(--gd-text-2)}
.gd-pager .page-numbers:hover{border-color:var(--gd-accent);color:#fff}
.gd-pager .page-numbers.current{background:var(--gd-accent);border-color:var(--gd-accent);color:#fff}

/* ---------- widgets genericos ---------- */
.gd-widget form{display:block}
.gd-widget label{display:block;font-size:.85rem;color:var(--gd-text-2);margin-bottom:8px}
.gd-widget input[type=search],.gd-widget input[type=text],.gd-widget input[type=email],.gd-widget input[type=url],.gd-widget select,.gd-widget textarea{
  width:100%;background:var(--gd-bg);border:1px solid var(--gd-border);color:var(--gd-text);
  border-radius:9px;padding:.58rem .85rem;font-size:.93rem;font-family:inherit;
}
.gd-widget input::placeholder{color:var(--gd-muted)}
.gd-widget button,.gd-widget input[type=submit],.gd-widget .wp-block-search__button{
  background:var(--gd-accent);border:0;color:#fff;font-weight:700;padding:.6rem 1.05rem;
  border-radius:9px;cursor:pointer;font-size:.9rem;font-family:inherit;margin-top:10px;
}
.gd-widget button:hover,.gd-widget input[type=submit]:hover,.gd-widget .wp-block-search__button:hover{background:#7c4ded}
.gd-widget .wp-block-search__inside-wrapper{display:flex;gap:10px;align-items:stretch}
.gd-widget .wp-block-search__inside-wrapper .wp-block-search__button{margin-top:0;flex:0 0 auto}
.gd-widget .wp-block-search__inside-wrapper input[type=search]{margin-top:0}
.gd-widget .wp-block-heading,.gd-widget h2:not(.gd-widget__title),.gd-widget h3{
  font-size:.85rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gd-text-2);
  border-bottom:1px solid var(--gd-border);padding-bottom:10px;margin:0 0 16px;font-weight:700;
}
.gd-widget .wp-block-latest-posts__list,.gd-widget .wp-block-archives-list,.gd-widget .wp-block-categories-list{list-style:none;margin:0;padding:0}
.gd-widget .wp-block-latest-posts__list li,.gd-widget .wp-block-archives-list li,.gd-widget .wp-block-categories-list li{
  padding:.55rem 0;border-bottom:1px solid var(--gd-border-soft);font-size:.95rem;
}
.gd-widget .wp-block-latest-posts__list li:last-child,.gd-widget .wp-block-archives-list li:last-child,.gd-widget .wp-block-categories-list li:last-child{border-bottom:0}
.gd-widget .wp-block-latest-posts__post-excerpt{color:var(--gd-muted);font-size:.87rem;margin-top:4px}
.gd-widget .wp-block-tag-cloud a{font-size:.85rem!important;background:var(--gd-surface-2);border:1px solid var(--gd-border);padding:.3rem .7rem;border-radius:999px;color:var(--gd-text-2)}
.gd-widget img{border-radius:var(--gd-radius-sm)}
.gd-widget select{cursor:pointer}

/* ---------- aviso de cookies (LGPD) ---------- */
.gd-consent{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:16px;display:flex;justify-content:center;pointer-events:none}
.gd-consent[hidden]{display:none}
.gd-consent__inner{
  pointer-events:auto;width:100%;max-width:960px;
  background:rgba(18,22,29,.97);backdrop-filter:blur(10px);
  border:1px solid var(--gd-border);border-radius:var(--gd-radius);
  padding:14px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  box-shadow:0 18px 46px rgba(0,0,0,.55);
}
.gd-consent__text{margin:0;flex:1 1 340px;font-size:.84rem;line-height:1.45;color:var(--gd-text-2)}
.gd-consent__text strong{color:var(--gd-text)}
.gd-consent__actions{display:flex;gap:10px;flex:0 0 auto}
.gd-consent__btn{
  font:700 .84rem/1 var(--gd-font);padding:.7rem 1.1rem;border-radius:9px;cursor:pointer;
  min-height:44px;background:var(--gd-accent);color:#fff;border:1px solid var(--gd-accent);
  transition:background .18s ease;
}
.gd-consent__btn:hover{background:#7c4ded}
.gd-consent__btn--ghost{background:transparent;color:var(--gd-text-2);border-color:var(--gd-border)}
.gd-consent__btn--ghost:hover{background:var(--gd-surface-2);color:#fff}
.gd-consent__link{font-size:.82rem;color:var(--gd-muted);text-decoration:underline;white-space:nowrap}
.gd-consent__link:hover{color:var(--gd-accent-2)}
.gd-consent__prefs{font-size:.82rem;color:var(--gd-muted);text-decoration:underline;background:0;border:0;cursor:pointer;font-family:inherit;padding:0}
.gd-consent__prefs:hover{color:var(--gd-accent-2)}
@media (max-width:700px){
  /* O que fazia o aviso ocupar 42% da tela: botoes empilhados, cada um com largura
     total, mais o link numa linha propria. Agora os botoes ficam lado a lado e o link
     mora dentro da frase — o aviso cai para ~1/5 da tela e para de cobrir a materia. */
  /* B-5 (validacao de UX, rodada 2): o aviso tinha 132px e comia a 2a manchete no primeiro
     contato. Enxugado para ~104px, a 2a manchete fica inteira. A 3a e impossivel com
     qualquer aviso fixo no rodape (ela termina em y=625 e o aviso nao desce abaixo de ~40px)
     — resolver isso exige atrasar o aviso para o primeiro scroll, que e decisao do dono. */
  .gd-consent{padding:6px}
  .gd-consent__inner{padding:10px 12px;gap:8px}
  .gd-consent__text{flex:1 1 100%;font-size:.75rem;line-height:1.35}
  .gd-consent__actions{flex:1 1 100%;flex-direction:row;gap:8px}
  .gd-consent__btn{flex:1 1 0;padding:.6rem .5rem;font-size:.78rem}
  .gd-consent__link{font-size:.78rem}
}

/* ---------- rodapé ---------- */
.gd-footer{margin-top:70px;border-top:1px solid var(--gd-border);background:var(--gd-bg-soft)}
.gd-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding:52px 0 34px}
.gd-footer h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gd-text-2);margin-bottom:14px}
.gd-footer ul{list-style:none;margin:0;padding:0}
.gd-footer li{padding:.32rem 0;font-size:.94rem;color:var(--gd-muted)}
.gd-footer p{color:var(--gd-muted);font-size:.94rem;max-width:46ch}
.gd-footer__bar{border-top:1px solid var(--gd-border);padding:20px 0 34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:var(--gd-muted);font-size:.85rem}

/* ---------- 404 / busca ---------- */
/* Pagina 404: da caminho de volta a quem errou o endereco (achado P2 do Diego). */
.gd-empty__code{margin:0 0 .35rem;font-size:3.5rem;line-height:1;font-weight:700;color:var(--gd-border)}
.gd-sec__h{margin:0 0 .85rem;font-size:1.15rem;letter-spacing:.01em}
.gd-lista{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.gd-lista li{display:flex;align-items:center;gap:.7rem;min-width:0}
.gd-lista img{width:56px;height:56px;object-fit:cover;border-radius:var(--gd-radius-sm);flex:0 0 auto}
.gd-lista a{color:var(--gd-text);text-decoration:none;font-weight:600;line-height:1.3}
.gd-lista a:hover{color:var(--gd-accent-2)}
.gd-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.gd-empty{text-align:center;padding:80px 20px}
.gd-empty h1{font-size:clamp(3rem,10vw,6rem);margin:0;color:var(--gd-surface-2)}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  .gd-grid--4{grid-template-columns:repeat(3,1fr)}
  .gd-layout{grid-template-columns:minmax(0,1fr) 300px;gap:30px}
}
@media (max-width:960px){
  .gd-hero{grid-template-columns:1fr}
  .gd-lead{min-height:320px}
  .gd-layout{grid-template-columns:1fr}
  .gd-sidebar{position:static}
  .gd-grid,.gd-list{grid-template-columns:repeat(2,1fr)}
  .gd-grid--4{grid-template-columns:repeat(2,1fr)}
  .gd-footer__grid{grid-template-columns:1fr 1fr;gap:28px}
}
/* A revisao de UI mediu: com "Jogos" e "Generos" na barra, o menu quebrava em 768px (o
   cabecalho ia de 69px para 88px). Em vez de apertar o menu, o hamburguer passa a valer de
   900px para baixo — de 760 a 900px o site usa o menu do celular, e a barra nunca engorda. */
@media (max-width:900px){
  .gd-burger{display:block;margin-left:auto}
  .gd-search{display:none}
  .gd-header__inner{flex-wrap:wrap;padding:10px 0}
  .gd-nav{display:none;width:100%;margin:6px 0 10px}
  .gd-nav.is-open{display:block}
  .gd-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .gd-nav .sub-menu{display:flex;position:static;border:0;background:transparent;padding:0 0 0 14px}
  /* A porta vira acordeao: o gatilho ocupa a linha inteira e o painel entra no fluxo. */
  .gd-navt{position:static}
  .gd-navt__trilho{width:100%;justify-content:space-between;margin-top:4px;padding:.7rem .78rem;background:var(--gd-surface);font-size:1rem}
  .gd-navt__painel{position:static;width:auto;max-height:none;margin:4px 0 8px;padding:10px 12px;box-shadow:none}
  /* O aviso de cookies e fixo no rodape e cobria os ultimos itens do menu aberto. So
     reserva espaco quando o aviso esta de fato na tela (o leitor pode ter dispensado);
     :has() e ignorado por navegador antigo, que fica como estava. */
  body:has(.gd-consent:not([hidden])) .gd-nav.is-open{padding-bottom:130px}
}
@media (max-width:760px){
  body{font-size:16px}
  .gd-hero{margin-top:22px}
  .gd-lead__body{padding:20px}
  .gd-grid,.gd-list,.gd-grid--4{grid-template-columns:1fr}
  .gd-mini{grid-template-columns:92px 1fr}
  .gd-navlinks{grid-template-columns:1fr}
  .gd-footer__grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------------------
 * DOBRA DE 3 MANCHETES — consenso da rodada 1 da revisao de UI/UX, implementado em
 * 17/09/2026. Fica no FIM do arquivo de proposito: dentro de @media (max-width:760px)
 * as regras do tema vem antes e venciam por ORDEM (mesma especificidade). E o destaque
 * tambem tem a variante .gd-hero--solo com min-height:440px, que vencia por
 * ESPECIFICIDADE — por isso aqui o seletor cobre as duas formas.
 *
 * Medido antes (390x664): destaque de 438px = 66% da tela, resumo visivel, linhas da
 * lista de 130px — e so 2 manchetes inteiras acima da dobra.
 * Depois: 3+ manchetes inteiras, com a miniatura da lista preservada.
 * ------------------------------------------------------------------------- */
@media (max-width:760px){
  /* 16:9: a imagem do destaque tem essa proporcao — assim ela aparece inteira em vez de
     virar uma faixa fina da altura do texto. O texto entra sobreposto, por baixo. */
  .gd-hero .gd-lead,.gd-hero--solo .gd-lead{min-height:0;max-height:230px;aspect-ratio:16/9}
  .gd-lead__body{padding:14px 16px}
  .gd-lead__title{font-size:1.26rem;line-height:1.24;margin:.3rem 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .gd-hero .gd-lead__excerpt,.gd-hero--solo .gd-lead__excerpt{display:none}
  .gd-mini{grid-template-columns:58px 1fr;gap:10px;padding:8px}
  .gd-mini__title{font-size:.95rem;line-height:1.3}
}


/* ===========================================================================
   CAPA NOVA — desenho aprovado no mockup da revisao de UI (Marina), 17/09/2026.
   Blocos: faixa de frescor, destaque dominante, "Ultimas" em lista densa,
   "Em alta agora", par de destaques, faixa de generos, grade + lateral.
   Prefixo gdh- de proposito: as classes gd- do tema (cards de arquivo, busca,
   materia) continuam valendo onde sao usadas. Este bloco fica no FIM do arquivo
   porque e a ultima palavra sobre a capa.
   =========================================================================== */

/* Titulos com a display face aprovada (Chakra Petch). */
.gd-brand,.gd-article__title,.gdh-sec h2,.gdh-hero__title,.gdh-feat h3,.gdh-card h3,.gdh-emalta h3,.gdh-widget h4{font-family:var(--gd-font-display)}

/* ---------- faixa de frescor ---------- */
.gdh-fresh{border-bottom:1px solid var(--gd-border-soft);background:linear-gradient(90deg,rgba(139,92,246,.10),transparent 60%)}
.gdh-fresh .gd-wrap{display:flex;align-items:center;gap:14px;padding:9px 20px;font-size:13.5px;color:var(--gd-text-2);flex-wrap:wrap}
.gdh-dot{width:8px;height:8px;border-radius:50%;background:var(--gd-live);box-shadow:0 0 0 0 rgba(255,107,107,.7);animation:gdh-pulse 2.2s infinite;flex:0 0 auto}
@keyframes gdh-pulse{0%{box-shadow:0 0 0 0 rgba(255,107,107,.55)}70%{box-shadow:0 0 0 9px rgba(255,107,107,0)}100%{box-shadow:0 0 0 0 rgba(255,107,107,0)}}
.gdh-fresh b{color:var(--gd-text);font-weight:600}
.gdh-tags{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.gdh-tags a{font-size:12.5px;color:var(--gd-accent-2);border:1px solid var(--gd-border);border-radius:999px;padding:3px 10px}
.gdh-tags a:hover{border-color:var(--gd-accent)}
@media (prefers-reduced-motion:reduce){.gdh-dot{animation:none}}

/* ---------- cabecalho de secao ---------- */
.gdh-sec{display:flex;align-items:center;gap:12px;margin:34px 0 16px}
.gdh-sec h2{margin:0;font-weight:700;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:11px}
.gdh-sec h2::before{content:"";width:4px;height:19px;border-radius:2px;background:linear-gradient(180deg,var(--gd-accent),#22d3ee)}
.gdh-sec__more{margin-left:auto;font-size:13px;color:var(--gd-muted)}
.gdh-sec__more:hover{color:var(--gd-accent-2)}

/* ---------- grade do topo ---------- */
.gdh-top{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:22px}
.gdh-hero{grid-column:1/9;grid-row:1;position:relative;border-radius:var(--gd-radius);overflow:hidden;min-height:460px;border:1px solid var(--gd-border);display:flex}
.gdh-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gdh-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,16,.10) 0%,rgba(11,13,16,.35) 45%,rgba(11,13,16,.94) 100%)}
.gdh-hero__body{position:relative;align-self:flex-end;padding:26px 28px 24px;width:100%}
.gdh-hero__chips{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.gdh-hero__title{margin:0 0 10px;font-weight:700;font-size:46px;line-height:1.04;letter-spacing:-.01em;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.gdh-hero__title a:hover{color:var(--gd-accent-2)}
.gdh-hero__ex{color:#cdd5e1;font-size:16px;max-width:60ch;margin:0 0 12px}
/* Faixa de scrim do destaque (decidido 18/09, "opcao 2 + faixa"): o texto passa a sentar numa
   faixa quase opaca em vez de confiar no degrade, que deixava o titulo ilegivel sobre as capas
   escuras do portal. Medido nas 5 piores capas (Bodycam 8/255, Limbus 23, Apex 24, War Thunder
   27, Hunt 28): contraste do titulo sai de 2,54:1 (reprova AA) para 14,17:1. O blur existe por
   um motivo proprio: o nome do jogo vem escrito DENTRO da imagem gerada e nao pode ser removido
   pelo layout — o blur o apaga atras da faixa. */
/* A faixa opaca NAO entra aqui: em tela larga o texto senta na base do bloco sobre a imagem, com o
   degrade do .gdh-hero__shade — foi assim que a capa foi aprovada. A faixa existe so no celular
   (<=620px), onde o texto ocupa o bloco inteiro e o degrade nao da conta. Erro meu em 18/09:
   apliquei a faixa em todas as larguras e o destaque virou caixa de texto tambem no desktop. */
.gdh-hero .gd-chip--genero{background:rgba(11,13,16,.92)}
.gdh-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--gd-muted);flex-wrap:wrap}
.gdh-meta__autor{color:var(--gd-accent-2)}
/* Selo de recencia: a unica cor quente do tema, para dizer "isto e novo". */
.gdh-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.38);color:#ffb3b3;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:600}
.gdh-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gd-live)}

/* ---------- ultimas: lista densa ---------- */
.gdh-ultimas{grid-column:1/13;grid-row:2}
.gdh-ulist{display:grid;grid-template-columns:1fr 1fr;gap:0 30px;border-top:1px solid var(--gd-border-soft)}
.gdh-uitem{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--gd-border-soft)}
.gdh-uitem img{width:66px;height:66px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.gdh-uitem__tt{font-size:16.5px;font-weight:600;line-height:1.28;overflow-wrap:anywhere}
.gdh-uitem__tt a:hover{color:var(--gd-accent-2)}
.gdh-uitem__sub{font-size:12.5px;color:var(--gd-muted);margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gdh-jogo{color:var(--gd-accent-2)}

/* ---------- em alta (com ranking) ---------- */
.gdh-emalta{grid-column:9/13;grid-row:1;align-self:start;background:var(--gd-surface);border:1px solid var(--gd-border);border-radius:var(--gd-radius);padding:18px}
.gdh-emalta h3{margin:0 0 4px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gd-accent-2)}
.gdh-emalta ol{list-style:none;margin:0;padding:0;counter-reset:gdh-r}
.gdh-emalta li{counter-increment:gdh-r;display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--gd-border-soft)}
.gdh-emalta li:last-child{border-bottom:0}
.gdh-emalta li::before{content:counter(gdh-r,decimal-leading-zero);font-family:var(--gd-font-display);font-weight:700;font-size:19px;line-height:1.1;color:var(--gd-accent);opacity:.9;min-width:27px}
.gdh-emalta a{font-size:14.5px;font-weight:600;line-height:1.28}
.gdh-emalta a:hover{color:var(--gd-accent-2)}
.gdh-t{font-size:11.5px;color:var(--gd-muted);margin-top:2px}

/* ---------- destaques em par ---------- */
.gdh-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.gdh-feat{border:1px solid var(--gd-border);border-radius:var(--gd-radius);overflow:hidden;background:var(--gd-surface);display:flex;flex-direction:column;transition:border-color .18s ease,transform .18s ease}
.gdh-feat:hover{border-color:var(--gd-accent);transform:translateY(-3px)}
.gdh-feat img{width:100%;aspect-ratio:16/9;object-fit:cover}
.gdh-feat__bd{padding:16px 18px 18px}
.gdh-feat h3{margin:8px 0;font-weight:700;font-size:26px;line-height:1.1}
.gdh-feat h3 a:hover{color:var(--gd-accent-2)}

/* ---------- faixa de generos ---------- */
.gdh-genres{display:flex;flex-wrap:wrap;gap:9px}
.gdh-genre{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gd-border);background:var(--gd-surface);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;color:var(--gd-text-2);min-height:44px}
.gdh-genre:hover{border-color:var(--gd-accent);color:#fff;background:var(--gd-surface-2)}
.gdh-genre b{background:rgba(139,92,246,.16);color:var(--gd-accent-2);border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700}

/* ---------- grade + lateral ---------- */
.gdh-split{display:grid;grid-template-columns:1fr 328px;gap:30px;align-items:start}
.gdh-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.gdh-card{border:1px solid var(--gd-border);border-radius:var(--gd-radius);overflow:hidden;background:var(--gd-surface);display:flex;flex-direction:column;transition:border-color .18s ease,transform .18s ease;min-width:0}
.gdh-card:hover{border-color:var(--gd-accent);transform:translateY(-3px)}
.gdh-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.gdh-card__bd{padding:13px 15px 15px}
.gdh-card h3{margin:9px 0 8px;font-weight:700;font-size:19px;line-height:1.16;overflow-wrap:anywhere}
.gdh-card h3 a:hover{color:var(--gd-accent-2)}
.gdh-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.gdh-widget{background:var(--gd-surface);border:1px solid var(--gd-border);border-radius:var(--gd-radius);padding:18px}
.gdh-widget h4{margin:0 0 12px;font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--gd-text-2);border-bottom:1px solid var(--gd-border-soft);padding-bottom:11px}
.gdh-widget ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:11px}
.gdh-widget li{font-size:14px;color:var(--gd-text-2);line-height:1.35}
.gdh-widget li a:hover{color:var(--gd-accent-2)}
.gdh-widget li::marker{color:var(--gd-accent);font-weight:700;font-family:var(--gd-font-display)}

/* ---------- responsivo ---------- */
@media (max-width:1080px){
  .gdh-split{grid-template-columns:1fr;gap:22px}
  .gdh-side{flex-direction:row;flex-wrap:wrap}
  .gdh-side>*{flex:1 1 280px}
}
@media (max-width:900px){
  .gdh-hero,.gdh-emalta,.gdh-ultimas{grid-column:span 12}
  .gdh-emalta,.gdh-ultimas{grid-row:auto}
  .gdh-duo{grid-template-columns:1fr}
}
@media (max-width:620px){
  .gdh-grid{grid-template-columns:1fr}
  .gdh-ulist{grid-template-columns:1fr}
  .gdh-fresh .gd-wrap{padding:8px 16px;font-size:12.5px}
  .gdh-tags{display:none}
  .gdh-feat h3{font-size:22px}
  .gdh-uitem{padding:9px 0;gap:12px}
  .gdh-uitem img{width:56px;height:56px}
  .gdh-uitem__tt{font-size:16px}
  .gdh-sec{margin:26px 0 12px}
  /* No celular o destaque e faixa 16:9 com o texto sobreposto: o teto existe para caber
     3 manchetes acima da dobra (acordo da rodada 1 da revisao de UI). */
  .gdh-hero{min-height:0;max-height:230px;aspect-ratio:16/9}
  /* SÓ no celular: aqui o texto ocupa o bloco e a faixa e a unica forma de garantir contraste.
     Medido com a pior capa do portal: 15,56:1 (antes 2,54:1). */
    .gdh-hero__body{padding:10px 13px 10px;background:rgba(11,13,16,.9);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  /* 3 linhas: medido que com 4 o conteudo passava da caixa de 197px e os chips apareciam
     cortados em cima, com o "por ..." escapando por baixo. 3 linhas cabem. */
  .gdh-hero__title{font-size:23px;line-height:1.1;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .gdh-meta__autor,.gdh-meta__sep{display:none}
  .gdh-hero__ex{display:none}
    /* A faixa (opcao 2) tem a altura do TEXTO — e no celular o texto ocupava o bloco quase inteiro,
       sobrando ~20px de imagem (medido). A linha de data/leitura/autor e redundante aqui: a faixa
       de frescor no topo ja diz "Atualizado ha 1h". Sem ela o texto encolhe e a imagem volta a
       aparecer sem perder a manchete inteira nem as 3 manchetes da dobra. */
    .gdh-hero .gdh-meta{display:none}
  .gdh-hero__chips{margin-bottom:7px}
  .gdh-hero__chips .gd-chip{padding:4px 10px;font-size:11px}
}


/* ===========================================================================
   CORRECOES DA VALIDACAO CRITICA — Marina (layout) + Caio (UX), 18/09/2026.
   Cada regra diz qual item ela fecha. Fica no FIM do arquivo de proposito:
   tem a ultima palavra sobre o que veio antes.
   =========================================================================== */

/* V-1 — as miniaturas da lista viravam TIRA (27px de largura em vez de 56).
   O <a> que envolve a imagem e o item de flex: sem largura fixa ele encolhia conforme
   o comprimento do titulo, e o max-width:100% da imagem capava junto. */
.gdh-uitem__thumb{flex:0 0 66px;width:66px;display:block}
.gdh-uitem__thumb img{width:66px;height:66px;border-radius:10px;object-fit:cover}
.gdh-uitem__txt{min-width:0;flex:1 1 auto}
.gdh-uitem__tt{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* A-4 — o selo de recencia tem duas caras: coral so quando a materia e nova (<6h no PHP). */
.gdh-pill--neutro{background:rgba(174,184,199,.10);border-color:var(--gd-border);color:var(--gd-text-2)}
.gdh-pill--neutro::before{background:var(--gd-muted)}

/* A-1 — sem ponto pulsante "ao vivo" quando o portal nao tem publicacao recente. */
.gdh-fresh--parado .gdh-dot{display:none}
.gdh-fresh--parado{background:linear-gradient(90deg,rgba(139,92,246,.06),transparent 60%)}

/* P2 — alvo de toque do "Ver todas" (media 75x22px, abaixo dos 44). */
.gdh-sec__more{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}

/* V-4 / A-8 — chip de genero e titulo sobre a ARTE do destaque.
   Amostra do pixel atras do chip deu rgb(129,142,127): o chip ficava em 1,72:1 e o titulo
   branco em 2,9:1 (o minimo para texto grande e 3:1). Fundo solido no chip + sombra dupla
   no titulo garantem leitura sobre qualquer trecho da foto. */
.gdh-hero .gd-chip--genero{background:rgba(11,13,16,.72);border-color:rgba(255,255,255,.30);color:#fff}
.gdh-hero .gd-chip--genero:hover{border-color:#fff}
.gdh-hero__shade{background:linear-gradient(180deg,rgba(11,13,16,.28) 0%,rgba(11,13,16,.55) 45%,rgba(11,13,16,.96) 100%)}
.gdh-hero__title{text-shadow:0 2px 26px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.6)}

/* V-5 — a ponte capa -> paginas internas: os titulos entram na mesma familia da capa.
   Sem isso, clicar num chip da capa nova levava a um desenho que parecia outro site. */
.gd-head__title,.gd-arquivo__cabeca h1,.gd-content h2,.gd-content h3{font-family:var(--gd-font-display)}
/* R-3: o card de arquivo tinha titulo em Inter (17,28px) contra 19px em Chakra Petch na capa
   — quebrava o sistema tipografico no meio da navegacao. A Marina mediu e classificou como
   bloqueante; e uma linha. */
.gd-card h3,.gd-card__title,.gd-mini__title{font-family:var(--gd-font-display);letter-spacing:-.01em}
.gd-content h2,.gd-content h3{letter-spacing:-.01em}

/* V-6 — reserva de altura POR SLOT. Era 250px para todos, inclusive o leaderboard do topo,
   que ocupa ~100px: a reserva virava buraco maior que o proprio anuncio. */
.gd-ad--reserva.gd-ad--header ins.adsbygoogle,.gd-ad--reserva.gd-ad--footer ins.adsbygoogle{min-height:100px}
.gd-ad--reserva.gd-ad--in_article ins.adsbygoogle,.gd-ad--reserva.gd-ad--sidebar ins.adsbygoogle{min-height:250px}

/* V-2 — se a lateral ficar sem nada visivel (sem anuncio preenchido e sem widget), a grade
   vira uma coluna em vez de deixar um vao preto de 328px. A classe e posta pelo main.js. */
.gdh-split--vazia{grid-template-columns:1fr}
/* Bloco de anuncio que nao preencheu e esta NA TELA: mantem a altura reservada (sem CLS) e
   fica um aviso discreto em vez de um vao em branco. */
.gd-ad--sem-anuncio{min-height:100px;align-items:center;justify-content:center;border-style:dashed;border-color:var(--gd-border-soft);background:transparent}
.gd-ad--sem-anuncio span{color:var(--gd-muted);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
/* A busca entrou no menu (A-2) e no desktop ela caiu para uma segunda linha, porque o
   container do menu nao era flex. Agora menu + busca ficam na mesma linha. */
.gd-nav{display:flex;align-items:center}
.gdh-split--vazia .gdh-side{display:none}

/* A-2 — a busca vive dentro do menu: no desktop nada muda (fim da barra); no celular ela
   abre junto com o hamburguer, acima dos links, com 44px de altura. */
.gd-nav .gd-search{margin-left:8px}
@media (max-width:900px){
  /* A busca tem que abrir ANTES dos links (spec do Caio) — e para o "order" valer o menu
     precisa ser um container flex no celular. */
  /* align-items:stretch e obrigatorio aqui: o desktop usa align-items:center (para a busca
     ficar na mesma linha do menu) e sem isso os itens do menu do celular apareciam
     CENTRALIZADOS, cada um na largura do proprio texto. Bug que eu mesmo introduzi. */
  .gd-nav{display:none;flex-direction:column;align-items:stretch}
  .gd-nav.is-open{display:flex}
  .gd-nav .gd-search{display:flex;order:-1;width:100%;margin:0 0 10px}
  .gd-nav .gd-search,.gd-nav .gd-search form{width:100%}
  .gd-nav .gd-search input[type=search]{width:100%;min-height:44px;border-radius:10px;font-size:.95rem}
}

/* V-3 / A-3 — o destaque no celular. Estava em 197px (16:9) com titulo de 23px e UMA LINHA
   CORTADA em "..." (clientHeight 76 x scrollHeight 103) — e menor que o proprio titulo da
   materia (30,4px). Agora usa o teto acordado de 230px, com titulo em 27px (como no mockup)
   e 4 linhas antes de qualquer corte. Miniatura da lista em 56px, linha em ~72px (spec <=95). */
@media (max-width:620px){
  /* O destaque no celular e guiado pelo CONTEUDO, com teto folgado. Qualquer teto apertado
     cortava a manchete (o texto real precisa de ~250px). Com as linhas da lista em 85px, a
     dobra comporta isso e as 3 manchetes continuam acima (medido depois da mudanca). */
  /* R-2 (validacao de UI, rodada 2): o teto de 320px que eu tinha posto para nao cortar a
     manchete quebrava a dobra em telas menores (360 -> 2 manchetes, 320 -> 1, e em 320 os
     chips saiam da caixa). Spec da Marina, testada por ela: teto de 240px + fonte fluida.
     Resultado que ela mediu: hero ~205px, titulo COMPLETO, chips e meta dentro, 3 manchetes
     em 390 e em 360, 2 em 320. */
  .gdh-hero{min-height:200px;max-height:240px;aspect-ratio:auto}
  /* 5 linhas com entrelinha 1.03: medido que a manchete real ("War Thunder lanca atualizacao
     Sky Odyssey com tanques gregos, indianos e indonesios") precisa de 5 linhas. Com 4 ela
     saia cortada em "..."; com 5 ela cabe inteira dentro do teto de 230px. */
  /* ATENCAO: o clamp de linhas NAO pode ser so "removido" — o bloco anterior deste arquivo
     declara display:-webkit-box + -webkit-line-clamp:3 para o mesmo seletor, e propriedades
     assim se SOMAM entre regras (a ultima vence por propriedade, nao por regra). Por isso
     aqui eu zero explicitamente display, line-clamp e overflow. */
  .gdh-hero__title{font-size:clamp(20px,5.4vw,26px);line-height:1.04;margin:0 0 5px;overflow-wrap:anywhere;display:block;-webkit-line-clamp:none;overflow:visible}
  .gdh-hero__chips{margin-bottom:5px}
  .gdh-uitem{padding:8px 0;gap:12px}
  .gdh-uitem__thumb{flex:0 0 56px;width:56px}
  .gdh-uitem__thumb img{width:56px;height:56px}
  .gdh-uitem__tt{font-size:15.5px}
  /* Tira o "· 2 min de leitura" da linha da lista no celular: era o que fazia a linha
     chegar a 115px (spec <=95). O tempo de leitura continua no desktop. */
  .gdh-uitem__tempo{display:none}
  .gdh-uitem__sub{gap:6px}
  .gdh-pill{font-size:11px;padding:2px 8px}
}