/* Social carousel. Full-bleed marquee that auto-scrolls every 1s (~30px/s translate)
   and stays draggable/swipeable. Edge fades cue horizontal motion. Follow-us CTA
   below with Facebook + Instagram buttons.
   ------------------------------------------------------------------------------- */

.social-carousel-section{position:relative;overflow:hidden}
.social-carousel-section .section-header{text-align:center;margin-left:auto;margin-right:auto}

/* Full-bleed viewport wrapper. Sits outside .container so images run edge to edge. */
.social-carousel{
  position:relative;
  margin:clamp(1.5rem,3vw,2.5rem) 0 clamp(1.75rem,3vw,2.75rem);
  width:100%;
  isolation:isolate;
}

.social-carousel__viewport{
  overflow:hidden;
  cursor:-webkit-grab;cursor:grab;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-y;
}
.social-carousel__viewport.is-dragging{cursor:-webkit-grabbing;cursor:grabbing}

.social-carousel__track{
  list-style:none;margin:0;padding:0;
  display:flex;
  gap:clamp(.75rem,1.4vw,1.25rem);
  width:max-content;
  will-change:transform;
  animation:socialMarquee 60s linear infinite;
}
@media(prefers-reduced-motion:reduce){
  .social-carousel__track{animation:none}
}
.social-carousel[data-paused="true"] .social-carousel__track{animation-play-state:paused}
.social-carousel__viewport.is-dragging .social-carousel__track{animation-play-state:paused}

@keyframes socialMarquee{
  from{transform:translate3d(0,0,0)}
  /* Track holds 24 slides (12 x 2). Shifting -50% loops perfectly. */
  to  {transform:translate3d(-50%,0,0)}
}

.social-carousel__slide{
  flex:0 0 auto;
  width:clamp(180px,26vw,300px);
  aspect-ratio:1/1;
  border-radius:14px;
  overflow:hidden;
  background:var(--rjw-cream);
  box-shadow:0 12px 28px -18px rgba(15,15,15,.35);
  position:relative;
}
.social-carousel__slide::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  pointer-events:none;
}
.social-carousel__slide img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  -webkit-user-drag:none;user-select:none;pointer-events:none;
  transition:transform .5s ease;
}
.social-carousel__slide:hover img{transform:scale(1.04)}

/* Edge fade masks so scrolling feels infinite. */
.social-carousel__edge{
  position:absolute;top:0;bottom:0;width:clamp(48px,7vw,120px);
  z-index:2;pointer-events:none;
}
.social-carousel__edge--left{
  left:0;
  background:linear-gradient(90deg,var(--rjw-paper) 0%,rgba(255,255,255,0) 100%);
}
.social-carousel__edge--right{
  right:0;
  background:linear-gradient(-90deg,var(--rjw-paper) 0%,rgba(255,255,255,0) 100%);
}
.section--cream .social-carousel__edge--left{
  background:linear-gradient(90deg,var(--rjw-cream) 0%,rgba(246,246,246,0) 100%);
}
.section--cream .social-carousel__edge--right{
  background:linear-gradient(-90deg,var(--rjw-cream) 0%,rgba(246,246,246,0) 100%);
}

/* CTA row */
.social-carousel__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  text-align:center;
  padding:clamp(.5rem,2vw,1rem) 0 0;
}
.social-carousel__cta-label{
  font-family:var(--font-body);
  font-size:.72rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--rjw-muted);
}
.social-carousel__buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.65rem;
}

/* Social buttons — override .btn defaults for tighter icon+label layout */
.btn--social{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.75rem 1.25rem;
  min-height:44px;
}
.btn--social .icon{
  width:18px;height:18px;
  flex-shrink:0;
}

@media(max-width:640px){
  .social-carousel__slide{width:200px}
  .social-carousel__track{animation-duration:45s}
  .social-carousel__buttons{width:100%;max-width:340px;flex-direction:column}
  .btn--social{width:100%;justify-content:center}
}