/* Layout */
.bt-cs { margin-top: 7%; position: relative; }

/* Card structure */
.bt-inner { display: flex !important; flex-direction: column; height: 100% !important; position: relative; z-index: 2; }
.bt-center { flex-shrink: 0 !important; }
.bt-title { flex-grow: 1 !important; display: flex !important; align-items: center; justify-content: center; }

/* Modern heading (fix z-index syntax) */
.bt-cs h3{
  color:#003d7c !important;
  background:linear-gradient(to bottom,#f8f9fa 0%,#e9ecef 100%) !important;
  border:1px solid #dee2e6 !important;
  font-weight:700 !important;
  z-index:0 !important; /* <- was z-index= 0 */
}

/* Arrows */
.bt-cs .next, .bt-cs .prev{
  transition: opacity .3s ease, background-color .3s ease;
  background-color: rgba(0,61,124,.05) !important;
}
.bt-cs .next:hover, .bt-cs .prev:hover{ background-color: rgba(0,61,124,.15) !important; }
.bt-cs a.next{ border-radius: 8px 0 0 8px; }
.bt-cs a.prev{ border-radius: 0 8px 8px 0; }

/* Numbered pagination — keep it BELOW cards */
.bt-cs .bt_handles_num{
  position: relative;
  z-index: 1 !important;            /* lower than .bt-inner (2) so it can’t overlay */
  margin-top: .5rem;                 /* nudge away from content on small screens */
}
.bt_handles_num li a{
  color:#003d7c !important;
  font-size:14px !important;
  border:2px solid #003d7c !important;
  border-radius:25% !important;
  background:#ffffff !important;
  /* avoid "all" to prevent layout/size transitions turning tiny drags into taps */
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease !important;
}
.bt_handles_num li a:hover{
  background:#e6f0f8 !important;
  transform:scale(1.08);
  box-shadow:0 4px 8px rgba(0,61,124,.2) !important;
}
.bt_handles_num li.current a{
  background:#003d7c !important;
  color:#fff !important;
  box-shadow:0 3px 10px rgba(0,61,124,.4) !important;
}

/* Cards look */
.bt-cs .bt-inner{
  background:#fff !important;
  border-radius:15px !important;
  border:1px solid #f5f5f5;
  box-shadow:6px 6px 8px rgba(0,61,124,.08) !important;
  transition: box-shadow .3s ease, transform .3s ease;
  overflow:hidden !important;
  padding:0 !important;
  margin:10px !important;
}
.bt-cs .bt-inner:hover{ box-shadow:0 4px 16px rgba(0,61,124,.15) !important; transform:translateY(-2px); }

/* Images */
.bt-cs .bt-inner img{
  outline:none !important;
  border:none !important;
  border-radius:0 !important;
  transition: transform .4s ease, opacity .3s ease;
  margin:0 !important;
  display:block !important;
  max-width:100% !important;
  width:100% !important;
}
.bt-cs .bt-inner a:hover img{ transform:scale(1.03); opacity:.95; }

/* Titles & category */
.bt-cs .bt-inner .bt-title{
  font-size:calc(10px + .5vw) !important;
  color:#003d7c !important;
  font-weight:700 !important;
  line-height:130% !important;
  padding:16px 12px !important;
  text-align:center;
  transition: color .3s ease;
}
.bt-cs .bt-inner a:hover .bt-title{ color:#003d7c !important; }
.bt-cs .bt-inner .bt-category{
  color:#6c757d !important;
  font-weight:600 !important;
  font-size:13px !important;
  padding:0 12px 8px !important;
  text-align:center;
}

/* Center section */
.bt-cs .bt-center{ background:transparent !important; overflow:hidden !important; padding:0 !important; }

/* Hide separators */
.bt-row-separate{ display:none !important; }

/* Bullet pagination (dot variant) */
.bt_handles li a{
  width:12px !important; height:12px !important;
  background:rgba(255,255,255,.6) !important;
  border:2px solid #003d7c !important;
  border-radius:50% !important;
  padding:0 !important;
  transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease !important;
}
.bt_handles li a:hover{ background:rgba(0,61,124,.3) !important; transform:scale(1.2); }
.bt_handles li.current a{ background:#003d7c !important; box-shadow:0 2px 8px rgba(0,61,124,.4) !important; }

/* Touch-specific tweaks: remove hover growth so a light scroll isn’t read as a tap */
@media (hover: none) and (pointer: coarse){
  .bt_handles_num li a:hover,
  .bt_handles li a:hover{
    transform:none !important;
    box-shadow:none !important;
  }
  /* If any module positions numbers on top, push them further down on touch */
  .bt-cs .bt_handles_num{ z-index: 0 !important; margin-top: .75rem; }
}

/* Spacing by viewport */
@media only screen and (max-width:1000px){ .bt-cs{ margin-top:12%; } }
@media only screen and (max-width:600px){ .bt-cs{ margin-top:17%; } }

/* ===== TOUCH FIX: favor vertical panning & remove tap quirks ===== */
.bt-cs,
.bt-cs .bt-inner {
  /* Prefer vertical scrolling gestures here */
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}

/* Links/buttons inside the carousel: allow scrolling, not pinch/zoom */
.bt-cs a,
.bt-cs button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; /* removes blue flash on iOS */
}

/* On touch devices, disable hover-based animations that can feel like a tap */
@media (hover: none) and (pointer: coarse){
  .bt-cs .bt-inner:hover,
  .bt-cs .bt-inner a:hover,
  .bt-cs .bt-inner a:hover img,
  .bt_handles_num li a:hover,
  .bt_handles li a:hover {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
  }

  /* Prevent subtle image scale on touch that can “grab” the link */
  .bt-cs .bt-inner img {
    transition: none !important;
  }

  /* Navigation arrows: only react when explicitly tapped */
  .bt-cs .next, .bt-cs .prev {
    /* keep visual, but make sure they don't steal scroll gestures */
    touch-action: manipulation;
  }
}

/* put this AFTER your current css */
@media (hover:none) and (pointer:coarse){
  /* Favor vertical scroll overall */
  .bt-cs, .bt-cs .bt-inner { touch-action: pan-y; }

  /* --- LIFT-OFF BUFFER above pagination --- */
  .bt-cs .bt_handles_num{
    margin-top: 1.25rem !important;   /* extra visual gap */
    position: relative;
  }
  .bt-cs .bt_handles_num::before{
    content:"";
    display:block;
    height:56px;                       /* buffer zone so lift-off isn't on links */
  }

  /* Make pager links a bit less “grabbable” on touch */
  .bt_handles_num li a{
    transform:none !important;
    box-shadow:none !important;
    transition:none !important;
    padding:6px 8px !important;        /* slightly smaller hit box */
    touch-action: manipulation;
  }

  /* Kill hover-ish effects on touch */
  .bt_handles_num li a:hover,
  .bt_handles li a:hover,
  .bt-cs .bt-inner a:hover,
  .bt-cs .bt-inner a:hover img{
    transform:none !important;
    box-shadow:none !important;
  }
}