/**
 * css/responsive.css — desktop aproveita espaço, mobile otimiza toque.
 */
/* Mobile (padrão): já coberto pelo base/player.css com clamp() fluido. */
/* Celular em pé: o auto-centering vertical do .player-orb (player.css)
   deixa o botão flutuando longe da identidade da estação em telas altas
   e estreitas — aqui ele vira espaçamento fixo e compacto, não mais
   centralizado no espaço vazio sobrando entre hero e dock. */
@media (max-width: 767px) and (orientation: portrait) {
  .player-orb {
    margin-top: clamp(28px, 6vh, 56px);
    margin-bottom: clamp(20px, 4vh, 36px);
  }
}
@media (max-width: 380px) {
  .dock__card {
    padding: 14px 16px;
  }
  #station-tagline {
    max-width: 260px;
  }
}
/* Tablets e acima: mais respiro, dock não gruda tanto na borda */
@media (min-width: 768px) {
  .topbar {
    padding: 28px 48px;
  }
  .dock {
    padding-bottom: 44px;
  }
  .dock__card {
    padding: 20px 26px;
  }
}
/* Desktop premium: layout aproveita a largura, hero ganha mais ar.
   OBS: sem .hero { gap } aqui de propósito — quem distribui o espaço
   vertical do hero agora é o margin:auto do .player-orb (player.css),
   e um gap fixo aqui voltava a "empurrar" o botão pra baixo, colando
   no dock. */
@media (min-width: 1200px) {
  #station-tagline {
    max-width: 380px;
    font-size: 16px;
  }
}
/* Landscape em telas pequenas (celular deitado): compacta verticalmente */
@media (max-height: 480px) and (orientation: landscape) {
  .app-shell {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .player-orb {
    width: 110px;
    height: 110px;
  }
  #station-name {
    font-size: 28px;
  }
  #station-tagline {
    display: none;
  }
  .dock {
    padding-bottom: 12px;
  }
}
/* Regras de TV foram movidas para css/tv.css (ativado via classe
   .tv-mode, não media query — ver nota nesse arquivo). */