/* =========================================================
   Horazu — Faixa "Últimas notícias" da página inicial (logo abaixo do menu)
   Usa as variáveis do styles.css (--surface, --line, --blue... já trocam com o tema
   claro/escuro). Tudo aqui usa o prefixo hn-.
   Cores das categorias: Evento = azul claro · Matéria = verde · Mídia = cinza (as mesmas
   da página de notícias).
   ========================================================= */

:root{
  --hn-evento:#7CC4F8;   --hn-evento-txt:#0B2E4D;
  --hn-materia:#2A8A5F;  --hn-materia-txt:#FFFFFF;
  --hn-midia:#A9B2C1;    --hn-midia-txt:#1B2433;
}
:root[data-tema="escuro"]{--hn-materia:#34A573}
:root{--esq-a:#EEF2FA;--esq-b:#DCE4F3}
:root[data-tema="escuro"]{--esq-a:rgba(255,255,255,.07);--esq-b:rgba(255,255,255,.15)}

/* A faixa mora dentro do hero (o fundo em degradê continua sem emenda). Com ela, o hero
   precisa de menos espaço em cima; sem ela (API fora do ar, nenhuma notícia) ele volta ao
   padrão, porque o JS tira a classe .tem-faixa. A faixa só existe depois que o JS carregou. */
.hn{display:none}
.carregada .hn:not([hidden]){display:block}
.carregada .destaque.tem-faixa{padding-top:96px}
.hn{position:relative;margin-bottom:40px}

.hn__topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}
.hn__rotulo{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin:0;
}
.hn__todas{
  font-size:.88rem;font-weight:600;color:var(--ink-2);white-space:nowrap;
  transition:color .2s;
}
.hn__todas:hover{color:var(--blue)}

.hn__lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.hn__lista--1{grid-template-columns:minmax(0,520px)}
.hn__lista--2{grid-template-columns:repeat(2,minmax(0,1fr))}

.hn__card{
  display:flex;align-items:center;gap:14px;height:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px;box-shadow:var(--shadow);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.hn__card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* Capa: a imagem aparece INTEIRA (contain) sobre uma cópia borrada dela mesma, então
   fotos em pé, deitadas ou capas de vídeo nunca ficam esticadas nem cortadas. */
.hn__capa{
  position:relative;flex:0 0 116px;height:88px;border-radius:12px;overflow:hidden;
  background:var(--bg-soft);
}
.hn__capa--sem-imagem{background:var(--grad)}
.hn__fundo,.hn__img{position:absolute;inset:0;width:100%;height:100%}
.hn__fundo{object-fit:cover;filter:blur(14px) saturate(1.15);transform:scale(1.25);opacity:.9}
.hn__img{object-fit:contain}
.hn__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:rgba(8,16,32,.62);border:1.5px solid rgba(255,255,255,.85);
}
.hn__play svg{width:15px;height:15px;fill:#fff;margin-left:2px}

.hn__texto{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.hn__selo{
  display:inline-block;padding:2px 10px;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.02em;line-height:1.6;
}
.hn__selo--evento{background:var(--hn-evento);color:var(--hn-evento-txt)}
.hn__selo--materia{background:var(--hn-materia);color:var(--hn-materia-txt)}
.hn__selo--midia{background:var(--hn-midia);color:var(--hn-midia-txt)}
.hn__titulo{
  font-size:.95rem;font-weight:700;line-height:1.3;letter-spacing:-.01em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hn__data{font-size:.76rem;color:var(--muted)}

/* Esqueleto: tem o formato de um cartão (capa + 3 linhas) e brilha enquanto a API responde,
   então a página não "pula" quando as notícias chegam. */
.hn__item--esqueleto{
  display:flex;align-items:center;gap:14px;height:108px;padding:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.hn__esq-capa,.hn__esq-linhas i{
  display:block;border-radius:12px;
  background:linear-gradient(100deg,var(--esq-a) 30%,var(--esq-b) 50%,var(--esq-a) 70%);
  background-size:300% 100%;animation:hn-brilho 1.4s ease-in-out infinite;
}
.hn__esq-capa{flex:0 0 116px;height:88px}
.hn__esq-linhas{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.hn__esq-linhas i{height:12px;border-radius:6px}
.hn__esq-linhas i:nth-child(1){width:34%;height:16px;border-radius:999px}
.hn__esq-linhas i:nth-child(2){width:92%}
.hn__esq-linhas i:nth-child(3){width:58%}
@keyframes hn-brilho{from{background-position:100% 0}to{background-position:0 0}}

/* Tablet e celular: os cartões viram uma fileira que se desliza com o dedo. */
@media (max-width:900px){
  .hn__lista,.hn__lista--1,.hn__lista--2{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;scrollbar-width:none;
  }
  .hn__lista::-webkit-scrollbar{display:none}
  .hn__item{flex:0 0 min(84vw,340px);scroll-snap-align:start}
  .carregada .destaque.tem-faixa{padding-top:88px}
  .hn{margin-bottom:28px}
}

@media (max-width:520px){
  .hn__todas-extra{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hn__card,.hn__card:hover{transition:none;transform:none}
  .hn__esq-capa,.hn__esq-linhas i{animation:none}
}