/* HerCar staging patch v9
   Mobile-only visual usability corrections.
   Desktop design and approved section layout remain unchanged. */

@media (max-width:650px){

  /* Keep Andrea visibly present in the mobile hero instead of losing her
     behind the previous full-width white fade. */
  .hero-frame img{
    object-position:80% center!important;
  }
  .hero-frame:after{
    background:
      linear-gradient(
        115deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.94) 42%,
        rgba(255,255,255,.58) 57%,
        rgba(255,255,255,.10) 72%,
        rgba(255,255,255,0) 83%
      ),
      linear-gradient(
        180deg,
        rgba(255,255,255,.28) 0%,
        rgba(255,255,255,.10) 48%,
        rgba(255,255,255,0) 72%
      )!important;
  }

  /* Every public modal must stay within the viewport. Only vertical
     scrolling is allowed; the page must never require sideways dragging. */
  .modal{
    padding:10px!important;
    overflow:hidden!important;
  }
  .modal-card,
  .vehicle-modal-card{
    width:100%!important;
    max-width:calc(100vw - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    border-radius:22px!important;
    overscroll-behavior:contain;
  }
  .modal-body{
    width:100%!important;
    min-width:0!important;
    padding:24px 20px!important;
  }
  .modal-body h2{
    max-width:100%;
    overflow-wrap:anywhere;
  }

  /* Vehicle gallery and details. */
  .vehicle-gallery,
  .vehicle-gallery-main,
  .gallery-thumbs{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .vehicle-gallery-main{
    aspect-ratio:4/3;
    height:auto!important;
  }
  .vehicle-modal-card .modal-body h2{
    font-size:clamp(1.9rem,10vw,2.65rem)!important;
    line-height:1.03!important;
    letter-spacing:-.04em;
  }
  .modal-listing-facts{
    width:100%;
    min-width:0;
    gap:10px;
  }
  .modal-listing-facts>div{
    min-width:0;
  }
  .modal-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
  }
  .modal-actions .btn{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    text-align:center;
  }

  /* Collaboration and valuation forms: prevent long select text, inputs
     or grid items from expanding the modal beyond the mobile screen. */
  .modal-body .form-grid,
  .collaboration-form,
  .valuation-form{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .collaboration-form .field,
  .valuation-form .field,
  .modal-body .field,
  .field.full{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-column:auto!important;
  }
  .collaboration-form input,
  .collaboration-form select,
  .collaboration-form textarea,
  .valuation-form input,
  .valuation-form select,
  .valuation-form textarea,
  .modal-body input,
  .modal-body select,
  .modal-body textarea{
    display:block;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .collaboration-form select{
    font-size:.93rem;
    text-overflow:ellipsis;
  }
  .collaboration-form textarea{
    min-height:145px;
  }
}

@media (max-width:420px){
  /* Stacking the two vehicle facts is clearer on narrow phones and avoids
     any compressed or clipped values. */
  .modal-listing-facts{
    grid-template-columns:minmax(0,1fr)!important;
  }
}