/* ============================================================
   Mahaney Madness — mobile swipe carousel
   Active at ≤767px ONLY. Above that, the original layout
   (grid / flex / stacked sections) is left completely untouched.
   Markup:
     <div class="mcar [mcar--ondark]">
       <div class="mcar__track"> … each child .mcar__slide … </div>
       <div class="mcar__dots"></div>
     </div>
   ============================================================ */
.mcar { position: relative; }
.mcar__dots { display: none; }

@media (max-width: 767px) {
  .mcar { overflow: hidden; }

  .mcar__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mcar__track::-webkit-scrollbar { display: none; width: 0; height: 0; }

  .mcar__track > * {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .mcar__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    padding: 20px 0 4px;
  }
  .mcar__dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: rgba(20,23,31,0.22);
    transition: background .25s ease, width .25s ease;
  }
  .mcar__dot.is-active { background: var(--blue, #0047AB); width: 22px; }

  /* dots sitting on a blue / dark surface */
  .mcar--ondark .mcar__dot { background: rgba(255,255,255,0.34); }
  .mcar--ondark .mcar__dot.is-active { background: #fff; }
}