/* =========================================================
   The Local Band List — Mobile Responsive Layer
   Loaded AFTER each page's inline styles.
   ========================================================= */

html,body{max-width:100%;overflow-x:hidden}
img,video,iframe{max-width:100%}
table{max-width:100%}
input,select,textarea,button{font-family:inherit}

@media(max-width:820px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{padding-bottom:72px}

  /* General page geometry */
  .shell,.s,.box{
    width:calc(100% - 24px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .shell,.s{padding-left:0!important;padding-right:0!important}
  .section{padding-top:40px!important;padding-bottom:40px!important}
  .sectionhead,.top,.toprow,.gigFinderTop{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  .sectionhead{gap:10px!important}
  .sectionhead h2{font-size:28px!important;line-height:1.08!important}
  h1{overflow-wrap:anywhere}
  h2,h3{overflow-wrap:anywhere}

  /* Navigation */
  nav{position:sticky!important;top:0!important}
  .navin{
    min-height:76px!important;
    height:auto!important;
    padding:10px 0!important;
    gap:10px!important;
  }
  .navlinks{display:none!important}
  .brand{font-size:18px!important;gap:9px!important;min-width:0}
  .logo{width:42px!important;height:42px!important;flex:0 0 42px}
  .actions{gap:7px!important;margin-left:auto}
  .navin .actions .btn{padding:11px 12px!important;font-size:14px!important;white-space:nowrap}
  .navin .actions .ghost{display:none!important}

  /* Inputs / forms */
  input,select,textarea{
    font-size:16px!important; /* prevents phone browser zoom */
    max-width:100%!important;
  }
  textarea{min-height:110px}
  .btn,button{
    min-height:44px;
    touch-action:manipulation;
  }
  .row,.actions,.homeactions{
    flex-wrap:wrap!important;
  }

  /* Generic grids/cards */
  .grid,.formgrid,.mediaGrid,.plans,.pricing,.rules,.flow,
  .artistgrid,.genregrid,.stats,.metrics,.settings,.statgrid,
  .spotlightgrid,.homegrid,.giggrid,.suggestGrid,.gigFinderForm{
    grid-template-columns:1fr!important;
  }
  .card,.membership,.c,.login,.rulebox,.pricecard,.suggestBox,
  .gigFinder,.artistLoginCallout{
    border-radius:15px!important;
  }
  .card,.membership,.c,.rulebox,.pricecard,.suggestBox,.gigFinder{
    padding:16px!important;
  }
  .wide{grid-column:auto!important}
  .homephoto{aspect-ratio:16/10!important}
  .emptyposition{min-height:180px!important}

  /* Homepage HERO:
     show the entire supplied event image as a real banner instead of
     cropping it behind a tall narrow phone layout. */
  .hero{
    min-height:0!important;
    padding:250px 0 34px!important;
    display:block!important;
    align-items:initial!important;
    overflow:hidden!important;
    background:#090c10!important;
  }
  .hero:before{
    inset:0 0 auto 0!important;
    width:100%!important;
    height:285px!important;
    background-image:url('main-bg.jpg')!important;
    background-size:100% auto!important;
    background-repeat:no-repeat!important;
    background-position:center top!important;
    filter:none!important;
    transform:none!important;
    opacity:1!important;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.72) 76%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,.72) 76%,transparent 100%)!important;
  }
  .hero:after{
    background:
      linear-gradient(to bottom,rgba(7,10,14,.08) 0%,rgba(7,10,14,.06) 48%,rgba(7,10,14,.62) 71%,#090c10 100%)!important;
  }
  .hero .shell{position:relative!important;z-index:2!important}
  .hero .eyebrow{
    font-size:10px!important;
    padding:6px 8px!important;
    margin-bottom:8px!important;
  }
  .hero h1{
    font-size:clamp(40px,11vw,52px)!important;
    line-height:.96!important;
    letter-spacing:-.048em!important;
    margin:10px 0 14px!important;
    max-width:100%!important;
    text-shadow:0 4px 18px rgba(0,0,0,.75)!important;
  }
  .hero p{
    font-size:17px!important;
    line-height:1.55!important;
    color:#d4d8df!important;
    max-width:100%!important;
    margin-bottom:0!important;
    text-shadow:0 3px 14px rgba(0,0,0,.65)!important;
  }
  .hero .mini{
    color:#adb4bf!important;
    line-height:1.45!important;
    text-shadow:none!important;
  }
  .hero .stats{margin-top:24px!important}
  .hero .stat{
    background:rgba(17,20,25,.82)!important;
    backdrop-filter:none!important;
  }

  /* Homepage search */
  .searchbar,.searchbar5{
    margin-top:22px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    padding:9px!important;
    border-radius:18px!important;
    width:100%!important;
    max-width:100%!important;
    gap:0!important;
  }
  .searchbar .field,.searchbar5 .field{
    min-height:56px!important;
    border-right:0!important;
    border-bottom:1px solid #e7e7e7!important;
    padding:0 12px!important;
  }
  .searchbar .field:last-of-type,.searchbar5 .field:last-of-type{
    border-bottom:0!important;
  }
  .searchbar input,.searchbar select,.searchbar5 input,.searchbar5 select{
    min-height:52px!important;
    padding:10px 0!important;
  }
  .searchbar button,.searchbar5 button{
    width:100%!important;
    min-height:50px!important;
    margin-top:8px!important;
    padding:12px!important;
  }

  /* Artist dashboard / Admin */
  .top>div:last-child{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
  }
  .top>div:last-child .btn{
    flex:1 1 auto;
    text-align:center;
  }
  .message-thread{width:100%!important}
  .msgbubble{max-width:100%!important;width:100%!important}
  .dashboard{grid-template-columns:1fr!important}
  .side{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .menu{grid-template-columns:1fr 1fr!important}
  .main{padding:16px!important}

  /* Artist profile */
  .heroCard,.profileHero,.artistHero{grid-template-columns:1fr!important}
  .photo{max-width:100%!important;height:auto!important}
  .gig{grid-template-columns:1fr!important}

  /* Long content / legal / admin */
  pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .recipients{columns:1!important}

  /* Global floating home control */
  .tll-global-home{
    right:9px!important;
    bottom:9px!important;
    padding:9px 11px!important;
    font-size:12px!important;
    box-shadow:0 5px 18px rgba(0,0,0,.34)!important;
  }
}

@media(max-width:480px){
  .shell,.s,.box{width:calc(100% - 20px)!important}
  .navin{padding:8px 0!important}
  .brand{font-size:17px!important}
  .logo{width:40px!important;height:40px!important;flex-basis:40px!important}
  .navin .actions .btn{font-size:13px!important;padding:10px 11px!important}

  .hero{
    padding-top:220px!important;
  }
  .hero:before{
    height:250px!important;
  }
  .hero h1{
    font-size:40px!important;
  }
  .hero p{
    font-size:16px!important;
    line-height:1.52!important;
  }

  .sectionhead h2{font-size:26px!important}
  .card,.membership,.c,.rulebox,.pricecard,.suggestBox,.gigFinder{padding:14px!important}
  .menu{grid-template-columns:1fr!important}
  .top>div:last-child .btn{flex:1 1 100%!important}
}