/* Team Fitlicious Carousel (namespaced) */
.tf-carousel { position:relative; padding:2rem 0; background:#fff; }
.tf-carousel .container { position:relative; }

/* Force the track to be a horizontal grid with 3 columns visible */
.tf-slides{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc(100% / 3);
  gap:1rem;
  scroll-snap-type:x mandatory;
  overflow-x:auto;              /* was hidden */
  padding-bottom:.25rem;
  -ms-overflow-style:none;      /* hide scrollbar (IE/Edge) */
  scrollbar-width:none;         /* hide scrollbar (Firefox) */
}
.tf-slides::-webkit-scrollbar{ display:none }  /* hide scrollbar (Chrome/Safari) */


/* Each cell */
.tf-slide{
  scroll-snap-align:center;
  position:relative;
  overflow:hidden;
  border-radius:1rem;
}

/* Make images fill their cell and cap their visual height */
.tf-slide img{
  display:block;
  width:100%;
  height:300px;                /* adjust to taste */
  object-fit:cover;            /* crop instead of stretching */
  border-radius:1rem;
}

/* Nav + dots */
.tf-nav{ position:absolute; inset:0; pointer-events:none; }
.tf-nav button{
  pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.08);
  width:42px; height:42px; border-radius:999px; display:grid; place-items:center; cursor:pointer;
}
.tf-prev{ left:.25rem } .tf-next{ right:.25rem }

.tf-dots{ display:flex; gap:.4rem; justify-content:center; margin-top:1rem; }
.tf-dots .dot{ width:8px; height:8px; border-radius:999px; background:#e5e7eb; border:none; }
.tf-dots .dot.active{ background: var(--accent, #ef4444); }

/* Responsive */
@media (max-width:768px){
  .tf-slides{ grid-auto-columns:100%; }
  .tf-slide img{ height:240px; }
}
@media (min-width:1280px){
  .tf-slides{ grid-auto-columns: calc(100% / 4); }
}

/* Ensure arrow layer sits above slides and is clickable */
.tf-carousel { position: relative; }
.tf-slides   { position: relative; z-index: 1; }
.tf-nav      { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tf-nav button { z-index: 9999; }
  pointer-events: auto; /* re-enable clicks on buttons only */
}