/* ===========================================================
   IMAGAS / MUSICAS — Conteudo editavel abaixo do MP3 Player
   Alteracoes neste arquivo nao modificam o player nem o ASCII.
   Todas as dimensoes podem ser personalizadas aqui.
   =========================================================== */
body.page-musicas {
  /* FONTES — altere para qualquer fonte instalada ou importada */
  --music-font-family: "Courier New", monospace;
  --music-text-size: 14px;
  --music-heading-size: 25px;
  --music-label-size: 12px;
  --music-link-size: 13px;
  --music-line-height: 1.65;
  --music-letter-spacing: 0.02em;
  --music-text-color: var(--page-ui-color, #4b5d8a);
  --music-text-align: center;

  /* ESTRUTURA E TAMANHOS */
  --music-content-width: 760px;
  --music-content-x: 0px;
  --music-content-y: 0px;
  --music-section-spacing: 55px;
  --music-intro-y: 0px;
  --music-outro-y: 0px;

  /* CAPAS E GRADE — 2 = duas colunas; 1 = uma; 3 = tres */
  --music-cover-columns: 2;
  --music-cover-grid-width: 500px;
  --music-cover-gap-x: 20px;
  --music-cover-gap-y: 22px;
  --music-cover-border-radius: 0px;
  --music-cover-title-size: 14px;
  --music-cover-object-fit: cover;

  /* LISTA DE HYPERLINKS */
  --music-links-width: 500px;
  --music-links-gap: 12px;
}

/* O HTML original mantém o player em sua posicao atual.
   Este bloco aparece DEPOIS do <main> original. */
body.page-musicas .imagas-music-page-content {
  position: relative;
  z-index: 18;
  pointer-events: auto;
  box-sizing: border-box;
  width: min(var(--music-content-width), calc(100vw - 36px));
  margin: 0 auto 120px;
  padding: 0 12px 50px;
  color: var(--music-text-color);
  font: 400 var(--music-text-size)/var(--music-line-height) var(--music-font-family);
  letter-spacing: var(--music-letter-spacing);
  text-align: var(--music-text-align);
  overflow-wrap: anywhere;
  transform: translate(var(--music-content-x), var(--music-content-y));
}
body.page-musicas .imagas-music-page-content *,
body.page-musicas .imagas-music-page-content *::before,
body.page-musicas .imagas-music-page-content *::after { box-sizing: border-box; }
body.page-musicas .imagas-music-page-content p { margin: 0; }
body.page-musicas .imagas-music-page-content h1,
body.page-musicas .imagas-music-page-content h2 { font-family: var(--music-font-family); }
body.page-musicas .imagas-music-page-content h1 {
  font-size: var(--music-heading-size);
  line-height: 1.25;
  margin: 10px 0 20px;
}
body.page-musicas .imagas-music-page-content h2 {
  margin: 0 0 22px;
  font-size: var(--music-heading-size);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
}
body.page-musicas .imagas-music-kicker {
  font-size: var(--music-label-size);
  letter-spacing: .12em;
  opacity: .75;
}
body.page-musicas .imagas-music-intro,
body.page-musicas .imagas-music-outro,
body.page-musicas .imagas-music-group,
body.page-musicas .imagas-music-text-links { width: 100%; }
body.page-musicas .imagas-music-intro { position: relative; top: var(--music-intro-y); }
body.page-musicas .imagas-music-outro { position: relative; top: var(--music-outro-y); }
body.page-musicas .imagas-music-intro > p:last-child,
body.page-musicas .imagas-music-outro > p:last-child {
  max-width: 560px;
  margin: 0 auto;
}
body.page-musicas .imagas-music-page-content > * + * { margin-top: var(--music-section-spacing); }

/* Capas — quadradas sem distorcao; todas as imagens do pacote ja sao 800x800. */
body.page-musicas .imagas-music-cover-grid {
  display: grid;
  grid-template-columns: repeat(var(--music-cover-columns), minmax(0,1fr));
  gap: var(--music-cover-gap-y) var(--music-cover-gap-x);
  width: min(100%, var(--music-cover-grid-width));
  margin: 0 auto;
  justify-content: center;
  align-items: start;
}
body.page-musicas .imagas-music-cover-card {
  position: relative;
  left: var(--capa-x, 0px); /* Posicao X especifica de cada capa no HTML */
  top: var(--capa-y, 0px);  /* Posicao Y especifica de cada capa no HTML */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: 5px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
body.page-musicas .imagas-music-cover-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: var(--music-cover-object-fit);
  object-position: center;
  height: auto;
  border-radius: var(--music-cover-border-radius);
  image-rendering: auto;
  transition: opacity .17s ease;
}
body.page-musicas .imagas-music-cover-card:hover img { opacity: .77; }
body.page-musicas .imagas-music-cover-card:focus-visible,
body.page-musicas .imagas-music-text-link-list a:focus-visible {outline: 2px solid currentColor; outline-offset: 4px;}
body.page-musicas .imagas-music-cover-title {
  font-size: var(--music-cover-title-size);
  line-height: 1.3;
  font-weight: 700;
}
body.page-musicas .imagas-music-cover-service {
  font-size: var(--music-label-size);
  opacity: .72;
  line-height: 1.3;
}

/* Links em texto, tambem com coordenadas ajustaveis por link no HTML. */
body.page-musicas .imagas-music-text-link-list {
  width: min(100%, var(--music-links-width));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--music-links-gap);
}
body.page-musicas .imagas-music-text-link-list a {
  position: relative;
  left: var(--link-x, 0px);
  top: var(--link-y, 0px);
  display: inline-block;
  max-width: 100%;
  color: inherit;
  font-size: var(--music-link-size);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.page-musicas .imagas-music-text-link-list a:hover {opacity: .7;}

/* Permite rolar a pagina enquanto o canvas de ASCII permanece no fundo. */
html:has(body.page-musicas), body.page-musicas {
  overflow-x: hidden;
  overflow-y: auto;
}

/* ===========================================================
   MOBILE — independente do layout Desktop
   =========================================================== */
html[data-imagas-layout="mobile"] body.page-musicas {
  --music-content-width: 58vw; /* Mantenha ~58vw para ficar no corredor */
  --music-content-x: 0px;
  --music-content-y: 0px;
  --music-text-size: clamp(10px,2.8vw,13px);
  --music-heading-size: clamp(13px,3.4vw,19px);
  --music-label-size: clamp(9px,2.45vw,11px);
  --music-link-size: clamp(10px,2.7vw,12px);
  --music-cover-title-size: clamp(10px,2.75vw,12px);
  --music-cover-columns: 2; /* mude para 1 se desejar capas maiores */
  --music-cover-grid-width: 100%;
  --music-cover-gap-x: 9px;
  --music-cover-gap-y: 16px;
  --music-section-spacing: 37px;
  --music-links-gap: 10px;
}
html[data-imagas-layout="mobile"] body.page-musicas .imagas-music-page-content {
  width: min(var(--music-content-width), calc(100vw - 12px));
  margin-bottom: 100px;
  padding: 0 1px 32px;
}
html[data-imagas-layout="mobile"] body.page-musicas .imagas-music-page-content h2 {margin-bottom: 14px;}
html[data-imagas-layout="mobile"] body.page-musicas .imagas-music-page-content h1 {margin: 7px 0 12px;}

@media (prefers-reduced-motion: reduce) {
  body.page-musicas .imagas-music-cover-card img {transition: none;}
}

/* ===========================================================
   IMAGAS — CABEÇALHO DE MÚSICAS COMPACTO E CENTRALIZADO
   Cole no FINAL de musicas-conteudo.css.
   Use com o musicas.html atualizado deste pacote.

   A introdução não reserva altura extra. Os três textos permanecem
   visíveis, e as capas vêm logo depois, SEM sobreposição.
   =========================================================== */
body.page-musicas {
  /* CONTROLES EDITÁVEIS (DESKTOP) */
  --music-heading-gap: 7px;               /* espaço entre os 3 textos */
  --music-heading-to-covers-gap: 16px;    /* espaço antes de SETS */
  --music-heading-to-grid-gap: 12px;     /* espaço de SETS até as capas */
  --music-description-width: 560px;      /* largura máxima do parágrafo */
}

body.page-musicas .imagas-music-page-content > .imagas-music-heading {
  /* Sem moldura/área vazia de introdução */
  display: flex !important;
  flex-flow: column nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--music-heading-gap) !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
  text-align: center !important;
}

/* Remove margens anteriores que faziam título, frase e descrição colidirem. */
body.page-musicas .imagas-music-page-content > .imagas-music-heading > * {
  display: block;
  position: static !important;
  width: 100%;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
  transform: none !important;
  text-align: center !important;
}
body.page-musicas .imagas-music-page-content > .imagas-music-heading > h1 {
  font-size: var(--music-heading-size);
  line-height: 1.25;
}
body.page-musicas .imagas-music-page-content > .imagas-music-heading > .imagas-music-description {
  max-width: min(100%, var(--music-description-width));
  line-height: var(--music-line-height);
  overflow-wrap: break-word;
}

/* O espaço abaixo do cabeçalho é calculado pelo fluxo da página,
   não com top, translate ou margens negativas. */
body.page-musicas .imagas-music-page-content > .imagas-music-heading + .imagas-music-group {
  margin-top: var(--music-heading-to-covers-gap) !important;
}
body.page-musicas .imagas-music-page-content > .imagas-music-heading + .imagas-music-group > h2 {
  margin: 0 0 var(--music-heading-to-grid-gap) !important;
}

/* MOBILE: distâncias independentes, sem modificar Home ou Desktop. */
html[data-imagas-layout="mobile"] body.page-musicas {
  --music-heading-gap: 5px;
  --music-heading-to-covers-gap: 12px;
  --music-heading-to-grid-gap: 9px;
  --music-description-width: 100%;
}

/* Não reservar a altura da tela inteira abaixo do menu. */
body.page-musicas .subpage-main {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remover o antigo quadrado vazio ao redor da moldura. */
body.page-musicas .subpage-stage,
body.page-musicas .imagas-player-square {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

/* Manter o cabeçalho e as capas em fluxo normal: sem sobreposição. */
body.page-musicas .imagas-music-page-content {
    margin-top: var(--music-gap-after-player) !important;
}

/* Corrige também regras mais fortes do modo mobile. */
html[data-imagas-layout='mobile'] body.page-musicas.subpage .subpage-main {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
html[data-imagas-layout='mobile'] body.page-musicas.subpage .subpage-stage,
html[data-imagas-layout='mobile'] body.page-musicas.subpage .imagas-player-square {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}
/* =============================================================
   IMAGAS — GAP DE 15 PX SEM ALTERAR POSIÇÃO/TAMANHO DO PLAYER
   IMPORTANTE: remova PRIMEIRO o bloco anterior intitulado
   "IMAGAS — ESPAÇO REAL ENTRE O PLAYER E O CONTEÚDO".
   O novo ajuste NÃO modifica .subpage-main, .subpage-stage,
   .imagas-player-square, .imagas-mp ou --music-player-offset-y.
   ============================================================= */
body.page-musicas {
    --music-gap-after-player: 120px;
}

/* A distância é medida dinamicamente até a borda VISÍVEL da moldura. */
body.page-musicas .imagas-music-page-content,
.imagas-route-content .imagas-music-page-content {
    margin-top: var(--imagas-music-gap-computed, 0px) !important;
}
/* ===========================================================
   IMAGAS — GAP FIXO ENTRE A MOLDURA REAL E O TEXTO DA PÁGINA
   Não altera tamanho nem altura/posição do MP3 Player.
   O valor da margem é calculado pelo script no roteador.
   =========================================================== */
body.page-musicas {
    --music-gap-after-player: 15px;
}

/* Deixa o bloco do texto no fluxo normal e permite margem negativa
   quando a antiga área quadrada do player deixa um espaço enorme. */
body.page-musicas #imagas-musicas-conteudo,
.imagas-route-content #imagas-musicas-conteudo {
    margin-top: var(--imagas-music-gap-computed, 0px) !important;
}
/* IMAGAS / MOBILE — area do MP3 abaixo dos botoes.
   A medicao e aplicada com margin-top inline !important pelo roteador.
   O CSS abaixo fica como fallback sem alterar a escala/posicao do MP3. */
html[data-imagas-layout="mobile"] body.page-musicas .subpage-main {
    margin-top: var(--imagas-mobile-music-clearance, 0px) !important;
}