/*
=========================================================
 AURORA 20A
 Arquitetura visual oficial
 Portal da Sabedoria
=========================================================

 REGRAS:
 - uma unica rolagem principal da pagina
 - preservar componentes funcionais existentes
 - sem movimentacao de DOM por JavaScript
 - sem dados ficticios
 - rede social como nucleo da experiencia
*/

:root{
  --aurora20-bg:#06141f;
  --aurora20-surface:#0b1f2d;
  --aurora20-surface-2:#102b3b;
  --aurora20-line:rgba(120,220,255,.18);
  --aurora20-text:#eefaff;
  --aurora20-muted:#9fb7c5;
  --aurora20-cyan:#39d9ff;
  --aurora20-green:#55dc8b;
  --aurora20-radius:16px;
  --aurora20-gap:16px;
  --aurora20-max:1600px;
}

/*
 A 20A ainda nao substitui os componentes funcionais.
 Esta primeira versao estabelece somente a fundacao
 segura para a nova composicao.
*/

html{
  scroll-behavior:smooth;
}

body{
  min-width:0;
}

body,
main{
  overflow-x:hidden;
}

img,
video{
  max-width:100%;
}

video{
  height:auto;
}

/* Impedir que a futura grade dependa de largura fixa. */
.wrap{
  width:min(var(--aurora20-max), calc(100% - 24px));
  margin-left:auto;
  margin-right:auto;
}

/*
 Player real preservado.
 Nao alterar IDs:
 audio, cur, seek, dur, shuffle, prev, play,
 next, repeat e tracks.
*/

#audio{
  max-width:100%;
}

#tracks{
  max-width:100%;
}

/*
 Social real preservado.
 aurora-social.css e aurora-social.js continuam
 responsaveis pela funcionalidade.
*/

/*
 Estrutura responsiva-base da 20A.
 Os componentes serao posicionados somente depois
 da validacao desta camada.
*/

@media (max-width:1200px){
  .wrap{
    width:min(100% - 20px, var(--aurora20-max));
  }
}

@media (max-width:760px){
  .wrap{
    width:min(100% - 14px, var(--aurora20-max));
  }
}

/* =====================================================
   AURORA 20A.3B
   PRIMEIRA COMPOSICAO VISUAL REAL
   ===================================================== */

body{
  background:
    radial-gradient(circle at 15% 10%, rgba(57,217,255,.08), transparent 28%),
    radial-gradient(circle at 85% 12%, rgba(85,220,139,.05), transparent 30%),
    var(--aurora20-bg);
  color:var(--aurora20-text);
}

/* Barra superior e navegação */
.top,
.nav{
  position:relative;
  z-index:30;
}

.nav{
  backdrop-filter:blur(14px);
}

/* Grade principal */
.grid-main{
  width:min(var(--aurora20-max), calc(100% - 24px));
  margin:18px auto 0;
  display:grid;
  grid-template-columns:minmax(220px, .82fr) minmax(0, 2.15fr) minmax(250px, .98fr);
  gap:var(--aurora20-gap);
  align-items:start;
}

/* Colunas */
.left,
.center,
.right{
  min-width:0;
}

.left,
.right{
  display:flex;
  flex-direction:column;
  gap:var(--aurora20-gap);
}

.center{
  display:flex;
  flex-direction:column;
  gap:var(--aurora20-gap);
}

/* Cartões-base */
.card,
.module,
.modules > *,
.left > *,
.right > *,
.center > section,
.center > .card{
  border:1px solid var(--aurora20-line);
  border-radius:var(--aurora20-radius);
}

/* Evitar scroll interno nas colunas */
.left,
.center,
.right,
.modules,
.playlist,
#tracks{
  max-height:none !important;
}

/* Uma única rolagem da página */
.left,
.center,
.right,
.modules{
  overflow:visible !important;
}

/* Hero principal */
.hero{
  min-height:360px;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(57,217,255,.18);
  background:
    linear-gradient(145deg, rgba(6,20,31,.72), rgba(10,31,45,.84));
  box-shadow:0 18px 55px rgba(0,0,0,.22);
}

.hero h1{
  max-width:820px;
  font-size:clamp(2rem,4vw,4.2rem);
  line-height:.98;
  letter-spacing:-.03em;
}

.hero p{
  max-width:780px;
  color:var(--aurora20-muted);
}

/* Social / feed como foco */
.aurora-social,
.social,
.feed,
#feed,
.community,
.comunidade{
  width:100%;
  min-width:0;
}

/* Player de música */
.player,
.playlist{
  width:100%;
}

#tracks{
  overflow:visible !important;
}

/* Vídeos */
video{
  width:100%;
  border-radius:14px;
  background:#000;
}

/* Reels e mídia em descoberta */
.reels,
.reel,
[class*="reel"]{
  min-width:0;
}

/* Produtos / anúncios */
.products,
[class*="product"],
[class*="market"]{
  min-width:0;
}

a[href*="awin1.com"]{
  max-width:100%;
  overflow-wrap:anywhere;
}

/* LoveConnect */
.loveconnect-section{
  min-width:0;
  overflow:hidden;
}

/* Notícias e Bíblia */
#news,
.aurora-biblia-indicador,
[class*="news"],
[class*="biblia"]{
  min-width:0;
}

/* Footer */
footer{
  margin-top:28px;
}

/* Desktop intermediário */
@media (max-width:1280px){
  .grid-main{
    grid-template-columns:minmax(190px,.75fr) minmax(0,2fr) minmax(220px,.9fr);
    gap:14px;
  }
}

/* Tablet */
@media (max-width:1020px){
  .grid-main{
    grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);
  }

  .right{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
}

/* Mobile */
@media (max-width:760px){
  .grid-main{
    width:min(100% - 14px, var(--aurora20-max));
    grid-template-columns:1fr;
    gap:12px;
  }

  .left,
  .center,
  .right{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .right{
    grid-column:auto;
  }

  .hero{
    min-height:300px;
    border-radius:16px;
  }

  .hero h1{
    font-size:clamp(2rem,10vw,3rem);
  }
}


/* =========================================================
   AURORA 20A.4B
   ARQUITETURA DE PAGINA CONTINUA
   ========================================================= */

/*
   PRINCIPIO:
   - uma unica rolagem da pagina
   - conteudo central largo
   - laterais somente onde possuem funcao
   - modulos inferiores aproveitam largura total
   - nenhum modulo cria "coluna infinita" vazia
*/

.grid-main{
  width:min(1320px, calc(100% - 32px)) !important;
  max-width:1320px !important;
  margin:16px auto 0 !important;

  display:grid !important;
  grid-template-columns:
    minmax(210px, 250px)
    minmax(0, 1fr)
    minmax(230px, 280px) !important;

  gap:16px !important;
  align-items:start !important;
}

/* Todos os filhos participam normalmente da grade */
.grid-main > *{
  min-width:0;
}

/* Não permitir que colunas laterais imponham altura artificial */
.grid-main > .aurora-ads-left,
.grid-main > .aurora-right-rail{
  align-self:start !important;
  height:auto !important;
  min-height:0 !important;
}

/* Area central deve respirar */
.grid-main > section:not(.aurora-ads-left):not(.aurora-right-rail){
  min-width:0;
}

/*
   MODULOS DE CONTEUDO PROFUNDO
   Depois do nucleo social, os grandes recursos deixam
   de ficar presos a uma coluna estreita.
*/

/* Galeria da comunidade */
.grid-main > section:has(h2:nth-child(1)){
  min-width:0;
}

/*
   Elementos conhecidos da parte inferior.
   :has() permite organizar pelo conteudo existente,
   sem duplicar HTML e sem movimentar DOM por JavaScript.
*/

.grid-main > section:has(h2:first-child){
  box-sizing:border-box;
}

/* GALERIA */
.grid-main > section:has(h2:first-child){
  overflow:hidden;
}

/* Blocos identificados pelo comentario/estrutura atual */
.grid-main > section:nth-last-child(-n+4){
  min-width:0;
}

/*
   A partir dos grandes blocos finais, usar toda a largura
   disponivel da grade quando o proprio elemento ja vier
   como modulo independente.
*/
#noticias{
  grid-column:2 / 4 !important;
  width:100% !important;
}

/* Produtos ganha coluna direita real, sem esticar altura */
#produtos{
  align-self:start !important;
  height:auto !important;
  min-height:0 !important;
}

/* Financas nao deve reservar area vertical quando vazia */
#financas:empty{
  display:none !important;
}

/* Cards nao recebem alturas artificiais */
.grid-main .card,
.grid-main .module{
  height:auto;
}

/* Players usam a largura disponivel */
.grid-main video{
  max-width:100%;
}

/* Playlist: rolagem interna somente quando realmente necessaria */
#tracks{
  max-height:520px;
}

/*
   RODAPE E MODULOS DEPOIS DA GRADE:
   largura coerente com a pagina, sem parecer um site
   estreito perdido no centro do monitor.
*/
main + footer,
footer#sobre{
  width:100% !important;
}

/* Desktop amplo */
@media (min-width:1500px){
  .grid-main{
    width:min(1400px, calc(100% - 48px)) !important;
    max-width:1400px !important;
    grid-template-columns:
      minmax(220px, 260px)
      minmax(0, 1fr)
      minmax(240px, 290px) !important;
    gap:18px !important;
  }
}

/* Notebook */
@media (max-width:1180px){
  .grid-main{
    width:min(100% - 24px, 1100px) !important;
    grid-template-columns:
      minmax(190px, 220px)
      minmax(0, 1fr) !important;
  }

  .grid-main > .aurora-right-rail{
    grid-column:1 / -1 !important;
    width:100% !important;
  }

  #noticias{
    grid-column:1 / -1 !important;
  }
}

/* Tablet / celular */
@media (max-width:760px){
  .grid-main{
    width:calc(100% - 16px) !important;
    display:block !important;
    margin:8px auto 0 !important;
  }

  .grid-main > *{
    width:100% !important;
    max-width:none !important;
    margin-bottom:12px !important;
  }

  #tracks{
    max-height:none;
  }
}

/* MARCADOR DE VERSAO */
html{
  --aurora-layout-version:"20A.4B";
}