/* ===========================
   Back Nine Kids Camps (scoped)
   =========================== */

.b9-kidcamps{
  --b9kc-text: rgba(255,255,255,0.92);
  --b9kc-muted: rgba(255,255,255,0.72);
  --b9kc-border: rgba(255,255,255,0.16);
  --b9kc-card: rgba(255,255,255,0.10);
  --b9kc-green: #8bc53f;
  --b9kc-bg: #0b0f14;

  color: var(--b9kc-text);
}

.b9-kidcamps *{ box-sizing:border-box; }
.b9-kidcamps img{ max-width:100%; height:auto; display:block; }
.b9-kidcamps a{ color:inherit; text-decoration:none; }

.b9kc-container{
  width: min(1415px, calc(100% - 2rem));
  margin-inline:auto;
  position: relative;
}

/* ---------- HERO ---------- */
/* We don't have the exact live hero image URL yet, so we provide a strong default.
   If you find the Elementor background-image URL like you did for tournaments,
   replace the background-image here for 1:1 match. */
.b9kc-hero{
  position: relative;
  min-height: clamp(560px, 78vh, 820px);
  display:flex;
  align-items:center;
  padding: clamp(2.5rem, 5vw, 5rem) 0;
  overflow:hidden;
  border-top:1px solid var(--b9kc-border);
  border-bottom:1px solid var(--b9kc-border);

  background:
    radial-gradient(900px 520px at 25% 12%, rgba(122,167,255,0.22), transparent 55%),
    radial-gradient(850px 520px at 85% 22%, rgba(85,214,167,0.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.35));
}

/* overlay for readability */
.b9kc-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.32);
  pointer-events:none;
}

.b9kc-card{
  position: relative;
  width: min(560px, 92vw);
  margin-left:auto;
  margin-right: clamp(0px, 3vw, 42px);
  border-radius: 18px;
  border:1px solid var(--b9kc-border);
  background: var(--b9kc-card);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
}

.b9-kidcamps :is(h1,h2,h3){ color: var(--b9kc-text) !important; }

.b9kc-h1{
  margin:0 0 0.7rem;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height:1.06;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.b9kc-h2{
  margin:0 0 1rem;
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  line-height:1.12;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.b9kc-copy{
  margin:0 0 1.35rem;
  color: var(--b9kc-muted) !important;
  line-height:1.6;
  max-width: 60ch;
}
.b9kc-actions{ display:flex; gap:0.75rem; flex-wrap:wrap; }

.b9kc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0.72rem 1.05rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border:1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.08);
  transition: transform 140ms ease, filter 140ms ease;
}
.b9kc-btn--primary{
  background: var(--b9kc-green);
  color: #0b0f14;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}
.b9kc-btn:hover{ transform: translateY(-1px); filter: brightness(1.04); }

/* ---------- GALLERY / CAROUSEL ---------- */
.b9kc-gallery{
  padding: clamp(2.25rem, 4vw, 3.25rem) 0;
  background: radial-gradient(900px 520px at 15% 10%, rgba(122,167,255,0.10), transparent 55%),
              radial-gradient(900px 520px at 85% 12%, rgba(139,197,63,0.10), transparent 60%),
              var(--b9kc-bg);
  border-bottom:1px solid var(--b9kc-border);
}

.b9kc-h3{
  margin: 0 0 1rem;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: 0.02em;
  text-align:center;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}

.b9kc-carousel{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items:center;
}

.b9kc-iconbtn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--b9kc-border);
  background: rgba(255,255,255,0.08);
  color: var(--b9kc-text);
  font-size: 1.2rem;
  cursor:pointer;
  transition: transform 140ms ease, background 140ms ease;
}
.b9kc-iconbtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.12); }

.b9kc-viewport{
  overflow:hidden;
  border-radius: 18px;
  border: 1px solid var(--b9kc-border);
  background: rgba(255,255,255,0.04);
}

.b9kc-track{
  display:flex;
  gap: 12px;
  padding: 0.85rem;
  margin:0;
  list-style:none;
  transform: translateX(0);
  transition: transform 280ms ease;
}

.b9kc-slide, .b9kc-slide-skip{
  flex: 0 0 auto;
  width: min(420px, 72vw);
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
}

.b9kc-slide img{
  width:100%;
  height: 260px;
  object-fit: cover;
}

/* dots */
.b9kc-dots{
  display:flex;
  justify-content:center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.b9kc-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--b9kc-border);
  background: rgba(255,255,255,0.10);
  cursor:pointer;
}
.b9kc-dot[aria-current="true"]{
  background: var(--b9kc-green);
  border-color: rgba(0,0,0,0.12);
}

@media (max-width: 900px){
  .b9kc-card{ margin-left: 0; margin-right: 0; }
  .b9kc-carousel{ grid-template-columns: 1fr; }
  .b9kc-iconbtn{ display:none; }
}

/* ===========================
   KIDS CAMPS – use LIVE hero background image
   =========================== */

.b9-kidcamps .b9kc-hero{
  background-image: url("https://thebackninegolf.com/wp-content/uploads/2025/01/the-back-nine-golf-simulator-indoors-topgolf-near-me-kids-family-x-golf-1.jpg") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;

  /* keep it tall like the live feel */
  min-height: clamp(560px, 78vh, 840px) !important;
}

/* Slightly tune overlay for readability on this photo */
.b9-kidcamps .b9kc-hero::before{
  background: rgba(0,0,0,0.38) !important;
}

/* Card positioning similar to tournaments (right-side panel) */
.b9-kidcamps .b9kc-card{
  margin-left: auto !important;
  margin-right: clamp(0px, 3vw, 42px) !important;
  width: min(560px, 92vw) !important;
}

/* CTA closer to live */
.b9-kidcamps .b9kc-btn--primary{
  background: #8bc53f !important;
  color: #0b0f14 !important;
  border-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}