/* ─── Mobile Card Carousel ───
   Opt-in via .mobile-carousel on any existing card grid container.
   Active ≤768px; collapses gracefully back to original grid above that.
   Pairs with carousel.js to drive the progress bar below the carousel.
*/

@media (max-width: 768px) {
  .mobile-carousel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px !important;
    /* Bleed to the screen edge so the peek sits flush */
    margin-left: -24px !important;
    margin-right: -24px !important;
    padding: 4px 24px 6px !important;
    /* CRITICAL: scroll-snap must respect the padding, otherwise the first card
       snaps to scrollLeft 0 and slams against the container's left edge */
    scroll-padding-left: 24px;
    scroll-padding-right: 24px;
    /* Kill grid behavior on container */
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-flow: row !important;
    border-top: 0 !important;
    /* Subtle right-edge fade so users sense more content */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), rgba(0,0,0,0.5) 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), rgba(0,0,0,0.5) 100%);
  }
  .mobile-carousel::-webkit-scrollbar { display: none; }
  .mobile-carousel > * {
    flex: 0 0 86% !important;
    max-width: 86% !important;
    scroll-snap-align: start;
    /* Neutralize "row-style" lists (border-bottom rows, side-by-side borders, etc.) */
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    margin: 0 !important;
  }
  /* When a row-style list (areas) becomes a carousel, give items a card chrome */
  .areas-list.mobile-carousel > .area-row {
    padding: 22px 20px !important;
    border: 1px solid #ebe9f3 !important;
    border-radius: 8px;
    background: var(--white, #fff);
    align-self: stretch;
  }
  /* Service-card check-list lists already have card chrome; keep their bottom borders inside the carousel
     but lift them off the strict row look. */
  .why-grid.mobile-carousel > .why-feature,
  .values-grid.mobile-carousel > .value,
  .services-grid.mobile-carousel > .service-card {
    padding: 28px 22px !important;
    border: 1px solid #ebe9f3 !important;
    border-radius: 8px;
    background: var(--white, #fff);
    align-self: stretch;
  }
  .reviews-grid.mobile-carousel > .rev-card {
    align-self: stretch;
  }

  /* ─── Progress indicator ─── */
  .carousel-progress {
    display: block;
    position: relative;
    height: 3px;
    background: rgba(7, 0, 77, 0.10);
    border-radius: 3px;
    margin: 28px auto 0;
    max-width: 180px;
    overflow: hidden;
  }
  .carousel-progress-bar {
    position: absolute;
    top: 0;
    height: 100%;
    background: #E08E45;
    border-radius: 3px;
    width: var(--carousel-width, 33%);
    left: var(--carousel-offset, 0%);
    transition: left 0.14s ease-out, width 0.14s ease-out;
  }
  /* Dark-background variant (testimonials on navy, etc.) */
  .carousel-progress.on-dark { background: rgba(255, 255, 255, 0.12); }
}

/* Hide the indicator entirely on desktop */
@media (min-width: 769px) {
  .carousel-progress { display: none; }
}