/* V188 - Fix service banner being clipped inside article content column.
   The banner must fit the REAL article width; no horizontal overflow. */

body:not(.admin-layout) .v175-news-main,
body:not(.admin-layout) .v175-content-layout,
body:not(.admin-layout) .v175-content-layout > div{
  min-width:0!important;
}

body:not(.admin-layout) .v186-service-banner{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
}

/* Desktop article column is narrower because TOC remains on the left.
   Use compact 3-zone proportions that actually fit this width. */
@media(min-width:1200px){
  body:not(.admin-layout) .v175-content-layout > div .v186-service-banner{
    grid-template-columns:minmax(185px,.95fr) minmax(330px,1.55fr) minmax(205px,1fr)!important;
    min-height:170px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-brand-copy{
    padding:22px 16px 22px 22px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-brand-copy small{
    margin-bottom:7px!important;
    font-size:10px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-brand-copy h2{
    font-size:23px!important;
    line-height:1.15!important;
    letter-spacing:-.3px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-brand-copy p{
    margin-top:5px!important;
    font-size:18px!important;
    line-height:1.2!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-service-points{
    min-width:0!important;
    padding:15px 4px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-service-point{
    min-width:0!important;
    min-height:102px!important;
    gap:8px!important;
    padding:0 6px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-icon{
    width:43px!important;
    height:43px!important;
    flex-basis:43px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-icon svg{
    width:23px!important;
    height:23px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-service-point b{
    font-size:12.5px!important;
    line-height:1.28!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-contact-panel{
    min-width:0!important;
    gap:12px!important;
    padding:20px 15px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-contact-panel:before{
    left:-38px!important;
    width:68px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-contact-top{
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:9px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-phone-icon{
    width:42px!important;
    height:42px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-phone-icon svg{
    width:21px!important;
    height:21px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-contact-top small{
    font-size:10px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-contact-top a{
    max-width:100%!important;
    font-size:16px!important;
    line-height:1.12!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-quote-btn{
    min-width:0!important;
    min-height:42px!important;
    padding:0 12px!important;
    font-size:11.5px!important;
    white-space:normal!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-quote-btn span{
    font-size:23px!important;
  }
}

/* 1500+ can breathe a little more, but still stay within article column */
@media(min-width:1500px){
  body:not(.admin-layout) .v175-content-layout > div .v186-service-banner{
    grid-template-columns:minmax(205px,1fr) minmax(365px,1.6fr) minmax(225px,1fr)!important;
    min-height:176px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-brand-copy h2{
    font-size:24px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-brand-copy p{
    font-size:19px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-service-point b{
    font-size:13px!important;
  }

  body:not(.admin-layout) .v175-content-layout > div .v186-contact-top a{
    font-size:17px!important;
  }
}

/* Tablet: two clean rows, no clipping */
@media(min-width:768px) and (max-width:1199px){
  body:not(.admin-layout) .v186-service-banner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 280px!important;
    grid-template-areas:
      "brand contact"
      "points points"!important;
    width:100%!important;
  }

  body:not(.admin-layout) .v186-brand-copy{grid-area:brand!important}
  body:not(.admin-layout) .v186-contact-panel{grid-area:contact!important}
  body:not(.admin-layout) .v186-service-points{grid-area:points!important}
}

/* Mobile: one column, all controls fully visible */
@media(max-width:767px){
  body:not(.admin-layout) .v186-service-banner{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }

  body:not(.admin-layout) .v186-contact-panel{
    width:100%!important;
    box-sizing:border-box!important;
  }

  body:not(.admin-layout) .v186-contact-top,
  body:not(.admin-layout) .v186-quote-btn{
    max-width:100%!important;
  }
}