/* =============================================================================
   sbc-scene-steps.css

   What this file does:
   Styles the "Scene steps" component: a numbered list of steps beside a stage. Each step has a 2px
   track that fills while its animation plays; the open step's number turns terracotta and its text
   opens; its animation shows on the evergreen stage, with a play button in the stage's top right.
   On tablets and phones the steps become an accordion and the animation plays inside the open card,
   with the bar running across under the text. The behaviour is specified in
   SBC-all-services/brand/motion.md ("Scene steps: how it moves").

   Context of where it's used in the repo:
   Markup from templates/includes/scene_steps_macros.html; behaviour from
   static/js/sbc-scene-steps.js. Used by templates/homepage-2.html (the front desk steps, with scenes
   from front_desk_scene_macros.html) and templates/ai-answering-service-LP.html (the capability
   steps, with step sequences from sbc-scenes.js). Tokens are scoped to the component so it works on
   pages whose :root variables are named differently; a page can override --ss-bleed and
   --ss-stage-height.

   What it calls:
   Nothing. Fonts come from the page (Figtree).

   What calls it:
   A <link rel="stylesheet"> on each page that uses the component.
   ============================================================================= */

.ss-steps{
  --ss-forest:#1F3D33; --ss-ink:#222222; --ss-soft:#4A463E; --ss-muted:#6F6A60; --ss-line:#E4DFD4;
  --ss-line-strong:#D6D0C2; --ss-terracotta:#B86A50; --ss-white:#FFFFFF; --ss-stage-dot:rgba(247,244,238,.10);
  --ss-ease-out:cubic-bezier(.23,1,.32,1);
  --ss-sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* how far the stage runs past the text on phones: the page's side padding */
  --ss-bleed:1.25rem;
  --ss-stage-height:560px;
  position:relative;
}

/* The list: a 2px track beside each step, then the number and title, then the text when open */
.ss-step-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ss-step{display:grid;grid-template-columns:2px minmax(0,1fr);column-gap:1.4rem}
.ss-step-track{grid-row:1 / span 2;position:relative;border-radius:2px;background:var(--ss-line);overflow:hidden}
.ss-step-track i{position:absolute;inset:0;background:var(--ss-forest);transform-origin:top;transform:scaleY(0)}
.ss-step-title{margin:0;font:inherit}
.ss-step-title button{display:flex;align-items:baseline;gap:.85rem;width:100%;padding:1rem 0 .3rem;margin:0;border:0;background:none;cursor:pointer;text-align:left;font:600 1.3rem/1.3 var(--ss-sans);color:var(--ss-muted);transition:color .3s ease}
/* The number is drawn from data-number, so the heading's text is the title alone ("Fields every inbound",
   not "01Fields every inbound") for search engines and screen readers; the list order carries the number. */
.ss-step-number{flex:none;font:500 1.05rem/1 var(--ss-sans);font-variant-numeric:tabular-nums;color:var(--ss-muted);transition:color .3s ease}
.ss-step-number::before{content:attr(data-number)}
.ss-step.is-active .ss-step-title button{color:var(--ss-ink)}
.ss-step.is-active .ss-step-number{color:var(--ss-terracotta)}
.ss-step-title button:focus-visible,.ss-play:focus-visible{outline:2px solid var(--ss-terracotta);outline-offset:3px}
.ss-step-title button:focus:not(:focus-visible){outline:none}

/* The open step's text slides open (grid rows 0fr to 1fr) */
.ss-step-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ss-ease-out)}
.ss-step.is-active .ss-step-body{grid-template-rows:1fr}
.ss-step-body-inner{overflow:hidden;min-height:0}
.ss-step-lead{margin:.35rem 0 0;color:var(--ss-ink);font:500 1.05rem/1.5 var(--ss-sans);max-width:42ch}
.ss-step-description{margin:.35rem 0 1rem;color:var(--ss-soft);font:400 1.05rem/1.6 var(--ss-sans);max-width:42ch}
.ss-step-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:-.25rem 0 1rem;font:600 .95rem/1.4 var(--ss-sans)}
.ss-step-links a{color:var(--ss-forest)}

/* The bar that runs across under the text on tablets and phones */
.ss-step-bar{display:none;height:2px;border-radius:2px;background:var(--ss-line);overflow:hidden}
.ss-step-bar i{display:block;height:100%;background:var(--ss-forest);transform-origin:left;transform:scaleX(0)}

/* The stage: evergreen with a faint dot grid */
.ss-step-visual{position:relative;background-color:var(--ss-forest);background-image:radial-gradient(var(--ss-stage-dot) 1px,transparent 1.5px);background-size:18px 18px;border-radius:16px;overflow:hidden;display:grid;align-content:center}
/* Animations fill the stage's width and centre themselves (scenes cap their own width) */
.ss-step-visual>*{min-width:0}

/* The play button: top right of the stage; pause, resume, play again */
.ss-play{position:absolute;right:12px;top:12px;z-index:5;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:rgba(247,244,238,.92);color:var(--ss-ink);cursor:pointer;padding:0}
.ss-play svg{width:14px;height:14px;fill:currentColor}
.ss-play[hidden]{display:none}

/* One call to action under the list */
.ss-steps-actions{display:flex;align-items:center;gap:.75rem;margin-top:2rem}

/* Wide screens: list left, the open step's stage right, cross-fading between steps */
@media (min-width:1024px){
  .ss-steps{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:3rem;min-height:var(--ss-stage-height);align-items:center}
  .ss-steps-copy{grid-column:1}
  .ss-step-visual{position:absolute;top:0;right:0;width:calc(60% - 1.5rem);height:var(--ss-stage-height);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
  .ss-step.is-active .ss-step-visual{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
}

/* Tablets and phones: an accordion with hairlines; the stage sits under the open step's text */
@media (max-width:1023px){
  .ss-step-list{gap:0}
  .ss-step{grid-template-columns:minmax(0,1fr);border-top:1px solid var(--ss-line)}
  .ss-step:last-child{border-bottom:1px solid var(--ss-line)}
  .ss-step-track{display:none}
  .ss-step-bar{display:block}
  .ss-step-visual{margin:1rem 0 1.25rem;padding:12px 0}
}

/* Phones: the stage runs to the page's side padding. The open card clips its content (for the open
   and close animation), so its box widens by the same amount; a top strip keeps the play button clear. */
@media (max-width:640px){
  .ss-step-body-inner{margin-inline:calc(var(--ss-bleed) * -1);padding-inline:var(--ss-bleed)}
  .ss-step-visual{margin-inline:calc(var(--ss-bleed) * -1);border-radius:12px;padding:58px 0 8px}
}

@media (prefers-reduced-motion: reduce){
  .ss-step-body,.ss-step-visual,.ss-step-title button,.ss-step-number{transition:none!important}
}