/* =========================
   Control IO — Hero & Spotlights
   ========================= */

/* Base tokens (inherits your theme vars if defined) */
:root{
  --cio-brand: #E17A30;          /* burnt orange */
  --cio-cream: #FFF7EE;
  --cio-tan: #FBE4C2;
  --cio-brown: #3D2B1F;
  --cio-surface: #FFFFFF;
  --cio-border: rgba(0,0,0,.08);
  --cio-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* Buttons */
.wbc-btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.65rem 1.05rem;font-weight:700;border:1px solid var(--cio-border);box-shadow:0 1px 2px rgba(0,0,0,.04);background:var(--cio-surface)}
.wbc-btn--primary{background:var(--cio-brand);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(225,122,48,.35)}
.wbc-btn--primary:hover{filter:brightness(.96)}
.wbc-btn--ghost{background:transparent}

/* ===== HERO ===== */
.wbc-hero{
  position:relative;
  display:grid;grid-template-columns:1.1fr .9fr;gap:32px;
  max-width:1200px;margin:28px auto;padding:0 24px
}
.wbc-hero__col{min-width:0}
.wbc-hero__title{font-size:clamp(38px,5vw,60px);line-height:1.05;margin:.15em 0;color:#111;letter-spacing:-.02em}
.wbc-hero__lead{font-size:clamp(17px,1.6vw,20px);color:rgba(0,0,0,.7);max-width:38ch;margin:.6rem 0 1.1rem 0}
.wbc-hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.wbc-hero__trust{display:flex;gap:1.2rem;flex-wrap:wrap;color:rgba(0,0,0,.7);font-size:14.5px}

.wbc-hero__orb{
  width:100%;aspect-ratio:1/1;border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--cio-tan));
  box-shadow:0 24px 60px rgba(61,43,31,.15), inset 0 0 40px rgba(255,255,255,.65);
}

@media (max-width:900px){
  .wbc-hero{grid-template-columns:1fr}
  .wbc-hero__orb{max-width:520px;margin:0 auto}
}

/* ===== SPOTLIGHT STACK ===== */
.wbc-spotlights{max-width:1200px;margin:16px auto 36px;padding:0 24px;display:flex;flex-direction:column;gap:18px}

.wbc-spotlight{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  background:linear-gradient(180deg,#fff, #fff);
  border:1px solid var(--cio-border);border-radius:20px;box-shadow:var(--cio-shadow);
  padding:18px;
}
.wbc-spotlight--neutral{background:linear-gradient(180deg,#fff,#fff)}
.wbc-spotlight--warm{background:linear-gradient(180deg,#fff, #FFF8F1)}

.wbc-spotlight--image-left{grid-template-columns:1fr 1.2fr}
.wbc-spotlight--image-right{grid-template-columns:1.2fr 1fr}
.wbc-spotlight--image-right .wbc-spotlight__media{order:2}
.wbc-spotlight--image-right .wbc-spotlight__body{order:1}

.wbc-spotlight__media{position:relative;border-radius:16px;background:#faf7f3;border:1px solid var(--cio-border);display:grid;place-items:center;overflow:hidden;min-height:240px}
.wbc-spotlight__media img{max-width:100%;height:auto;display:block}
.wbc-spotlight__placeholder{width:100%;height:100%;background:radial-gradient(circle at 30% 30%, #fff, #f6eadc)}

.wbc-badge{
  position:absolute;top:14px;left:14px;
  background: #111;color:#fff;
  border-radius:999px;padding:.28rem .6rem;font-size:12px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.wbc-spotlight--warm .wbc-badge{background:var(--cio-brand)}

.wbc-spotlight__body{display:flex;flex-direction:column;gap:.6rem;justify-content:center;padding:8px 10px}
.wbc-spotlight__title{font-size:clamp(22px,2.2vw,28px);margin:0;font-weight:800}
.wbc-spotlight__text{margin:0;color:rgba(0,0,0,.72);font-size:16px;line-height:1.6}
.wbc-spotlight__price{font-weight:800;font-size:18px}

.wbc-spotlight__cta{margin-top:.6rem}

@media (max-width:900px){
  .wbc-spotlight{grid-template-columns:1fr;gap:12px}
  .wbc-spotlight__media{order:1}
  .wbc-spotlight__body{order:2}
}