/* St. Francis de Sales Parish School - home page photo/text overlap fix
   ----------------------------------------------------------------
   The white text panel sat on top of two feature photos, because
   content/override.css pulls it over the photo with a negative margin:

     .sf-info-container .g-array-item > .g-array-item-text { margin-left: -8% !important; }
     .spirit-container  .g-array-item > .g-array-item-text { margin-right: -5% !important; }

   This file removes those negative margins and splits each row 55% photo /
   45% panel, so the panel sits beside the photo instead of on it.
   The stacked (mobile/tablet) layout also gets a 16px gap instead of the
   50px overlap.

   Selectors carry the section id (#g-above / #g-extension) so they beat the
   rules in override.css on specificity, as well as by load order
   (linked at asset priority 0, after the priority-1 Override row).
   Scope: home page only (body.site-home).
   ---------------------------------------------------------------- */

/* "Christ-Centered Faith & Academic Excellence in Lake Geneva" - section g-above */
html body.site-home #g-above .sf-info-container .g-array-item-image {
  flex: 0 0 55%;
}
html body.site-home #g-above .sf-info-container .g-array-item > .g-array-item-text {
  flex: 0 0 45%;
  margin-left: 0 !important;
}

/* "Athletics, Clubs & School Spirit" - section g-extension */
html body.site-home #g-extension .spirit-container .g-array-item-image {
  flex: 0 0 55%;
}
html body.site-home #g-extension .spirit-container .g-array-item > .g-array-item-text {
  flex: 0 0 45%;
  margin-right: 0 !important;
}

/* Stacked layouts (<= 815px): photo full width, panel below it - no overlap */
@media (max-width: 50.99rem) {
  html body.site-home #g-above .sf-info-container .g-array-item > .g-array-item-text {
    margin: 16px auto 0 !important;
  }
  html body.site-home #g-extension .spirit-container .g-array-item {
    padding-top: 386px;
  }
  html body.site-home #g-extension .spirit-container .g-array-item > .g-array-item-text {
    width: 92%;
    margin: 0 auto !important;
  }
}

/* Desktop side-by-side layout: 24px gutter between the photo and the panel.
   (Stacked layouts below 51rem keep their own 16px gap.) */
@media (min-width: 51rem) {
  html body.site-home #g-above .sf-info-container .g-array-item > .g-array-item-text {
    padding-left: 24px !important;
  }
  html body.site-home #g-extension .spirit-container .g-array-item > .g-array-item-text {
    padding-right: 24px !important;
  }
}