/* =====================================================================
   MODELO VISUAL: AMPLO — largura cheia, sem barra lateral, cards em grade.

   TUDO aqui é escopado em `body.tpl-amplo`. Sem isso um modelo vazaria no
   outro (e a coluna que escolhe modelo próprio quebraria o resto do site).
   Só sobrescreve o que precisa: cores, fonte e logo continuam vindo da
   Identidade Visual do portal.
   ===================================================================== */

/* ------------------------------------------------------------ CONTAINER */
body.tpl-amplo .util,
body.tpl-amplo .util3{
  width:100% !important; max-width:1560px; box-sizing:border-box;
  padding-left:40px; padding-right:40px;
}

/* Sem barra lateral: o conteúdo ocupa a página inteira. */
body.tpl-amplo .coluna-direita{ display:none !important; }

/* ------------------------------------------------- HOME: blocos de notícia
   Na home o bloco é uma coluna de 700px com a foto à esquerda e o texto
   posicionado por cima (position:absolute). Aqui vira grade de cards. */
body.tpl-amplo .noticias,
body.tpl-amplo .noticias_final,
body.tpl-amplo .noticias_cat{
  width:100% !important; min-height:0 !important; margin-right:0 !important;
}
body.tpl-amplo .noticias ul,
body.tpl-amplo .noticias_final ul{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px 26px; text-align:left !important;
}
body.tpl-amplo .noticias ul li,
body.tpl-amplo .noticias_final ul li{
  width:100% !important; margin:0 !important; overflow:visible !important;
}
body.tpl-amplo .noticias ul li img,
body.tpl-amplo .noticias_final ul li img{
  width:100% !important; height:240px !important; float:none !important; display:block;
}
/* o texto sai de cima da foto e vai para baixo dela */
body.tpl-amplo .noticias ul li .infos,
body.tpl-amplo .noticias_final ul li .infos{
  position:static !important; width:100% !important; transform:none !important;
  right:auto !important; top:auto !important; padding:15px 2px 0 !important;
}
body.tpl-amplo .noticias ul li:hover .infos,
body.tpl-amplo .noticias_final ul li:hover .infos{ right:auto !important; }
body.tpl-amplo .noticias ul li .infos h2,
body.tpl-amplo .noticias_final ul li .infos h2{ font-size:21px !important; line-height:1.25 !important; }
body.tpl-amplo .noticias ul li .infos h3,
body.tpl-amplo .noticias_final ul li .infos h3{ -webkit-line-clamp:3; }

/* faixa horizontal: cards maiores, ocupando a largura toda */
body.tpl-amplo .noticias_horizontal ul{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px 18px;
}
body.tpl-amplo .noticias_horizontal ul li{ width:100% !important; margin:0 !important; }
body.tpl-amplo .noticias_horizontal ul li img{ width:100% !important; height:190px !important; float:none !important; }
body.tpl-amplo .noticias_horizontal ul li .infos{
  position:static !important; width:100% !important; transform:none !important;
  right:auto !important; top:auto !important; padding:12px 2px 0 !important;
}
body.tpl-amplo .noticias_horizontal ul li:hover .infos{ right:auto !important; }

/* vitrine de colunas na home */
body.tpl-amplo .colunas-grid{ grid-template-columns:repeat(4,1fr) !important; }

/* ------------------------------------------------------------ PÁGINA DA COLUNA */
body.tpl-amplo .coluna-hero{ padding:86px 0; }
body.tpl-amplo .coluna-hero h1{ font-size:2.6rem; }
body.tpl-amplo .coluna-cards{ grid-template-columns:repeat(4,1fr); gap:30px 24px; }
body.tpl-amplo .coluna-card-img img{ height:230px; }

/* ------------------------------------------------------------ MATÉRIA
   O bloco acompanha o container do site (mesma margem do topo e da home); quem
   guarda a medida de leitura é o corpo do texto, mais abaixo. */
body.tpl-amplo .util_post{
  width:100% !important; display:block !important; padding-left:0; padding-right:0;
}

@media(max-width:1280px){
  body.tpl-amplo .noticias ul,
  body.tpl-amplo .noticias_final ul{ grid-template-columns:repeat(2,1fr); }
  body.tpl-amplo .noticias_horizontal ul{ grid-template-columns:repeat(3,1fr); }
  body.tpl-amplo .coluna-cards{ grid-template-columns:repeat(3,1fr); }
  body.tpl-amplo .colunas-grid{ grid-template-columns:repeat(3,1fr) !important; }
}
@media(max-width:900px){
  body.tpl-amplo .util, body.tpl-amplo .util3{ padding-left:20px; padding-right:20px; }
  body.tpl-amplo .noticias_horizontal ul{ grid-template-columns:repeat(2,1fr); }
  body.tpl-amplo .coluna-cards{ grid-template-columns:repeat(2,1fr); }
  body.tpl-amplo .colunas-grid{ grid-template-columns:repeat(2,1fr) !important; }
  body.tpl-amplo .coluna-hero{ padding:52px 0; }
  body.tpl-amplo .coluna-hero h1{ font-size:1.9rem; }
}
@media(max-width:640px){
  body.tpl-amplo .noticias ul,
  body.tpl-amplo .noticias_final ul,
  body.tpl-amplo .noticias_horizontal ul,
  body.tpl-amplo .coluna-cards,
  body.tpl-amplo .colunas-grid{ grid-template-columns:1fr !important; }
  body.tpl-amplo .noticias ul li img,
  body.tpl-amplo .noticias_final ul li img{ height:210px !important; }
}

/* ---------------------------------------- LISTAGENS INTERNAS (notícias/tag/busca)
   O skin esconde a barra lateral, mas a coluna de conteúdo é fixa em 800px no
   lista_materias.css — sem isto sobrava um vão enorme à direita. Vira grade. */
body.tpl-amplo .conteudo-home .coluna-esquerda{ width:100% !important; }
body.tpl-amplo .conteudo-home .coluna-esquerda ol{
  display:grid; grid-template-columns:repeat(2,1fr); gap:26px 24px;
}
body.tpl-amplo .conteudo-home .coluna-esquerda ol li{ margin:0 !important; }
@media(max-width:900px){
  body.tpl-amplo .conteudo-home .coluna-esquerda ol{ grid-template-columns:1fr; }
}

/* Ícones do topo (busca/tradução): o tema os posiciona com `position:absolute;
   right:0` em relação ao <header>, então eles ignoram o respiro do container e
   colam na borda da tela. Nos modelos de largura cheia isso fica evidente —
   aqui eles acompanham o mesmo recuo do conteúdo. */
body.tpl-amplo header .busca_topo{ right:40px !important; }
body.tpl-amplo header .translate{ right:78px !important; }
@media(max-width:900px){
  body.tpl-amplo header .busca_topo{ right:20px !important; }
  body.tpl-amplo header .translate{ right:58px !important; }
}

/* Mega menu num container largo: a proporção 1fr/2fr do tema deixava a coluna
   de categorias com espaço vazio demais. Largura fixa para as categorias e o
   resto para as matérias, que são o conteúdo útil. */
body.tpl-amplo .cmega_body{ grid-template-columns:240px 1fr !important; gap:40px !important; }
body.tpl-amplo .cmega_posts_grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important; }
@media(max-width:900px){
  body.tpl-amplo .cmega_body{ grid-template-columns:1fr !important; gap:18px !important; }
}

/* ===================================================== MATÉRIA EM DUAS COLUNAS
   Num corpo largo, a foto principal sozinha vira um painel gigante e empurra o
   texto para baixo da dobra. Aqui o cabeçalho e a foto dividem a primeira tela
   (texto à esquerda, imagem à direita, com altura limitada) e o corpo continua
   numa medida de leitura confortável — largura cheia em texto corrido cansa. */
/* UMA coluna de conteúdo só: o bloco da matéria acompanha o mesmo container
   do topo e da home, então trilha, título e texto compartilham a MESMA margem
   esquerda. Antes eram três larguras empilhadas (container, .util_post e o
   corpo), cada uma com um recuo diferente. */
body.tpl-amplo .util_post{ max-width:none !important; margin:0 !important; }
body.tpl-amplo .post-topo{
  display:grid !important;
  /* a foto tem teto próprio e termina na borda direita do container */
  grid-template-columns:minmax(0,1fr) minmax(0,520px);
  column-gap:40px; align-items:start; margin-bottom:26px;
}
body.tpl-amplo .post-topo > h1,
body.tpl-amplo .post-topo > h2,
body.tpl-amplo .post-topo > .data_redes,
body.tpl-amplo .post-topo > .byline-coluna{ grid-column:1; }
body.tpl-amplo .post-topo > a.fancybox,
body.tpl-amplo .post-topo > figure{
  grid-column:2; grid-row:1 / span 6; margin:0 !important; align-self:start;
}
body.tpl-amplo .post-topo > a.fancybox figure{ margin:0 !important; }
body.tpl-amplo .post-topo img.principal{
  width:100% !important; height:auto; max-height:430px; object-fit:cover; display:block;
}
/* corpo do texto: medida de leitura, mesmo com o container largo */
body.tpl-amplo article .infos > section{ max-width:820px; margin-right:auto; }

@media(max-width:900px){
  body.tpl-amplo .post-topo{ display:block !important; }
  body.tpl-amplo .post-topo img.principal{ max-height:none; }
}

/* ===================================================== MATÉRIA EM DUAS COLUNAS
   Desenho: em cima, cabeçalho e foto lado a lado; embaixo, corpo do texto com a
   barra lateral (Mais lidas) à direita. Duas colunas em cima, duas embaixo.

   O detalhe difícil: no HTML a lateral é IRMÃ do bloco da matéria, então ela
   naturalmente começaria lá no topo — foi o que deixou três colunas na primeira
   tentativa. Aqui os invólucros (.util_post, article, .infos) viram
   `display:contents`: eles somem para o layout e todas as peças passam a ser
   itens da MESMA grade. A ordem de colocação é dada por `order`, que é o que
   permite a lateral cair na mesma linha do corpo mesmo vindo depois das tags
   no HTML.

   A foto do cabeçalho usa a mesma medida da lateral, então ela fica exatamente
   por cima da coluna do "Mais lidas". */
body.tpl-amplo .util:has(> .util_post){
  display:grid !important;
  grid-template-columns:minmax(0,900px) minmax(300px,420px);
  justify-content:space-between; align-items:start; column-gap:56px;
}
body.tpl-amplo .util:has(> .util_post) > .util_post,
body.tpl-amplo .util:has(> .util_post) .util_post > article,
body.tpl-amplo .util:has(> .util_post) .util_post > article > .infos{ display:contents !important; }

/* linha 1-3: largura inteira */
body.tpl-amplo .util:has(> .util_post) .breadcrumb{ order:1; grid-column:1 / -1; }
body.tpl-amplo .util:has(> .util_post) .aviso{ order:2; grid-column:1 / -1; }
body.tpl-amplo .util:has(> .util_post) .post-topo{
  order:3; grid-column:1 / -1;
  grid-template-columns:minmax(0,900px) minmax(300px,420px) !important;
  justify-content:space-between; column-gap:56px !important;
}
/* linha do conteúdo: corpo à esquerda, lateral à direita */
body.tpl-amplo .util:has(> .util_post) .infos > section{ order:4; grid-column:1; max-width:none; }
body.tpl-amplo .util:has(> .util_post) > .coluna-direita{
  order:5; grid-column:2; display:block !important;
  width:100% !important; margin:0 !important; float:none !important;
}
/* o que vem depois do corpo (tags etc.) segue na coluna do texto */
body.tpl-amplo .util:has(> .util_post) .infos > *:not(.post-topo):not(section){ order:6; grid-column:1; }
body.tpl-amplo .util:has(> .util_post) > .clearfix,
body.tpl-amplo .util:has(> .util_post) > .util{ order:9; grid-column:1 / -1; }

@media(max-width:1200px){
  body.tpl-amplo .util:has(> .util_post){ display:block !important; }
  body.tpl-amplo .util:has(> .util_post) > .util_post,
  body.tpl-amplo .util:has(> .util_post) .util_post > article,
  body.tpl-amplo .util:has(> .util_post) .util_post > article > .infos{ display:block !important; }
  body.tpl-amplo .util:has(> .util_post) > .coluna-direita{ display:none !important; }
  body.tpl-amplo .post-topo{ display:block !important; }
}

/* A lateral tem 420px, mas os blocos DENTRO dela são fixos em 280px no tema
   (.cates, banners). Ficavam mais estreitos que a foto logo acima, desalinhados
   à direita. Aqui eles acompanham a coluna — mesma medida da imagem. */
body.tpl-amplo .util:has(> .util_post) > .coluna-direita > *,
body.tpl-amplo .util:has(> .util_post) > .coluna-direita .cates,
body.tpl-amplo .util:has(> .util_post) > .coluna-direita .banner-menor,
body.tpl-amplo .util:has(> .util_post) > .coluna-direita .banner-vertical,
body.tpl-amplo .util:has(> .util_post) > .coluna-direita .publicidade{
  width:100% !important; max-width:100% !important;
}