/* ============================================================
   Zdorovo Dental — "Case steps" block (case_steps)  ·  MOCK
   New interactive layout. Loads after the structural zd-blocks.css.
   Namespace zd-, BEM, mirrors the SPEC roots:
   .zd-cs · __steps · __step · __step-title · __step-panel · __media · __nav · __dots
   ============================================================ */

.zd-cs { position: relative; }

/* One case visible at a time; JS toggles .is-active. */
.zd-cs__case { display: none; }
.zd-cs__case.is-active { display: block; }

.zd-cs__case-title {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--zd-accent-strong);
}

/* ---- Layout: SPLIT (steps left, media right) — the default ---- */
.zd-cs__grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 900px) {
  .zd-cs[data-layout="split"] .zd-cs__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 40px;
  }
  /* media stays put (sticky) while steps expand, instead of reflowing the row */
  .zd-cs[data-layout="split"] .zd-cs__media { position: sticky; top: calc(var(--zd-header-h, 0px) + 80px); }
}

/* ---- Steps (accordion) ---- */
.zd-cs__steps { display: flex; flex-direction: column; gap: 10px; }
.zd-cs__step {
  border: 1px solid var(--zd-line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.zd-cs__step.is-open {
  border-color: var(--border-tint, #cdeadd);
  box-shadow: var(--shadow-sm);
}

/* The step name is an <h3> wrapping the button (ARIA accordion pattern). It carries no
   look of its own — all styling stays on the button — so reset the heading defaults. */
.zd-cs__step-h { margin: 0; font: inherit; }

.zd-cs__step-title {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  color: var(--ink-800);
}
/* Astra styles bare <button>s: on :hover/:focus it paints them with its own accent, so
   a clicked (and therefore still focused) step title turned solid green. Astra's
   selectors outrank ours, hence !important — the same override the reviews buttons need.
   The open state is carried by the number disc + chevron + border, not a filled bar. */
.zd-cs__step-title,
.zd-cs__step-title:hover,
.zd-cs__step-title:focus,
.zd-cs__step-title:active,
.zd-cs__step.is-open .zd-cs__step-title {
  background: none !important;
  color: var(--ink-800) !important;
  box-shadow: none !important;
}
/* Mouse clicks shouldn't leave a ring, but keyboard users must still see focus. */
.zd-cs__step-title:focus { outline: none; }
.zd-cs__step-title:focus-visible { outline: 2px solid var(--zd-accent); outline-offset: -2px; }

/* numbered disc rail — step number = row index + 1 (SPEC) */
.zd-cs__step-num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  background: var(--zd-tint); color: var(--zd-accent-strong);
  transition: background .2s, color .2s;
}
.zd-cs__step.is-open .zd-cs__step-num { background: var(--zd-accent); color: #fff; }
.zd-cs__step-label { flex: 1; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.zd-cs__step-chevron { flex: none; width: 20px; height: 20px; color: var(--zd-muted); transition: transform .25s var(--ease-out); }
.zd-cs__step.is-open .zd-cs__step-chevron { transform: rotate(180deg); color: var(--zd-accent-strong); }

/* expanding panel — desc (and, in stacked layout, the media) */
.zd-cs__step-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s var(--ease-out);
}
.zd-cs__step.is-open .zd-cs__step-panel { grid-template-rows: 1fr; }
/* visibility (not display:none): it removes the collapsed text from the accessibility
   tree — otherwise a screen reader reads every step's description while the button says
   aria-expanded="false" — while KEEPING it in the DOM so Google still indexes it, and it
   still animates. Delayed on the way out so the collapse transition can play. */
.zd-cs__step-panel > div { overflow: hidden; visibility: hidden; transition: visibility 0s .28s; }
.zd-cs__step.is-open .zd-cs__step-panel > div { visibility: visible; transition-delay: 0s; }
.zd-cs__step-desc {
  margin: 0;
  padding: 0 18px 18px 66px;
  font-size: 15px; line-height: 1.6; color: var(--zd-text);
}

/* ---- Media pane — shows the active step's media ---- */
/* The pane is ONE fixed 4/3 frame and every step's media fills it, so switching steps
   can never resize it. Without this the pane has no height of its own: only the active
   item is in flow, so the pane collapsed to whatever that image happened to be and each
   step change shifted the whole page. 4/3 matches .zd-ba__viewer, so an image step and a
   before/after step are exactly the same height. */
.zd-cs__media { position: relative; aspect-ratio: 4/3; }
/* Only the active step's media is shown; the standard .zd-ba element is reused
   AS-IS (no overrides) so the before/after looks identical to the before_after
   module — same element across modules for consistency. */
.zd-cs__media-item { display: none; position: absolute; inset: 0; }
.zd-cs__media-item.is-active { display: block; }
.zd-cs__media-item > img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;                 /* differing source ratios crop, they don't stretch */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
/* The reused .zd-ba and the placeholder carry their own 4/3 sizing — inside the frame
   they just fill it, or their aspect-ratio would fight the frame's. */
.zd-cs__media-item > .zd-ba,
.zd-cs__media-item > .zd-ba .zd-ba-grid { height: 100%; }
.zd-cs__media-item > .zd-ba .zd-ba__viewer { height: 100%; aspect-ratio: auto; }
.zd-cs__media-item > .zd-cs__media-ph { height: 100%; aspect-ratio: auto; }
/* Image + placeholder share the same 4/3 frame the .zd-ba viewer uses, so the
   pane height doesn't jump between an image step and a slider step. */
.zd-cs__media-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: linear-gradient(150deg, var(--green-100), var(--green-50));
  color: var(--zd-accent-strong);
}
.zd-cs__media-ph svg { width: 34px; height: 34px; }
.zd-cs__media-ph span { font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .72; }

/* EDGE: a step with no media → the block goes full-width (no media pane),
   mirroring how .zd-ba-grid--solo drops the meta column. */
.zd-cs__grid.zd-cs__grid--solo { grid-template-columns: 1fr; }
.zd-cs__grid--solo .zd-cs__media { display: none; }

/* ---- Case nav (prev / dots / next) — matches .zd-ba-nav ---- */
.zd-cs__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; }
.zd-cs__nav[hidden] { display: none; }
/* !important throughout: these are bare <button>s and Astra's button rules outrank ours,
   so without it the arrows/dots pick up its accent fill on hover and keep it on focus. */
.zd-cs__nav-btn {
  box-sizing: border-box;
  width: 40px; height: 40px; padding: 0; min-width: 0;
  border-radius: 50%; border: 1px solid var(--zd-line);
  background: var(--surface) !important; color: var(--zd-accent-strong) !important;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.zd-cs__nav-btn:hover,
.zd-cs__nav-btn:focus { background: var(--zd-tint) !important; border-color: var(--zd-accent); color: var(--zd-accent-strong) !important; }
.zd-cs__nav-btn:focus { outline: none; }
.zd-cs__nav-btn:focus-visible { outline: 2px solid var(--zd-accent); outline-offset: 2px; }
.zd-cs__nav-btn svg { width: 18px; height: 18px; }
.zd-cs__dots { display: flex; align-items: center; gap: 8px; }
.zd-cs__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300) !important; border: 0; padding: 0; cursor: pointer; transition: background .2s, transform .2s; }
.zd-cs__dot.is-active { background: var(--zd-accent) !important; transform: scale(1.3); }
.zd-cs__dot:focus { outline: none; }
.zd-cs__dot:focus-visible { outline: 2px solid var(--zd-accent); outline-offset: 2px; }

/* ---- Stacked layout (toggle) + mobile ---- */
.zd-cs[data-layout="stack"] .zd-cs__grid { grid-template-columns: 1fr !important; }
/* NOT position:static — the media items are inset:0 absolute and need .zd-cs__media as
   their containing block. Making it static would hand that job to .zd-cs (the nearest
   positioned ancestor) and stretch the media over the entire stepper. The sticky rule
   this was meant to undo is scoped to [data-layout="split"] and never matches here. */
.zd-cs[data-layout="stack"] .zd-cs__media { position: relative !important; max-width: 640px; }
@media (max-width: 899px) {
  /* media pane sits below the step list as a single column */
  .zd-cs__media { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .zd-cs__step-panel,
  .zd-cs__step-chevron,
  .zd-cs__media-item { transition: none; }
}