/* stage6 mobile repair: keep fixed-width template from overflowing on small screens */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  #header img, .header img { max-width: 100%; height: auto; }
  .wrapper, #page-bg, #block-main { max-width: 100%; }
  #top-b, #innertop { overflow: hidden; }
}

/* stage6: constrain banner + slide images on mobile only */
@media (max-width: 767px) {
  #top-b img, #banner img, .bannergroup img, .banneritem img,
  .flexslider .slides img, #innertop img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  #top-b .bannergroup, #top-b .banneritem, #top-b, #banner,
  .flexslider .slides li, #innertop {
    overflow: hidden !important;
  }
}

/* stage6: constrain article images on mobile only */
@media (max-width: 767px) {
  #content img, .item img, .items img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* stage8 (schedule fix, 2026-08-11): schedule article images have inline
   padding-left:180px which squeezes data-URI schedule images to ~148px on
   mobile. Reset only those article paragraphs and let schedule images use the
   full content width. Desktop is untouched (rules are mobile-only). */
@media (max-width: 767px) {
  #system .item .content p[style*="padding-left"] {
    padding-left: 0 !important;
    text-align: center !important;
  }
  #system .item .content img[src^="data:image"] {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }
  #system h1.title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word;
  }
}

/* stage6: remove non-existent bialy.jpg background from #content (keep #eee fallback) */
#content {
  background-image: none !important;
  background-color: #eee;
}

/* stage6: schedule/article inline images - full-width centered on mobile (no right-float) */
@media (max-width: 767px) {
  .item-page img, #content .item img, .item img {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}