/* ============================================================
   Orquestra Portal — estilos complementares (portal-extra.css)
   Carrega sempre DEPOIS do portal.css (dependência declarada no enqueue).
   Aqui moram: logo do cabeçalho e banners com imagem de fundo.
   ============================================================ */

/* ---------- Logo do cabeçalho ---------- */

/* imagem do logo: nunca estica, nunca passa da altura do cabeçalho */
.brand-logo{
  display:block;
  width:auto;
  height:auto;
  object-fit:contain;
  flex:0 0 auto;
}

/* formato horizontal (~360×80px): altura máxima 44px */
.brand-logo--horizontal{max-height:44px;max-width:220px}

/* formato vertical (~160×160px): altura máxima 64px */
.brand-logo--vertical{max-height:64px;max-width:120px}

/* com logo, o link da marca continua alinhado como o brand original */
.brand--tem-logo{display:flex;align-items:center;gap:10px;min-width:0}

/* telas pequenas: logo encolhe junto com o resto do cabeçalho */
@media (max-width:760px){
  .brand-logo--horizontal{max-height:36px;max-width:170px}
  .brand-logo--vertical{max-height:48px;max-width:90px}
}

/* ---------- Banners de artigo com imagem de fundo ---------- */

/* a classe sb-tem-bg entra quando o banner traz a chave "img" no meta op_banners */
.smart-banner.sb-tem-bg{
  position:relative;
  background-size:cover;
  background-position:center;
}

/* véu escuro por cima da imagem: garante contraste do texto branco */
.smart-banner.sb-tem-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(9,12,22,.55), rgba(9,12,22,.72));
  border-radius:inherit;
  z-index:0;
}

/* o conteúdo do banner fica acima do véu */
.smart-banner.sb-tem-bg .sb-body{position:relative;z-index:1}

/* ---------- Galeria de vídeos e grade do Instagram ---------- */

/* card com dados de vídeo é clicável (a fachada vira player no clique) */
.yt-card[data-modo]{cursor:pointer}

/* player montado pelo portal.js ocupa o card inteiro */
.yt-card iframe,.yt-card video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}

/* legenda curta embaixo do título, dentro do figcaption */
.yt-card .yt-legenda{display:block;margin-top:4px;font-weight:400;font-size:12px;color:rgba(255,255,255,.75)}

/* Instagram: o portal.css já deixa .ig-sq com position:relative e posiciona
   .ig-sq img preenchendo o quadrado — aqui só reforçamos o object-fit e
   garantimos o iconezinho acima da foto */
.ig-sq img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-sq svg{z-index:1}

/* ---------- Rodapé dos cards sem data ---------- */

/* a data visível saiu dos cards (decisão 03/08 — publicação em massa entregava automação);
   o portal.css usa space-between (data à esquerda, share à direita) e, sozinho, o share
   cairia pra esquerda — aqui ele volta pra direita, como era antes */
.nc-foot{justify-content:flex-end}

/* Busca sem resultado: o reset global zera margem de <p>, então o texto de apoio
   colava na grade de sugestões. 22px de respiro embaixo (um pouco além do gap de
   18px da grade) e 4px em cima pra afastar da linha do título "Busca: ...". */
.busca-sem-resultado{margin:4px 0 22px;font-size:15px;color:var(--ink-2)}

/* ===== Carrossel do herói (03/08/2026) =====
   Cada .hero-slide reproduz a grade bicolor do herói original; os slides ficam
   empilhados (absolute) e só o ativo participa do fluxo. Os títulos usam a
   classe .hero-titulo (o 1º slide é h1, os demais h2 — um h1 por página). */
.hero{display:block}
.hero-carrossel{position:relative}
.hero-slide{display:grid;grid-template-columns:1fr;min-height:340px}
@media(min-width:900px){.hero-slide{grid-template-columns:1fr 1fr;min-height:440px}}
.hero-carrossel .hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.hero-carrossel .hero-slide.is-ativo{position:relative;opacity:1;pointer-events:auto}
.hero-copy .hero-titulo{font-size:clamp(26px,4.2vw,44px);color:#fff;max-width:560px;margin:0}
.hero-copy .hero-titulo a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.hero-dots{position:absolute;left:24px;bottom:14px;z-index:5;display:flex;gap:8px}
@media(min-width:900px){.hero-dots{left:calc((100vw - 1180px)/2 + 28px)}}
@media(max-width:1235px) and (min-width:900px){.hero-dots{left:40px}}
.hero-dots button{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.45);cursor:pointer;transition:background .2s}
.hero-dots button.is-ativo{background:#fff}

/* ===== Banner de conversão mais fino no desktop (03/08/2026) =====
   Texto (título + apoio) à esquerda, botão à direita no espaço vazio — a caixa
   deixa de empilhar tudo e fica baixa. O banner vertical da lateral (.sb-vert)
   continua empilhado, que é o formato dele. No celular, empilha como antes. */
@media(min-width:760px){
  .smart-banner:not(.sb-vert){padding:24px 28px 22px}
  .smart-banner:not(.sb-vert) .sb-body{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:32px;row-gap:6px;align-items:center;
    /* o corpo herdava max-width:440px do desenho empilhado antigo — o grid ficava
       espremido num canto e o resto do banner virava vazio; aqui ele ocupa tudo */
    max-width:none;
  }
  .smart-banner:not(.sb-vert) .sb-body p{max-width:640px}
  /* tipografia do formato fino (calibrada com o Mendes em 03/08, 3ª rodada):
     título com presença (19-24px, bem maior que o apoio) e LARGURA TRAVADA em
     560px — título longo quebra em 2 linhas no mesmo ponto onde o texto de
     apoio quebra, hierarquia clara sem estourar a caixa */
  /* 4ª rodada (03/08): "dobrar o título" — pedido do Mendes após a 1.0.27 quase não mudar */
  .smart-banner:not(.sb-vert) .sb-title{font-size:clamp(32px,4vw,48px);line-height:1.12;max-width:560px}
  .smart-banner:not(.sb-vert) .sb-body p{line-height:1.45;font-size:13.5px}
  .smart-banner:not(.sb-vert) .sb-body .sb-title{margin:0}
  .smart-banner:not(.sb-vert) .sb-body p{margin:0}
  .smart-banner:not(.sb-vert) .sb-body .sb-btn{
    grid-column:2;grid-row:1/span 2;justify-self:end;align-self:center;
    margin-top:0;white-space:nowrap;
  }
}