/* ==========================================================================
   EVAST THEME 1.3.0 · content.css
   Arquivo · busca · 404 · artigo · página  (templates da raiz do tema)
   Squad A (Templates & UI/UX) · 2026-09-17

   Requer tokens.css + ievera-theme.css carregados ANTES (vars --ev-* e .iv-*).
   Enfileirado só nas views de conteúdo (inc/evast-content.php, prio 25) — a home
   v2 tem o home-epic.css e não carrega este arquivo.

   ZONA PROIBIDA (regra da casa): nenhum seletor aqui toca #av_top, #av_content_*,
   .ai-*, .code-block, google_ads_iframe, .cb-leader-wrap ou iframe. Os containers
   .ievera-ad são NOSSOS (ads.css) — aqui só recebem `grid-column` para ocupar a
   linha inteira do grid onde o hook in-feed os coloca. Nada de display/altura.

   375px É LEI: todo grid usa minmax(min(Xpx,100%),1fr), todo filho de grid/flex
   tem min-width:0, nenhum min-width fixo em px.

   Estrutura: 01 escopo · 02 cabeçalho de arquivo · 03 grid + card · 04 paginação
              05 busca · 06 estado vazio + atalhos · 07 404 · 08 artigo/página
              09 responsivo + print
   ========================================================================== */

/* ==========================================================================
   01 · ESCOPO
   ========================================================================== */

/* O grid legado de ievera-theme.css §07 transformava .site-main inteiro em grid
   (quando os cards eram .inside-article do GP). Agora o grid é nosso, dentro do main.
   `body.evast-tpl` = 0,2,1 → vence `.archive .site-main` = 0,2,0, em qualquer ordem. */
body.evast-tpl .site-main{display:block;}
body.evast-tpl .site-main > *{min-width:0;}

/* Respiro entre os blocos do main (cabeçalho → grid → paginação). */
.ev-head,.ev-grid,.ev-pagination,.ev-empty,.ev-head-search{margin-bottom:var(--ev-sp-5);}
.ev-pagination:last-child,.ev-empty:last-child{margin-bottom:0;}

/* ==========================================================================
   01b · HERO (1.7.0) — page · single · archive · search · 404 · produto
   Faixa verde-floresta full-bleed, MESMO gradiente do hero da home v2
   (--ev-hero-a → --ev-hero-b, home-epic.css .hero). Full-bleed por breakout de
   100vw (position:relative;left:50%;margin-inline:-50vw) — funciona porque o
   hero é chamado como IRMÃO de `.inside-article` (nunca filho): esse div tem
   `overflow:hidden` de propósito (recorta vazamento de -32px da ActiveView,
   regra da casa em §08/ievera-theme.css §06) e clipparia o breakout. Em
   archive/search/404 o hero fica direto em #main, sem ancestral overflow.
   html,body já têm overflow-x:clip (ievera-theme.css §12) — o 100vw é seguro.
   Altura SEMPRE pelo conteúdo: só padding, nunca height/min-height fixo.
   Contraste AA: título #fff sobre o gradiente (>10:1), eyebrow em --ev-lime
   (>8:1), subtítulo/meta em --ev-on-brand-soft / --ev-on-brand-muted (mesmos
   tokens já usados no hero/world da home — vetados lá para AA).
   ZONA PROIBIDA: nada aqui toca #av_top, av_content_*, .ai-*, .code-block,
   google_ads_iframe, .cb-leader-wrap, iframe. O hero só entra ANTES desses
   containers no fluxo — a leaderboard (generate_after_header) e o av_top
   (1º elemento do entry-content, Ad Inserter) continuam nos MESMOS hooks e
   nas MESMAS posições de sempre; nenhuma geometria de anúncio muda.
   ========================================================================== */
.ev-hero{
  position:relative;
  /* 1.8.0: breakout independente do pai (o left:50% deslocava dentro do container centrado) */
  /* 1.8.1: SEM full-bleed. O hero fica dentro da coluna (a 1.7.x/1.8.0 sobrepunha a sidebar).
     Full-bleed só volta na 1.9.0, impresso por hook antes de .site-content, como a home. */
  width:100%;margin-left:0;margin-right:0;left:auto;right:auto;border-radius:var(--ev-r-card,20px);
  background:radial-gradient(125% 115% at 20% 20%,var(--ev-hero-b) 0%,var(--ev-hero-a) 62%);
  color:var(--ev-on-brand-text);
  margin-bottom:var(--ev-sp-6);
  overflow:hidden;    /* só recorta o padrão de pontinhos decorativo abaixo — nunca texto */
  max-width:100%;box-sizing:border-box;
}
.ev-hero::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(216,245,90,.13) 1.4px,transparent 1.6px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg,transparent 0,#000 40%,#000 70%,transparent 100%);
  pointer-events:none;
}
.ev-hero-inner{
  position:relative;z-index:1;min-width:0;
  max-width:var(--ev-max,1200px);margin:0 auto;
  padding:clamp(24px,4vw,40px) clamp(20px,4vw,40px) clamp(24px,4vw,40px);
}
.ev-hero .ev-crumbs.ev-crumbs{margin-bottom:var(--ev-sp-4);}
.ev-hero .ev-crumbs a{color:var(--ev-on-brand-soft);}
.ev-hero .ev-crumbs a:hover,.ev-hero .ev-crumbs a:focus-visible{color:var(--ev-lime);}
.ev-hero .ev-crumbs span[aria-hidden]{color:var(--ev-on-brand-muted);}
.ev-hero .ev-crumb-current{color:var(--ev-on-brand-muted);}
.ev-hero-eyebrow{
  display:inline-block;font-family:var(--ev-font-display);font-weight:700;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ev-lime);
  margin:0 0 14px;
}
.ev-hero-title{
  font-family:var(--ev-font-display);font-weight:800;
  font-size:clamp(28px,4.6vw,52px);line-height:1.08;letter-spacing:-.03em;
  color:#fff;margin:0;max-width:22ch;text-wrap:balance;overflow-wrap:anywhere;
}
.ev-hero-sub{
  margin:16px 0 0;color:var(--ev-on-brand-soft);
  font-size:clamp(15px,1.6vw,18px);line-height:1.6;max-width:62ch;text-wrap:pretty;
  overflow-wrap:anywhere;
}
.ev-hero-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:20px 0 0;
}
.ev-hero-meta > *{min-width:0;}
.ev-hero-meta-item{
  display:inline-flex;align-items:center;min-height:28px;padding:5px 12px;
  border-radius:var(--ev-r-pill);background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  font:600 12.5px var(--ev-font-body);color:var(--ev-on-brand-soft);
  max-width:100%;overflow-wrap:anywhere;
}
/* institucional (page.php): só eyebrow "Ieveera SEO" + H1 + uma linha — sem breadcrumb/meta */
.ev-hero--page .ev-hero-inner{padding-bottom:clamp(26px,4.5vw,44px);}
/* busca: o termo vira H1 entre aspas tipográficas, igual ao .ev-head antigo */
.ev-hero--search .ev-hero-title::before{content:"\201C";}
.ev-hero--search .ev-hero-title::after{content:"\201D";}
.ev-hero--search .ev-hero-title:empty::before,
.ev-hero--search .ev-hero-title:empty::after{content:"";}

@media(min-width:768px){
  .ev-hero-inner{padding-left:var(--ev-gutter);padding-right:var(--ev-gutter);}
}
@media(max-width:640px){
  .ev-hero-inner{padding:24px var(--ev-gutter) 28px;}
  .ev-hero-title{font-size:clamp(24px,7vw,34px);max-width:none;}
  .ev-hero-sub{margin-top:12px;}
  .ev-hero-meta{margin-top:16px;gap:8px;}
  .ev-hero-meta-item{font-size:11.5px;padding:4px 10px;min-height:26px;}
}
@media print{ .ev-hero{background:none;color:#000;} .ev-hero-title{color:#000;} }

/* ==========================================================================
   02 · CABEÇALHO DE ARQUIVO / BUSCA
   ========================================================================== */
.ev-head{
  background:var(--ev-surface);
  border:1px solid var(--ev-border-2);
  border-radius:var(--ev-r-hero);
  box-shadow:var(--ev-shadow-card);
  padding:var(--ev-sp-6) var(--ev-sp-5);
  display:flex;flex-direction:column;gap:var(--ev-sp-2);
}
.ev-head-eyebrow{margin-bottom:0;}
.ev-head-title{
  font-size:clamp(28px,4vw,42px);
  line-height:1.12;
  letter-spacing:var(--ev-ls-h1);
  font-weight:var(--ev-fw-display);
  color:var(--ev-brand);
  margin:0;
  overflow-wrap:anywhere;      /* termo de busca longo não estoura em 375 */
}
.ev-head-desc{
  margin:0;
  color:var(--ev-text-soft);
  font-size:var(--ev-fs-lead);
  line-height:1.6;
  max-width:60ch;
  text-wrap:pretty;
}
.ev-head-meta{
  margin:var(--ev-sp-1) 0 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  font:600 13px var(--ev-font-body);
  color:var(--ev-text-muted);
}
.ev-head-meta > *{min-width:0;}
.ev-head .ev-count{
  display:inline-flex;align-items:center;
  padding:5px 11px;border-radius:var(--ev-r-pill);
  background:var(--ev-tint);color:var(--ev-green-900);
  font:800 11px var(--ev-font-body);letter-spacing:.06em;text-transform:uppercase;
}
/* Busca: o termo procurado vira o H1 entre aspas tipográficas. */
.ev-head--search .ev-head-title::before{content:"\201C";}
.ev-head--search .ev-head-title::after{content:"\201D";}
.ev-head--search .ev-head-title:empty::before,
.ev-head--search .ev-head-title:empty::after{content:"";}
.ev-head-search{margin-top:calc(var(--ev-sp-5) * -1 + var(--ev-sp-3));}

/* ==========================================================================
   03 · GRID + CARD
   1 coluna (375) · 2 (≥768) · 3 (≥1024). minmax(min(X,100%),1fr) = nunca estoura.
   ========================================================================== */
.ev-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--ev-sp-4);
  align-items:stretch;
}
.ev-grid > *{min-width:0;}
/* Container VAZIO do tema que o hook in-feed injeta entre os cards: ocupa a linha.
   Só posicionamento no grid — tamanho, borda e visibilidade continuam em ads.css. */
.ev-grid > .ievera-ad{grid-column:1 / -1;}

.ev-card{min-width:0;}
.ev-card .iv-body{min-width:0;}
.ev-card h3,.ev-card h4{overflow-wrap:anywhere;}
.ev-card .iv-img{min-width:0;}
.ev-card .iv-img img{width:100%;height:100%;object-fit:cover;display:block;}

/* Sem imagem destacada: bloco de marca em vez de retângulo cinza. */
.ev-img--empty{
  background:var(--ev-grad-dots) 0 0/18px 18px,var(--ev-grad-hero);
  display:grid;place-items:center;
}
.ev-img--empty .ev-img-glyph{display:grid;place-items:center;width:44px;height:44px;color:var(--ev-lime);}
.ev-img--empty .ev-img-glyph svg{width:28px;height:28px;}
.ev-img--empty .iv-chip{background:var(--ev-lime);color:var(--ev-green-900);}

/* ==========================================================================
   04 · PAGINAÇÃO
   A pílula base vem de ievera-theme.css §07; aqui só alinhamento e a palavra
   Previous/Next, que some no celular (fica só a seta, com alvo de 44px).
   ========================================================================== */
.ev-pagination{display:flex;justify-content:center;}
.ev-pagination .nav-links{justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;}
.ev-pagination .page-numbers{gap:6px;}
.ev-pagination .page-numbers.dots{border-color:transparent;background:transparent;min-width:28px;padding:0;}
.ev-pag-word{font-weight:700;}

/* ==========================================================================
   05 · BUSCA (formulário da marca)
   ========================================================================== */
.ev-search{
  display:flex;flex-wrap:wrap;gap:10px;
  width:100%;max-width:560px;
  margin:var(--ev-sp-4) 0 0;
}
.ev-search-field{
  flex:1 1 200px;min-width:0;width:100%;
  font-size:16px;                         /* <16px = zoom automático no iOS */
}
.ev-search-btn{
  flex:0 0 auto;min-height:48px;padding:0 22px;
  border:0;border-radius:var(--ev-r-btn);
  background:var(--ev-green-900);background-image:var(--ev-grad-cta);
  color:var(--ev-lime);
  font:var(--ev-fw-btn) 15px/1 var(--ev-font-body);
  cursor:pointer;
}
.ev-search-btn:hover{background-image:var(--ev-grad-cta-hover);color:var(--ev-lime);}

/* ==========================================================================
   06 · ESTADO VAZIO + ATALHOS DE CATEGORIA
   Substitui o "Nothing Found / It seems we can't find what you're looking for"
   do GeneratePress. Categoria de finanças ainda sem posts = promessa + caminho.
   ========================================================================== */
.ev-empty{
  background:var(--ev-surface);
  border:1px solid var(--ev-border-2);
  border-radius:var(--ev-r-hero);
  box-shadow:var(--ev-shadow-card);
  padding:var(--ev-sp-7) var(--ev-sp-5);
  position:relative;
  /* overflow:clip (não hidden): mesmo corte visual do círculo decorativo do
     ::before (que vaza 70px de propósito, right:-70px em .ev-empty::before),
     mas sem crescer o scrollWidth como "clipped" — o texto real nunca é
     cortado, só o círculo. 1.6.0: era hidden e o collide.js confundia a
     sobra do círculo com o texto de verdade. */
  overflow:clip;
}
.ev-empty::before{
  content:"";position:absolute;right:-70px;top:-70px;
  width:220px;height:220px;border-radius:50%;
  background:var(--ev-tint);opacity:.55;pointer-events:none;
}
.ev-empty-inner{position:relative;max-width:64ch;}
.ev-empty-title{
  font-size:var(--ev-fs-h2);line-height:var(--ev-lh-h2);
  color:var(--ev-brand);margin:0 0 var(--ev-sp-3);
  text-wrap:balance;
}
.ev-empty-text{
  margin:0;color:var(--ev-text-soft);
  font-size:var(--ev-fs-lead);line-height:1.65;text-wrap:pretty;
}

.ev-shortcuts{margin-top:var(--ev-sp-6);}
.ev-shortcuts-title{
  font:800 11px var(--ev-font-body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ev-text-muted);margin:0 0 var(--ev-sp-3);
}
.ev-shortcuts-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:var(--ev-sp-2);
}
.ev-shortcuts-list > li{min-width:0;}
.ev-shortcut{
  display:flex;align-items:center;gap:var(--ev-sp-3);
  min-height:64px;padding:12px 14px;
  background:var(--ev-surface-2);
  border:1px solid var(--ev-border-2);border-radius:var(--ev-r-tile);
  color:var(--ev-text) !important;text-decoration:none !important;
  transition:transform var(--ev-t-fast) ease,border-color var(--ev-t-fast) ease,box-shadow var(--ev-t-fast) ease;
}
.ev-shortcut:hover,.ev-shortcut:focus-visible{
  transform:translateY(-2px);border-color:var(--ev-green-500);box-shadow:var(--ev-shadow-card);
}
.ev-shortcut-ic{
  flex:none;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--ev-lime);color:var(--ev-green-900);
}
.ev-shortcut-ic svg{width:20px;height:20px;}
.ev-shortcut-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ev-shortcut-txt b{
  font:700 15px/1.25 var(--ev-font-body);color:var(--ev-brand);
  overflow-wrap:anywhere;
}
.ev-shortcut-txt small{font:600 12px var(--ev-font-body);color:var(--ev-text-muted);}
.ev-shortcut-arrow{margin-left:auto;flex:none;font:800 18px/1 var(--ev-font-body);color:var(--ev-accent-text);}

/* ==========================================================================
   07 · 404
   ========================================================================== */
.ev-404 .inside-article{
  background:var(--ev-surface);
  border:1px solid var(--ev-border-2);
  border-radius:var(--ev-r-news);
  box-shadow:var(--ev-shadow-card);
  padding:var(--ev-sp-7) var(--ev-sp-5);
}
.ev-404 .ev-head{
  background:transparent;border:0;box-shadow:none;padding:0;
  margin-bottom:var(--ev-sp-5);
}
.ev-404-content{font-size:var(--ev-fs-body);}
.ev-404-content .ev-search{margin-top:0;}
.ev-404-back{margin:var(--ev-sp-6) 0 0;}
/* .iv-button é white-space:nowrap — com width:100% em 375 o rótulo longo
   ("Back to the homepage") empurrava o botão 29px pra fora da viewport. Aqui ele
   pode quebrar em duas linhas e o padding entra na largura. Medido em 375px. */
.ev-404-back .iv-button{width:100%;box-sizing:border-box;white-space:normal;text-align:center;}

/* ==========================================================================
   08 · ARTIGO (.ev-single) E PÁGINA (.ev-page)
   A base tipográfica do .entry-content já vem de ievera-theme.css §06. Aqui:
   cabeçalho, meta, medida de leitura nos títulos, tags e relacionados.
   NUNCA se aplica max-width a `div` dentro do .entry-content — os wrappers de
   anúncio são divs e ficariam espremidos.
   ========================================================================== */
.ev-single .entry-header,.ev-page .entry-header{
  margin-bottom:var(--ev-sp-5);
  padding-bottom:var(--ev-sp-4);
  border-bottom:1px solid var(--ev-border-2);
}
.ev-single .entry-title,.ev-page .entry-title{
  margin:0 0 var(--ev-sp-3);
  max-width:24ch;              /* manchete não vira faixa de 1200px no desktop */
  overflow-wrap:anywhere;
}
.ev-crumbs.ev-crumbs{margin-bottom:var(--ev-sp-4);}
.ev-crumb-current{color:var(--ev-text-muted);font-weight:600;}

.ev-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:0;font:600 13px var(--ev-font-body);color:var(--ev-text-muted);
}
.ev-meta > *{min-width:0;}
/* chip de categoria é LINK: 22,5px (altura natural do .iv-chip) reprovava o alvo de
   toque mínimo. 32px passa em 2.5.8 sem virar botão gigante ao lado da data. */
.ev-meta .ev-meta-cat{text-decoration:none !important;min-height:32px;padding:8px 12px;}
.ev-meta .ev-meta-cat:hover{background:var(--ev-green-900);color:var(--ev-lime);}
.ev-meta-item{display:inline-flex;align-items:center;gap:5px;}
.ev-meta-item + .ev-meta-item::before{
  content:"·";color:var(--ev-border);font-weight:700;margin-right:5px;
}
.ev-meta-upd time{color:var(--ev-accent-text);font-weight:700;}
.ev-meta--page{margin-top:var(--ev-sp-2);}

/* Medida de leitura confortável (~68ch = --ev-measure). Parágrafos, listas e
   blockquote já vêm limitados do §06; aqui entram títulos, figuras e tabela. */
.ev-prose h2,.ev-prose h3,.ev-prose h4,.ev-prose h5,.ev-prose h6,
.ev-prose figure,.ev-prose figcaption,.ev-prose .wp-block-table,
.ev-prose dl,.ev-prose .iv-summary,.ev-prose .ievera-summary{
  max-width:var(--ev-measure);
}
.ev-prose > p:first-of-type{color:var(--ev-text-soft);}
.ev-prose img{height:auto;}
/* Âncora de rolagem: o header é sticky (64px) — link para #id não some atrás dele. */
.ev-prose :is(h2,h3,h4)[id]{scroll-margin-top:calc(var(--ev-header-h) + 16px);}

.ev-tags{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-top:var(--ev-sp-6);padding-top:var(--ev-sp-4);
  border-top:1px solid var(--ev-border-2);
}
.ev-tags > *{min-width:0;}
.ev-tags-label{
  font:800 10.5px var(--ev-font-body);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ev-text-muted);
}
.ev-tags .iv-chip{min-height:32px;}

.ev-related{margin-top:var(--ev-sp-7);}
.ev-grid--related{gap:var(--ev-sp-3);}
.ev-grid--related .ev-card h3{font-size:16px;}
.ev-grid--related .ev-card .iv-body{padding:var(--ev-sp-3) var(--ev-sp-3) var(--ev-sp-4);}

/* ==========================================================================
   08b · NEUTRALIZAÇÃO DE FAQ/CTA LEGADO DENTRO DO ARTIGO (1.6.0)
   Diagnóstico (colisoes.json, varredura 21/09 — collide.js): em
   free-online-courses-italy-recommended/ (pipeline de conteúdo antigo, pré-
   Evast), o `<details>/<summary>` do FAQ e os cards "Read the guide →"
   colidiam — resposta em cima do summary seguinte (overlap 100%), respostas
   entre si (62%) e o CTA em cima do texto de apoio (85–95%). O tema NÃO tem
   nenhuma regra própria pra details/summary/CTA dentro do corpo do post (só
   pro seletor de país .iv-geo, que é outro <details>, no header) — a origem é
   CSS/inline style que veio junto com o HTML colado no post, não o Evast
   Theme. Correção certa: neutralizar por seletor ESCOPADO em .entry-content,
   sem mascarar texto nenhum — só devolve o fluxo normal do documento pra
   quem foi tirado dele (position:absolute/fixed escapando do <details> ou do
   card). O post em si ainda precisa de limpeza manual do HTML de origem;
   isso aqui é o piso de segurança do tema pra qualquer post com esse padrão,
   novo ou antigo. Nada aqui toca anúncio: a zona proibida (#av_top,
   av_content_*, .ai-*, .code-block, google_ads_iframe, .cb-leader-wrap)
   nunca fica dentro de um <details> de FAQ.
   ========================================================================== */
.entry-content details{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  z-index:auto !important;
  overflow:visible !important;
  max-height:none !important;
  margin:0 0 var(--ev-sp-3) !important;
}
.entry-content details > summary{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  z-index:auto !important;
}
/* resposta do FAQ: qualquer elemento depois do <summary>, dentro do <details> */
.entry-content details > summary ~ *{
  position:static !important;
  display:block !important;
  inset:auto !important;
  transform:none !important;
  z-index:auto !important;
  overflow:visible !important;
  max-height:none !important;
}
/* cards "Read the guide →": nenhum <a>/<span>/<b>/<strong>/<small> do corpo do
   post tem razão pra sair do fluxo normal — o tema nunca posiciona esses
   marcadores como absolute/fixed dentro do artigo. */
.entry-content a,
.entry-content span,
.entry-content b,
.entry-content strong,
.entry-content small{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  z-index:auto !important;
}

/* ==========================================================================
   09 · RESPONSIVO (≥600 · ≥768 · ≥1024) + PRINT
   ========================================================================== */
@media (min-width:600px){
  .ev-shortcuts-list{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));}
  .ev-404-back .iv-button{width:auto;}
  .ev-grid--related{grid-template-columns:repeat(3,minmax(min(160px,100%),1fr));}
}

@media (min-width:768px){
  .ev-head{padding:var(--ev-sp-7) var(--ev-sp-6);}
  .ev-grid{grid-template-columns:repeat(2,minmax(min(260px,100%),1fr));}
  /* o primeiro card do arquivo ocupa a linha (destaque editorial) */
  .ev-grid--archive > .ev-card--featured{grid-column:1 / -1;}
  .ev-empty{padding:var(--ev-sp-8) var(--ev-sp-7);}
  .ev-404 .inside-article{padding:var(--ev-sp-8) var(--ev-sp-7);}
}

@media (min-width:1024px){
  .ev-grid{grid-template-columns:repeat(3,minmax(min(200px,100%),1fr));}
  /* com 3 colunas o destaque ocupa 2 (a 3ª recebe o card seguinte) */
  .ev-grid--archive > .ev-card--featured{grid-column:span 2;}
  .ev-grid .ev-card h3{font-size:17px;}
  .ev-grid .ev-card--featured h3{font-size:22px;}
  .ev-single .entry-title,.ev-page .entry-title{max-width:20ch;}
}

/* ≤768: alvos de toque e palavra da paginação */
@media (max-width:768px){
  /* Mesma técnica de "sr-only" de .screen-reader-text (ievera-theme.css §12),
     só que com clip-path em vez de overflow:hidden+clip:rect. Visualmente
     idêntico (a palavra some, fica só a seta ‹ ›; o texto continua lido por
     leitor de tela, nada é display:none). 1.6.0: com overflow:hidden o
     collide.js lia scrollHeight > clientHeight e reportava "Next" cortado —
     falso positivo do MESMO tipo que .screen-reader-text (que a varredura já
     aceita), mas aqui dava pra tirar da lista trocando a técnica, sem mudar
     o resultado visual em nenhuma largura. */
  .ev-pag-word{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    white-space:nowrap;border:0;clip-path:inset(50%);
  }
  .ev-shortcut{min-height:68px;}
  .ev-search-btn{width:100%;}
  .ev-head{padding:var(--ev-sp-5) var(--ev-sp-4);}
  .ev-empty{padding:var(--ev-sp-6) var(--ev-sp-4);}
  .ev-404 .inside-article{padding:var(--ev-sp-6) var(--ev-sp-4);}
}

@media (prefers-reduced-motion:reduce){
  .ev-shortcut,.ev-card{transition:none !important;}
  .ev-shortcut:hover,.ev-card:hover{transform:none !important;}
}

@media print{
  .ev-pagination,.ev-search,.ev-shortcuts,.ev-related,.ev-tags{display:none !important;}
  .ev-head,.ev-empty,.ev-404 .inside-article{box-shadow:none;border-color:#ccc;}
}

/* ==========================================================================
   01c · 1.9.0 — GRID ÚNICO + HERO POR HOOK
   Regra: header, hero e conteúdo compartilham o MESMO container
   (max-width --ev-max, padding --ev-gutter). Borda esquerda da logo = borda
   esquerda do H1 = borda esquerda do card do artigo. Medido no ar em 23/09
   ANTES: logo em 355px, hero em 163px, conteúdo em 325px (três containers).
   ========================================================================== */
:root{--hd-pad:var(--ev-gutter);}
.site.grid-container,.site-content.grid-container,.site-footer .grid-container{
  max-width:var(--ev-max,1200px);padding-left:var(--ev-gutter);padding-right:var(--ev-gutter);box-sizing:border-box;
}
body.iv-home-epic .site.grid-container{padding:0;} /* home é full-bleed por seção (home-epic.css) */

/* hero impresso por generate_after_header: full-bleed real, sem raio, antes de .site-content */
.ev-hero--hook{
  width:100%;max-width:none;margin:0 0 var(--ev-sp-6);border-radius:0;
  padding-top:0;
}
.ev-hero--hook .ev-hero-inner{
  max-width:var(--ev-max,1200px);margin:0 auto;box-sizing:border-box;
  padding:clamp(28px,4vw,48px) var(--ev-gutter) clamp(28px,4vw,48px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:end;
}
.ev-hero--hook .ev-hero-main{min-width:0;}
.ev-hero--hook .ev-hero-eyebrow{
  display:inline-flex;align-items:center;min-height:26px;padding:4px 12px;margin:0 0 16px;
  border-radius:var(--ev-r-pill);background:var(--ev-lime);color:var(--ev-forest,#0E3527);
  font-size:11.5px;letter-spacing:.14em;
}
.ev-hero--hook .ev-hero-title{font-size:clamp(30px,4.2vw,50px);}
.ev-hero--hook .ev-hero-meta-item b{font-weight:800;color:#fff;margin-right:4px;}
/* "In this guide" — só desktop, só quando há H2 */
.ev-hero-side{display:none;}
@media(min-width:1024px){
  .ev-hero--hook.has-toc .ev-hero-inner{grid-template-columns:minmax(0,7.2fr) minmax(0,4.8fr);}
  .ev-hero-side{
    display:block;align-self:end;min-width:0;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
    border-radius:var(--ev-r-card,20px);padding:22px 24px;
  }
  .ev-hero-side h3{
    margin:0 0 12px;font-family:var(--ev-font-display);font-weight:700;font-size:12px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ev-lime);
  }
  .ev-hero-side ol{list-style:none;margin:0;padding:0;}
  .ev-hero-side li{
    display:flex;gap:12px;align-items:baseline;padding:8px 0;
    border-top:1px solid rgba(255,255,255,.1);color:var(--ev-on-brand-soft);
    font:500 14.5px/1.4 var(--ev-font-body);min-width:0;overflow-wrap:anywhere;
  }
  .ev-hero-side li:first-child{border-top:0;padding-top:0;}
  .ev-hero-side li i{font-style:normal;font-family:var(--ev-font-display);font-weight:800;color:var(--ev-lime);flex:0 0 auto;}
}
/* o conteúdo abaixo do hero por hook não repete o espaço do hero antigo */
.ev-hero--hook + .site-content{padding-top:0;}
@media(max-width:640px){
  .ev-hero--hook .ev-hero-inner{padding:24px var(--ev-gutter) 28px;gap:0;}
  .ev-hero--hook .ev-hero-eyebrow{margin-bottom:12px;}
}

/* ---------- 1.9.3 · busca da sidebar (widget wp-block-search): input e botão empilhados, nada cortado ---------- */
.sidebar .wp-block-search .wp-block-search__inside-wrapper{flex-wrap:wrap;gap:10px}
.sidebar .wp-block-search .wp-block-search__input{flex:1 1 100%;width:100%;min-width:0;height:46px;padding:0 14px;border:1px solid var(--ev-border);border-radius:12px;font:inherit;font-size:15px;background:var(--ev-surface)}
.sidebar .wp-block-search .wp-block-search__button{flex:1 1 100%;width:100%;margin:0;height:46px;border:0;border-radius:var(--ev-r-pill);background:var(--ev-brand);color:var(--ev-lime);font:700 15px var(--ev-font-display);cursor:pointer}
.sidebar .wp-block-search .wp-block-search__label{font:700 14px var(--ev-font-display);color:var(--ev-text);margin-bottom:8px}