/* ============================================================
   AT Cabinetry — Design Studio
   Interactive customization x-ray. Loads only on /design-studio/
   and the homepage teaser. Builds on the global tokens in styles.css.
   ============================================================ */

/* ---- Intro ---- */
.studio-intro{background:var(--ink);color:var(--bone)}
.studio-intro .wrap{padding-block:clamp(3rem,7vw,5rem);max-width:var(--maxw);margin:0 auto}
.studio-intro .eyebrow{color:var(--brass-2)}
.studio-intro h1{font-size:clamp(2.4rem,5.6vw,4.2rem);margin-bottom:1.1rem;max-width:16ch}
.studio-intro p{max-width:60ch;color:#E8E2D6;font-weight:300;font-size:clamp(1.02rem,1.6vw,1.18rem)}
.studio-intro .studio-scrollcue{margin-top:2.2rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-light);display:inline-flex;align-items:center;gap:.6rem}
.studio-intro .studio-scrollcue::before{content:"";width:26px;height:1px;background:var(--brass-2)}

/* ============================================================
   LAYOUT — desktop: sticky stage + scrolling controls
   ============================================================ */
.studio{position:relative;background:var(--ink);color:var(--bone)}
.studio-inner{display:grid;grid-template-columns:1.02fr .98fr;align-items:start;max-width:1320px;margin:0 auto}

/* Sticky showroom stage */
.studio-stage-wrap{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,3vw,2.4rem)}
.studio-stage{position:relative;width:100%;max-width:560px;aspect-ratio:520/600;display:flex;align-items:center;justify-content:center}
.stage-glow{position:absolute;inset:-6% -2% 2%;background:radial-gradient(60% 55% at 50% 42%,rgba(196,116,78,.28),rgba(196,116,78,0) 70%);filter:blur(6px);pointer-events:none}
.studio-stage .cab{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 34px 60px rgba(0,0,0,.5))}

/* Live caption under the cabinet */
.stage-caption{position:absolute;left:0;right:0;bottom:-.4rem;text-align:center;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--muted-light);z-index:3;transition:.3s;padding:0 1rem}
.stage-caption b{color:var(--bone);font-weight:500}

/* X-ray toggle button on the stage */
.xray-toggle{position:absolute;top:.4rem;left:.4rem;z-index:6;display:inline-flex;align-items:center;gap:.5rem;background:rgba(247,244,237,.08);border:1px solid rgba(247,244,237,.28);color:var(--bone);border-radius:44px;padding:.5rem 1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.22s;backdrop-filter:blur(6px)}
.xray-toggle:hover{border-color:var(--brass-2);color:#fff}
.xray-toggle .dot{width:7px;height:7px;border-radius:50%;background:var(--brass-2);box-shadow:0 0 0 0 rgba(196,116,78,.55);transition:.3s}
.studio-stage.is-xray .xray-toggle{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.studio-stage.is-xray .xray-toggle .dot{background:var(--ink)}

/* ---- Controls column ---- */
.studio-controls{padding:clamp(1.4rem,4vw,3rem) clamp(1.2rem,4vw,3.4rem)}
.studio-step{min-height:82vh;display:flex;flex-direction:column;justify-content:center;padding-block:2rem;border-top:1px solid var(--line-dark)}
.studio-step:first-child{border-top:0}
.studio-step .step-no{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2);margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem}
.studio-step .step-no::before{content:"";width:22px;height:1px;background:var(--brass-2)}
.studio-step h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:.7rem;color:var(--bone)}
.studio-step .step-lede{color:#D9D2C4;font-weight:300;max-width:44ch;margin-bottom:1.8rem}

/* Option chips (door / hardware) */
.opts{display:flex;flex-wrap:wrap;gap:.65rem}
.opt{background:transparent;border:1px solid var(--line-dark);color:var(--bone);padding:.7rem 1.2rem;border-radius:44px;font-family:var(--sans);font-size:.9rem;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:.55rem}
.opt:hover{border-color:var(--brass-2)}
.opt.is-active{background:var(--brass);border-color:var(--brass);color:var(--ink);font-weight:600}
.opt .opt-ic{width:28px;height:22px;flex-shrink:0;border-radius:2px;opacity:.9}
.opt.is-active .opt-ic{opacity:1}

/* Finish swatches */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.8rem;max-width:520px}
.swatch{background:transparent;border:1px solid var(--line-dark);border-radius:8px;padding:.55rem;cursor:pointer;transition:.2s;text-align:left;display:flex;flex-direction:column;gap:.55rem}
.swatch:hover{border-color:var(--brass-2)}
.swatch.is-active{border-color:var(--brass);box-shadow:0 0 0 1px var(--brass)}
.swatch .chip-color{height:44px;border-radius:5px;border:1px solid rgba(0,0,0,.18)}
.swatch .swatch-name{font-size:.82rem;color:var(--bone);letter-spacing:.01em}
.swatch.is-active .swatch-name{color:var(--brass-2);font-weight:600}

/* X-ray step */
.studio-step--xray .xray-cta{display:inline-flex;align-items:center;gap:.7rem;background:transparent;border:1px solid var(--brass-2);color:var(--brass-2);padding:.9rem 1.5rem;border-radius:44px;font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:.22s;margin-bottom:2rem}
.studio-step--xray .xray-cta:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.xray-points{list-style:none;display:grid;gap:1.1rem;max-width:46ch}
.xray-points li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.xray-points .pt{width:34px;height:34px;border:1px solid var(--brass);flex-shrink:0;position:relative;border-radius:3px}
.xray-points .pt::before,.xray-points .pt::after{content:"";position:absolute;background:var(--brass)}
.xray-points .pt::before{left:50%;top:9px;bottom:9px;width:1px;transform:translateX(-50%)}
.xray-points .pt::after{top:50%;left:9px;right:9px;height:1px;transform:translateY(-50%)}
.xray-points h4{font-family:var(--sans);font-size:.98rem;color:var(--bone);margin-bottom:.15rem}
.xray-points p{font-size:.9rem;color:#C7BFB0}

/* ---- Live summary + CTA ---- */
.studio-summary{min-height:82vh;display:flex;flex-direction:column;justify-content:center;padding-block:2.4rem;border-top:1px solid var(--line-dark)}
.summary-card{background:rgba(247,244,237,.04);border:1px solid var(--line-dark);border-radius:12px;padding:clamp(1.6rem,3vw,2.4rem)}
.summary-card .step-no{color:var(--brass-2)}
.spec-list{list-style:none;display:grid;gap:.1rem;margin:1.2rem 0 1.8rem}
.spec-list li{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid var(--line-dark)}
.spec-list .spec-k{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-light)}
.spec-list .spec-v{font-family:var(--serif);font-size:1.25rem;color:var(--bone);text-align:right}
.summary-card .btn-solid{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.summary-card .btn-solid:hover{background:var(--brass-2);border-color:var(--brass-2)}
.summary-note{font-size:.86rem;color:var(--muted-light);margin-top:1rem}
.summary-actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}

/* ============================================================
   CABINET — door-style + finish + hardware + x-ray behavior
   ============================================================ */
/* panel detail visibility per door style */
.cab .panel-inset,.cab .panel-frame,.cab .panel-raised,.cab .panel-bead{display:none}
.cab.style-shaker .panel-inset,.cab.style-shaker .panel-frame{display:inline}
.cab.style-raised .panel-inset,.cab.style-raised .panel-frame,.cab.style-raised .panel-raised{display:inline}
.cab.style-inset .panel-inset,.cab.style-inset .panel-frame,.cab.style-inset .panel-bead{display:inline}
/* slab: faces only */

/* hardware visibility */
.cab .hw{display:none}
.cab.hw-bar .hw-bar-set{display:inline}
.cab.hw-knob .hw-knob-set{display:inline}
.cab.hw-cup .hw-cup-set{display:inline}
.cab.hw-edge .hw-edge-set{display:inline}

/* smooth finish + style transitions */
.cab .door-face,.cab .panel-inset,.cab .panel-raised rect,.cab .cab-drawer rect,.cab .hw rect,.cab .hw circle,.cab .hw path{transition:fill .5s ease,stroke .5s ease}

/* x-ray peel */
.cab .cab-interior{opacity:0;transition:opacity .7s ease .05s}
.cab .cab-doors .door,.cab .cab-drawer,.cab .cab-hardware{transition:transform .85s cubic-bezier(.22,.61,.36,1),opacity .55s ease}
.studio-stage.is-xray .cab .cab-interior{opacity:1}
.studio-stage.is-xray .cab .door-left{transform:translateX(-52px);opacity:.08}
.studio-stage.is-xray .cab .door-right{transform:translateX(52px);opacity:.08}
.studio-stage.is-xray .cab .cab-drawer{transform:translateY(-13px) scale(1.004);opacity:.08}
.studio-stage.is-xray .cab .cab-hardware{opacity:.08}

/* ============================================================
   CALLOUTS (HTML overlay, revealed with x-ray)
   ============================================================ */
.callout{position:absolute;z-index:5;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;pointer-events:none;max-width:190px}
.studio-stage.is-xray .callout{opacity:1;transform:none}
.studio-stage.is-xray .callout.c-dovetail{transition-delay:.25s}
.studio-stage.is-xray .callout.c-softclose{transition-delay:.4s}
.studio-stage.is-xray .callout.c-box{transition-delay:.55s}
.callout .co-line{position:absolute;background:var(--brass-2);height:1px;opacity:.7}
.callout .co-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--brass-2);box-shadow:0 0 0 4px rgba(196,116,78,.18)}
.callout .co-label{background:rgba(16,14,10,.88);border:1px solid var(--line-dark);border-left:2px solid var(--brass-2);border-radius:4px;padding:.5rem .7rem;backdrop-filter:blur(4px);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.callout .co-k{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-2);margin-bottom:.15rem}
.callout .co-t{display:block;font-family:var(--sans);font-size:.82rem;color:var(--bone);line-height:1.3}

/* positions (desktop) — anchored to cabinet regions */
.callout.c-dovetail{top:2%;right:-4%}
.callout.c-dovetail .co-line{width:44px;left:-46px;top:20px}
.callout.c-dovetail .co-dot{left:-52px;top:16px}
.callout.c-softclose{top:38%;right:-6%}
.callout.c-softclose .co-line{width:52px;left:-54px;top:20px}
.callout.c-softclose .co-dot{left:-60px;top:16px}
.callout.c-box{top:52%;left:-6%;text-align:right}
.callout.c-box .co-label{border-left:0;border-right:2px solid var(--brass-2)}
.callout.c-box .co-line{width:46px;right:-48px;top:20px}
.callout.c-box .co-dot{right:-56px;top:16px}

/* ============================================================
   HOMEPAGE TEASER variant
   ============================================================ */
.studio-teaser{background:var(--ink);color:var(--bone);border-radius:12px;overflow:hidden}
.studio-teaser .teaser-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(1.6rem,4vw,3.2rem)}
.studio-teaser .studio-stage{max-width:400px;margin:0 auto;aspect-ratio:520/600}
.studio-teaser .studio-stage .cab{filter:drop-shadow(0 24px 44px rgba(0,0,0,.45))}
.studio-teaser .eyebrow{color:var(--brass-2)}
.studio-teaser h2{color:var(--bone);font-size:clamp(1.9rem,3.4vw,2.8rem);margin-bottom:1rem}
.studio-teaser p{color:#D9D2C4;font-weight:300;max-width:44ch;margin-bottom:1.5rem}
.teaser-swatches{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.8rem}
.teaser-swatches button{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:.2s;padding:0}
.teaser-swatches button:hover{transform:scale(1.08)}
.teaser-swatches button.is-active{border-color:var(--brass-2);box-shadow:0 0 0 2px rgba(196,116,78,.3)}
.studio-teaser .btn-solid{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.studio-teaser .btn-solid:hover{background:var(--brass-2);border-color:var(--brass-2)}
.teaser-tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-light);margin-top:1.1rem;display:block}

/* ============================================================
   MOBILE — its own tuned experience (compact sticky stage,
   tap chips, tap-to-open x-ray, no scroll-scrub jank)
   ============================================================ */
@media(max-width:900px){
  .studio-inner{grid-template-columns:1fr;min-width:0;width:100%}
  /* min-width:0 lets grid items shrink below content width (kills the horizontal overflow) */
  .studio-stage-wrap{position:sticky;top:56px;height:auto;padding:1rem 1rem 2rem;min-width:0;max-width:100%;background:linear-gradient(180deg,var(--ink),rgba(27,23,18,.96));z-index:20;border-bottom:1px solid var(--line-dark)}
  .studio-controls{padding:1.4rem 1.2rem 2.4rem;min-width:0;max-width:100%}
  .studio-stage{max-width:260px;aspect-ratio:520/600}
  .studio-stage .cab{filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
  .stage-caption{bottom:-1.35rem;font-size:.68rem}
  .studio-step,.studio-summary{min-height:auto;padding-block:1.8rem}
  .studio-step h2{font-size:1.5rem}
  .swatches{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  /* mobile x-ray: doors part less (small stage), callouts stack, lines hidden */
  .studio-stage.is-xray .cab .door-left{transform:translateX(-40px)}
  .studio-stage.is-xray .cab .door-right{transform:translateX(40px)}
  .callout{position:static;max-width:none;margin:0}
  .callout .co-line,.callout .co-dot{display:none}
  /* on mobile the callouts render inside the x-ray step list instead of over the cabinet */
  .stage-callouts{display:none}
}
@media(max-width:820px){
  .studio-teaser .teaser-inner{grid-template-columns:1fr;text-align:center}
  .studio-teaser .studio-stage{max-width:260px}
  .teaser-swatches{justify-content:center}
  .studio-teaser p{margin-left:auto;margin-right:auto}
}
@media(min-width:901px){
  /* on desktop the mobile-only stacked callouts are hidden; overlay ones show */
  .studio-step--xray .xray-points .mobile-only{display:none}
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .cab .cab-interior,.cab .cab-doors .door,.cab .cab-drawer,.cab .cab-hardware,.callout,.cab .door-face{transition:none}
}