/* =====================================================================
   ttlm — Campaign Pillars banner (img/pillars-banner.png, 2896x350)
   See custom-pillars-banner.html.

   Same width as the "Donations received" panel (1000px, inside .container).
     - > 1094px screen : static image fitted to that width, laid over the
       slider (which stays mounted — Owl sizes its items at init time, so it
       is never display:none).
     - <= 1094px screen: Owl Carousel "ticker": the banner stays 1000px wide
       (autoWidth) and scrolls sideways continuously; swipe/drag follows the
       finger, then the scroll resumes.
       (Breakpoint raised from 1000 to 1094: between those two widths
       Bootstrap's .container is narrower than the 1000px wrap, which made
       the static overlay render oddly — the ticker avoids that since it
       scrolls instead of being fitted to the container.)
   ===================================================================== */

.ttlm-pillars-banner {
  margin-bottom: 13px;
}

.ttlm-pillars-banner__wrap {
  position: relative; /* anchors the static image overlay */
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px; /* matches the panel's corners */
}

/* 4 flush items, each a 250px window onto the same image scaled to
   1000x121 (2896x350 at 1000 wide = 120.86px), shifted with the inline
   background-position — visually one continuous 1000px strip. Owl
   (autoWidth) reads the item width from here. */
.ttlm-pillars-banner__slide {
  width: 250px;
  height: 121px;
  background-image: url('/customizations/matching-template-0-ttlm/img/pillars-banner.png');
  background-size: 1000px 121px;
  background-repeat: no-repeat;
  user-select: none;
}

/* Static image: hidden on <= 1094px, shown over the slider above that,
   covering it edge to edge whatever the wrap's exact width. */
.ttlm-pillars-banner__static {
  display: none;
}

@media (min-width: 1094.02px) {
  .ttlm-pillars-banner__static {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
  }
}