/* =====================================================================
   HOME DE PORTAL — blocos novos da home do Amplo (pg/templates/_blocos/portal.php).
   Também vale no Noturno e no Movimento, que usam a mesma home.

   Só cores por variável do tema (--cor-texto-1/2, --cor-primaria): o Noturno
   redefine essas variáveis e os blocos escurecem sozinhos. Tudo dentro de
   .home-portal, que só existe nesta home.
   ===================================================================== */

.home-portal{ --hp-borda:rgba(127,127,127,.22); --hp-raio:var(--radius, 10px); }
/* o tema centraliza o texto no celular; nos blocos novos ele fica alinhado à esquerda */
.home-portal .util > div[class^="hp-"]{ text-align:left; }
.home-portal .hp-tit{ display:block; font-family:var(--fonte-padrao); color:var(--cor-texto-1); font-weight:700; line-height:1.25; }
.home-portal .hp-data{ display:block; font-family:var(--fonte-padrao); color:var(--cor-texto-2); font-size:calc(12px * var(--esc-texto, 1)); font-weight:600; margin-top:8px; }
.home-portal .hp-res{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin-top:10px; font-size:calc(15px * var(--esc-texto, 1)); line-height:1.45; }
.home-portal .hp-chip{
  display:inline-block; font-family:var(--fonte-padrao); font-size:calc(11.5px * var(--esc-texto, 1)); font-weight:700; line-height:1;
  padding:6px 12px; border-radius:var(--radius-2, 6px); background:var(--cor-primaria); color:var(--cor-texto-1);
}
.home-portal a.hp-lead, .home-portal a.hp-card, .home-portal a.hp-linha{ text-decoration:none; color:inherit; }

/* Imagem com zoom suave e recorte fixo */
.home-portal .hp-img{ display:block; position:relative; overflow:hidden; border-radius:var(--hp-raio); background:rgba(127,127,127,.12); }
.home-portal .hp-img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.22,1,.36,1), filter .35s; }
.home-portal a:hover .hp-img img{ transform:scale(1.04); }
.home-portal a:hover .hp-tit{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }

/* --------------------------------------------------------------- CARD */
.home-portal .hp-card{ display:flex; flex-direction:column; min-width:0; }
.home-portal .hp-card .hp-img{ aspect-ratio:16/10; }
.home-portal .hp-card .hp-chip{ position:absolute; left:10px; top:10px; z-index:2; }
.home-portal .hp-card .hp-tit{ margin-top:12px; font-size:calc(17px * var(--esc-titulo, 1)); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }

/* ---------------------------------------------- MANCHETE (título sobre a foto) */
.home-portal .hp-lead{ display:block; position:relative; height:100%; min-height:360px; border-radius:var(--hp-raio); overflow:hidden; }
.home-portal .hp-lead .hp-img{ position:absolute; inset:0; border-radius:0; }
.home-portal .hp-lead .hp-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.86) 100%); }
.home-portal .hp-lead-txt{ position:absolute; left:0; right:0; bottom:0; padding:28px 30px; z-index:2; }
.home-portal .hp-lead .hp-tit{ color:#fff; margin-top:12px; font-size:calc(32px * var(--esc-titulo, 1)); line-height:1.15; font-weight:800; }
.home-portal .hp-lead .hp-res{ color:rgba(255,255,255,.88); }
.home-portal .hp-lead .hp-data{ color:rgba(255,255,255,.75); }

/* ------------------------------------------------------------- CAPA */
.home-portal .hp-capa{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:26px; padding-top:34px;
}
.home-portal .hp-capa-lead .hp-lead{ min-height:520px; }
.home-portal .hp-capa-lado{ display:grid; grid-template-columns:1fr 1fr; gap:22px 20px; align-content:start; }
.home-portal .hp-capa-lado .hp-tit{ font-size:calc(16px * var(--esc-titulo, 1)); }
.home-portal .hp-capa-curta .hp-capa-lead .hp-lead{ min-height:420px; }

/* ------------------------------------------------------------- LISTA */
.home-portal .hp-lista{ display:flex; flex-direction:column; }
.home-portal .hp-linha{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--hp-borda); }
.home-portal .hp-lista .hp-linha:first-child{ padding-top:0; }
.home-portal .hp-lista .hp-linha:last-child{ border-bottom:0; }
.home-portal .hp-linha .hp-img{ flex:0 0 116px; width:116px; aspect-ratio:4/3; }
.home-portal .hp-linha-txt{ min-width:0; }
.home-portal .hp-linha .hp-tit{ font-size:calc(15.5px * var(--esc-titulo, 1)); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.home-portal .hp-linha .hp-data{ margin-top:6px; }

/* ------------------------------------------------------- MAIS LIDAS */
.home-portal .hp-maislidas-lista{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; counter-reset:hp; }
.home-portal .hp-maislidas .hp-linha{ flex-direction:column; gap:10px; border:0; padding:0; position:relative; }
.home-portal .hp-maislidas .hp-linha .hp-img{ flex:none; width:100%; aspect-ratio:16/10; }
.home-portal .hp-num{
  position:absolute; left:10px; top:10px; z-index:2; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-family:var(--fonte-padrao); font-weight:800; font-size:16px;
  background:var(--cor-primaria); color:var(--cor-texto-1); box-shadow:0 2px 10px rgba(0,0,0,.25);
}

/* -------------------------------------- FAIXA: manchete + lista ao lado */
.home-portal .hp-faixa-corpo{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:30px; align-items:stretch; }
.home-portal .hp-faixa-lead .hp-lead{ min-height:430px; }
.home-portal .hp-faixa .hp-lista{ justify-content:space-between; }

/* --------------------------------------- DUPLA: duas categorias lado a lado */
.home-portal .hp-dupla{ display:grid; grid-template-columns:1fr 1fr; gap:46px; }
.home-portal .hp-dupla-col{ min-width:0; }
.home-portal .hp-dupla-col > .hp-card{ margin-bottom:18px; }
.home-portal .hp-dupla-col > .hp-card .hp-tit{ font-size:calc(21px * var(--esc-titulo, 1)); }

/* ------------------------------------------------------ POR COLUNA */
.home-portal .hp-coluna{
  display:grid; grid-template-columns:minmax(260px,1fr) minmax(0,3fr); gap:26px; margin-bottom:26px;
  padding:26px; border:1px solid var(--hp-borda); border-radius:calc(var(--hp-raio) + 4px);
}
.home-portal .hp-coluna-cartao{
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px; min-height:260px; padding:24px;
  border-radius:var(--hp-raio); text-decoration:none; color:#fff; position:relative; overflow:hidden;
  background-color:var(--cor-primaria);
  background-image:linear-gradient(160deg, rgba(255,255,255,.10), rgba(0,0,0,.38));
  background-size:cover; background-position:center;
}
.home-portal .hp-coluna-cartao.tem-capa::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.78)); }
.home-portal .hp-coluna-cartao > *{ position:relative; }
.home-portal .hp-coluna-rot{ font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; opacity:.85; }
.home-portal .hp-coluna-nome{ font-family:var(--fonte-padrao); font-size:calc(26px * var(--esc-titulo, 1)); line-height:1.1; font-weight:800; }
.home-portal .hp-coluna-desc{ font-size:14px; line-height:1.4; opacity:.9; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.home-portal .hp-coluna-autor{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.home-portal .hp-coluna-autor img{ width:30px; height:30px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.7); }
.home-portal .hp-coluna-ver{ font-size:13px; font-weight:800; margin-top:4px; }
.home-portal .hp-coluna-posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }

/* ----------------------------------------------------- MAIS NOTÍCIAS */
.home-portal .hp-mais-grade{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px 22px; }
.home-portal .hp-mais-btn{
  display:table; margin:34px auto 10px; padding:13px 30px; border-radius:999px; text-decoration:none;
  font-family:var(--fonte-padrao); font-weight:800; font-size:14px; background:transparent;
  color:var(--cor-texto-1); border:2px solid var(--cor-texto-1); transition:background .2s,color .2s;
}
/* Contorno na cor do texto: a primária pode ser igual ao texto (fundo e letra
   da mesma cor). No hover inverte para preto/branco, legível em qualquer tema. */
.home-portal .hp-mais-btn:hover{ background:#141214; border-color:#141214; color:#fff; }
body.tpl-noturno .home-portal .hp-mais-btn:hover{ background:#f4f2ef; border-color:#f4f2ef; color:#141214; }

/* ------------------------------------------------------- RESPONSIVO */
@media(max-width:1280px){
  .home-portal .hp-maislidas-lista{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-portal .hp-maislidas-lista > :nth-child(n+4){ display:none; }
  .home-portal .hp-mais-grade{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-portal .hp-lead .hp-tit{ font-size:calc(27px * var(--esc-titulo, 1)); }
}
@media(max-width:1024px){
  .home-portal .hp-capa,
  .home-portal .hp-faixa-corpo,
  .home-portal .hp-coluna{ grid-template-columns:1fr; }
  .home-portal .hp-capa-lead .hp-lead{ min-height:420px; }
  .home-portal .hp-coluna-cartao{ min-height:190px; }
}
@media(max-width:900px){
  .home-portal .hp-dupla{ grid-template-columns:1fr; gap:10px; }
  .home-portal .hp-coluna-posts,
  .home-portal .hp-mais-grade{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-portal .hp-coluna-posts > :nth-child(3){ display:none; }
  .home-portal .hp-coluna{ padding:18px; }
}
@media(max-width:640px){
  .home-portal .hp-capa{ padding-top:20px; gap:20px; }
  .home-portal .hp-capa-lado{ grid-template-columns:1fr; gap:0; }
  .home-portal .hp-capa-lado .hp-card,
  .home-portal .hp-coluna-posts .hp-card,
  .home-portal .hp-mais-grade .hp-card{ flex-direction:row; gap:14px; padding:14px 0; border-bottom:1px solid var(--hp-borda); }
  .home-portal .hp-capa-lado .hp-card .hp-img,
  .home-portal .hp-coluna-posts .hp-card .hp-img,
  .home-portal .hp-mais-grade .hp-card .hp-img{ flex:0 0 116px; width:116px; aspect-ratio:4/3; }
  .home-portal .hp-capa-lado .hp-card .hp-chip,
  .home-portal .hp-coluna-posts .hp-card .hp-chip,
  .home-portal .hp-mais-grade .hp-card .hp-chip{ display:none; }
  .home-portal .hp-capa-lado .hp-card .hp-tit,
  .home-portal .hp-coluna-posts .hp-card .hp-tit,
  .home-portal .hp-mais-grade .hp-card .hp-tit{ margin-top:0; font-size:calc(15.5px * var(--esc-titulo, 1)); }
  .home-portal .hp-capa-lado .hp-card,
  .home-portal .hp-coluna-posts .hp-card,
  .home-portal .hp-mais-grade .hp-card{ display:grid; grid-template-columns:116px 1fr; grid-template-rows:auto 1fr; align-items:start; column-gap:14px; }
  .home-portal .hp-capa-lado .hp-card .hp-data,
  .home-portal .hp-coluna-posts .hp-card .hp-data,
  .home-portal .hp-mais-grade .hp-card .hp-data{ grid-column:2; margin-top:4px; }
  .home-portal .hp-capa-lado .hp-card .hp-img,
  .home-portal .hp-coluna-posts .hp-card .hp-img,
  .home-portal .hp-mais-grade .hp-card .hp-img{ grid-row:1 / span 2; }
  .home-portal .hp-lead,
  .home-portal .hp-capa-lead .hp-lead,
  .home-portal .hp-faixa-lead .hp-lead{ min-height:340px; }
  .home-portal .hp-lead-txt{ padding:20px; }
  .home-portal .hp-lead .hp-tit{ font-size:calc(22px * var(--esc-titulo, 1)); }
  .home-portal .hp-maislidas-lista{ grid-template-columns:1fr; gap:0; }
  .home-portal .hp-maislidas-lista > :nth-child(n+4){ display:flex; }
  .home-portal .hp-maislidas .hp-linha{ flex-direction:row; gap:14px; padding:12px 0; border-bottom:1px solid var(--hp-borda); }
  .home-portal .hp-maislidas .hp-linha .hp-img{ flex:0 0 96px; width:96px; aspect-ratio:4/3; }
  .home-portal .hp-num{ position:static; flex:0 0 30px; width:30px; height:30px; font-size:14px; box-shadow:none; }
  .home-portal .hp-coluna-posts,
  .home-portal .hp-mais-grade{ grid-template-columns:1fr; }
  .home-portal .hp-coluna-posts > :nth-child(3){ display:grid; }
  .home-portal .hp-coluna-posts,
  .home-portal .hp-mais-grade{ gap:0; }
  .home-portal .hp-coluna-cartao{ min-height:150px; }
}

/* ---------------------------------------------------- PELE: MOVIMENTO
   Mesma linguagem do skin: foto em preto e branco que ganha cor no hover. */
body.tpl-movimento .home-portal .hp-img img{ filter:grayscale(1) contrast(1.06); }
body.tpl-movimento .home-portal a:hover .hp-img img{ filter:none; }
body.tpl-movimento .home-portal .hp-chip,
body.tpl-movimento .home-portal .hp-coluna-rot{ text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; }
body.tpl-movimento .home-portal .hp-coluna{ border-color:var(--mov-tinta, #0e0d0e); border-width:2px; border-radius:0; }

/* ----------------------------------------------------- PELE: NOTURNO */
body.tpl-noturno .home-portal{ --hp-borda:#2d2a2b; }
body.tpl-noturno .home-portal .hp-coluna{ background:#161314; }