/* V165 — Responsive QA pass
   Common desktop/laptop/tablet/mobile protection at 1440, 1024, 768, 430 and 375px.
   Loaded last so it safely corrects legacy page-specific sizing where required. */

/* Global overflow and flexible media safety */
html{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:visible;
}

/* Fallback for browsers without overflow:clip. Keep clipping on the root,
   not body, so the sticky navigation remains tied to the viewport. */
@supports not (overflow:clip){
  html{overflow-x:hidden;}
  body{overflow-x:visible;}
}

body *,
body *::before,
body *::after{
  box-sizing:border-box;
}

main,
main > section,
header,
footer,
[class*="container"],
[class*="wrapper"],
[class*="content"]{
  min-width:0;
}

img,
picture,
video,
canvas,
svg,
iframe{
  max-width:100%;
}

img,
video{
  height:auto;
}

input,
select,
textarea,
button{
  max-width:100%;
}

table{
  max-width:100%;
}

/* Prevent long URLs, email addresses and technical identifiers overflowing cards */
main a,
main code,
main pre,
footer a{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Grid/flex children must be allowed to shrink */
main [class*="grid"] > *,
footer [class*="grid"] > *,
main [class*="row"] > *,
main [class*="columns"] > *{
  min-width:0;
}

/* Large tablets / small laptops */
@media(max-width:1024px){
  main > section{
    max-width:100%;
  }

  h1{
    max-width:100%;
  }

  /* Keep common multi-card areas readable at tablet width */
  main :is(
    .service-grid,
    .symptom-grid,
    .mode-grid,
    .care-service-grid,
    .care-area-grid,
    .paid-service-grid,
    .remap-online-grid,
    .module-grid,
    .diagnostic-card-grid,
    .clone-service-grid,
    .clone-method-grid,
    .bcm-service-grid,
    .coding-module-grid,
    .upgrade-grid,
    .exhaust-service-grid,
    .exhaust-symptom-grid,
    .battery-symptom-grid,
    .battery-brand-grid,
    .sas-symptom-grid,
    .sas-brand-grid,
    .recovery-cause-grid,
    .recovery-check-grid,
    .recovery-intake-grid,
    .gearbox-vehicle-grid,
    .gearbox-postal-grid,
    .gearbox-process-grid,
    .radio-service-grid,
    .radio-brand-grid,
    .radio-process-grid,
    .remap-stage-grid,
    .remap-benefit-grid,
    .remap-solution-grid,
    .ecu-family-grid,
    .key-service-grid,
    .immo-programming-grid,
    .coding-core-grid,
    .coding-safety-grid
  ){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Tablet portrait */
@media(max-width:768px){
  main > section{
    width:100%;
  }

  h1,
  h2{
    overflow-wrap:break-word;
  }

  table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  pre{
    max-width:100%;
    overflow-x:auto;
  }

  .contact-actions,
  .hero-actions,
  .cta-actions{
    flex-wrap:wrap!important;
  }

  .contact-actions > *,
  .hero-actions > *,
  .cta-actions > *{
    max-width:100%;
  }
}

/* Phones */
@media(max-width:620px){
  /* Standardise primary content grids to one comfortable column */
  main :is(
    .service-grid,
    .symptom-grid,
    .mode-grid,
    .case-summary-grid,
    .clone-service-grid,
    .clone-method-grid,
    .diagnostic-card-grid,
    .care-service-grid,
    .care-area-grid,
    .paid-service-grid,
    .remap-online-grid,
    .bcm-service-grid,
    .coding-module-grid,
    .module-grid,
    .adblue-diagnostic-grid,
    .adblue-combo-grid,
    .adblue-heavy-grid,
    .adblue-brand-grid,
    .adblue-postal-grid,
    .mileage-transmission-grid,
    .mileage-location-grid,
    .dtc-engine-grid,
    .dtc-commercial-grid,
    .dtc-sensor-grid,
    .dtc-process-grid,
    .egr-sensor-grid,
    .airbag-coding-grid,
    .airbag-vehicle-grid,
    .airbag-postal-grid,
    .airbag-workflow-grid,
    .battery-service-grid-section,
    .battery-symptom-grid,
    .battery-brand-grid,
    .dpf-diagnostic-grid,
    .dpf-regen-grid,
    .dpf-software-grid,
    .sas-service-grid-section,
    .sas-symptom-grid,
    .sas-brand-grid,
    .recovery-cause-grid,
    .recovery-check-grid,
    .recovery-intake-grid,
    .bcm-area-grid,
    .bcm-symptom-grid,
    .bcm-flash-grid,
    .bcm-review-grid,
    .gearbox-mini-grid,
    .gearbox-local-grid,
    .gearbox-vehicle-grid,
    .gearbox-postal-grid,
    .gearbox-process-grid,
    .exhaust-service-grid,
    .upgrade-grid,
    .exhaust-symptom-grid,
    .radio-mini-grid,
    .radio-service-grid,
    .radio-brand-grid,
    .radio-process-grid,
    .remap-stage-grid,
    .remap-benefit-grid,
    .remap-solution-grid,
    .ecu-family-grid,
    .key-service-grid,
    .immo-programming-grid,
    .review-value-grid,
    .diagnostic-vehicle-grid,
    .coding-core-grid,
    .coding-safety-grid
  ){
    grid-template-columns:1fr!important;
  }

  /* Keep image galleries useful without forcing ultra-tall pages */
  main :is(
    .case-gallery-grid,
    .work-gallery-grid,
    .battery-gallery-grid,
    .sas-gallery-grid,
    .exhaust-gallery-grid
  ){
    grid-template-columns:1fr!important;
  }

  .btn,
  button,
  input[type="submit"],
  input[type="button"]{
    min-height:44px;
  }

  input,
  select,
  textarea{
    font-size:16px; /* prevents iOS zoom on focus */
  }

  /* Avoid text touching phone edges in legacy full-width sections */
  main p,
  main li,
  main h1,
  main h2,
  main h3{
    max-width:100%;
  }
}

/* Small phones: 430 / 375px QA */
@media(max-width:430px){
  .btn,
  main a.btn{
    white-space:normal!important;
    text-align:center;
  }

  main :is(.contact-actions,.hero-actions,.cta-actions){
    gap:10px!important;
  }

  main :is(.contact-actions,.hero-actions,.cta-actions) > *{
    flex:1 1 100%!important;
    width:100%!important;
  }

  .faq-v163 summary{
    overflow-wrap:break-word;
  }
}

@media(max-width:375px){
  body{
    min-width:0;
  }

  .btn,
  button{
    max-width:100%;
  }

  main h1{
    font-size:clamp(2rem,10vw,2.75rem);
  }
}