/*
 * Pol Automotive v61 — gerichte mobiele afwerking.
 * Laat desktop, de originele huisstijl en de DOM/CSS van Mobilox ongemoeid.
 * De wijzigingen beperken zich tot de eigen website, formulierdialogen,
 * mobiele klikdoelen en de verticale opbouw van de homepage.
 */
.pa-mobile-form-shortcut{display:none}
@media (max-width:760px){
  /* Eerst het aanbod laten zien: minder verticale witruimte boven de eerste auto. */
  .hero-grid{gap:23px;padding-top:29px;padding-bottom:20px}
  .hero-copy h1{font-size:clamp(42px,12.35vw,51px);line-height:1.075;margin-top:15px}
  .hero-copy>p:not(.eyebrow){margin-top:17px;font-size:14px;line-height:1.75}
  .hero-actions{gap:10px;margin-top:20px}
  .hero-signature{margin-top:19px}
  .hero-photo{margin-top:0}
  .hero-slideshow{height:clamp(236px,67vw,270px)}
  .services-grid{padding-top:5px;padding-bottom:5px}
  .service-link,.service-link:first-child{padding-top:13px;padding-bottom:13px}

  /* Subpagina's: koppen lopen op kleine telefoons minder snel over vier regels. */
  .page-head{padding-top:26px;padding-bottom:29px}
  .page-head h1{font-size:clamp(36px,10.5vw,43px);line-height:1.13}
  .page-head p:not(.eyebrow){margin-top:14px;line-height:1.7}
  .pa-mobile-form-shortcut{
    display:inline-flex;align-items:center;justify-content:space-between;gap:16px;
    min-height:44px;margin-top:18px;padding:9px 14px;
    border:1px solid #c8bba9;border-radius:2px;background:#fff;
    color:#66563f;font:500 13px/1.4 Arial,Helvetica,sans-serif;
    text-decoration:none;box-shadow:none;
  }
  .pa-mobile-form-shortcut:hover,.pa-mobile-form-shortcut:focus-visible{
    background:#eee9e2;border-color:#9c8b72;color:#4b3c2c;
  }
  form.request-form{scroll-margin-top:calc(var(--nav-height) + 22px)}

  /* Kleiner, maar gemakkelijker bedienbaar: menu en vaste contactknoppen. */
  .mobile-bar{gap:8px;padding-left:14px;padding-right:14px}
  .mobile-bar>a,.mobile-bar .button{
    min-width:0;min-height:48px;white-space:nowrap;
    gap:8px;padding:9px 10px;font-size:12px;line-height:1.25;
  }
  .mobile-bar>a:first-child{flex:0 0 37%}
  .mobile-bar>a:last-child{flex:1 1 auto}
  .mobile-bar .icon{width:16px;height:16px}
  .text-link{min-height:42px;align-items:center}

  /* Verhoog de leesbaarheid van toelichtingen zonder de typografie te vervangen. */
  .steps p,.faq details>p,.prose p,.service-card p{font-size:14px;line-height:1.65}
  .service-link p{font-size:13px}
  .request-form .form-subtitle{font-size:13px;line-height:1.65}
  .form-footnote{font-size:12px;line-height:1.6}
  .footer-brand p{font-size:13px;line-height:1.7}
  .footer-contact a,.footer-contact address{font-size:12px;line-height:1.7}

  /* Op de telefoon moeten sluiten en verwijderen eenvoudig aan te tikken zijn. */
  .pa-request-close{flex:0 0 44px;width:44px;height:44px}
  .pa-photo-remove{width:44px;height:44px;top:5px;right:5px;font-size:19px}
  .pa-request-dialog{max-height:calc(100dvh - 18px)}
  .pa-request-field :is(input,textarea,select){font-size:16px}
  .pa-photo-pick{min-height:46px}
}
@media (max-width:360px){
  .hero-actions{gap:8px;flex-wrap:nowrap}
  .hero-actions .button{min-width:0;gap:7px;padding:10px 10px;font-size:12px;white-space:nowrap}
  .mobile-bar{padding-left:12px;padding-right:12px}
  .mobile-bar>a,.mobile-bar .button{gap:6px;padding:9px 7px;font-size:11px}
  .mobile-bar .icon{width:15px;height:15px}
  .pa-mobile-form-shortcut{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .pa-mobile-form-shortcut{transition:none}
}

/* Bij een open telefoontoetsenbord mag de vaste CTA geen formulier bedekken.
 * :has() is progressive enhancement: oude browsers houden de gewone balk. */
@media(max-width:760px){
  body:has(input:focus,select:focus,textarea:focus) .mobile-bar{display:none!important}
}