/* =========================================================
   Mobile inner-page banner (m-banner.css)
   Loaded ONLY by about.html / productlist.html / newslist.html /
   contact.html. Shows the configured car banner image on phones
   with the real page title + breadcrumbs overlaid on the left
   dark-blue area of the image. Desktop / tablet keep the
   original [sort:pic] banner untouched.
   ========================================================= */

/* hidden outside the phone breakpoint */
.m-page-banner{display:none}
.m-page-crumb{display:none}

@media (max-width:767px), ((max-width:1024px) and (max-height:500px)){

  /* the desktop banner (image + bottom title bar) is replaced on phones */
  .banner-inner{display:none}

  .m-page-banner{display:block;position:relative;width:100%;line-height:0;overflow:hidden}

  /* full image, natural 3:1 ratio, no crop / no stretch */
  .m-page-banner img{display:block;width:100%;height:auto;object-fit:contain}

  /* real HTML title + breadcrumbs over the left dark-blue area */
  .m-page-banner .m-page-banner-text{position:absolute;left:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 6px 0 12px;width:36%;line-height:1.3}

  .m-page-banner .m-banner-title{margin:0;font-size:16px;font-weight:700;color:#FFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.4)}

  .m-page-banner .banner-breadcrumbs{margin:0;font-size:11px;line-height:1.5;color:rgba(255,255,255,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.4)}

  .m-page-banner .banner-breadcrumbs a,
  .m-page-banner .banner-breadcrumbs a:hover{color:rgba(255,255,255,.88)}

  /* --- breadcrumb bar below the banner, above the content --- */
  .m-page-crumb{display:block;background:#FFF;padding:11px 15px;line-height:1.5}

  /* About / Contact pages use 16px content side padding */
  .m-page-crumb.crumb-wide{padding-left:16px;padding-right:16px}

  .m-page-crumb .banner-breadcrumbs{margin:0;font-size:14px;line-height:1.5;color:var(--fontcolortitle);white-space:normal;overflow:visible;text-overflow:clip}

  .m-page-crumb .banner-breadcrumbs a{color:inherit;transition:all .2s linear}

  .m-page-crumb .banner-breadcrumbs a:hover{color:var(--color)}

  /* smaller phones: keep the text inside the dark area, never over the car */
  @media (max-width:359px){
    .m-page-banner .m-banner-title{font-size:14px}
  }
}