/* Override layer (loaded last): replaces the jQuery-plugin layouts (masonry/slick) with
   flexbox + Embla, reusing all the card/section styling from base.css/page_home.css.

   Original slider behaviour (from js/scripts.js):
   - .m-slider       -> mobileFirst, unslicked at >=768px  => desktop = 3-col flex grid (all items).
                        Rendered as a plain grid (no Embla, no buttons — everything fits).
   - .regions-slider -> slick slidesToShow: 4 (3 @1024, 2 @768, 1 @576)
   - .gallery-slider -> slick slidesToShow: 3 (2 @768, 1 @576)
   - .grid (WOA Today) -> masonry, 3 columns.

   Embla markup: .slider(.regions-slider|.gallery-slider) > .embla > .embla__container > .embla__slide
   The .slider wrapper holds the prev/next arrow buttons (siblings of the .embla viewport). */

/* masonry.js -> flexbox for static grids */
.grid {
  display: flex;
  flex-wrap: wrap;
}

/* slider wrapper = positioning context for the absolute arrow buttons */
.slider {
  position: relative;
}
.embla__container {
  display: flex;
}

/* regions: .blockimg children -> add the original 20px gutter, 4 across */
.regions-slider .embla__slide {
  flex: 0 0 25%;
  padding-left: 20px;
  padding-right: 20px;
}
.regions-slider .embla__slide > .blockimg {
  width: 100%;
}

/* gallery (testimonial/devotional): .grid-item children already carry a 20px gutter, 3 across */
.gallery-slider .embla__slide {
  flex: 0 0 33.333%;
}
.gallery-slider .embla__slide > .grid-item,
.gallery-slider .embla__slide > .blockimg {
  width: 100%;
}

/* m-slider as a carousel (e.g. "One Body in Christ" when mode=carousel): 3 across, scrollable.
   Neutralize page_home's grid `.m-slider{display:flex;flex-wrap;margin:-20px}` on the carousel
   wrapper only — the plain (non-.slider) `.m-slider` grid keeps its flex-wrap layout. */
.slider.m-slider {
  display: block;
  margin: 0;
}
.m-slider .embla__slide {
  flex: 0 0 33.333%;
}
.m-slider .embla__slide > .slide {
  width: 100%;
}
@media (max-width: 767px) {
  .m-slider .embla__slide { flex-basis: 50%; }
}
@media (max-width: 575px) {
  .m-slider .embla__slide { flex-basis: 100%; }
}

/* The region slider reuses the m-slider design; match the One Body slider width
   (override the regions' wider 2400px slider-container). */
.regions .slider-container {
  max-width: 1500px;
}

/* Keep the regions accent text ("Bible Centered" / "All Nations") horizontal (was rotate(-5deg)). */
.regions .special {
  transform: none;
}

@media (max-width: 1024px) {
  .regions-slider .embla__slide { flex-basis: 33.333%; }
}
@media (max-width: 767px) {
  .regions-slider .embla__slide { flex-basis: 50%; }
  .gallery-slider .embla__slide { flex-basis: 50%; }
}
@media (max-width: 575px) {
  .regions-slider .embla__slide { flex-basis: 100%; }
  .gallery-slider .embla__slide { flex-basis: 100%; }
}

/* Match the original slider inset: sliders live in `.slider-container` (max-width 1500),
   and slick's `.slick-list` adds 100px side padding at >=1300px. Reproduce that on the
   Embla viewport so the first box starts at the same x as the original. */
@media (min-width: 1300px) {
  .slider-container .embla {
    padding-left: 100px;
    padding-right: 100px;
  }
}

/* Prev/next arrows reuse base.css `.slick-arrow`. At >=1200px base.css hides them and reveals
   on `.gallery-slider:hover`; extend that to every `.slider` wrapper (incl. regions). */
@media (min-width: 1200px) {
  .slider:hover .slick-arrow {
    opacity: 1;
    visibility: visible;
  }
  .slider:hover .slick-disabled {
    opacity: 0;
    visibility: hidden;
  }
}

/* Resources overlay cards keep the original aspect ratio over the generic m-slider rule */
.h-resources .m-slider .blockimg {
  padding-bottom: 112%;
}

/* Footer bottom bar: `.space-between` is referenced in the original markup but never defined.
   Push the copyright to the right of the bottom links on wide screens. */
.space-between {
  justify-content: space-between;
}