/*
 * Pão com Palavra v300 — v256
 * Fernando Pina: cards universais para app/PWA/mobile/tablet.
 * Escopo cirúrgico: somente #lancamentos. Rádio e demais módulos não são tocados.
 */

/* O catálogo já está lançado: remove o selo redundante sem deixar espaço fantasma. */
html body #lancamentos .pao-tile-status{
  display:none !important;
}

/* Estrutura estável: todas as cópias e CTAs fecham na mesma régua. */
html body #lancamentos .pao-music-tile{
  display:grid !important;
  grid-template-rows:auto 1fr !important;
  align-content:stretch !important;
}
html body #lancamentos .pao-tile-copy{
  display:grid !important;
  grid-template-rows:auto auto 1fr !important;
  align-content:start !important;
  height:100% !important;
}
html body #lancamentos .pao-music-card-actions{
  align-self:end !important;
  margin-top:8px !important;
}

/*
 * App/PWA/mobile/tablet: um card legível por vez, sem depender de iOS/Android.
 * O ajuste usa viewport + pointer, não user-agent, então também cobre tablets.
 */
@media (max-width:760px), (max-width:1180px) and (pointer:coarse){
  html body #lancamentos{
    overflow:hidden !important;
  }

  html body #lancamentos .pao-music-carousel{
    width:100% !important;
    max-width:100% !important;
    padding-inline:clamp(30px,7vw,48px) !important;
    box-sizing:border-box !important;
  }

  html body #lancamentos .pao-music-viewport{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:0 !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-x:contain !important;
    border-radius:24px !important;
  }

  html body #lancamentos .pao-music-rail{
    display:flex !important;
    width:max-content !important;
    min-width:max-content !important;
    gap:14px !important;
    padding:4px 0 12px !important;
    margin:0 !important;
    transform:none !important;
    transition:none !important;
  }

  html body #lancamentos .pao-music-tile{
    flex:0 0 clamp(260px,78vw,340px) !important;
    width:clamp(260px,78vw,340px) !important;
    min-width:clamp(260px,78vw,340px) !important;
    max-width:clamp(260px,78vw,340px) !important;
    scroll-snap-align:center !important;
    scroll-snap-stop:always !important;
    border-radius:24px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  /* Preserva a arte inteira: nada de object-fit:cover cortando rosto, texto ou capa. */
  html body #lancamentos .pao-tile-cover{
    width:100% !important;
    aspect-ratio:4 / 5 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#07121f,#030912) !important;
  }
  html body #lancamentos .pao-tile-video,
  html body #lancamentos .pao-tile-cover img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
    background:#030912 !important;
  }

  html body #lancamentos .pao-tile-copy{
    padding:15px 14px 16px !important;
    gap:8px !important;
    min-height:242px !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }
  html body #lancamentos .pao-tile-copy h4{
    margin:0 !important;
    min-height:2.35em !important;
    font-size:clamp(1.22rem,5vw,1.48rem) !important;
    line-height:1.06 !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-wrap:balance !important;
  }
  html body #lancamentos .pao-tile-copy p{
    margin:0 !important;
    min-height:2.55em !important;
    font-size:clamp(.82rem,3.4vw,.94rem) !important;
    line-height:1.34 !important;
    text-wrap:balance !important;
  }

  html body #lancamentos .pao-music-card-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
  }
  html body #lancamentos .pao-music-card-actions .pao-music-btn,
  html body #lancamentos .pao-music-card-actions .pao-music-preview-btn{
    width:100% !important;
    min-height:48px !important;
    padding:11px 14px !important;
    font-size:clamp(.82rem,3.5vw,.94rem) !important;
    line-height:1.15 !important;
    white-space:normal !important;
    box-sizing:border-box !important;
  }

  html body #lancamentos .pao-music-arrow{
    top:40% !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    z-index:20 !important;
  }
  html body #lancamentos .pao-music-arrow-prev{left:0 !important;}
  html body #lancamentos .pao-music-arrow-next{right:0 !important;}
}

/* Telefones estreitos: mantém margem, centralização e toque confortável. */
@media (max-width:390px){
  html body #lancamentos .pao-music-carousel{
    padding-inline:28px !important;
  }
  html body #lancamentos .pao-music-tile{
    flex-basis:clamp(252px,82vw,304px) !important;
    width:clamp(252px,82vw,304px) !important;
    min-width:clamp(252px,82vw,304px) !important;
    max-width:clamp(252px,82vw,304px) !important;
  }
  html body #lancamentos .pao-tile-copy{
    min-height:232px !important;
    padding:14px 12px 15px !important;
  }
}

/* Tablets: card não estoura nem vira miniatura; permanece centralizado e proporcional. */
@media (min-width:761px) and (max-width:1180px) and (pointer:coarse){
  html body #lancamentos .pao-music-tile{
    flex-basis:340px !important;
    width:340px !important;
    min-width:340px !important;
    max-width:340px !important;
  }
  html body #lancamentos .pao-tile-copy{
    min-height:248px !important;
  }
}