/* ================================================================
   GALAXISRADIO V58
   Continuous V23/V20-style colourful side framing.
   Desktop: begins directly below the hero and runs to the bottom
   of the page/footer. Mobile keeps the clean responsive layout.
   ================================================================ */

@media (min-width:1200px){
  body.homepage-v25,
  body.v20-framed{
    position:relative!important;
    overflow-x:hidden!important;
    isolation:isolate!important;
  }

  /* One continuous rail from below the hero to the very bottom. */
  body.homepage-v25::before,
  body.homepage-v25::after,
  body.v20-framed::before,
  body.v20-framed::after{
    content:""!important;
    position:absolute!important;
    top:calc(var(--gr-header-h, 64px) + (100vw * 265 / 1672))!important;
    bottom:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    z-index:0!important;
    pointer-events:none!important;
    opacity:1!important;
    background-repeat:no-repeat, repeat, repeat-y!important;
    background-position:top center, top center, top left!important;
  }

  /* Left rail – original approved hands-up art at the top,
     then a continuous bright GALAXISRADIO colour field below. */
  body.homepage-v25::before,
  body.v20-framed::before{
    left:0!important;
    right:auto!important;
    width:8.3732vw!important;
    min-width:78px!important;
    max-width:161px!important;
    background-image:
      url("assets/v15-left-lower.webp"),
      radial-gradient(circle,rgba(255,255,255,.34) 0 2.4px,transparent 2.8px),
      linear-gradient(180deg,
        #ff936c 0%, #ff6a61 12%,
        #11aaf0 22%, #07519e 35%, #063783 46%,
        #ff725d 57%, #ff9a65 68%, #ffc05a 76%,
        #ff5f69 86%, #14a9ec 94%, #0751a0 100%)!important;
    background-size:
      100% auto,
      22px 22px,
      100% 1180px!important;
  }

  /* Right rail – matching approved right-hand art followed by
     the same vivid colour language all the way down. */
  body.homepage-v25::after,
  body.v20-framed::after{
    right:0!important;
    left:auto!important;
    width:9.8086vw!important;
    min-width:92px!important;
    max-width:188px!important;
    background-image:
      url("assets/v15-right-lower.webp"),
      radial-gradient(circle,rgba(255,255,255,.34) 0 2.5px,transparent 2.9px),
      linear-gradient(180deg,
        #ffb858 0%, #ff8c58 15%,
        #ff5e65 26%, #ff9863 37%, #ffc25a 47%,
        #10aaf0 58%, #07519d 70%, #063881 80%,
        #ff6d5f 90%, #ffb855 100%)!important;
    background-size:
      100% auto,
      22px 22px,
      100% 1180px!important;
  }

  /* Keep every actual page section above the decorative rails. */
  body.homepage-v25 > .site-header,
  body.homepage-v25 > .hero,
  body.homepage-v25 > main,
  body.homepage-v25 > footer,
  body.v20-framed > .site-header,
  body.v20-framed > .hero,
  body.v20-framed > main,
  body.v20-framed > footer{
    position:relative!important;
    z-index:2!important;
  }

  /* Footer remains the central content block; rails continue beside it. */
  body.homepage-v25 > footer,
  body.v20-framed > footer{
    z-index:3!important;
  }
}

@media (max-width:1199px){
  body.homepage-v25::before,
  body.homepage-v25::after,
  body.v20-framed::before,
  body.v20-framed::after{
    display:none!important;
  }
}

/* ================================================================
   GALAXISRADIO V57 – responsive tablet + phone polish
   Loaded last via frame-v58.css. Desktop >=1200px is untouched.
   ================================================================ */
@media (max-width:1199px){
  *,*::before,*::after{box-sizing:border-box}
  html,body{max-width:100%;overflow-x:hidden!important}

  /* Global content width */
  .page-wrap,.fresh-main,.v29-shell,.members-main{
    width:calc(100% - 24px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Header menu: readable on tablets and phones */
  .site-header .nav.open{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    left:8px!important;
    right:8px!important;
    width:auto!important;
    padding:10px!important;
    border:1px solid #e0eaf5!important;
    border-radius:17px!important;
    box-shadow:0 18px 42px rgba(6,35,80,.16)!important;
  }
  .site-header .nav a{
    min-height:43px!important;
    padding:9px 11px!important;
    border-radius:11px!important;
    background:#f7fbff!important;
  }
  .site-header .nav a.active{
    color:#fff!important;
    background:linear-gradient(135deg,#ff405b,#ff7e43)!important;
  }

  /* One compact hero instead of the previous tall tablet stack. */
  .hero,.hero.subpage-home-hero{
    width:calc(100% - 12px)!important;
    height:238px!important;
    min-height:238px!important;
    max-height:238px!important;
    margin:0 auto!important;
    display:block!important;
    position:relative!important;
    overflow:hidden!important;
    border-radius:0 0 18px 18px!important;
    background:url("assets/v19-hero-clean.png") 61% center/auto 100% no-repeat!important;
  }
  .hero::after,.hero.subpage-home-hero::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    background:linear-gradient(90deg,rgba(255,249,241,.995) 0%,rgba(255,249,241,.98) 42%,rgba(255,249,241,.76) 59%,rgba(255,249,241,.08) 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:2!important;
    width:57%!important;
    height:100%!important;
    min-height:0!important;
    padding:24px 18px 16px 24px!important;
    background:transparent!important;
  }
  .hero-copy>.kicker,.hero-copy .kicker{opacity:1!important;color:#ff405b!important;font-size:10px!important;letter-spacing:1.35px!important;font-weight:950!important}
  .hero-wordmark,.hero-copy>.hero-wordmark{opacity:1!important;font-size:42px!important;line-height:.94!important;letter-spacing:-1.5px!important;color:#0a2a65!important;font-weight:950!important}
  .hero-wordmark strong{color:#1188ee!important}
  .hero-claim,.hero-copy>.hero-claim{opacity:1!important;margin-top:6px!important;font-size:17px!important;line-height:1.08!important;color:#0b6dc7!important;font-weight:850!important}
  .hero-copy>p,.hero-copy p{opacity:1!important;margin:7px 0 0!important;max-width:520px!important;font-size:12.5px!important;line-height:1.32!important;color:#294d79!important}
  .colour-notes{opacity:1!important;display:flex!important;gap:6px!important;flex-wrap:wrap!important;margin-top:9px!important}
  .colour-notes span{font-size:9px!important;padding:5px 8px!important}

  /* Home: keep the status strip crisp and balanced. */
  body.homepage-v25 .status-strip{
    width:calc(100% - 24px)!important;
    margin:10px auto!important;
    grid-template-columns:1fr 1.18fr 1fr!important;
    min-height:72px!important;
  }
  body.homepage-v25 .status-item{min-width:0!important;padding:9px 12px!important;gap:10px!important}
  body.homepage-v25 .status-item:after{display:none!important}
  body.homepage-v25 .status-item .round-icon{width:42px!important;height:42px!important;flex:0 0 42px!important;font-size:18px!important}
  body.homepage-v25 .status-item small{font-size:10px!important}
  body.homepage-v25 .status-item strong{font-size:14px!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body.homepage-v25 .status-item>div>span:last-child{font-size:11px!important}
  body.homepage-v25 .status-track #quickNowPlaying{font-size:15px!important;line-height:1.18!important}

  /* Homepage cards stay one after another as previously requested. */
  body.homepage-v25 .top-card-grid,
  body.homepage-v25 .newsbox-home-row{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  body.homepage-v25 .top-card-grid .v25-show-card,
  body.homepage-v25 .newsbox-home-row .v25-show-card{
    width:100%!important;
    max-width:none!important;
    min-height:205px!important;
  }
  body.homepage-v25 .presenter-feature .presenter-main.presenter-main-v55{grid-template-columns:1fr!important;gap:14px!important}
  body.homepage-v25 .presenter-feature .presenter-identity{grid-template-columns:132px minmax(0,1fr)!important;gap:16px!important}
  body.homepage-v25 .presenter-feature .presenter-picture-wrap,
  body.homepage-v25 .presenter-feature .presenter-picture-wrap img{width:132px!important;height:132px!important}
  body.homepage-v25 .presenter-feature .presenter-studio-photo{min-height:160px!important;max-height:210px!important}

  /* Generic subpages */
  .about-grid,.about-grid-v31,.contact-grid,.team-grid{gap:12px!important}
  .listen-grid,.v67-listen-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .listen-card-fresh{min-width:0!important}

  /* Shop */
  .shop-main{width:calc(100% - 24px)!important}
  .shop-intro{gap:14px!important}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .product-visual{height:210px!important}

  /* Schedule */
  .v29-daybar{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .v29-day-tabs{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:5px!important;overflow:visible!important}
  .v29-day-tab,.v29-day-tabs button{min-width:0!important;padding:8px 5px!important;font-size:10px!important}
  .v29-week-button{width:100%!important}
  .v29-content-grid{grid-template-columns:1fr!important;gap:12px!important}
  .v29-right-stack{gap:12px!important}
  .v67-programme-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .v29-overview-scroll{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .v29-overview{min-width:650px!important}
  .gr-promo-stage{width:100%!important;max-width:none!important}

  /* Members */
  .members-toolbar{align-items:flex-start!important;flex-wrap:wrap!important}
  .members-toolbar nav{max-width:100%!important}
  .members-grid{grid-template-columns:1fr!important}
  .member-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Footer */
  .fresh-footer,footer{max-width:100%!important}
  .footer-links{flex-wrap:wrap!important}
}

@media (min-width:768px) and (max-width:900px){
  .hero-copy,.hero .hero-copy,.hero.subpage-home-hero .hero-copy{width:63%!important}
  body.homepage-v25 .status-strip{grid-template-columns:1fr 1fr!important}
  body.homepage-v25 .status-next{grid-column:1/-1!important}
  .about-grid,.about-grid-v31,.contact-grid,.team-grid{grid-template-columns:1fr!important}
  .member-feature-grid{grid-template-columns:1fr!important}
}

@media (max-width:767px){
  /* Keep the phone UI deliberately compact. */
  .page-wrap,.fresh-main,.v29-shell,.members-main{width:calc(100% - 16px)!important}
  .hero,.hero.subpage-home-hero{
    width:100%!important;
    height:208px!important;
    min-height:208px!important;
    max-height:208px!important;
    border-radius:0!important;
    background-position:62% center!important;
  }
  .hero-copy,.hero .hero-copy,.hero.subpage-home-hero .hero-copy{
    width:72%!important;
    padding:17px 8px 13px 15px!important;
  }
  .hero-wordmark,.hero-copy>.hero-wordmark{font-size:31px!important}
  .hero-claim,.hero-copy>.hero-claim{font-size:13.5px!important}
  .hero-copy>p,.hero-copy p{font-size:10.5px!important;line-height:1.27!important;display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  .colour-notes{gap:4px!important;margin-top:7px!important;flex-wrap:nowrap!important}
  .colour-notes span{font-size:8px!important;padding:4px 6px!important;white-space:nowrap!important}

  body.homepage-v25 .status-strip{grid-template-columns:1fr!important;width:calc(100% - 16px)!important}
  body.homepage-v25 .status-next{grid-column:auto!important}
  body.homepage-v25 .presenter-feature .presenter-main.presenter-main-v55{grid-template-columns:1fr!important}
  body.homepage-v25 .presenter-feature .presenter-identity{grid-template-columns:88px minmax(0,1fr)!important;gap:11px!important;text-align:left!important}
  body.homepage-v25 .presenter-feature .presenter-picture-wrap,
  body.homepage-v25 .presenter-feature .presenter-picture-wrap img{width:88px!important;height:88px!important}
  body.homepage-v25 .presenter-feature .presenter-studio-photo{min-height:130px!important;max-height:160px!important}

  .listen-grid,.v67-listen-grid{grid-template-columns:1fr!important}
  .product-grid{grid-template-columns:1fr!important;gap:10px!important}
  .product-visual{height:200px!important}
  .product-info{padding:14px!important}
  .product-info p{min-height:0!important}
  .shop-filter{overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:4px!important;scrollbar-width:none!important}
  .shop-filter::-webkit-scrollbar{display:none!important}
  .shop-filter span{flex:0 0 auto!important}

  .v29-day-tabs{display:flex!important;grid-template-columns:none!important;overflow-x:auto!important;gap:6px!important;padding-bottom:6px!important;scrollbar-width:none!important}
  .v29-day-tabs::-webkit-scrollbar{display:none!important}
  .v29-day-tabs button{flex:0 0 auto!important;min-width:76px!important}
  .v29-panel{padding:12px!important}
  .v29-row{grid-template-columns:68px minmax(0,1fr)!important;gap:9px!important;padding:6px 2px!important}
  .v29-row .v29-type{display:none!important}
  .v29-row em{right:4px!important;top:5px!important}
  .v29-timeline::before{left:21px!important}
  .v29-row::before{left:-20px!important}
  .v67-programme-grid{grid-template-columns:1fr!important}
  .gr-promo-stage{height:190px!important}
  .gr-promo-slide{padding:16px!important}
  .gr-promo-copy{width:76%!important}
  .gr-promo-copy strong{font-size:23px!important}
  .gr-promo-copy p{font-size:11px!important;margin:7px 0 10px!important}

  .members-toolbar{display:grid!important;grid-template-columns:1fr!important}
  .member-feature-grid{grid-template-columns:1fr!important}
  .member-card{padding:15px!important}
  .member-table-wrap{max-width:100%!important;overflow-x:auto!important}

  .fresh-footer,footer{display:grid!important;grid-template-columns:1fr!important;text-align:center!important;gap:10px!important;padding-left:12px!important;padding-right:12px!important}
  .footer-links{justify-content:center!important;gap:6px!important}
}

@media (max-width:390px){
  .site-header .brand img{width:min(178px,52vw)!important}
  .hero-copy,.hero .hero-copy,.hero.subpage-home-hero .hero-copy{width:75%!important;padding-left:13px!important}
  .hero-wordmark,.hero-copy>.hero-wordmark{font-size:29px!important}
  .product-visual{height:185px!important}
}