/* Responsive fixes — layout and design unchanged on desktop.
   Loaded last. */

/* Images now carry width/height attributes (prevents layout shift);
   keep their proportions wherever CSS sets only a width. */
:where(img[width][height]){height:auto}

/* Banner sections: show the full artwork at its real 16:9 shape instead of
   a fixed 800px crop (which cut the brand banners down to a slice on phones). */
.roister-hero-section{height:min(56.25vw,800px)!important;min-height:0!important}
.hero-bg-image img{height:100%!important}
@media (max-width:767px){
  .roister-hero-section{height:56.25vw!important}
  /* video banner gets a little more presence on phones */
  .roister-hero-section:has(.hero-bg-video){height:max(56.25vw,62vw)!important}
}

/* Safety net: nothing may cause sideways scrolling on small screens */
html,body{overflow-x:hidden;max-width:100%}
img,video,iframe{max-width:100%}

/* Comfortable tap targets on touch screens */
@media (max-width:991px){
  .footer-widget ul li a,.breadcrumb-list li a{display:inline-block;padding:4px 0}
}

/* Map: sensible height on every screen */
.roister-google-map iframe{width:100%;height:clamp(320px,45vw,480px);display:block}

/* banner title kept as styled text (the article title is the page heading) */
p.breadcrumb-title{color:#fff}