/* ============================================================================
   BCM — COURT VISUALIZER (configurator) + services carousel variant
   Loaded only on index.html (on top of tokens/base/components).
   ============================================================================ */

/* ---- Layout ---- */
.viz{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6); align-items:center; }
@media (max-width:991px){ .viz{ grid-template-columns:1fr; gap:var(--s-4); align-items:start; } }

.viz-stage{
  background:var(--bcm-soft); border-radius:18px; padding:var(--s-5);
  box-shadow:var(--bcm-shadow-md); display:grid; place-items:center;
}
.viz-court{ width:100%; max-width:330px; --court:#2D6CB4; --kitchen:#1C4E8A; --surround:#3C6E47; --line:#FFFFFF; }
.viz-court svg{ width:100%; height:auto; display:block; }
.viz-court .surround,.viz-court .court,.viz-court .kitchen{ transition:fill .4s var(--ease-out); }

/* Mobile: pin the court preview under the nav and shrink it so the colour controls stay
   in view — you see the court update live as you tap. (Placed after the base .viz-stage /
   .viz-court rules so these overrides win the cascade.) */
@media (max-width:991px){
  .viz-stage{ position:sticky; top:72px; z-index:4; align-self:start; padding:var(--s-2); }
  .viz-court{ max-width:148px; }
}

/* ---- Controls ---- */
.viz-group{ margin-bottom:var(--s-4); }
.viz-group-label{
  display:block; font-family:var(--font-sans); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bcm-blue); margin-bottom:var(--s-2);
}
.type-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.type-tab{
  padding:10px 20px; border-radius:999px; border:1px solid var(--bcm-hairline); background:var(--bcm-white);
  font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--bcm-gray); cursor:pointer;
  transition:background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.type-tab:hover{ border-color:var(--bcm-blue); color:var(--bcm-blue); }
.type-tab.active{ background:var(--bcm-blue); color:#fff; border-color:var(--bcm-blue); }

/* Zone selector (segmented): choose which area you're coloring */
.zone-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.zone-tab{
  padding:9px 16px; border-radius:10px; border:1px solid var(--bcm-hairline); background:var(--bcm-white);
  font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--bcm-gray); cursor:pointer;
  transition:background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.zone-tab:hover{ border-color:var(--bcm-blue); color:var(--bcm-blue); }
.zone-tab.active{ background:var(--bcm-ink); color:#fff; border-color:var(--bcm-ink); }
.zone-tab[hidden]{ display:none; }

/* Current selection readout */
.viz-current{ font-family:var(--font-sans); font-size:14px; color:var(--bcm-gray); margin-top:var(--s-2); }
.viz-current b{ color:var(--bcm-ink); }

.swatches{ display:flex; gap:12px; flex-wrap:wrap; }
.swatch{
  width:42px; height:42px; border-radius:50%; border:2px solid var(--bcm-hairline); cursor:pointer;
  box-shadow:var(--bcm-shadow-sm); transition:transform .2s var(--ease-out), border-color .2s var(--ease-out);
}
.swatch:hover{ transform:scale(1.08); }
.swatch.active{ border-color:var(--bcm-ink); transform:scale(1.08); }
.swatch:focus-visible{ outline:2px solid var(--bcm-blue); outline-offset:3px; }

.viz-note{ font-family:var(--font-sans); font-size:13px; color:var(--bcm-gray); margin-top:var(--s-3); }

/* ============================================================
   SERVICES carousel variant — clean 3-up on desktop, swipe on mobile
   ============================================================ */
.carousel.cols-3 .carousel-track{ padding:12px 0 16px; }
.carousel.cols-3 .carousel-slide{ flex-basis:calc((100% - 2 * 16px) / 3); }
/* All three fit on desktop -> no buttons needed; mobile uses swipe */
.carousel.cols-3 .carousel-btn{ display:none; }
@media (max-width:991px){ .carousel.cols-3 .carousel-slide{ flex-basis:82%; } }
@media (max-width:560px){ .carousel.cols-3 .carousel-slide{ flex-basis:88%; } }