/* FR Music V20 — mobile visual balance
   Integrates the hero image into the composition and rebuilds the audience metrics. */

@media (max-width: 620px){
  /* HERO: one connected editorial panel instead of a loose image floating in empty space */
  .hero{
    padding:76px 16px 34px!important;
    grid-template-columns:minmax(0,1fr) minmax(142px,.92fr)!important;
    grid-template-areas:
      "eyebrow visual"
      "spotify visual"
      "title title"
      "copy copy"
      "actions actions"!important;
    column-gap:12px!important;
    row-gap:8px!important;
    background:
      radial-gradient(circle at 88% 13%,rgba(214,181,108,.18),transparent 26%),
      var(--theme-bg)!important;
  }

  .hero-visual.hero-photo-composition{
    position:relative!important;
    width:100%!important;
    height:190px!important;
    min-height:190px!important;
    align-self:start!important;
    margin:0!important;
    padding:7px!important;
    border:1px solid rgba(36,31,24,.12)!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.42)!important;
    box-shadow:0 22px 52px rgba(39,31,18,.12)!important;
    overflow:visible!important;
  }

  html[data-theme="dark"] .hero-visual.hero-photo-composition{
    border-color:rgba(255,255,255,.12)!important;
    background:rgba(255,255,255,.045)!important;
    box-shadow:0 22px 52px rgba(0,0,0,.32)!important;
  }

  .hero-phone-photo{
    inset:7px!important;
    border-radius:18px!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }

  .hero-phone-photo::before{
    background:linear-gradient(180deg,transparent 52%,rgba(10,10,12,.18))!important;
  }

  .hero-logo-balloon{
    display:grid!important;
    place-items:center!important;
    left:-18px!important;
    right:auto!important;
    bottom:-18px!important;
    width:66px!important;
    height:66px!important;
    border:1px solid rgba(214,181,108,.52)!important;
    background:rgba(250,247,239,.94)!important;
    box-shadow:0 14px 34px rgba(39,31,18,.2)!important;
    z-index:8!important;
  }

  .hero-logo-balloon img{
    width:45px!important;
    height:45px!important;
    object-fit:cover!important;
    border-radius:50%!important;
  }

  .hero-logo-balloon .orbit{
    border-color:rgba(214,181,108,.55)!important;
  }

  .hero .eyebrow{
    align-self:center!important;
    max-width:185px!important;
    padding-left:12px!important;
    position:relative!important;
  }

  .hero .eyebrow::before{
    content:"";
    position:absolute;
    left:0;
    top:.4em;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#d6b56c;
  }

  .hero .spotify-mark{
    margin:12px 0 8px!important;
    width:30px!important;
    height:30px!important;
  }

  .hero h1{
    margin-top:18px!important;
    font-size:clamp(42px,12.4vw,56px)!important;
    line-height:.91!important;
  }

  .hero p{
    max-width:100%!important;
    font-size:15px!important;
  }

  /* AUDIENCE: replace the giant document-like white block with compact branded cards */
  .section:has(.audience-photo){
    padding-block:38px!important;
  }

  .section:has(.audience-photo) .section-grid{
    gap:12px!important;
    margin-bottom:14px!important;
  }

  .section:has(.audience-photo) h2{
    font-size:clamp(35px,10vw,46px)!important;
    max-width:330px!important;
  }

  .audience-photo{
    aspect-ratio:16/8.8!important;
    height:auto!important;
    margin-top:8px!important;
    border-radius:20px!important;
    box-shadow:0 18px 40px rgba(27,23,17,.13)!important;
  }

  .reach-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin-top:14px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  .reach-item{
    min-width:0!important;
    padding:18px 15px 17px!important;
    border:1px solid rgba(36,31,24,.11)!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.55)!important;
    box-shadow:0 14px 34px rgba(35,28,18,.08)!important;
    overflow:hidden!important;
  }

  html[data-theme="dark"] .reach-item{
    border-color:rgba(255,255,255,.1)!important;
    background:rgba(255,255,255,.045)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.2)!important;
  }

  .reach-item .big-number,
  .reach-item .big-number span{
    display:block!important;
    margin:0 0 12px!important;
    font-size:clamp(37px,11vw,50px)!important;
    line-height:.84!important;
    letter-spacing:-.075em!important;
    white-space:nowrap!important;
  }

  .reach-item h3{
    margin:0 0 8px!important;
    font-size:15px!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
  }

  .reach-item p{
    margin:0!important;
    font-size:11.5px!important;
    line-height:1.43!important;
    opacity:.73!important;
    overflow-wrap:anywhere!important;
  }
}

@media (max-width:390px){
  .hero{
    grid-template-columns:minmax(0,1fr) 128px!important;
  }
  .hero-visual.hero-photo-composition{
    height:174px!important;
    min-height:174px!important;
  }
  .hero-logo-balloon{
    width:60px!important;
    height:60px!important;
    left:-14px!important;
    bottom:-15px!important;
  }
  .hero-logo-balloon img{
    width:40px!important;
    height:40px!important;
  }
  .reach-grid{
    grid-template-columns:1fr!important;
  }
  .reach-item{
    padding:18px!important;
  }
}