/* =========================================
   60-services-carousel.css — CLEAN v2
   Markup:
   <nav class="wp-svc-carousel"><div class="wp-svc-track">...<a class="wp-svc-card">...</a></div></nav>
   + JS inserts: <div class="wp-svc-sb">...</div> right after carousel
   ========================================= */

/* ===== Carousel container ===== */
.wp-svc-carousel{
  max-width: var(--frame-max);
  margin: 0 auto;
  padding: 0 var(--pad-x-desktop);

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  touch-action: auto;
  overscroll-behavior-x: auto;

  scroll-snap-type: x mandatory;

  /* hide native scrollbar everywhere */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge/IE */
}
.wp-svc-carousel::-webkit-scrollbar{
  display: none;
  height: 0;
}

.hdr-sticky-wrap .wp-svc-carousel{
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

/* Mobile: same width logic as topbar */
@media (max-width:1140px){
  .wp-svc-carousel{
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 var(--pad-x-mobile);
  }
}

/* ===== Track ===== */
.wp-svc-track{
  display: flex;
  flex-wrap: nowrap;
  gap: var(--svc-gap);

  width: max-content;
  margin: 0 auto;

  padding-bottom: 6px; /* breathing room above custom bar */
}

/* ===== Cards ===== */
.wp-svc-card{
  position: relative;
  flex: 0 0 auto;

  width: var(--svc-card);
  aspect-ratio: 1 / 1;

  border: 1px solid rgba(0,0,0,.18);
  border-radius: 8px;
  background: #fff;

  text-decoration: none;
  color: inherit;
  overflow: hidden;

  scroll-snap-align: center;
  scroll-snap-stop: normal;

  -webkit-user-drag: none;
  user-select: none;
}

@media (min-width:1025px){
  .wp-svc-card{ width: var(--svc-card-desktop); }
}

/* Image (from inline --svc-img) */
.wp-svc-img{
  position: absolute;
  inset: 0;
  background-image: var(--svc-img);
  background-size: cover;
  background-position: center;
}

/* Label */
.wp-svc-label{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  min-height: 12px;
  padding: 3px 0;

  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(2px);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;

  border-radius: 0 0 8px 8px;
  margin: 0 !important;
}

@media (max-width:1140px){
  .wp-svc-label{
    font-size: 11px;
    transform: translateY(0.5px);
  }
}

/* Active */
.wp-svc-card.is-active{
  border: var(--svc-active-w, 2px) solid var(--svc-active, #ff3b30);
}

/* ===== Desktop UX ===== */
@media (hover:hover) and (pointer:fine){
  .wp-svc-carousel{
    cursor: grab;
    scroll-snap-type: x proximity; /* less “grid” feel on desktop */
  }
  .wp-svc-carousel.is-dragging{ cursor: grabbing; }

  /* safety: if JS adds is-dragging only, snap off during drag */
  .wp-svc-carousel.is-dragging{
    scroll-snap-type: none;
  }
}

/* =========================================
   Custom thin scrollbar under carousel
   ========================================= */
:root{
  --svc-sb-gap: 2px;
  --svc-sb-line: 1px;                 /* visible thickness */
  --svc-sb-hit: 10px;                 /* clickable/drag area height */
  --svc-sb-track: rgba(0,0,0,.12);
  --svc-sb-thumb: rgba(0,0,0,.40);
  --svc-sb-thumb-ratio: 0.55;
}

/* Wrapper */
.wp-svc-sb{
  max-width: var(--frame-max);
  margin: var(--svc-sb-gap) auto 0;
  padding: 0 var(--pad-x-desktop);
  box-sizing: border-box;
}

@media (max-width:1140px){
  .wp-svc-sb{
    max-width: none;
    width: 100%;
    margin: var(--svc-sb-gap) 0 0;
    padding: 0 var(--pad-x-mobile);
  }
}

/* Track: big hit area, thin line inside */
.wp-svc-sb__track{
  position: relative;
  height: var(--svc-sb-hit);
  background: transparent;
}

.wp-svc-sb__track::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--svc-sb-line);
  margin-top: calc(var(--svc-sb-line) / -2);
  background: var(--svc-sb-track);
  border-radius: 999px;
}

/* Thumb: thin line centered */
.wp-svc-sb__thumb{
  position: absolute;
  left: 0;
  top: 50%;
  height: var(--svc-sb-line);
  margin-top: calc(var(--svc-sb-line) / -2);
  width: 25%; /* JS will set exact px */
  background: var(--svc-sb-thumb);
  border-radius: 999px;
  transform: translateX(0);
  z-index: 1;
}

.wp-svc-sb.is-hidden{
  display: none !important;
}

/* --- FIX: custom scrollbar collapsing in flex header --- */
.wp-svc-sb{
  display: block;
  width: 100%;
  flex: 0 0 100%;     /* åñëè ðîäèòåëü flex — ðàñòÿãèâàåì íà âñþ ñòðîêó */
  min-width: 0;
}

.wp-svc-sb__track{
  width: 100%;
}