/* =====================================================================
   GALAXISRADIO V50 – SMARTPHONE UI
   Smartphone-only overrides. Desktop/tablet >= 768px remain unchanged.
   ===================================================================== */
@media (max-width: 767px){
  :root{
    --m-header:58px;
    --m-gap:12px;
    --m-radius:16px;
    --m-navy:#0b2a66;
    --m-blue:#1188ee;
    --m-red:#ff405b;
    --m-cream:#fff8ef;
  }

  *{box-sizing:border-box}
  html{overflow-x:hidden;scroll-behavior:smooth}
  body{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    overflow-x:hidden!important;
    padding-bottom:calc(74px + env(safe-area-inset-bottom))!important;
    background:#fff8ef!important;
    -webkit-text-size-adjust:100%;
  }
  body.v20-framed::before,
  body.v20-framed::after,
  body.homepage-v25::before,
  body.homepage-v25::after{display:none!important}

  /* ---------- Header ---------- */
  .site-header{
    width:100%!important;
    height:var(--m-header)!important;
    min-height:var(--m-header)!important;
    margin:0!important;
    padding:0 10px 0 12px!important;
    position:sticky!important;
    top:0!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    background:rgba(255,255,255,.98)!important;
    border-bottom:1px solid rgba(11,42,102,.08)!important;
    box-shadow:0 4px 18px rgba(10,42,95,.08)!important;
    z-index:500!important;
  }
  .site-header .brand{
    position:static!important;
    width:auto!important;
    height:auto!important;
    margin:0 auto 0 0!important;
    display:flex!important;
    align-items:center!important;
    opacity:1!important;
  }
  .site-header .brand img{
    display:block!important;
    width:min(210px,56vw)!important;
    max-height:43px!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .site-header .nav-toggle{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    padding:0!important;
    border:1px solid #dbe8f6!important;
    border-radius:13px!important;
    background:#f6fbff!important;
    color:var(--m-navy)!important;
    font-size:23px!important;
    line-height:1!important;
    cursor:pointer!important;
  }
  .site-header .nav{
    display:none!important;
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    top:calc(var(--m-header) + 7px)!important;
    width:auto!important;
    height:auto!important;
    max-height:calc(100dvh - var(--m-header) - 22px)!important;
    overflow:auto!important;
    padding:10px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    background:rgba(255,255,255,.99)!important;
    border:1px solid #e0eaf5!important;
    border-radius:18px!important;
    box-shadow:0 18px 45px rgba(6,35,80,.18)!important;
    z-index:600!important;
  }
  .site-header .nav.open{display:grid!important}
  .site-header .nav a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:45px!important;
    height:auto!important;
    padding:10px 12px!important;
    border-radius:12px!important;
    background:#f7fbff!important;
    color:var(--m-navy)!important;
    font-size:13px!important;
    line-height:1.15!important;
    font-weight:850!important;
    text-decoration:none!important;
    white-space:normal!important;
  }
  .site-header .nav a.active{
    color:#fff!important;
    background:linear-gradient(135deg,#ff405b,#ff7e43)!important;
  }
  .site-header .nav a.active::after{display:none!important}
  .site-header .search-button,
  .site-header .live-button{display:none!important}

  /* ---------- Compact mobile hero ---------- */
  .hero,
  .hero.subpage-home-hero{
    width:100%!important;
    height:218px!important;
    min-height:218px!important;
    max-height:218px!important;
    aspect-ratio:auto!important;
    margin:0!important;
    display:block!important;
    position:relative!important;
    overflow:hidden!important;
    border-radius:0!important;
    background-image:url("assets/v19-hero-clean.png")!important;
    background-repeat:no-repeat!important;
    background-size:auto 100%!important;
    background-position:58% center!important;
    box-shadow:none!important;
  }
  .hero::after,
  .hero.subpage-home-hero::after{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    display:block!important;
    z-index:1!important;
    background:linear-gradient(90deg,rgba(255,250,244,.995) 0%,rgba(255,250,244,.97) 47%,rgba(255,250,244,.72) 65%,rgba(255,250,244,.10) 100%)!important;
    pointer-events:none!important;
  }
  .hero-master-art,
  .hero .hero-master-art,
  .hero.subpage-home-hero .hero-master-art,
  .hero-photo,
  .hero .hero-photo,
  .hero.subpage-home-hero .hero-photo,
  .hero-desktop-copy-v35,
  .hero-desktop-copy-v44{display:none!important}
  .hero-copy,
  .hero .hero-copy,
  .hero.subpage-home-hero .hero-copy{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    z-index:3!important;
    width:70%!important;
    height:100%!important;
    min-height:0!important;
    padding:20px 8px 15px 17px!important;
    background:transparent!important;
  }
  .hero-copy .kicker{
    margin:0 0 5px!important;
    color:#ff405b!important;
    font-size:9px!important;
    line-height:1.15!important;
    letter-spacing:1.3px!important;
    font-weight:950!important;
  }
  .hero-wordmark{
    margin:0!important;
    color:#0a2a65!important;
    font-size:34px!important;
    line-height:.94!important;
    letter-spacing:-1.3px!important;
    font-weight:950!important;
  }
  .hero-wordmark span,
  .hero-wordmark strong{font-size:inherit!important;line-height:inherit!important}
  .hero-wordmark strong{color:#1188ee!important}
  .hero-claim{
    margin:5px 0 0!important;
    color:#0b6dc7!important;
    font-size:15px!important;
    line-height:1.05!important;
    font-weight:850!important;
  }
  .hero-copy p{
    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    max-width:100%!important;
    margin:7px 0 0!important;
    color:#294d79!important;
    font-size:11.5px!important;
    line-height:1.28!important;
  }
  .colour-notes{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:5px!important;
    margin-top:8px!important;
  }
  .colour-notes span{
    padding:4px 7px!important;
    border-radius:999px!important;
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  /* ---------- Home ---------- */
  body.homepage-v25 main,
  body.homepage-v25 #home{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  .status-strip{
    width:calc(100% - 20px)!important;
    margin:10px auto!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  .status-item{
    min-width:0!important;
    min-height:62px!important;
    padding:9px 11px!important;
    border:1px solid #e4edf7!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 5px 14px rgba(8,38,92,.05)!important;
  }
  .status-item .round-icon{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    font-size:17px!important;
  }
  .status-item small{font-size:9px!important;letter-spacing:.7px!important}
  .status-item strong{font-size:13px!important;line-height:1.2!important}
  .status-item span:not(.round-icon){font-size:10px!important;line-height:1.2!important}

  .page-wrap{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
  }
  .top-card-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin:0!important;
  }
  .v25-show-card{
    width:100%!important;
    min-height:205px!important;
    height:205px!important;
    border-radius:17px!important;
    overflow:hidden!important;
  }
  .v25-show-time{
    top:13px!important;
    left:13px!important;
    padding:5px 8px!important;
    font-size:9px!important;
  }
  .v25-show-copy{
    left:15px!important;
    right:72px!important;
    bottom:14px!important;
    width:auto!important;
  }
  .v25-show-copy h2{
    margin:0 0 5px!important;
    font-size:29px!important;
    line-height:.88!important;
  }
  .v25-show-copy p{
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    margin:0 0 7px!important;
    font-size:11px!important;
    line-height:1.25!important;
  }
  .v25-show-copy a{font-size:11px!important}
  .v25-play{
    right:13px!important;
    bottom:13px!important;
    width:46px!important;
    height:46px!important;
    font-size:16px!important;
  }
  .radio-dashboard{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin:10px 0 0!important;
  }
  .panel,
  .presenter-card,
  .history-card{
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    padding:15px!important;
    border-radius:17px!important;
  }
  .panel-head h2{font-size:20px!important}
  .panel-head .muted{font-size:10px!important}
  .presenter-main{gap:12px!important}
  .presenter-picture-wrap{
    width:72px!important;
    height:72px!important;
    flex:0 0 72px!important;
  }
  .presenter-main h3{font-size:18px!important}
  .presenter-main p{font-size:11px!important}
  .history-list{max-height:none!important;overflow:visible!important}
  .history-row{padding:6px 0!important;font-size:11px!important}
  .history-row time{width:46px!important;flex:0 0 46px!important}

  /* ---------- Generic subpages ---------- */
  .fresh-main,
  .v29-shell,
  .members-main{
    width:calc(100% - 20px)!important;
    max-width:none!important;
    margin:10px auto 24px!important;
    padding:0!important;
  }
  .fresh-card,
  .v29-panel,
  .member-card{
    border-radius:16px!important;
    box-shadow:0 6px 18px rgba(8,38,92,.06)!important;
  }
  .section-head{
    margin:0 0 10px!important;
    padding:0 2px!important;
  }
  .section-head h1,.section-head h2{font-size:24px!important;line-height:1.05!important}
  .section-head p{font-size:12px!important;line-height:1.4!important}

  /* Shows */
  .show-page-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .show-page-card{
    display:grid!important;
    grid-template-columns:118px minmax(0,1fr)!important;
    min-height:150px!important;
    overflow:hidden!important;
  }
  .show-page-art{
    min-height:150px!important;
    height:100%!important;
    border-radius:0!important;
  }
  .show-page-time{
    left:8px!important;
    top:8px!important;
    padding:4px 6px!important;
    font-size:8px!important;
  }
  .show-page-body{padding:14px 13px!important}
  .show-page-body h2{font-size:21px!important;margin:0 0 5px!important}
  .show-page-body p{font-size:11px!important;line-height:1.32!important;margin:6px 0 9px!important}
  .show-tags{gap:4px!important}
  .show-tags span{font-size:8px!important;padding:4px 6px!important}
  .show-button,.mixcloud-button{
    display:inline-flex!important;
    align-items:center!important;
    min-height:37px!important;
    padding:8px 11px!important;
    font-size:10px!important;
  }

  /* Listen Again */
  .listen-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .listen-card-fresh{
    display:grid!important;
    grid-template-columns:118px minmax(0,1fr)!important;
    min-height:150px!important;
    overflow:hidden!important;
  }
  .listen-art{min-height:150px!important;height:100%!important}
  .listen-content{padding:14px 13px!important}
  .listen-content h2{font-size:21px!important;margin:5px 0!important}
  .listen-content p{font-size:11px!important;line-height:1.32!important;margin:0 0 9px!important}
  .pill-time{font-size:8px!important;padding:4px 6px!important}

  /* About / Team / Contact */
  .about-grid,.about-grid-v31,
  .contact-grid,
  .team-member,
  .team-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .about-copy,.about-copy-v31,
  .presenter-profile,.presenter-profile-v31,
  .contact-form-wrap,.contact-side,
  .team-intro,.team-member{
    padding:16px!important;
  }
  .presenter-row,.presenter-row-v31,
  .member-account{
    display:grid!important;
    grid-template-columns:1fr!important;
    text-align:center!important;
    gap:12px!important;
  }
  .presenter-photo-wrap,
  .team-photo{
    width:100%!important;
    min-height:250px!important;
    max-height:330px!important;
  }
  .team-photo img{min-height:250px!important;max-height:330px!important;object-position:center 25%!important}
  .team-copy h2{font-size:28px!important}
  .team-copy p{font-size:12px!important}
  .team-shows{justify-content:center!important}
  .contact-form{gap:10px!important}
  .contact-form input,.contact-form textarea{
    width:100%!important;
    min-height:44px!important;
    font-size:16px!important; /* prevents iOS zoom */
  }
  .contact-form textarea{min-height:130px!important}

  /* Shop */
  .shop-grid{grid-template-columns:1fr!important;gap:10px!important}
  .shop-card{
    min-height:0!important;
    grid-template-columns:86px minmax(0,1fr)!important;
    gap:13px!important;
    padding:15px!important;
  }
  .shop-icon{
    width:78px!important;
    height:78px!important;
    border-radius:20px!important;
    font-size:23px!important;
  }
  .shop-copy h2{font-size:22px!important;margin-bottom:5px!important}
  .shop-copy p{font-size:11px!important;line-height:1.3!important;margin-bottom:9px!important}
  .shop-badge{font-size:8px!important;margin-bottom:5px!important}
  .shop-link{font-size:9px!important;padding:6px 8px!important}
  .shop-intro,.shop-note{padding:16px!important}
  .shop-intro h2,.shop-note h2{font-size:22px!important}
  .shop-intro p,.shop-note p{font-size:12px!important}

  /* ---------- Schedule ---------- */
  .v29-shell{overflow:visible!important}
  .v29-daybar{
    display:block!important;
    padding:0!important;
    margin:0 0 10px!important;
    background:transparent!important;
  }
  .v29-day-tabs{
    width:100%!important;
    display:flex!important;
    gap:6px!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-width:none!important;
    padding:2px 1px 7px!important;
  }
  .v29-day-tabs::-webkit-scrollbar{display:none!important}
  .v29-day-tabs button{
    min-width:74px!important;
    min-height:42px!important;
    flex:0 0 auto!important;
    padding:7px 10px!important;
    border-radius:12px!important;
    font-size:11px!important;
  }
  .v29-week-button{
    width:100%!important;
    min-height:42px!important;
    margin:2px 0 0!important;
    border-radius:12px!important;
    font-size:11px!important;
  }
  .v29-content-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .v29-right-stack{display:grid!important;gap:10px!important}
  .v29-panel{padding:14px!important}
  .v29-panel-head{
    display:flex!important;
    align-items:flex-start!important;
    gap:8px!important;
    flex-wrap:wrap!important;
  }
  .v29-panel-head h2{font-size:22px!important}
  .v29-panel-head p,.v29-timezone{font-size:9px!important}
  .v29-timeline{overflow:visible!important}
  .v29-featured-grid{grid-template-columns:1fr!important;gap:8px!important}
  .v29-feature-card{min-height:145px!important;border-radius:14px!important}
  .v29-feature-copy{padding:14px!important}
  .v29-feature-copy h3{font-size:20px!important}
  .v29-feature-copy p{font-size:10px!important;line-height:1.3!important}
  .v29-section-title{
    display:flex!important;
    gap:8px!important;
    align-items:flex-start!important;
    flex-wrap:wrap!important;
  }
  .v29-section-title h2{font-size:18px!important}
  .v29-section-title a,.v29-section-title span{font-size:9px!important}
  .v29-overview-scroll{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:5px!important;
  }
  .v29-overview{min-width:700px!important}
  .v29-bottom-bar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    padding:14px!important;
    margin-top:10px!important;
  }
  .v29-legend{display:flex!important;flex-wrap:wrap!important;gap:6px 10px!important}
  .v29-legend span{font-size:9px!important}
  .v29-footer-logo img{max-width:180px!important}

  /* ---------- Members ---------- */
  .members-toolbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:12px!important;
    border-radius:15px!important;
  }
  .members-toolbar strong{font-size:12px!important;overflow-wrap:anywhere!important}
  .members-toolbar nav{gap:6px!important}
  .members-toolbar a{font-size:10px!important;padding:7px 9px!important}
  .members-grid,.member-feature-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .member-card{padding:16px!important}
  .member-card h1{font-size:27px!important}
  .member-card h2{font-size:21px!important}
  .member-card p{font-size:12px!important}
  .member-form .row{grid-template-columns:1fr!important}
  .member-field input{
    min-height:44px!important;
    font-size:16px!important;
  }
  .member-button{min-height:42px!important}
  .member-feature{min-height:130px!important;padding:15px!important}
  .member-avatar{width:100px!important;height:100px!important;font-size:38px!important}
  .member-meta{grid-template-columns:1fr!important;text-align:left!important}
  .member-table-wrap{margin:0 -4px!important}
  .member-table{min-width:720px!important}

  /* ---------- Footer ---------- */
  footer,
  .fresh-footer{
    width:100%!important;
    margin:16px 0 0!important;
    padding:20px 14px 24px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    text-align:center!important;
  }
  footer img,
  .fresh-footer .footer-brand img{max-width:210px!important;height:auto!important}
  .footer-links{
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
    gap:7px!important;
  }
  .footer-links a{
    display:inline-flex!important;
    align-items:center!important;
    min-height:34px!important;
    padding:6px 9px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.72)!important;
    font-size:10px!important;
    text-decoration:none!important;
  }
  .copyright,.footer-copy{font-size:10px!important}

  /* ---------- Fixed mobile live player ---------- */
  .mobile-live-player{
    position:fixed;
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    height:58px;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 46px;
    align-items:center;
    gap:9px;
    padding:7px 8px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:18px;
    background:linear-gradient(135deg,rgba(8,37,86,.98),rgba(15,94,164,.98));
    box-shadow:0 12px 34px rgba(3,25,59,.30);
    color:#fff;
    z-index:1000;
    backdrop-filter:blur(10px);
  }
  .mobile-live-player .mlp-badge{
    width:44px;height:44px;border-radius:13px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,#ff405b,#ff8745);
    font-size:9px;font-weight:950;line-height:1.05;text-align:center;
  }
  .mobile-live-player .mlp-copy{min-width:0}
  .mobile-live-player .mlp-copy small{
    display:block;margin:0 0 2px;color:#9fd9ff;font-size:8px;font-weight:900;letter-spacing:1px;text-transform:uppercase;
  }
  .mobile-live-player .mlp-title{
    display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font-size:12px;font-weight:900;line-height:1.2;
  }
  .mobile-live-player .mlp-sub{
    display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.72);font-size:9px;line-height:1.2;
  }
  .mobile-live-player .mlp-play{
    width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;
    background:#fff;color:#ff405b;font-size:17px;font-weight:900;cursor:pointer;
    box-shadow:0 5px 14px rgba(0,0,0,.14);
  }
  .mobile-live-player.is-playing .mlp-play{color:#0b67bd}

  /* Prevent accidental wide children from breaking the page. */
  img,svg,video,canvas{max-width:100%}
}

@media (max-width: 390px){
  .hero-copy,.hero .hero-copy,.hero.subpage-home-hero .hero-copy{width:73%!important;padding-left:14px!important}
  .hero-wordmark{font-size:30px!important}
  .hero-claim{font-size:13px!important}
  .hero-copy p{font-size:10.5px!important}
  .site-header .brand img{width:min(190px,54vw)!important}
  .show-page-card,.listen-card-fresh{grid-template-columns:104px minmax(0,1fr)!important}
  .shop-card{grid-template-columns:75px minmax(0,1fr)!important}
  .shop-icon{width:68px!important;height:68px!important;font-size:20px!important}
}


/* ================================================================
   V51 – mobile handling for the one new Newsbox card and Now Playing.
   ================================================================ */
@media(max-width:1199px){
  body.homepage-v25 .newsbox-home-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin:10px 0!important;
  }
  body.homepage-v25 .newsbox-home-row .v25-show-card.newsbox{
    grid-column:auto!important;
    width:100%!important;
    height:205px!important;
    min-height:205px!important;
    border-radius:17px!important;
  }

  body.homepage-v25 .status-track{
    border:2px solid #ff4d64!important;
    background:linear-gradient(135deg,#eef9ff,#fff5f0 58%,#fff0f4)!important;
    box-shadow:0 8px 20px rgba(255,77,100,.16)!important;
  }
  body.homepage-v25 .status-track small{
    font-size:9px!important;
    padding:3px 7px!important;
  }
  body.homepage-v25 .status-track #quickNowPlaying{
    font-size:15px!important;
    line-height:1.18!important;
  }
}