/* ==========================================================================
   QEMOSA redesign - SLIDER LAYER
   Author: TEDBG - https://tedbg.com
   Loaded after Journal's generated CSS (style.min.css) and after
   qemosa-r-base.css, so it wins at equal specificity.

   Scope: the two homepage banner sliders only.
     module 475 - "Banner bottom 1" (hero banner, top of page)
     module 464 - "Slider 1 home" (-67% promo banner, further down)

   IMPORTANT - these two modules are Journal's module-master_slider type,
   built on the MasterSlider plugin, NOT swiper. The real rendered DOM
   (confirmed from a live page capture) uses:
     .ms-nav-next / .ms-nav-prev      - prev/next arrows
     .ms-bullets > .ms-bullets-count > .ms-bullet(-selected)  - pagination
   Journal's own compiled stylesheet.css already defines base rules for
   these (found in live-theme/journal3/stylesheet/style.min.css):
     .module-master_slider .ms-nav-next, .ms-nav-prev { width:50px; height:50px;
       background:#fff; top:50%; position:absolute; ... }
     .module-master_slider .ms-bullets { right:auto; width:auto !important; }
     .module-master_slider .ms-bullet { border-width:0; border-radius:0;
       margin:0 !important; background:#fff; }
     .module-master_slider .ms-bullet-selected { background:#333; }
   We beat those below. The .swiper-button-prev / .swiper-button-next /
   .swiper-buttons / .swiper-pagination / .swiper-pagination-bullet rules
   are kept too as belt-and-braces in case a module is ever reconfigured to
   render through swiper instead of MasterSlider - on the current DOM they
   simply match nothing and cost nothing.

   Uses design tokens from qemosa-r-base.css: --qr-ink, --qr-line.
   Does not redefine tokens, does not touch any other module.
   ========================================================================== */

/* ----- 1. No arrows -------------------------------------------------------
   Hidden here as belt-and-braces; the arrows are also being disabled in the
   Journal module settings admin side, so on the live DOM these selectors
   may match nothing at all - that is fine, display:none on an element that
   is not present breaks nothing. */
html body .module-master_slider-475 .ms-nav-next,
html body .module-master_slider-475 .ms-nav-prev,
html body .module-master_slider-464 .ms-nav-next,
html body .module-master_slider-464 .ms-nav-prev,
html body .module-master_slider-475 .swiper-button-prev,
html body .module-master_slider-475 .swiper-button-next,
html body .module-master_slider-475 .swiper-buttons,
html body .module-master_slider-464 .swiper-button-prev,
html body .module-master_slider-464 .swiper-button-next,
html body .module-master_slider-464 .swiper-buttons {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* ----- 2. Pagination becomes a flat "scrollbar" bar row under the banner --
   MasterSlider positions .ms-bullets absolutely inside .ms-inner-controls-
   cont, a box whose rendered height equals the visible slide height (its
   only in-flow child is .ms-view). "top: 100%" therefore lands exactly on
   the banner's bottom edge regardless of the responsive image height, so we
   do not have to guess a pixel offset tied to the banner's own size. */
html body .module-master_slider-475 .ms-bullets,
html body .module-master_slider-464 .ms-bullets {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 14px 0 0 !important;
    width: 60% !important;
    max-width: 480px !important;
    z-index: 5 !important;
}

/* inner flex row that actually holds the .ms-bullet segments */
html body .module-master_slider-475 .ms-bullets .ms-bullets-count,
html body .module-master_slider-464 .ms-bullets .ms-bullets-count {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 6px !important;
    float: none !important;
}

/* each bullet becomes an equal-width flat bar segment, not a dot */
html body .module-master_slider-475 .ms-bullet,
html body .module-master_slider-464 .ms-bullet {
    flex: 1 1 0 !important;
    float: none !important;
    width: auto !important;
    height: 3px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--qr-line) !important;
    cursor: pointer !important;
}

html body .module-master_slider-475 .ms-bullet.ms-bullet-selected,
html body .module-master_slider-464 .ms-bullet.ms-bullet-selected {
    background: var(--qr-ink) !important;
}

/* make sure Journal's usual display:none on the pagination row (used on
   modules where bullets are disabled) never hides ours */
html body .module-master_slider-475 .swiper-pagination,
html body .module-master_slider-464 .swiper-pagination {
    display: flex !important;
}

html body .module-master_slider-475 .swiper-pagination-bullet,
html body .module-master_slider-464 .swiper-pagination-bullet {
    flex: 1 1 0 !important;
    height: 3px !important;
    margin: 0 3px !important;
    border-radius: 0 !important;
    background: var(--qr-line) !important;
    opacity: 1 !important;
}

html body .module-master_slider-475 .swiper-pagination-bullet-active,
html body .module-master_slider-464 .swiper-pagination-bullet-active {
    background: var(--qr-ink) !important;
}

/* reserve room under the banner so the bar (top:100% + 14px + 3px tall)
   never overlaps the next section - it sits inside this gap, not on top of
   whatever grid row comes after the slider */
html body .module-master_slider-475,
html body .module-master_slider-464 {
    margin-bottom: 24px !important;
}

/* ----- 3. Full-bleed banner, no gutter, no radius, no outer margin ------- */
html body .module-master_slider-475,
html body .module-master_slider-464,
html body .module-master_slider-475 .master-slider,
html body .module-master_slider-464 .master-slider,
html body .module-master_slider-475 .ms-container,
html body .module-master_slider-464 .ms-container,
html body .module-master_slider-475 .ms-view,
html body .module-master_slider-464 .ms-view,
html body .module-master_slider-475 .ms-slide,
html body .module-master_slider-464 .ms-slide,
html body .module-master_slider-475 .ms-slide img,
html body .module-master_slider-464 .ms-slide img {
    border-radius: 0 !important;
}

html body .module-master_slider-475,
html body .module-master_slider-464 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* full-bleed break-out to the viewport edges on mobile/tablet, same
   technique already used in qemosa-r-grid.css for the product grid */
@media (max-width: 991px) {
    html body .module-master_slider-475,
    html body .module-master_slider-464 {
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        padding: 0 !important;
    }
}

/* ----- 4. Desktop proportions -------------------------------------------- */
@media (min-width: 992px) {
    html body .module-master_slider-475 .ms-bullets,
    html body .module-master_slider-464 .ms-bullets {
        width: 50% !important;
        max-width: 600px !important;
    }
}