/* OurWayTrips V6.0.11 — iPhone visual cleanup */
@media (max-width:720px){
  /* Trip hero: keep title safely inside the photo and away from the lower transition. */
  body[data-trip-theme="canyon"] #trip .scenic-hero{
    min-height:560px!important;
    background-size:cover!important;
    background-position:center 24%!important;
    padding:26px 22px 22px!important;
  }
  body[data-trip-theme="canyon"] #trip .scenic-hero::before{
    background:linear-gradient(180deg,rgba(18,12,8,.22) 0%,rgba(18,12,8,.28) 38%,rgba(18,12,8,.72) 72%,rgba(18,12,8,.82) 100%)!important;
  }
  #trip .scenic-hero>div:first-child{width:100%!important;max-width:100%!important}
  #trip .scenic-hero h1{
    font-size:clamp(2.9rem,12vw,3.65rem)!important;
    line-height:.94!important;
    letter-spacing:-.05em!important;
    margin:12px 0 16px!important;
    max-width:92%!important;
  }
  #trip .scenic-hero>div:first-child>p:not(.trip-route-tagline){margin-top:0!important;margin-bottom:6px!important}
  #trip .scenic-hero .trip-route-tagline{margin-top:8px!important;margin-bottom:18px!important}

  /* Trip plan CTAs: never let Adventure Mode clip or escape the viewport. */
  #trip .trip-plan-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:16px!important;
  }
  #trip .trip-plan-head>div:first-child{width:100%!important;min-width:0!important}
  #trip .trip-plan-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin:0!important;
  }
  #trip .trip-plan-actions .btn,
  #trip .trip-adventure-btn,
  #trip #tripPlanAddBtn{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    margin:0!important;
    padding:11px 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.15!important;
    font-size:.98rem!important;
  }
  #trip .trip-adventure-btn::after{flex:0 0 auto!important;margin-left:8px!important}

  /* Bottom nav has SIX destinations. Keep every icon/text centered in its own equal column. */
  .bottom-nav.trip-bottom-nav{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    justify-items:stretch!important;
    align-items:stretch!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .bottom-nav.trip-bottom-nav a{
    width:100%!important;
    min-width:0!important;
    padding:4px 0!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    gap:3px!important;
  }
  .bottom-nav.trip-bottom-nav a span,
  .bottom-nav.trip-bottom-nav a small{
    width:100%!important;
    text-align:center!important;
    margin:0!important;
  }

  /* Adventure overlay itself: keep mission/action text inside narrow phones. */
  #adventureModeOverlay .adventure-shell{padding-left:10px!important;padding-right:10px!important}
  #adventureModeOverlay .adventure-card{padding:14px!important}
  #adventureModeOverlay .adventure-next-line{min-width:0!important}
  #adventureModeOverlay .adventure-next-line>div:last-child{min-width:0!important;flex:1!important}
  #adventureModeOverlay .adventure-next b,
  #adventureModeOverlay .adventure-next span,
  #adventureModeOverlay .adventure-main b,
  #adventureModeOverlay .adventure-main small{overflow-wrap:anywhere!important;word-break:normal!important}
  #adventureModeOverlay .adventure-buttons{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  #adventureModeOverlay .adventure-buttons a,
  #adventureModeOverlay .adventure-buttons button{
    min-width:0!important;
    width:100%!important;
    white-space:normal!important;
    line-height:1.15!important;
    padding:10px 8px!important;
  }
}

@media (max-width:390px){
  body[data-trip-theme="canyon"] #trip .scenic-hero{min-height:545px!important;padding-left:18px!important;padding-right:18px!important}
  #trip .scenic-hero h1{font-size:2.85rem!important;max-width:96%!important}
  #trip .trip-plan-actions .btn{font-size:.93rem!important}
  #adventureModeOverlay .adventure-buttons{grid-template-columns:1fr!important}
}