/*
 * AURORA RESPONSIVE PUBLIC V1
 * Área pública somente.
 */

html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

iframe {
  width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

pre,
code {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.wrap {
  width: min(100%, 1200px);
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 24px);
}

.topbar,
.actions,
.navin,
.hero-grid,
.grid,
.row,
.card,
.module,
.money,
.foot {
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search {
  flex: 1 1 260px;
  min-width: 0;
}

.search input {
  width: 100%;
  min-width: 0;
}

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.navin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.navin a {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.card,
.module {
  max-width: 100%;
  overflow-wrap: anywhere;
}

table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

audio {
  width: 100%;
  max-width: 100%;
}

/* Tablets */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .topbar {
    align-items: stretch;
  }

  .search {
    order: 3;
    flex-basis: 100%;
    width: 100%;
  }

  .actions {
    margin-left: auto;
  }

  .money,
  .foot {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Celulares */
@media (max-width: 760px) {
  html,
  body {
    min-width: 0 !important;
  }

  .wrap {
    width: 100%;
    padding-inline: 12px;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .brand {
    align-self: flex-start;
    max-width: 100%;
  }

  .search {
    width: 100%;
    order: initial;
  }

  .actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .aurora-language {
    max-width: 100%;
  }

  .aurora-language-select {
    max-width: 100%;
  }

  /*
   * Menu quebra em linhas.
   * Não exige arrastar horizontalmente.
   */
  .navin {
    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    overflow: visible !important;
  }

  .navin a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    width: 100%;
    padding: 7px 5px;
    text-align: center;
    line-height: 1.15;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .hero-grid,
  .grid,
  .money,
  .foot {
    grid-template-columns: 1fr !important;
  }

  section,
  main,
  footer,
  header {
    max-width: 100%;
  }

  .card,
  .module {
    width: 100%;
    max-width: 100%;
  }

  .dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin-inline: auto;
  }
}

/* Celulares pequenos */
@media (max-width: 480px) {
  .navin {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .actions {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .aurora-language {
    grid-column: 1 / -1;
  }

  .actions .btn {
    width: 100%;
  }

  h1 {
    font-size: clamp(1.7rem, 8vw, 2.4rem);
  }

  h2 {
    font-size: clamp(1.3rem, 6vw, 1.9rem);
  }
}

/* Telas muito estreitas */
@media (max-width: 360px) {
  .navin {
    grid-template-columns: 1fr;
  }

  .actions {
    grid-template-columns: 1fr;
  }

  .aurora-language {
    grid-column: auto;
  }
}

/* AURORA RESPONSIVE PUBLIC V2 */
@media (max-width:760px) {

  body,
  main,
  header,
  footer,
  section,
  article,
  aside,
  nav,
  form {
    max-width:100% !important;
  }

  [style*="width:430px"],
  [style*="width: 430px"] {
    width:100% !important;
    max-width:100% !important;
  }

  .player,
  .playergrid,
  .stage,
  .playlist,
  .products,
  .modules,
  .monetize,
  .grid-main,
  .left {
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .track,
  .product,
  .qrow {
    min-width:0;
  }

  .track > *,
  .product > *,
  .qrow > * {
    min-width:0;
    overflow-wrap:anywhere;
  }

  .copy {
    max-width:100%;
    overflow-wrap:anywhere;
  }

  .modal,
  .dialog {
    max-width:100%;
  }

  canvas,
  iframe {
    display:block;
    width:100%;
    max-width:100%;
  }
}

@media (max-width:480px) {

  .orb {
    max-width:72vw;
    max-height:72vw;
  }

  .stageart {
    max-width:100%;
  }

  .reels {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  .logos {
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }
}

/* AURORA RESPONSIVE PUBLIC V3 */
@media (max-width:760px) {

  /* Nenhum descendente público pode forçar a viewport */
  body * {
    min-width:0;
  }

  /* Textos longos e conteúdos externos */
  p,
  a,
  span,
  strong,
  small,
  label,
  .newsitem,
  .member,
  .track,
  .product {
    overflow-wrap:anywhere;
  }

  /*
   * Componentes originalmente com nowrap
   * podem quebrar linha no mobile.
   */
  .nav a,
  .copy,
  .qrow,
  .track,
  .product {
    white-space:normal !important;
  }

  /* Layouts flexíveis */
  .qrow {
    grid-template-columns:
      minmax(0,1fr) auto auto;
  }

  .product {
    grid-template-columns:
      48px minmax(0,1fr) auto;
  }

  .track {
    grid-template-columns:
      36px minmax(0,1fr) auto;
  }

  /* Toast nunca ultrapassa o celular */
  .toast {
    left:12px;
    right:12px;
    width:auto;
    max-width:calc(100vw - 24px);
  }

  /* Controles e players */
  .timeline,
  .playrow,
  .ptop {
    max-width:100%;
    flex-wrap:wrap;
  }
}

@media (max-width:480px) {

  .qrow {
    grid-template-columns:
      minmax(0,1fr) auto;
  }

  .qrow > :last-child {
    grid-column:1 / -1;
  }

  .product {
    grid-template-columns:
      48px minmax(0,1fr);
  }

  .product > :last-child {
    grid-column:2;
  }

  .track {
    grid-template-columns:
      32px minmax(0,1fr);
  }

  .track > :last-child {
    grid-column:2;
  }

  .playrow {
    gap:14px;
  }
}

/* Aurora: largura fluida e colunas proporcionais. */
html body .wrap { width:100% !important; max-width:none !important; padding-inline:clamp(12px,1.25vw,24px); }
html body .grid-main > * { min-width:0 !important; }
html body .ad .btn { display:inline-flex; position:relative; align-items:center; justify-content:center; white-space:normal; height:auto; max-width:100%; }
html body .monetize { align-items:start; }
html body .aurora-advertiser-card { max-height:none !important; }
@media(min-width:1101px){
 html body .grid-main { display:grid !important; grid-template-columns:minmax(220px,1fr) minmax(0,3fr) minmax(260px,1.1fr) !important; gap:16px !important; align-items:start !important; }
 html body .grid-main > .aurora-ads-left { position:sticky !important; top:110px !important; margin-top:0 !important; }
 html body .grid-main > .aurora-right-rail { position:sticky; top:110px; }
 html body .grid-main > section { width:100% !important; }
 html body .playergrid, html body .aurora-video-layout { grid-template-columns:minmax(0,1fr) minmax(240px,.6fr) !important; align-items:start; }
}
@media(max-width:1100px){
 html body .grid-main { display:flex !important; flex-direction:column !important; gap:16px !important; }
 html body .grid-main > section { order:0 !important; width:100% !important; }
 html body .grid-main > .aurora-right-rail { order:1 !important; width:100% !important; position:static !important; }
 html body .grid-main > .aurora-ads-left { order:2 !important; width:100% !important; position:static !important; }
}
@media(max-width:700px){
 html body .playergrid, html body .aurora-video-layout, html body .monetize { grid-template-columns:minmax(0,1fr) !important; }
}

/* Aurora layout V2: prevalece sobre os estilos carregados pela pagina. */
html body main.main.wrap .grid-main { width:100% !important; max-width:none !important; margin:16px 0 0 !important; }
html body main.main.wrap .grid-main > .aurora-ads-left,
html body main.main.wrap .grid-main > .aurora-right-rail { position:static !important; top:auto !important; margin-top:0 !important; transform:none !important; }
html body .player .playlist { max-height:440px !important; min-height:0 !important; overflow-y:auto !important; align-self:start; }
html body .player .playlist #tracks { max-height:none !important; }
html body #aurora-sidebar-ad a.btn { display:inline-flex !important; align-items:center; justify-content:center; position:relative !important; inset:auto !important; height:auto !important; min-height:44px; max-width:100% !important; white-space:normal !important; line-height:1.4; margin-top:8px; z-index:1; }
html body #aurora-sidebar-ad { height:auto !important; overflow:visible; }
@media(max-width:700px){html body .player .playlist { max-height:320px !important; }}