/* V187 - Rebalance the article service banner on desktop/tablet/mobile */

/* Base: calmer proportions and more consistent spacing */
body:not(.admin-layout) .v186-service-banner{
  min-height:188px!important;
  margin:30px 0 24px!important;
  border-radius:16px!important;
}

body:not(.admin-layout) .v186-brand-copy{
  padding:26px 30px 26px 34px!important;
}

body:not(.admin-layout) .v186-brand-copy small{
  margin-bottom:8px!important;
  font-size:12px!important;
}

body:not(.admin-layout) .v186-brand-copy h2{
  font-size:28px!important;
  line-height:1.18!important;
  letter-spacing:-.4px!important;
}

body:not(.admin-layout) .v186-brand-copy p{
  margin-top:5px!important;
  font-size:24px!important;
  line-height:1.22!important;
}

body:not(.admin-layout) .v186-service-points{
  padding:18px 10px!important;
}

body:not(.admin-layout) .v186-service-point{
  min-height:112px!important;
  gap:10px!important;
  padding:0 12px!important;
}

body:not(.admin-layout) .v186-icon{
  width:52px!important;
  height:52px!important;
  flex-basis:52px!important;
}

body:not(.admin-layout) .v186-icon svg{
  width:27px!important;
  height:27px!important;
}

body:not(.admin-layout) .v186-service-point b{
  font-size:16px!important;
  line-height:1.32!important;
}

body:not(.admin-layout) .v186-contact-panel{
  gap:16px!important;
  padding:25px 28px!important;
}

body:not(.admin-layout) .v186-contact-top{
  grid-template-columns:52px minmax(0,1fr)!important;
  gap:12px!important;
}

body:not(.admin-layout) .v186-phone-icon{
  width:52px!important;
  height:52px!important;
}

body:not(.admin-layout) .v186-phone-icon svg{
  width:26px!important;
  height:26px!important;
}

body:not(.admin-layout) .v186-contact-top small{
  font-size:13px!important;
}

body:not(.admin-layout) .v186-contact-top a{
  font-size:22px!important;
  line-height:1.12!important;
}

body:not(.admin-layout) .v186-quote-btn{
  min-height:48px!important;
  padding:0 18px!important;
  font-size:15px!important;
}

body:not(.admin-layout) .v186-quote-btn span{
  font-size:27px!important;
}

/* Wide desktop: reduce oversized first block and give the 3 benefits more breathing room */
@media(min-width:1500px){
  body:not(.admin-layout) .v186-service-banner{
    grid-template-columns:minmax(300px,.95fr) minmax(570px,1.65fr) minmax(320px,.95fr)!important;
    min-height:194px!important;
  }

  body:not(.admin-layout) .v186-brand-copy{
    padding-left:34px!important;
    padding-right:26px!important;
  }

  body:not(.admin-layout) .v186-brand-copy h2{
    font-size:29px!important;
  }

  body:not(.admin-layout) .v186-brand-copy p{
    font-size:25px!important;
  }

  body:not(.admin-layout) .v186-service-point{
    padding:0 16px!important;
  }

  body:not(.admin-layout) .v186-service-point b{
    font-size:16px!important;
  }

  body:not(.admin-layout) .v186-contact-panel{
    padding-left:30px!important;
    padding-right:30px!important;
  }
}

/* Standard desktop */
@media(min-width:1200px) and (max-width:1499px){
  body:not(.admin-layout) .v186-service-banner{
    grid-template-columns:minmax(255px,.95fr) minmax(460px,1.55fr) minmax(280px,.95fr)!important;
    min-height:184px!important;
  }

  body:not(.admin-layout) .v186-brand-copy{
    padding:24px 24px 24px 28px!important;
  }

  body:not(.admin-layout) .v186-brand-copy h2{
    font-size:25px!important;
  }

  body:not(.admin-layout) .v186-brand-copy p{
    font-size:22px!important;
  }

  body:not(.admin-layout) .v186-service-point{
    padding:0 9px!important;
  }

  body:not(.admin-layout) .v186-service-point b{
    font-size:14px!important;
  }

  body:not(.admin-layout) .v186-contact-panel{
    padding:22px 22px!important;
  }

  body:not(.admin-layout) .v186-contact-top a{
    font-size:20px!important;
  }

  body:not(.admin-layout) .v186-quote-btn{
    font-size:14px!important;
  }
}

/* Tablet: use a balanced 2-row layout instead of stacking everything too early */
@media(min-width:768px) and (max-width:1199px){
  body:not(.admin-layout) .v186-service-banner{
    grid-template-columns:minmax(0,1fr) minmax(300px,.82fr)!important;
    grid-template-areas:
      "brand contact"
      "points points"!important;
    min-height:0!important;
  }

  body:not(.admin-layout) .v186-brand-copy{
    grid-area:brand!important;
    align-items:flex-start!important;
    text-align:left!important;
    padding:24px 24px 20px!important;
  }

  body:not(.admin-layout) .v186-brand-copy h2{
    font-size:25px!important;
  }

  body:not(.admin-layout) .v186-brand-copy p{
    font-size:21px!important;
  }

  body:not(.admin-layout) .v186-service-points{
    grid-area:points!important;
    padding:14px 16px 18px!important;
    border-top:1px solid #dbe9e1!important;
  }

  body:not(.admin-layout) .v186-service-point{
    min-height:90px!important;
  }

  body:not(.admin-layout) .v186-contact-panel{
    grid-area:contact!important;
    min-height:150px!important;
    padding:22px 22px!important;
  }

  body:not(.admin-layout) .v186-contact-panel:before{
    display:none!important;
  }
}

/* Mobile: compact, readable, no excessive height */
@media(max-width:767px){
  body:not(.admin-layout) .v186-service-banner{
    display:block!important;
    margin:22px 0 18px!important;
    border-radius:14px!important;
  }

  body:not(.admin-layout) .v186-brand-copy{
    align-items:flex-start!important;
    text-align:left!important;
    padding:20px 18px 14px!important;
  }

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

  body:not(.admin-layout) .v186-brand-copy h2{
    font-size:22px!important;
    line-height:1.22!important;
  }

  body:not(.admin-layout) .v186-brand-copy p{
    font-size:18px!important;
    line-height:1.25!important;
  }

  body:not(.admin-layout) .v186-service-points{
    display:grid!important;
    grid-template-columns:1fr!important;
    padding:4px 14px 12px!important;
  }

  body:not(.admin-layout) .v186-service-point{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr)!important;
    min-height:58px!important;
    gap:10px!important;
    padding:8px 4px!important;
    text-align:left!important;
    justify-items:start!important;
  }

  body:not(.admin-layout) .v186-service-point:not(:last-child):after{
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:auto!important;
    height:1px!important;
    background:#dfeae4!important;
  }

  body:not(.admin-layout) .v186-icon{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
  }

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

  body:not(.admin-layout) .v186-service-point b{
    align-self:center!important;
    font-size:13px!important;
    line-height:1.3!important;
  }

  body:not(.admin-layout) .v186-service-point b br{
    display:none!important;
  }

  body:not(.admin-layout) .v186-contact-panel{
    margin-top:2px!important;
    padding:18px!important;
    gap:13px!important;
  }

  body:not(.admin-layout) .v186-contact-top{
    grid-template-columns:46px minmax(0,1fr)!important;
  }

  body:not(.admin-layout) .v186-phone-icon{
    width:46px!important;
    height:46px!important;
  }

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

  body:not(.admin-layout) .v186-contact-top small{
    font-size:11px!important;
  }

  body:not(.admin-layout) .v186-contact-top a{
    font-size:19px!important;
    white-space:normal!important;
  }

  body:not(.admin-layout) .v186-quote-btn{
    min-height:44px!important;
    padding:0 16px!important;
    font-size:13px!important;
  }
}

/* Very small phones */
@media(max-width:390px){
  body:not(.admin-layout) .v186-brand-copy h2{
    font-size:20px!important;
  }

  body:not(.admin-layout) .v186-brand-copy p{
    font-size:17px!important;
  }

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