/* Phone layout: readable images, comfortable controls and predictable photo viewing. */
@media(max-width:640px){
 .garage-gallery{padding-top:50px;padding-bottom:52px}
 .garage-gallery .section-intro{display:block;margin-bottom:27px}
 .garage-gallery h2{font-size:46px;line-height:1.04;margin-top:16px}
 .garage-gallery .section-intro>p{font-size:13px;line-height:1.85;max-width:350px;margin-top:20px}
 .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;scroll-margin-top:12px}
 .portfolio-grid>.garage-photo{aspect-ratio:4/3;border-radius:7px}
 #nieuw-portfolio>.garage-photo:first-child{grid-column:1/-1;aspect-ratio:4/3}
 #nieuw-portfolio>.garage-video{grid-column:1/-1;aspect-ratio:16/10}
 .portfolio-grid>[data-photo="7"] img{object-position:50% 49%}
 .portfolio-grid>[data-photo="8"] img{object-position:50% 45%}
 .portfolio-extra{margin-top:12px}
 .portfolio-extra>.garage-photo{aspect-ratio:3/4}
 .portfolio-extra>[data-photo="0"] img{object-position:50% 60%}
 .portfolio-grid .photo-expand{display:none}
 .portfolio-grid .video-play{width:56px;height:56px;background:#effbf4f2}
 .portfolio-grid .video-play svg{width:23px;height:23px}
 .portfolio-footer{display:flex;flex-direction:column;align-items:stretch;gap:16px;margin-top:22px;padding-top:0;border-top:0}
 .portfolio-more{order:0;justify-content:center;gap:18px;min-height:52px;padding:13px 20px;border:1px solid #a9c4b8;border-radius:5px;background:#edf4ee;font-size:13px;line-height:1.5}
 .portfolio-more:active{background:#dceee3}
 .portfolio-note{order:1;justify-content:center;gap:9px;font-size:11px;line-height:1.6;color:#5b736a}
 .portfolio-note .small-line{display:none}
 .photo-dialog[open]{display:flex;flex-direction:column;width:calc(100vw - 24px);height:min(86dvh,760px);max-height:calc(100dvh - 24px);padding:8px 12px 14px;overflow:hidden;border-radius:10px}
 .photo-dialog-toolbar{flex:0 0 48px;min-height:48px;margin:0 0 8px;padding-left:4px;font-size:11px}
 .photo-dialog-close{width:44px;height:44px}
 .photo-dialog-content{flex:1;min-height:0;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;grid-template-rows:minmax(0,1fr) 48px;gap:14px 10px}
 .photo-dialog figure{grid-row:1;grid-column:1/-1;height:100%;min-height:0;min-width:0;margin:0;padding:0;justify-content:center}
 .photo-dialog figure img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;touch-action:pan-y pinch-zoom}
 .photo-dialog .circle-button{width:48px;height:48px;border-color:#477169;background:#103936}
 .photo-dialog-prev{grid-row:2;grid-column:1}
 .photo-dialog-next{grid-row:2;grid-column:3}
 .video-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:8px 12px 14px}
 .video-dialog video{max-height:calc(100dvh - 106px)}
}
@media(max-width:560px){
 .header-inner{height:72px;gap:8px}
 .header-cta{min-height:44px}
 .menu-toggle{width:44px;height:44px;flex:0 0 44px;padding:10px;margin-left:0;margin-right:-7px}
 .mobile-nav{padding-bottom:18px}
 .mobile-nav a{min-height:50px;align-items:center}
 .slider-bottom{flex-direction:column;align-items:stretch;gap:14px;bottom:112px}
 .slide-choices{width:100%;max-width:none;gap:18px}
 .slide-choice{min-height:44px;padding-bottom:12px}
 .slider-buttons{justify-content:flex-start;gap:8px}
 .slider-buttons .circle-button,.slider-buttons .slider-pause{width:44px;height:44px}
 .slider-buttons .slider-pause{margin-right:3px}
 .service-controls .circle-button{width:44px;height:44px}
 .contact-main h2{font-size:clamp(49px,13.5vw,60px);line-height:1.04}
 .contact-actions{align-items:stretch;gap:15px}
 .contact-actions .button{width:100%;min-height:54px;justify-content:center}
 .contact-actions .email-link{min-height:44px;justify-content:center;font-size:13px}
 .contact-number{text-align:center;margin-top:14px}
 .visit-card{margin-top:28px;padding:26px}
 .faq summary{min-height:56px}
 .footer-contact{min-height:44px}
 .privacy-trigger{min-height:44px}
 .whatsapp-float{right:max(15px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(max-width:360px){
 .garage-gallery h2{font-size:42px}
 .garage-gallery .section-intro>p{font-size:12px;line-height:1.9}
 .portfolio-grid{gap:10px}
 .portfolio-extra{margin-top:10px}
 .portfolio-more{font-size:12px}
 .visit-card{padding:23px}
 .contact-actions .button{font-size:11px;padding-left:14px;padding-right:14px}
}
@media(hover:none){
 .portfolio-grid>.garage-photo:hover img{transform:none}
 .portfolio-grid .garage-video:hover .video-play{background:#effbf4f2;box-shadow:0 4px 20px #092a2b28}
}