/* ============================================================
   RADIO METRO MIX — MOBILE COMPLETO V2
   Carregado por último nas páginas públicas.
   Objetivo: layout verdadeiramente mobile, sem alterar desktop.
   ============================================================ */

html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,video,iframe,svg{max-width:100%}
input,select,textarea,button{font:inherit}

@media (max-width: 900px){
  html,body{width:100%;min-width:0!important}
  body.home-v2{overflow-x:hidden!important}
  .wrap,.container,.v2-content,.v2-content--inner{width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;padding-left:16px!important;padding-right:16px!important}

  /* HEADER MOBILE */
  .topbar{
    position:relative!important;top:auto!important;z-index:80!important;
    height:72px!important;min-height:72px!important;padding:0 12px!important;
    display:grid!important;grid-template-columns:48px 1fr 48px!important;
    align-items:center!important;justify-content:stretch!important;gap:8px!important;
    background:#fff!important;border-bottom:1px solid #e3e8f2!important;
  }
  .topbar .brand{position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;min-width:0!important}
  .topbar .brand img{width:auto!important;height:auto!important;max-width:180px!important;max-height:56px!important;margin:0 auto!important;object-fit:contain!important}
  .menu-btn,.search-btn{
    position:static!important;width:44px!important;height:44px!important;min-width:44px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    padding:0!important;margin:0!important;border:1px solid #dbe3ef!important;border-radius:12px!important;
    background:#fff!important;color:#123A97!important;box-shadow:0 4px 12px rgba(18,58,151,.08)!important;
    font-size:0!important;line-height:1!important;
  }
  .menu-btn{grid-column:1!important}
  .search-btn{grid-column:3!important;justify-self:end!important}
  .menu-btn b,.menu-btn>span:not(.menu-icon){display:none!important}
  .menu-btn .menu-icon{display:block!important;width:22px!important;height:16px!important;position:relative!important;border-top:2px solid #F97316!important;border-bottom:2px solid #F97316!important}
  .menu-btn .menu-icon:after{content:"";position:absolute;left:0;right:0;top:5px;border-top:2px solid #F97316}
  .search-btn:before{content:"⌕";font-size:27px!important;font-weight:800!important;color:#123A97!important;line-height:1!important}

  /* Esconde menu desktop. O menu lateral é a navegação mobile. */
  .nav-main{display:none!important}
  .search-box{padding:10px 12px!important;background:#f6f8fc!important}
  .search-box.open{display:block!important}
  .search-box form{width:100%!important;max-width:none!important;margin:0!important}
  .search-box input{width:100%!important;max-width:none!important;height:46px!important;padding:0 14px!important;font-size:16px!important}

  /* TICKER */
  .ticker{height:38px!important;min-height:38px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;overflow:hidden!important}
  .ticker .ticker-live-trigger,.ticker strong{grid-column:1!important;margin:0 0 0 8px!important;padding:7px 10px!important;white-space:nowrap!important;font-size:11px!important;border-radius:8px!important}
  .ticker span{grid-column:2!important;min-width:0!important;padding-left:10px!important;font-size:11px!important;overflow:hidden!important}

  /* HERO/BANNER */
  .hero,.metro-hero{padding:12px 0!important;border-bottom-width:4px!important}
  .metro-hero .wrap,.metro-hero-grid{padding-left:12px!important;padding-right:12px!important;display:block!important}
  .metro-hero-slider,.metro-hero-panel{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;border-radius:14px!important;overflow:hidden!important;aspect-ratio:16/9!important;min-height:0!important;height:auto!important}
  .metro-hero-slide{width:100%!important;height:100%!important;min-height:0!important}
  .metro-hero-slide-image{height:100%!important}
  .metro-hero-banner-img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;transform:none!important}
  .metro-hero-dots{left:12px!important;right:auto!important;bottom:8px!important}

  /* CONTEÚDO HOME */
  main.container{padding-top:24px!important;padding-bottom:24px!important}
  .portal-section{margin-bottom:34px!important}
  .section-title,.portal-news-head,.celebrity-section__head{
    display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:12px!important;
    width:100%!important;padding:0!important;background:transparent!important;border-radius:0!important;
  }
  .section-title h2,.portal-news-head h2,.celebrity-section__head h2{font-size:28px!important;line-height:1.08!important;margin:4px 0!important}
  .section-title p,.portal-news-head p,.celebrity-section__head p{font-size:14px!important;line-height:1.5!important;margin:0!important}
  .section-title>a,.portal-news-head>a,.celebrity-section__head>a{align-self:flex-start!important;min-width:0!important;width:auto!important;padding:9px 14px!important;border-radius:10px!important;font-size:12px!important}

  .celebrity-layout,.celebrity-layout--final,.latest-news-layout,.curiosity-v2-layout,.metro-tv-layout,
  .featured-grid,.fofocas-grid,.cards,.video-area,.video-light,.home-v2-services{
    display:grid!important;grid-template-columns:1fr!important;gap:16px!important;width:100%!important;min-width:0!important
  }
  .celebrity-feature,.celebrity-feature--final,.latest-news-feature,.curiosity-v2-feature{width:100%!important;min-width:0!important;border-radius:16px!important;overflow:hidden!important}
  .celebrity-feature img,.latest-news-feature img,.curiosity-v2-feature img{width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:16/10!important;object-fit:cover!important}
  .celebrity-feature__overlay,.latest-news-feature__overlay,.curiosity-v2-feature>div{padding:18px!important}
  .celebrity-feature h3,.latest-news-feature h3,.curiosity-v2-feature h3{font-size:24px!important;line-height:1.08!important}

  .celebrity-secondary,.latest-news-secondary,.curiosity-v2-secondary,.metro-tv-related-grid{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%!important}
  .celebrity-mini,.latest-news-card,.curiosity-v2-card,.mini-card,.list-card{
    display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;gap:12px!important;align-items:start!important;
    width:100%!important;min-width:0!important;margin:0!important;padding:0 0 14px!important
  }
  .celebrity-mini img,.latest-news-card img,.curiosity-v2-card img,.mini-card img,.list-card img{width:112px!important;height:86px!important;min-width:0!important;object-fit:cover!important;border-radius:10px!important}
  .celebrity-mini h3,.latest-news-card h3,.curiosity-v2-card h3,.mini-card h3,.list-card h3{font-size:16px!important;line-height:1.18!important;margin:4px 0!important;overflow-wrap:anywhere!important}
  .celebrity-mini p,.latest-news-card p,.curiosity-v2-card p,.mini-card p,.list-card p{font-size:12px!important;line-height:1.35!important;margin:4px 0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .celebrity-aside,.celebrity-aside--final{display:block!important;width:100%!important}
  .celebrity-ad,.celebrity-ad--final,.ad-clean,.ad-box{width:100%!important;min-height:160px!important}

  .metro-tv-main,.metro-tv-related{width:100%!important;min-width:0!important}
  .metro-tv-player,.video-box{width:100%!important;height:auto!important;aspect-ratio:16/9!important;min-height:0!important;overflow:hidden!important;border-radius:14px!important}
  .metro-tv-player iframe,.metro-tv-player video,.video-box iframe{width:100%!important;height:100%!important}
  .metro-tv-related-card{grid-template-columns:108px minmax(0,1fr)!important;gap:10px!important}
  .metro-tv-thumb{width:108px!important;height:70px!important}

  .home-v2-services{padding-top:12px!important;padding-bottom:28px!important}
  .home-v2-services>a{width:100%!important;min-width:0!important;padding:16px!important}

  /* PÁGINAS INTERNAS / CATEGORIAS / NOTÍCIAS */
  .v2-page-heading{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important;margin-bottom:20px!important}
  .v2-page-heading h1{font-size:34px!important;line-height:1.05!important;overflow-wrap:anywhere!important}
  .v2-search{width:100%!important;min-width:0!important}
  .v2-news-grid{display:grid!important;grid-template-columns:1fr!important;gap:16px!important}
  .v2-news-card{width:100%!important;min-width:0!important}
  .v2-news-card img{width:100%!important;height:auto!important;aspect-ratio:16/10!important;object-fit:cover!important}
  .article-page,.v2-article-layout,.v2-article-grid{display:grid!important;grid-template-columns:1fr!important;gap:22px!important;width:100%!important;min-width:0!important}
  .article-main,.v2-article-main{width:100%!important;min-width:0!important}
  .article-main h1,.v2-article-head h1{font-size:34px!important;line-height:1.08!important;overflow-wrap:anywhere!important}
  .article-resume,.v2-article-lead{font-size:17px!important;line-height:1.5!important}
  .article-content,.v2-article-content{font-size:17px!important;line-height:1.65!important;overflow-wrap:anywhere!important}
  .article-img,.v2-article-image{width:100%!important;height:auto!important;max-height:none!important;border-radius:14px!important}
  .related,.v2-article-aside{width:100%!important;border-left:0!important;border-top:1px solid #e5e7eb!important;padding:20px 0 0!important}

  /* QUEM SOMOS / CONTATO / ENVIE SUA MÚSICA */
  .v2-about-hero,.v2-about-grid,.v2-about-details,.v2-contact-layout,.music-submit-layout{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;width:100%!important}
  .v2-about-hero,.music-submit-hero,.v2-contact-cta{padding:22px 18px!important;border-radius:20px!important}
  .music-submit-hero{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .music-submit-hero h1{font-size:40px!important;line-height:1!important}
  .music-submit-badge{width:100%!important;flex:0 0 auto!important}
  .v2-contact-grid{display:grid!important;grid-template-columns:1fr!important;gap:0!important}
  .v2-contact-info,.v2-contact-form-card,.music-submit-rules{padding:20px!important;border-radius:18px!important}
  .v2-contact-form-card input,.v2-contact-form-card select,.v2-contact-form-card textarea,
  .music-submit-form input,.music-submit-form select,.music-submit-form textarea{font-size:16px!important;max-width:100%!important}
  .v2-contact-submit,.v2-contact-cta-button{width:100%!important;min-width:0!important}

  /* FOOTER */
  .footer,.site-footer{margin-top:20px!important;padding:0!important}
  .footer-main{display:grid!important;grid-template-columns:1fr!important;gap:24px!important;width:100%!important;max-width:100%!important;padding:28px 18px!important}
  .footer-newsletter,.footer-contact,.footer-map{width:100%!important;min-width:0!important}
  .newsletter-form,.newsletter-form-compact{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .newsletter-form input,.newsletter-form button{width:100%!important;min-width:0!important}
  .footer-map nav{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px 14px!important}
  .footer-brand-bottom{padding:22px 18px 28px!important;text-align:center!important}
  .footer-brand-bottom img{max-width:190px!important;margin:0 auto 12px!important}

  /* MENU LATERAL MOBILE */
  .side-menu.side-menu-v3{width:min(92vw,380px)!important;max-width:min(92vw,380px)!important}
  .side-menu-v3 .side-menu-head{min-height:72px!important;padding:10px 12px!important}
  .side-menu-v3 .side-menu-brand img{width:148px!important;max-height:48px!important}
  .side-menu-v3 .side-menu-search{padding:10px 10px 7px!important}
  .side-menu-v3 .side-nav{padding:4px 9px 18px!important}
  .side-menu-v3 .side-link,.side-menu-v3 .side-toggle{min-height:42px!important;font-size:14px!important}

  /* PLAYER: sempre cabe na viewport mobile */
  .live-player-modal{max-width:100vw!important;overflow:hidden!important}
  .live-player-modal__dialog{width:min(94vw,390px)!important;max-width:94vw!important;right:3vw!important;left:auto!important;bottom:10px!important;top:auto!important;transform:none!important}
  .live-player-modal__toolbar{min-height:44px!important;height:44px!important;padding:0 10px 0 12px!important}
  .live-player-modal__toolbar>span{font-size:13px!important}
  .live-player-modal__minimize,.live-player-modal__close{width:34px!important;height:34px!important;min-width:34px!important}
  .home-v2 .rmmx-mascot-base{width:100%!important;max-width:100%!important;height:auto!important;min-height:460px!important;overflow:hidden!important}
  .home-v2 .rmmx-mascot-base__image{max-width:none!important}
  .rmmx-request-modal{padding:6px!important}
  .rmmx-request-modal__dialog{width:100%!important;max-width:100%!important;height:96dvh!important;max-height:96dvh!important;border-radius:14px!important}

  /* Evita qualquer elemento estourar horizontalmente */
  .home-v2 *,.v2-inner-page *{min-width:0}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  pre,code{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
}

@media (max-width: 640px){
  .wrap,.container,.v2-content,.v2-content--inner{padding-left:12px!important;padding-right:12px!important}
  .topbar{height:66px!important;min-height:66px!important;grid-template-columns:44px 1fr 44px!important;padding:0 10px!important}
  .topbar .brand img{max-width:152px!important;max-height:48px!important}
  .menu-btn,.search-btn{width:40px!important;height:40px!important;min-width:40px!important;border-radius:11px!important}
  .hero,.metro-hero{padding:9px 0!important}
  .metro-hero .wrap,.metro-hero-grid{padding-left:8px!important;padding-right:8px!important}
  .metro-hero-slider,.metro-hero-panel{border-radius:11px!important;aspect-ratio:16/10!important}
  main.container{padding-top:20px!important}
  .section-title h2,.portal-news-head h2,.celebrity-section__head h2{font-size:25px!important}
  .celebrity-feature h3,.latest-news-feature h3,.curiosity-v2-feature h3{font-size:21px!important}
  .article-main h1,.v2-article-head h1,.v2-page-heading h1{font-size:30px!important}
  .article-content,.v2-article-content{font-size:16px!important}
  .footer-map nav{grid-template-columns:1fr!important}
  .side-menu.side-menu-v3{width:94vw!important;max-width:94vw!important}
  .live-player-modal__dialog{width:96vw!important;max-width:96vw!important;right:2vw!important}
}

@media (max-width: 430px){
  .topbar .brand img{max-width:138px!important}
  .ticker span{font-size:10px!important}
  .celebrity-mini,.latest-news-card,.curiosity-v2-card,.mini-card,.list-card{grid-template-columns:96px minmax(0,1fr)!important;gap:10px!important}
  .celebrity-mini img,.latest-news-card img,.curiosity-v2-card img,.mini-card img,.list-card img{width:96px!important;height:76px!important}
  .celebrity-mini h3,.latest-news-card h3,.curiosity-v2-card h3,.mini-card h3,.list-card h3{font-size:15px!important}
  .music-submit-hero h1{font-size:34px!important}
  .live-player-modal__dialog{width:98vw!important;max-width:98vw!important;right:1vw!important;bottom:4px!important}
  .home-v2 .rmmx-mascot-base{min-height:440px!important}
}

/* ============================================================
   MOBILE COMPLETO V2.1 — CORREÇÃO DO HEADER / MENU MOBILE
   Garante que o menu desktop desapareça e os 3 controles do
   cabeçalho ocupem uma única linha em celulares/tablets.
   ============================================================ */
@media (max-width:900px){
  /* O home-v2.css e o inner-v2.css possuem regras !important
     mais específicas para a navegação. Sobrescrevemos aqui. */
  body.home-v2 .nav-main,
  body.v2-inner-page .nav-main,
  .home-v2 .nav-main,
  .v2-inner-page .nav-main{
    display:none!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    overflow:hidden!important;
  }

  /* Cabeçalho mobile em uma única linha:
     LOGO | BUSCA | MENU */
  body.home-v2 .topbar,
  body.v2-inner-page .topbar,
  .home-v2 .topbar,
  .v2-inner-page .topbar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 44px 44px!important;
    grid-template-rows:66px!important;
    gap:8px!important;
    align-items:center!important;
    width:100%!important;
    height:66px!important;
    min-height:66px!important;
    max-height:66px!important;
    padding:0 10px!important;
    margin:0!important;
    position:relative!important;
    top:auto!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  body.home-v2 .topbar .brand,
  body.v2-inner-page .topbar .brand,
  .home-v2 .topbar .brand,
  .v2-inner-page .topbar .brand{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    position:static!important;
    transform:none!important;
    margin:0!important;
    padding:0!important;
    min-width:0!important;
  }

  body.home-v2 .topbar .brand img,
  body.v2-inner-page .topbar .brand img,
  .home-v2 .topbar .brand img,
  .v2-inner-page .topbar .brand img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:150px!important;
    max-height:50px!important;
    margin:0!important;
    object-fit:contain!important;
  }

  body.home-v2 .topbar .search-btn,
  body.v2-inner-page .topbar .search-btn,
  .home-v2 .topbar .search-btn,
  .v2-inner-page .topbar .search-btn{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    position:static!important;
    transform:none!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    max-width:42px!important;
    max-height:42px!important;
    padding:0!important;
    margin:0!important;
    border-radius:12px!important;
    font-size:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }
  body.home-v2 .topbar .search-btn::after,
  body.v2-inner-page .topbar .search-btn::after,
  .home-v2 .topbar .search-btn::after,
  .v2-inner-page .topbar .search-btn::after{display:none!important;content:none!important}
  body.home-v2 .topbar .search-btn::before,
  body.v2-inner-page .topbar .search-btn::before,
  .home-v2 .topbar .search-btn::before,
  .v2-inner-page .topbar .search-btn::before{
    content:"⌕"!important;
    display:block!important;
    font-size:27px!important;
    line-height:1!important;
    font-weight:900!important;
    color:#123A97!important;
  }

  body.home-v2 .topbar .menu-btn,
  body.v2-inner-page .topbar .menu-btn,
  .home-v2 .topbar .menu-btn,
  .v2-inner-page .topbar .menu-btn{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    max-width:42px!important;
    max-height:42px!important;
    padding:0!important;
    margin:0!important;
    border-radius:12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    z-index:1!important;
  }
  body.home-v2 .topbar .menu-btn b,
  body.v2-inner-page .topbar .menu-btn b,
  .home-v2 .topbar .menu-btn b,
  .v2-inner-page .topbar .menu-btn b{display:none!important}

  body.home-v2 .topbar .menu-icon,
  body.v2-inner-page .topbar .menu-icon,
  .home-v2 .topbar .menu-icon,
  .v2-inner-page .topbar .menu-icon{
    display:block!important;
    width:22px!important;
    height:18px!important;
    position:relative!important;
    border:0!important;
  }
  body.home-v2 .topbar .menu-icon::before,
  body.home-v2 .topbar .menu-icon::after,
  body.v2-inner-page .topbar .menu-icon::before,
  body.v2-inner-page .topbar .menu-icon::after,
  .home-v2 .topbar .menu-icon::before,
  .home-v2 .topbar .menu-icon::after,
  .v2-inner-page .topbar .menu-icon::before,
  .v2-inner-page .topbar .menu-icon::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    width:22px!important;
    height:2px!important;
    background:#F97316!important;
    transform:none!important;
  }
  body.home-v2 .topbar .menu-icon::before,
  body.v2-inner-page .topbar .menu-icon::before,
  .home-v2 .topbar .menu-icon::before,
  .v2-inner-page .topbar .menu-icon::before{top:3px!important}
  body.home-v2 .topbar .menu-icon::after,
  body.v2-inner-page .topbar .menu-icon::after,
  .home-v2 .topbar .menu-icon::after,
  .v2-inner-page .topbar .menu-icon::after{bottom:3px!important}
  body.home-v2 .topbar .menu-btn .menu-icon,
  body.v2-inner-page .topbar .menu-btn .menu-icon,
  .home-v2 .topbar .menu-btn .menu-icon,
  .v2-inner-page .topbar .menu-btn .menu-icon{
    background:linear-gradient(#F97316,#F97316) center/22px 2px no-repeat!important;
  }

  /* Com o menu azul desktop removido, overlay e drawer começam
     logo abaixo do cabeçalho real. */
  .menu-overlay,
  .side-menu,
  .side-menu.side-menu-v3{
    top:66px!important;
    height:calc(100dvh - 66px)!important;
  }

  /* Ticker sem disputa de largura no celular. */
  .ticker{
    width:100%!important;
    grid-template-columns:auto minmax(0,1fr)!important;
  }
  .ticker strong,
  .ticker .ticker-live-trigger{
    grid-column:1!important;
    max-width:150px!important;
  }
  .ticker span{
    grid-column:2!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    overflow:hidden!important;
  }
}

@media (max-width:430px){
  body.home-v2 .topbar,
  body.v2-inner-page .topbar,
  .home-v2 .topbar,
  .v2-inner-page .topbar{
    grid-template-columns:minmax(0,1fr) 40px 40px!important;
    gap:7px!important;
    padding:0 9px!important;
  }
  body.home-v2 .topbar .brand img,
  body.v2-inner-page .topbar .brand img,
  .home-v2 .topbar .brand img,
  .v2-inner-page .topbar .brand img{max-width:145px!important;max-height:48px!important}
  body.home-v2 .topbar .menu-btn,
  body.home-v2 .topbar .search-btn,
  body.v2-inner-page .topbar .menu-btn,
  body.v2-inner-page .topbar .search-btn,
  .home-v2 .topbar .menu-btn,
  .home-v2 .topbar .search-btn,
  .v2-inner-page .topbar .menu-btn,
  .v2-inner-page .topbar .search-btn{
    width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;max-width:40px!important;max-height:40px!important
  }
}