/* Mobile and tablet refinement, 22 October 2026. Desktop rules remain separate. */
/* Leave side lanes for Home, page-top and chat controls on phones. */
@media (max-width:767px){
  body.sunny-site .sunny-footer > .sunny-wrap{width:calc(100% - 144px);margin-inline:auto}
  body.sunny-site .sunny-footer .sunny-footer-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  body.sunny-site .sunny-footer .sunny-footer-grid > div{min-width:0}
  body.sunny-site .sunny-footer h3{font-size:24px!important;line-height:1.3;word-break:normal;overflow-wrap:normal;hyphens:none;margin:0 0 14px!important}
  body.sunny-site .sunny-footer :is(p,li){font-size:14px;line-height:1.65}
  body.sunny-site .sunny-footer a{overflow-wrap:anywhere}
  body.sunny-site .sunny-footer li a{display:inline-block;padding-block:5px}
  body.sunny-site .sunny-footer .sunny-whatsapp-footer{display:flex;max-width:100%;width:100%;gap:8px;padding:11px 12px;font-size:14px;text-align:center;white-space:normal}
  body.sunny-site .sunny-whatsapp-footer > span{flex-shrink:0}
  body.sunny-site .sunny-footer-logo{max-width:100%;height:auto}
  body.sunny-site .sunny-regional-links summary{font-size:15px;line-height:1.6;white-space:normal;overflow-wrap:normal}
  body.sunny-site .sunny-regional-links ul{columns:1}
  body.sunny-site .sunny-copyright{line-height:1.7;overflow-wrap:anywhere}
}

@media (max-width:1100px){
  body.sunny-site #sunny-main :is(h1,h2,h3){white-space:normal;word-break:normal;overflow-wrap:break-word;hyphens:auto;text-wrap:balance}
  body.sunny-site #sunny-main .sunny-button{max-width:100%;white-space:normal;text-align:center}
  body.sunny-site #sunny-main .sunny-button .sunny-arrow{flex-shrink:0}
  body.sunny-site .sunny-nav.is-open{max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
}
@media (min-width:768px) and (max-width:1100px){
  body.sunny-site #sunny-main h1{font-size:clamp(32px,4vw,42px);line-height:1.2}
  body.sunny-site #sunny-main h2{font-size:clamp(27px,3.2vw,34px);line-height:1.25}
}
@media (min-width:768px) and (max-width:900px){
  body.sunny-site #sunny-main :is(.sa-hero,.sa-planning,.sunny-audio-hero,.sunny-audio-personal,.sunny-audio-planning,.sb-hero,.sb-planning,.sc-hero,.sc-sound,.sc-planning,.sf-hero,.sf-music,.fb-hero,.vg-hero,.vg-further,.si-intro,.sunny-love-hero,.sunny-love-details,.sm-hero,.sm-attitude,.sp-hero,.sp-music,.sr-hero,.sr-next,.ss-hero,.ss-planning,.tp-hero,.tp-second,.st-hero,.sw-intro,.sw-music,.sw-tech,.sunny-fb-hero,.sunny-fb-technology,.sunny-fb-print,.sunny-about-intro,.sunny-about-experience,.sunny-about-trust,.sunny-costs-intro,.swir-detail,.sunny-wir-feature,.spo-intro,.sw-portal-intro){grid-template-columns:minmax(0,1fr);gap:28px}
  body.sunny-site #sunny-main :is(.tp-equipment,.st-components,.sunny-audio-memories,.sa-grid){grid-template-columns:repeat(2,minmax(0,1fr))}
  body.sunny-site #sunny-main :is(.sa-hero,.sb-hero,.sc-hero,.sf-hero,.sp-hero,.sm-hero,.ss-hero,.st-hero,.tp-hero,.sw-intro)>figure{max-width:540px;width:100%;justify-self:center}
}
@media (max-width:767px){
  body.sunny-site #sunny-main h1{font-size:clamp(29px,6.7vw,36px);line-height:1.2;letter-spacing:-.3px}
  body.sunny-site #sunny-main h2{font-size:clamp(25px,5.7vw,29px);line-height:1.28;letter-spacing:-.2px}
  body.sunny-site #sunny-main h3{font-size:clamp(21px,4.9vw,23px);line-height:1.3}
  body.sunny-site #sunny-main .shw-heading h2,
  body.sunny-site.page-id-170 #sunny-main .swir-hero h2{font-size:clamp(25px,5.7vw,29px)!important}
  body.sunny-site #sunny-main :is(.sunny-costs,.sunny-about,.sunny-event-profile) .sunny-button{white-space:normal}
  body.sunny-site #sunny-main .sunny-costs-jump{white-space:normal}
  body.sunny-site #sunny-main .sunny-value{grid-template-columns:48px minmax(0,1fr);gap:14px}
  body.sunny-site #sunny-main .sunny-value-icon{width:46px;height:46px}
  body.sunny-site #sunny-main .sunny-prose a{overflow-wrap:anywhere}
}
@media (max-width:600px){
  body.sunny-site #sunny-main :is(.sunny-mini-grid,.st-equipment-grid){grid-template-columns:minmax(0,1fr)}
  body.sunny-site #sunny-main .sunny-location-list{columns:1}
}
@media (max-width:480px){
  body.sunny-site #sunny-main :is(.spo-features,.sw-portal-functions dl){grid-template-columns:minmax(0,1fr)}
}

/* Keep the coastal background stable when mobile browser bars collapse. */
@media (max-width:767px), (max-width:1100px) and (max-height:600px) and (orientation:landscape) and (pointer:coarse){
  body.sunny-site::before{top:0;right:0;bottom:auto;left:0;height:100vh;height:100lvh;background-position:center center}
}