/* MAIS TUNER 24.88 — correções de design no celular (cardápio mobile, itens 6 a 10)
   6. uma grade só de espaçamentos (16/24) e cantos de raio único
   7. áreas de toque de 44 px
   8. nomes e slogans longos em até duas linhas, com reticências
   9. tema claro de verdade no Podcasts e no RadioGuide
  10. área segura (notch e barra de gestos) no cabeçalho e nas telas cheias
   Sem o seletor has. Coisas só do app ficam em html.mt-app (app-*.css). */

:root{
  --m-gutter:16px;      /* margem lateral de toda tela no celular */
  --m-gap:24px;         /* espaço entre seções */
  --m-radius:16px;      /* canto dos cartões */
  --m-radius-sm:12px;   /* canto de miniaturas e campos */
  --m-touch:44px;       /* menor área de toque */
}

/* ---------------------------------------------------------------- 6. grade única */
@media (max-width:760px){
  .podcasts-shell{width:auto!important;margin-inline:var(--m-gutter)!important}
  .podcasts-main .podcasts-topbar{padding-inline:var(--m-gutter)!important}
  .podcasts-section,.podcasts-feature{margin-top:var(--m-gap)!important}
  .podcast-card,.podcasts-feature,.podcasts-notice,.rg-station-banner,.rg-home-card,.pl-card .pl-cover,.pl-resume,.pl-feature,.pl-mood,.mt-acc-dash>section{border-radius:var(--m-radius)!important}
  .podcast-cover-wrap,.podcast-cover,.pl-art,.mini-art{border-radius:var(--m-radius-sm)!important}
  .rg-station-banner{margin-inline:var(--m-gutter)!important;padding:18px var(--m-gutter)!important}
  .pl-scroll .pl-index,.pl-scroll .pl-detail{padding-inline:var(--m-gutter)!important}
  .pl-shelf{margin-top:var(--m-gap)!important}
}

/* ---------------------------------------------------------------- 7. toque de 44 px */
@media (pointer:coarse),(max-width:760px){
  /* cabeçalho: o desenho continua com 38–40 px (não cabe 5 botões de 44 num celular de 360 px),
     mas a área que recebe o toque cresce para 44 px por um ::before invisível */
  .top-actions .circle-btn,.top-actions .language-trigger{position:relative}
  .top-actions .circle-btn::before,.top-actions .language-trigger::before{content:'';position:absolute;inset:-3px;border-radius:inherit}
  .hero #communityReactions .community-login{position:relative}
  .hero #communityReactions .community-login::before{content:'';position:absolute;inset:-5px 0}
  .podcasts-filter,.central-sources-toggle{min-height:var(--m-touch)!important}
  .pl-like,.pl-more,.pl-icon,.pl-round{min-width:var(--m-touch)!important;min-height:var(--m-touch)!important}
  .mini-icon-btn,.mini-skip,.mini-live{min-width:var(--m-touch)!important;min-height:var(--m-touch)!important}
  .rg-back,.rg-close,.podcast-detail-close,.podcast-native-skip{min-width:var(--m-touch)!important;min-height:var(--m-touch)!important}
  .dk-q-arrow,.dk-q-nav{min-width:var(--m-touch)!important;min-height:var(--m-touch)!important}
}

/* ---------------------------------------------------------------- 8. textos longos */
.mini-station,.mini-track{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-q-n,.mtr-cube .brand-tile-name,.brand-tile-affiliate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@media (max-width:760px){
  #lcdStation,.lcd-station,.podcast-card h3,.podcast-card-title,.rg-prog-title,.pl-card strong,.pl-row-copy strong{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}
  #lcdSub,.lcd-sub,.podcast-card p,.podcasts-feature p{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}

/* ---------------------------------------------------------------- 9. tema claro */
html[data-site-theme="light"] .podcasts-hero p{color:#41546c!important}
html[data-site-theme="light"] .podcasts-hero h1,html[data-site-theme="light"] .podcasts-hero h2{color:#071a2f!important}
html[data-site-theme="light"] .podcasts-notice{background:rgba(15,157,116,.1)!important;color:#23405e!important}
html[data-site-theme="light"] .podcasts-notice b,html[data-site-theme="light"] .podcasts-notice strong{color:#071a2f!important}
html[data-site-theme="light"] .podcasts-search,html[data-site-theme="light"] .podcasts-main .podcasts-search{background:#fff!important;border:1px solid rgba(13,38,64,.16)!important}
html[data-site-theme="light"] .podcasts-search input{color:#071a2f!important}
html[data-site-theme="light"] .podcasts-search input::placeholder{color:#6a7f99!important}
html[data-site-theme="light"] .podcasts-search svg{fill:#4b6382!important}
html[data-site-theme="light"] .podcasts-filter:not(.active){background:#e6eef8!important;color:#163352!important}
html[data-site-theme="light"] .podcast-card p,html[data-site-theme="light"] .podcast-card-description{color:#41546c!important}
html[data-site-theme="light"] .podcast-card h3,html[data-site-theme="light"] .podcast-card-title{color:#071a2f!important}
/* RadioGuide: a faixa da rádio usa o logo branco — no tema claro ela ganha fundo escuro da marca */
html[data-site-theme="light"] .rg-station-banner{background:linear-gradient(145deg,#18345d 0%,#0d1b31 100%)!important;color:#fff!important}
html[data-site-theme="light"] .rg-station-banner *{color:#fff}
html[data-site-theme="light"] .rg-prog-desc,html[data-site-theme="light"] .rg-prog-date{color:#41546c!important}

/* ---------------------------------------------------------------- 10. área segura */
@media (max-width:760px){
  .topbar{padding-top:env(safe-area-inset-top)}
  .podcasts-topbar,.hosts-topbar,.radiovision-topbar,.dist-topbar{padding-top:calc(8px + env(safe-area-inset-top))!important}
  .podcasts-shell,.rg-body,.hosts-shell{padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
  .podcast-detail-overlay .podcast-detail-close{top:calc(12px + env(safe-area-inset-top))!important}
  .topbar-inner,.podcasts-topbar,.rg-header{padding-left:max(var(--m-gutter),env(safe-area-inset-left))!important;padding-right:max(var(--m-gutter),env(safe-area-inset-right))!important}
}
/* RadioGuide no tema claro: a seta de voltar era branca sobre o botão branco */
html[data-site-theme="light"] .rg-back svg,html[data-site-theme="light"] .rg-close svg{fill:#071a2f!important}
/* "Ouvir ao vivo" não quebra em três linhas ao lado do botão do programa */
.rg-prog-actions .rg-play{white-space:nowrap;flex:0 0 auto}
.rg-prog-actions{flex-wrap:wrap;row-gap:10px}

/* ---------------------------------------------------------------- marcas */
/* capa da Sintonia: fundo da marca (o mesmo dos blocos), nos dois temas.
   Ganha de central-2026.css (".hero.has-station .hero-panel[data-cover-ready=false] .art") pela especificidade. */
html body .hero.has-station .hero-panel .art.is-brand-wordmark,
html body .hero .hero-panel .art.is-brand-wordmark{background:var(--brand-surface,linear-gradient(145deg,#18345d 0%,#0d1b31 100%))!important}
html body .hero .art.is-brand-wordmark img{width:100%;height:100%;object-fit:contain}
@media (max-width:760px){
  /* o botão de tocar fica dentro do cartão (regra da 24.7x), mas pequeno e no canto: não tampa o logo */
  html body .hero.has-station .hero-visual .hero-play,html body .hero .hero-visual .hero-play{width:36px!important;height:36px!important;right:5px!important;bottom:5px!important;border-width:2px!important}
  html body .hero .hero-visual .hero-play svg{width:16px!important;height:16px!important}
  html body .hero.has-station .hero-panel .art.is-brand-wordmark{padding:14% 16% 34%!important}
}