/* ==========================================================
   Review wall — mobile slider
   assets/review-wall-mobile.css

   Desktop keeps the two drifting rows exactly as they are.
   Below 992px the first row becomes a swipeable, snapping
   slider and the second row is hidden.

   Assumes each .wall-row holds 5 real cards followed by the
   5 duplicates used for the seamless loop. The duplicates
   are hidden on mobile via :nth-child(n+6) so nobody swipes
   past the same review twice.

   If your card count ever changes, add class="rcard dup" to
   the duplicated cards and swap the nth-child rule below for
   .wall-row .rcard.dup{display:none}
   ========================================================== */

/* dots container — hidden on desktop, shown on mobile */
.wall-dots{display:none;}

@media (max-width: 991px){

  /* the edge fades belong to the marquee, not the slider */
  .wall::before,
  .wall::after{display:none;}

  /* one row is plenty on a phone */
  .wall-row.b{display:none;}

  /* stop the drift, become a scroller */
  .wall-row{
    animation:none !important;
    width:auto;
    margin:0;
    display:flex;
    gap:.75rem;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:1rem;
    padding:.4rem 1rem 1.1rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;                 /* Firefox */
  }
  .wall-row::-webkit-scrollbar{display:none;}   /* WebKit */

  /* cards size to the viewport, with the next one peeking in */
  .wall-row .rcard{
    flex:0 0 84%;
    width:auto;
    max-width:400px;
    scroll-snap-align:center;
    transform:none !important;
  }

  /* hide the loop duplicates */
  .wall-row .rcard:nth-child(n+6){display:none;}

  /* dots */
  .wall-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:.4rem;
    margin-top:.1rem;
  }
  .wall-dots button{
    width:8px;height:8px;border:0;padding:0;border-radius:50%;
    background:var(--line, #E4EAF1);
    transition:width .25s ease, background .25s ease;
  }
  .wall-dots button.on{
    width:22px;border-radius:99px;
    background:var(--teal, #369eaa);
  }

  /* a small nudge that it scrolls */
  .wall-hint{
    display:block;text-align:center;font-size:.74rem;
    color:var(--muted, #8B9AAC);margin-top:.55rem;
  }
  .wall-hint i{font-size:.8rem;vertical-align:-1px;}
}

@media (min-width: 992px){
  .wall-hint{display:none;}
}

@media (prefers-reduced-motion: reduce){
  .wall-row{scroll-behavior:auto;}
  .wall-dots button{transition:none;}
}